/* ============================================================
   photolog.css
   フォトログ（CPT photolog）表示層の自己完結スタイル。
   archive-photolog.php / single-photolog.php / taxonomy.php で共通。
   functions.php で photolog 文脈（archive / singular / 8タクソノミー）に限定 enqueue。
   デザイントークンは global.css の :root を使用。モバイルファースト。
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   記事カード（archive / taxonomy / 関連で共用）
   SP：横カード（写真左 44%・ガラスラベル右）、縦カードは 600px+ で4列・960px+ で3列（広い画面ほど1枚を大きく）。
   ══════════════════════════════════════════════════════════════ */

/* グリッド：SP = 縦1列（横カードを積む）・600px+ = 4列・960px+ = 3列 */
.pl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── カードシェル ── */
/* 一覧カードは全カード一斉にフェードイン。速度はページ上部 page-head の .rv（.7s）と統一。
   hover の transform/box-shadow も維持するため両方含める。 */
.pl-card-item.rv { transition: opacity .7s ease, transform .7s ease, box-shadow var(--t); }
/* 絞り込み中は対象カードを確実に表示（rv の reveal と両立させない＝common.js [2] repeat-IO が
   画面外で opacity:0 に戻すのを打ち消す。特異度 0,3,0 で .rv / .rv.on を上回る）。 */
.pl-grid.is-filtering .pl-card-item.rv { opacity: 1; transform: none; }
/* 打ち消すのは登場アニメの初期状態だけ＝hover/focus の浮上（translateY(-4px)）は
   より高い特異度で復活させる（transform:none が :hover まで潰していた・2026-07-27 codex監査）。 */
.pl-grid.is-filtering .pl-card-item.rv:hover,
.pl-grid.is-filtering .pl-card-item.rv:focus-within { transform: translateY(-4px); }

.pl-card-item {
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(184, 151, 90, .32);
  box-shadow: 0 4px 14px rgba(28, 28, 28, .10);
  background: var(--warm-white);
  transition: transform var(--t), box-shadow var(--t);
}
.pl-card-item:hover,
.pl-card-item:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(28, 28, 28, .18);
}

.pl-card-link {
  display: flex;          /* SP：横並び */
  text-decoration: none;
  color: inherit;
  height: 152px;          /* SP横カードをさらに低く＝写真をPC（1:1）にいっそう近づける（190→168→152px・2026-06-15） */
}

/* ── 写真エリア ── */
.pl-card-photo {
  position: relative;
  flex: 0 0 44%;
  overflow: hidden;
}
.pl-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.pl-card-item:hover .pl-card-img,
.pl-card-item:focus-within .pl-card-img {
  transform: scale(1.05);
}
.pl-card-item--noimg .pl-card-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-dk), var(--gold-lt));
}
.pl-card-noimg {
  font-family: var(--en);
  font-size: .9rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* ── ガラスラベルパネル（SP：写真の右・写真に -16px 食い込む） ── */
.glass-card {
  background: linear-gradient(160deg, rgba(255,255,255,.72) 0%, rgba(253,251,248,.58) 100%);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 2px 12px rgba(28,28,28,.08), inset 0 1px 0 rgba(255,255,255,.85);
}

/* SP ラベル：右側・写真に -16px 食い込む・上端の金線なし（カード枠と二重にしない） */
.pl-card-body {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 14px 14px 14px 20px;
  margin-left: -16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 12px 12px 0;
  overflow: hidden;
}

/* ── ラベル内テキスト ── */
.pl-card-meta {
  display: flex;
  flex-wrap: nowrap;     /* SP：折り返しで2行になると高さ超過するため1行固定 */
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: .62rem;
  letter-spacing: .03em;
  overflow: hidden;
}
.pl-card-area {
  color: var(--gold-dk);
  font-weight: 600;
}
.pl-card-dur {
  color: var(--text2);
  position: relative;
  padding-left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  flex-shrink: 1;        /* メタ行に収まるよう縮小を許可 */
  white-space: nowrap;
}
.pl-card-dur::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 9px;
  background: rgba(138, 110, 62, .5);
}
.pl-card-ico {
  flex-shrink: 0;
}
.pl-card-dur-label {
  margin-right: 1px;
}
.pl-card-title {
  font-family: var(--jp);
  font-weight: 500;
  font-size: 1rem;
  color: var(--charcoal);
  letter-spacing: .02em;
  line-height: 1.4;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-card-excerpt {
  font-size: .74rem;
  line-height: 1.62;
  color: #44403A;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.pl-card-excerpt--fallback {
  color: var(--text2);
}
.pl-card-more {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--gold-dk);
  display: block;
  margin-top: 6px;   /* SP：auto をやめて固定に（抜粋が短くても大きな空白にならない） */
  transition: color var(--t);
}
/* 生の「→」を文言に溶接せず擬似要素で付与（ai-tells-checklist.md 手癖12） */
.pl-card-more::after { content: "→"; margin-left: .35em; }
.pl-card-item:hover .pl-card-more,
.pl-card-item:focus-within .pl-card-more {
  color: var(--gold);
}

/* PC：縦カード4列（600px 以上） */
@media (min-width: 600px) {
  .pl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: stretch;
  }
  .pl-card-link {
    flex-direction: column;
    height: 100%;
  }
  .pl-card-photo {
    flex: none;
    aspect-ratio: 1 / 1;
    width: 100%;
  }
  .pl-card-body {
    flex: 1;
    padding: 14px;
    margin-left: 0;
    margin-top: -16px;  /* 写真に 16px 食い込む */
    border-radius: 0 0 12px 12px;
    justify-content: flex-start;
  }
  .pl-card-title {
    font-size: .98rem;
  }
  .pl-card-excerpt {
    -webkit-line-clamp: 2;
  }
  .pl-card-more {
    margin-top: auto;  /* PC縦カード：bodyのflex残高を使ってCTAを下端に寄せる */
  }
}

/* 空状態 */
.pl-empty {
  text-align: center;
  color: var(--text2);
  font-size: .9rem;
  letter-spacing: .04em;
  padding: 28px 0;
}

/* ── archive フィルター（軸タブ式・CSS-only／JS不要） ── */
.pl-filter {
  position: relative;
  margin-top: 30px;
}
/* フィルター直後のカードグリッド：タグ→カードをカテゴリタブ→タグ（18px）と揃える */
.pl-filter + .pl-grid {
  margin-top: 18px;
}
.pl-filter-lead {
  font-size: .82rem;
  color: var(--text2);
  letter-spacing: .03em;
  margin: 0 0 14px;
  text-align: center;
}
.pl-filter-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}
.pl-filter-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;             /* 縦スクロールを殺す（横スワイプ時の上下揺れ防止） */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;            /* 横スワイプのみ受け付け、縦成分はページ縦スクロールへ渡す */
  overscroll-behavior-x: contain; /* 末端でのスクロールチェーン（ページ巻き込み）を断つ */
  border-bottom: 1px solid rgba(184, 151, 90, .25);
  scrollbar-width: none;
}
.pl-filter-tabs::-webkit-scrollbar { display: none; }
/* SP：横スクロール可能と気づかせる左右フェード（タブがはみ出す幅でのみ適用） */
@media (max-width: 599px) {
  .pl-filter-tabs {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}
.pl-filter-tab {
  flex: 0 0 auto;
  padding: 10px 15px;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--text2);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.pl-filter-tab:hover { color: var(--gold-dk); } /* 明るい地の機能文字は gold-dk（--gold=cream2.56:1でAA割れ・2026-07-21） */
.pl-filter-panel {
  display: none;
  padding-top: 18px;
}
#plf-menu:checked     ~ .pl-filter-panel[data-axis="menu"],
#plf-area:checked     ~ .pl-filter-panel[data-axis="area"],
#plf-location:checked ~ .pl-filter-panel[data-axis="location"],
#plf-season:checked   ~ .pl-filter-panel[data-axis="season"],
#plf-mood:checked     ~ .pl-filter-panel[data-axis="mood"],
#plf-scene:checked    ~ .pl-filter-panel[data-axis="scene"],
#plf-anniversary:checked ~ .pl-filter-panel[data-axis="anniversary"] {
  display: block;
  /* タブ切替時、出現するパネル（タグ群）をフワッとフェードイン。速度は page-head の .rv（.7s）と統一 */
  animation: pl-chip-fade .7s ease both;
}
@keyframes pl-chip-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-filter-panel,
  .pl-related-panel { animation: none !important; }
  .pl-filter-status { transition: none; }
}
#plf-menu:checked     ~ .pl-filter-tabs label[for="plf-menu"],
#plf-area:checked     ~ .pl-filter-tabs label[for="plf-area"],
#plf-location:checked ~ .pl-filter-tabs label[for="plf-location"],
#plf-season:checked   ~ .pl-filter-tabs label[for="plf-season"],
#plf-mood:checked     ~ .pl-filter-tabs label[for="plf-mood"],
#plf-scene:checked    ~ .pl-filter-tabs label[for="plf-scene"],
#plf-anniversary:checked ~ .pl-filter-tabs label[for="plf-anniversary"] {
  color: var(--gold-dk); /* 選択中タブ＝機能文字。--gold は cream2.56:1でAA割れ（2026-07-21） */
  border-bottom-color: var(--gold);
  font-weight: 500;
}
#plf-menu:focus-visible     ~ .pl-filter-tabs label[for="plf-menu"],
#plf-area:focus-visible     ~ .pl-filter-tabs label[for="plf-area"],
#plf-location:focus-visible ~ .pl-filter-tabs label[for="plf-location"],
#plf-season:focus-visible   ~ .pl-filter-tabs label[for="plf-season"],
#plf-mood:focus-visible     ~ .pl-filter-tabs label[for="plf-mood"],
#plf-scene:focus-visible    ~ .pl-filter-tabs label[for="plf-scene"],
#plf-anniversary:focus-visible ~ .pl-filter-tabs label[for="plf-anniversary"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 回遊チップ（taxonomy / single / archive フィルター 共用） ── */
.pl-axis-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* term チップ（軸ナビ・撮影データ・回遊で共用） */
.pl-chip {
  display: inline-flex;
  align-items: center;
  min-height: 29px;            /* ピル型をさらにスリムに（36→32→29px・2026-06-15） */
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(184, 151, 90, .45);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500; /* 旧300はこのサイズだと細く見づらい（オーナー指摘 2026-07-21・.pl-c-tag も同時変更で揃える） */
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--gold-dk);
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
/* hover の金塗りは「ホバーできる端末（PC）」だけに限定。
   タッチ端末は :hover がタップ後に貼り付き、解除しても点灯したまま見える不具合の元になるため
   （SPの点灯/消灯は .is-active クラスだけで駆動する）。:focus-visible はキーボード操作用に残す。 */
@media (hover: hover) and (pointer: fine) {
  .pl-chip:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
  }
}
.pl-chip:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* ── 複数タグ絞り込み（client-side・多軸AND/同軸OR・common.js [5.6]）の状態 ── */
/* JS有効時のみ：チップを押すたび is-active がトグル。選択中は金で塗る（hover と同じ顔＝押せると伝わる）。 */
.pl-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 400;
}
@media (hover: hover) and (pointer: fine) {
  .pl-chip.is-active:hover {
    background: var(--gold-dk);
    border-color: var(--gold-dk);
  }
}
.pl-chip.is-active:focus-visible {
  background: var(--gold-dk);
  border-color: var(--gold-dk);
}
/* この一覧に該当カードが無い軸の term：淡色＆無効（JS が is-empty を付与・クリックも JS 側で握り潰し済み）。 */
.pl-filter.is-enhanced .pl-chip.is-empty {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

/* 絞り込み状態バー（件数＋解除ボタン）：最初から表示した状態で描く（filter.php のコメント参照）。 */
.pl-filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  /* 「絞り込みを解除」ボタン(29px)分の高さを常に確保＝ボタンの出現/消滅で
     件数テキストの縦位置がずれないようにする（border-box: 14padding+29content+1border=44）。 */
  min-height: 44px;
  padding-top: 14px;
  border-top: 1px dashed rgba(184, 151, 90, .3);
  /* 件数の文字は JS が入れるので、それまでは空の枠が見えてしまう。透明で待って JS が
     is-enhanced を付けた時に現れる＝opacity なのでレイアウトは動かない（＝上の「最初から
     場所を確保する」CLS 対策と両立する。display/hidden で出し入れすると 62px 跳ねる）。 */
  opacity: 0;
  transition: opacity .3s ease;
}
.pl-filter.is-enhanced .pl-filter-status { opacity: 1; }
.pl-filter-status[hidden] { display: none; }
/* JS が動かない環境では件数も絞り込みも出せない＝空の枠だけが残るので隠す（PEを保つ）。
   html.no-js が付いたままになるのは JS が動かなかった時だけ（header.php の1行スクリプト）。 */
html.no-js .pl-filter-status { display: none; }
.pl-filter-count {
  margin: 0;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .04em;
  /* コンテナ全体をゴールド地に＝未絞り込み「全〇〇件のフォトログ」の裸テキスト（全／件のフォトログ）も
     ゴールドを継承し、絞り込み時の「-以外は全部ゴールド」と統一される（区切りは下の .pl-fc-sep で例外的にグレー）。
     色は gold-dk（--gold=cream2.56:1でAA割れ・2026-07-21） */
  color: var(--gold-dk);
}
/* 絞り込み中の表示「成人式 × 八戸 — 3件のフォトログ」：タクソノミー名と件数はコンテナ色（ゴールド）を継承、
   区切り（×・—）だけグレーに戻す（common.js [5.6] が span に分けて出力）。 */
.pl-filter-count .pl-fc-label,
.pl-filter-count .pl-fc-count {
  color: var(--gold-dk);
  font-weight: 500;
}
.pl-filter-count .pl-fc-sep {
  color: var(--text2);
}
.pl-filter-clear {
  flex: 0 0 auto;
  min-height: 29px;            /* 同フィルター行のピル(.pl-chip)と高さを揃える（32→29px・2026-06-16） */
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(184, 151, 90, .45);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--gold-dk);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pl-filter-clear:hover,
.pl-filter-clear:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.pl-filter-clear[hidden] { display: none; }

/* 該当0件メッセージ（JS が .pl-grid 直後に生成・挿入）。 */
.pl-filter-noresult {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--warm-white);
  border: 1px dashed rgba(184, 151, 90, .35);
  border-radius: 10px;
  font-size: .86rem;
  letter-spacing: .03em;
  color: var(--text2);
  text-align: center;
}
.pl-filter-noresult[hidden] { display: none; }

/* ── タクソノミー独自コンテンツ（area / location / scene） ── */
.pl-termmeta {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--warm-white);
  border: 1px solid rgba(184, 151, 90, .2);
  border-radius: 10px;
}
.pl-termmeta-intro {
  font-size: .9rem;
  line-height: 1.95;
  letter-spacing: .03em;
  color: var(--text);
}
.pl-termmeta-intro p { margin: 0 0 .8em; }
.pl-termmeta-intro p:last-child { margin-bottom: 0; }
.pl-termmeta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(184, 151, 90, .16);
}
.pl-termmeta-key {
  flex: none;
  min-width: 6.5em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold-dk);
  letter-spacing: .04em;
}
.pl-termmeta-val {
  font-size: .85rem;
  line-height: 1.8;
  color: var(--text2);
}

/* ── 回遊（同じ軸の他カテゴリー） ── */
.pl-siblings {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(184, 151, 90, .22);
}
.pl-siblings-ttl {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-dk);
  margin: 0 0 11px;
}
.pl-siblings-back {
  margin: 14px 0 0;
  font-size: .8rem;
}
.pl-siblings-back a {
  color: var(--text2);
  text-decoration: none;
  transition: color var(--t);
}
.pl-siblings-back a:hover { color: var(--gold); }
/* 生の「←」を文言に溶接せず擬似要素で付与（ai-tells-checklist.md 手癖12） */
.pl-siblings-back a::before { content: "←"; margin-right: .35em; }

/* ════════════════════════════════════════════════════════════
   single-photolog：C案+B案ハイブリッドスタイル
   C案基本（旅行記/フォトエッセイ誌）
   ＋タイトル＝B案表記（メタカード内 eyebrow）
   ＋タグ＝B案（イタリック「Tags」+角丸ゴールドピル）
   ════════════════════════════════════════════════════════════ */

/* ── ヒーロー写真 ── */
.pl-single-hero {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--cream);
}
.pl-single-hero .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── C案+B案 フローティングメタカード ── */
.pl-c-metacard {
  position: relative;
  margin-top: -32px;
  background: var(--warm-white);
  border: 1px solid rgba(184, 151, 90, .2);
  padding: 18px 20px 22px;
  box-shadow: 0 4px 16px rgba(28, 28, 28, .08);
}
/* ヒーロー写真が無い記事（single-photolog.php が付与）：-32px の重ねを解除
   （無条件だとカードがパンくず行に食い込む・2026-07-27 codex監査）。 */
.pl-c-metacard--nohero {
  margin-top: 0;
}

/* eyebrow（フォトログ -PhotoLog-）：和文＋ラテン斜体の2連（番号運用なし） */
.pl-c-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .7rem;
}
.pl-c-eyebrow-jp {
  font-family: var(--jp);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--gold-dk);
}
.pl-c-eyebrow-en {
  font-family: var(--en);
  font-style: italic;
  letter-spacing: .08em;
  color: var(--text2);
}

/* H1 明朝タイトル（メイン＝ロケ地×メニュー自動／サブ＝ACFサブタイトル） */
.pl-c-title {
  font-family: var(--jp);
  font-size: clamp(1.25rem, 4.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--charcoal);
  margin: 0 0 14px;
  text-wrap: balance;
}
.pl-c-title-main {
  display: block;
}
.pl-c-title-sub {
  display: block;
  margin-top: 6px;
  font-size: .82em;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--text2);
}

/* テーブル形式メタ（撮影日・記念日・撮影時間） */
.pl-c-metatable {
  border-collapse: collapse;
  width: 100%;
  font-size: .78rem;
}
.pl-c-metatable tr {
  border-top: 1px solid rgba(184, 151, 90, .15);
}
.pl-c-metatable tr:first-child {
  border-top: none;
}
.pl-c-metatable th {
  font-family: var(--jp);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--gold-dk);
  text-align: left;
  padding: 7px 0;
  width: 5.5em;
  white-space: nowrap;
  vertical-align: top;
}
.pl-c-metatable td {
  color: var(--text2);
  padding: 7px 0;
  letter-spacing: .03em;
  line-height: 1.7;
}

/* ── リード文（C案：ゴールド左罫線・明朝300） ── */
.pl-lead {
  margin-top: 32px;
  font-family: var(--jp);
  font-size: .95rem;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: .04em;
  color: var(--text);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}

/* ════════════════════════════════════════════════════════════
   ロケ撮影レポート（id=photo-report・外ロケのみ・回ごとの一次情報ボックス）
   リード文の直後・本文の前。location が studio 以外の回だけ表示。
   ════════════════════════════════════════════════════════════ */
.pl-report {
  margin-top: 30px;
  padding: 18px 20px 20px;
  background: var(--warm-white);
  border: 1px solid rgba(184, 151, 90, .22);
  border-radius: 10px;
}
.pl-report-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.pl-report-en {
  flex: none;
  font-family: var(--en);
  font-style: italic;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--gold);
}
.pl-report-ttl {
  font-family: var(--jp);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--charcoal);
  margin: 0;
}
.pl-report-list {
  margin: 0;
}
.pl-report-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(184, 151, 90, .15);
}
.pl-report-row:first-child {
  border-top: none;
  padding-top: 0;
}
.pl-report-key {
  flex: none;
  min-width: 5em;
  margin: 0;
  font-family: var(--jp);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--gold-dk);
}
.pl-report-val {
  flex: 1;
  min-width: 12em;
  margin: 0;
  font-size: .85rem;
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--text);
}
.pl-report-ground-tags {
  color: var(--text);
}
.pl-report-note {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--text2);
}

/* ════════════════════════════════════════════════════════════
   この撮影のタグ（B案：イタリック「Tags」+細線+角丸ゴールドピル）
   ════════════════════════════════════════════════════════════ */
.pl-tags {
  margin-top: 44px;
}
/* 「その他のフォトログ」関連セクションの最下部に統合した版（2026-06-16）。
   独立した薄いバーで浮かせず、もっと見るCTAから少し空けて関連の一部として馴染ませる
   （区切りは .pl-tags-head の「Tags」＋ゴールド細線が担う＝余計な枠線は足さない）。 */
.pl-tags--in-related {
  margin-top: 32px;
}

/* B案ヘッダー：イタリック「Tags」＋ゴールド細線 */
.pl-tags-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pl-tags-en {
  font-family: var(--en);
  font-style: italic;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--gold);
  flex: none;
}
.pl-tags-thinrule {
  flex: 1;
  height: 1px;
  background: rgba(184, 151, 90, .3);
}

/* B案 角丸ゴールドピル */
.pl-c-tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;            /* カテゴリタブのピル(.pl-chip)と同じ高さに揃える（36→29px・2026-06-16 横展開） */
  padding: 0 14px;
  border: 1px solid rgba(184, 151, 90, .45);
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500; /* .pl-chip と同族＝同時に300→500（2026-07-21） */
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--gold-dk);
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pl-c-tag:hover,
.pl-c-tag:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.pl-c-tag:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 「○○のフォトログをもっと見る」リンクは共通 .text-cta（トップ等と統一）。
   複数ボタンを中央寄せで縦に並べ、テキスト長が違っても幅を揃える
   （inline-grid＋1fr で全ボタンを最長ボタン幅にストレッチ／ラッパーは中央寄せ）。 */
.pl-tags-more {
  display: grid;
  /* minmax(0, max-content)＝長い文言でも列がコンテナ幅で頭打ちになる
     （max-content 単体だと列が縮まず 320px で約25px はみ出す・2026-07-27 codex監査）。 */
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
}
.pl-tags-more .text-cta,
.pl-faq-all .text-cta {
  /* 共通部品（components.css）の nowrap をこの2文脈だけ解除し、狭幅では折り返しを許可
     （収まる幅では折り返さない＝見た目は従来どおり。本体は不触。
     .pl-faq-all＝記事下FAQ直下の「撮影メニューを見る」CTA も長いメニュー名で 320px からはみ出すため同時に手当て・2026-07-27 codex監査）。 */
  white-space: normal;
  text-align: center;
}
.pl-tags-more .text-cta {
  width: 100%;
}
/* 「その他のフォトログ」カード群の下に置く版（関連を見たあとの回遊CTA・2026-06-15）。
   カードグリッドからの余白だけ少し広めに取る。 */
.pl-tags-more--after {
  margin-top: 34px;
}

/* ════════════════════════════════════════════════════════════
   その他の撮影レポート（関連・3タブ CSS-only）
   ════════════════════════════════════════════════════════════ */
.pl-related { background: var(--cream); }
.pl-related-head {
  text-align: center;
  margin-bottom: 24px;
}
.pl-related-en {
  display: block;
  font-family: var(--en);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
}
.pl-related-ttl {
  font-family: var(--jp);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--charcoal);
  margin: 0 0 14px;
}
.pl-related-rule {
  height: 2px;
  background: var(--charcoal);
  max-width: 40px;
  margin: 0 auto;
}
.pl-related-tabwrap { position: relative; }
.pl-related-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}
.pl-related-tabs {
  display: flex;
  /* safe center＝収まる広い画面では中央寄せ、はみ出す狭い画面では先頭から表示して
     右端が切れたまま触れなくなるのを防ぐ（justify-content:center 単体＋overflow だと
     はみ出し分が両側に隠れ「同じ撮影メニュー」等が見切れる）。狭幅は下の @media で
     flex-start に確定させる。 */
  justify-content: safe center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;             /* 縦スクロールを殺す（横スワイプ時の上下揺れ防止） */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;            /* 横スワイプのみ受け付け、縦成分はページ縦スクロールへ渡す */
  overscroll-behavior-x: contain; /* 末端でのスクロールチェーン（ページ巻き込み）を断つ */
  border-bottom: 1px solid rgba(28, 28, 28, .2);
  scrollbar-width: none;
}
.pl-related-tabs::-webkit-scrollbar { display: none; }
/* SP：横スクロール可能と気づかせる左右フェード（一覧フィルタタブと同方式・はみ出す幅でのみ視覚効果）。
   寄せ方は safe center に委ねる（収まれば中央／はみ出せば先頭から）＝ここで flex-start を上書きしない
   （上書きするとタブが収まる端末でも左寄せになり中央寄せの意図が崩れる）。 */
@media (max-width: 599px) {
  .pl-related-tabs {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}
.pl-related-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--text2);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.pl-related-panel {
  display: none;
  padding-top: 22px;
}
#plr-location:checked ~ .pl-related-panel[data-axis="location"],
#plr-area:checked     ~ .pl-related-panel[data-axis="area"],
#plr-menu:checked     ~ .pl-related-panel[data-axis="menu"] {
  display: block;
  /* タブを押すたびにパネルがフワッと出る（display:none→block で animation 再生）。
     カード側の .rv はタブ内では使わず（初回しか .on が付かず2回目以降効かないため）、
     パネル自体のフェードに一本化する。 */
  animation: pl-chip-fade .55s ease both;
}
/* 関連パネル内のカードは .rv を無効化（パネルのフェードに一本化＝opacity:0で固まる事故防止）。
   transition に transform も残す＝下の hover 浮上が滑らかに動く（2026-07-27）。 */
.pl-related-panel .pl-card-item.rv {
  opacity: 1;
  transform: none;
  transition: transform var(--t), box-shadow var(--t);
}
/* 打ち消すのは登場アニメの初期状態だけ＝hover/focus の浮上は復活させる（2026-07-27 codex監査） */
.pl-related-panel .pl-card-item.rv:hover,
.pl-related-panel .pl-card-item.rv:focus-within { transform: translateY(-4px); }
#plr-location:checked ~ .pl-related-tabs label[for="plr-location"],
#plr-area:checked     ~ .pl-related-tabs label[for="plr-area"],
#plr-menu:checked     ~ .pl-related-tabs label[for="plr-menu"] {
  color: var(--gold-dk); /* 選択中タブ＝機能文字。--gold は cream2.56:1でAA割れ（2026-07-21） */
  border-bottom-color: var(--gold);
  font-weight: 500;
}
#plr-location:focus-visible ~ .pl-related-tabs label[for="plr-location"],
#plr-area:focus-visible     ~ .pl-related-tabs label[for="plr-area"],
#plr-menu:focus-visible     ~ .pl-related-tabs label[for="plr-menu"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .pl-related-tab:hover { color: var(--gold-dk); }
}

/* ── コンテンツブロック ── */
.pl-block-heading {
  font-family: var(--jp);
  font-size: 1.12rem;
  font-weight: 500;
  margin: 2.4em 0 .8em;
  padding-left: 14px;
  position: relative;
  color: var(--charcoal);
  letter-spacing: .05em;
}
/* C案：ゴールド縦バー */
.pl-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  background: var(--gold);
}
.pl-block-text {
  font-size: .93rem;
  line-height: 2;
  letter-spacing: .03em;
  color: var(--text);
  margin: 0 0 1.4em;
}
/* 本文写真は「1枚ずつ大きく・元の比率のまま・縦に積む」1列方式（2026-07-07・ラヴィ式）。
   横写真は横長・縦写真は縦長のまま全体表示＝一切トリミングしない（作例は写真そのものを見せるのが目的）。
   枚数(single/pair/multi クラス)に関わらず常に1列。写真間は縦の余白で区切る。 */
.pl-block-gallery {
  margin: 0 0 1.6em;
}
.pl-gimg {
  margin: 0 0 8px; /* 写真どうしの縦の間隔 */
}
.pl-gimg:last-child {
  margin-bottom: 0;
}
.pl-gimg-frame {
  display: block;
}
.pl-gimg img {
  /* 横写真は本文幅いっぱい・縦写真は高さ上限(78vh)で頭打ち＝どちらも切らず全体表示。
     width:auto+max-width:100%+max-height で「幅は本文幅まで／縦長は78vhで頭打ち」を両立
     （width:100%固定だと max-height が無視され縦写真が画面を専有する）。
     フォトログ写真(photolog-main)は本文幅より大きいので横写真は実質いっぱいに出る。 */
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 78vh;
  display: block;
  margin: 0 auto; /* 高さ上限で幅が縮んだ縦写真を中央寄せ */
}
/* 本文写真のキャプション（メディアのキャプション欄が入っている写真だけ出る）。
   写真枠の下に小さく置く。枠は .pl-gimg-frame が保持するので grid は崩れない。 */
.pl-gimg-cap {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text2);
  text-align: left;
}

/* ── タブレット以上 ── */
@media (min-width: 600px) {

  /* ヒーロー：縦写真の暴れ防止で620px中央寄せ。
     PCで「開いた瞬間に写真しか見えない」のを防ぐため高さを上限（vh）で抑え、
     縦写真でもメタカード冒頭がファーストビューに入るようにする。
     aspect-ratio より max-height を優先させたいので aspect-ratio は解除し height:auto に。 */
  .pl-single-hero {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: auto;
    max-height: 58vh;
  }
  .pl-single-hero .img-cover {
    height: 58vh;
    max-height: 58vh;
  }

  /* メタカードをヒーローと幅を揃える（重ね破綻防止の核心） */
  .pl-c-metacard {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

}

/* ── PC（3列） ── */
@media (min-width: 960px) {
  .pl-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }

  /* 本文写真：PCでは縦写真だけ1画面に収める（2026-07-07・オーナー指示）。
     横写真は続き152の1列大判（本文幅いっぱい・78vh）のまま＝十分大きいので触らない。
     縦写真だけ、PCは横長画面ゆえ height を上げると1画面に収まらずスクロール必須になるため
     max-height を 72vh に抑え、スクロールなしで1枚全体が見えるようにする
     （もっと大きく見たい時はタップ拡大＝common.js のライトボックスに乗る）。
     .pl-gimg--portrait は single-photolog.php が ACF実寸 height>width の写真にだけ付与。
     SP（〜959px）は上部の共通ルール（全幅1列・max-height:78vh）のまま不触。 */
  .pl-gimg--portrait img {
    max-height: 72vh;
  }
}