/* ============================================================
   page-doc.css
   案内・規約系の固定ページ共通スタイル。
   対象（is_page で限定 enqueue）：about / flow / info / lifecycle / privacy / policy / sitemap
   デザイントークンは global.css の :root を使用。新規クラスのみ＝既存影響なし。
   ============================================================ */

/* ── 規約・文書ブロック（privacy / policy） ── */
.pdoc-block { margin-bottom: 36px; }

.pdoc-block h2 {
  font-family: var(--jp);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--charcoal);
  line-height: 1.5;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184, 151, 90, .25);
}

.pdoc-block p {
  font-size: .9rem;
  line-height: 2;
  letter-spacing: .03em;
  /* 記事本文（about・規約系）はグレー(--text2 6.8:1)だと cream 背景で薄く見づらい
     ため本文色(--text #1C1C1C 15.8:1)へ。注記・キャプションのグレーは階層表現として
     据え置き＝主役の長文本文だけ濃くする（2026-07-06）。 */
  color: var(--text);
  margin: 0 0 12px;
}

.pdoc-block ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.pdoc-block li {
  position: relative;
  font-size: .9rem;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--text); /* 記事本文リストも本文色へ（p と同理由・2026-07-06） */
  padding-left: 18px;
  margin-bottom: 6px;
}

.pdoc-block li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-lt);
}

/* 散文中のリンクだけを金色＋下線に。CTAボタン（.btn 系・.pdoc-tel-btn・.text-cta）はそれぞれの
   部品スタイル（components.css の .line-cta-btn＝白文字緑／.pdoc-tel-btn／.text-cta＝金枠ボタン）を維持するため除外する。
   除外しないと .pdoc-block a が .line-cta-btn の color を上書きし、緑ボタンの文字が金色＋下線になる。
   .text-cta は枠線ボタン（text-decoration:none 設計）なので、本文下線が漏れると矢印「→」まで下線が付く＝除外で解消。 */
.pdoc-block a:not(.btn):not(.pdoc-tel-btn):not(.text-cta) { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.pdoc-block a:not(.btn):not(.pdoc-tel-btn):not(.text-cta):hover { color: var(--gold); }

/* ── ACF ビジュアルエディタ（WYSIWYG）で編集した本文（privacy / policy） ──
   器は <div class="pdoc-block pdoc-body">＝上の .pdoc-block 系の文字スタイルをそのまま継承する。
   ただし複数の節（h2）が1つの塊に連続するため、見出しの上に余白を足して節を区切る
   （通常は .pdoc-block 同士の margin-bottom で区切るが、ここは1ブロック内に節が並ぶ）。
   先頭要素だけ上余白を消す（.pdoc-body > :first-child は h2 ルールより高詳細度で勝つ）。 */
.pdoc-body h2 { margin-top: 32px; }
.pdoc-body > :first-child { margin-top: 0; }
.pdoc-body h3 {
  font-family: var(--jp);
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--charcoal);
  line-height: 1.6;
  margin: 18px 0 8px;
}

.pdoc-contact li::before { display: none; }
.pdoc-contact li { padding-left: 0; }

/* アクセス解析ツールの小ブロック（Cookie 節：GA4 / Clarity） */
.pdoc-tool {
  margin: 14px 0;
  padding: 16px 18px;
  background: rgba(249, 246, 241, .6);
  border: 1px solid rgba(184, 151, 90, .16);
  border-radius: 8px;
}

.pdoc-tool h3 {
  font-family: var(--jp);
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.pdoc-tool p { margin-bottom: 8px; }
.pdoc-tool p:last-child { margin-bottom: 0; }
.pdoc-ref { font-size: .85rem; }

.pdoc-meta {
  margin-top: 32px;
  font-size: .8rem;
  color: var(--warm-gray);
  text-align: right;
}

/* ── ライフサイクル：時系列タイムライン（中央軸・左右振り分け・写真主役） ──
   構造の正＝page-lifecycle.php（.lc-timeline > .lc-item > a.lc-link >
   .lc-marker + .lc-media[.lc-en/.lc-figure>.lc-photo] + .lc-body[.lc-title/.lc-age/.lc-desc/.lc-more]）。
   左右の交互配置は :nth-child(even) で制御（HTMLは全節目同一構造）。 */
.lc-timeline {
  list-style: none;
  margin: 24px auto 0;
  padding: 0;
  max-width: 980px;
  position: relative;
}

/* 中央の縦軸（両端をフェード） */
.lc-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(rgba(184, 151, 90, .12), var(--gold-lt) 12% 88%, rgba(184, 151, 90, .12));
  z-index: 0;
}

.lc-item { position: relative; margin: 0; z-index: 1; }

/* 1節目＝写真とテキストを軸の左右に振り分け（全体が1リンク） */
.lc-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 360px;
  position: relative;
  text-decoration: none;
}

/* 中央軸上の二重ドット */
.lc-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px var(--gold-lt);
  z-index: 3;
}

/* 写真側 */
.lc-media { text-align: right; padding: 0 56px; }

.lc-en {
  display: block;
  font-family: var(--en);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: .86;
  letter-spacing: .02em;
  color: var(--gold);
  margin-bottom: 14px;
}

.lc-figure {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  background: #fff;
  padding: 8px;
  border: 1px solid rgba(184, 151, 90, .22);
  box-shadow: 0 14px 34px rgba(28, 26, 23, .12);
  overflow: hidden;
  line-height: 0;
}

.lc-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--t);
}

/* 写真未設定時の上品なプレースホルダー */
.lc-photo--empty { background: linear-gradient(150deg, #e9dcc2, #d4b07a); }

.lc-link:hover .lc-photo,
.lc-link:focus-visible .lc-photo { transform: scale(1.04); }

/* テキスト側 */
.lc-body { padding: 0 56px; }

.lc-title {
  display: block;
  font-family: var(--jp);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0 0 12px;
}

.lc-age {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--gold-dk);
  margin: 0 0 20px;
}

.lc-desc {
  display: block;
  font-size: .92rem;
  line-height: 2.1;
  letter-spacing: .03em;
  color: var(--text2);
  max-width: 360px;
  border-left: 2px solid var(--gold);
  padding-left: 18px;
}

.lc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: .86rem;
  letter-spacing: .08em;
  color: var(--gold-dk);
  transition: gap var(--t), color var(--t);
}

.lc-more::after { content: "→"; transition: transform var(--t); }

.lc-link:hover .lc-more,
.lc-link:focus-visible .lc-more { color: var(--gold); gap: 12px; }

.lc-link:hover .lc-more::after,
.lc-link:focus-visible .lc-more::after { transform: translateX(3px); }

/* 偶数＝写真を軸の右へ、テキストを左へ（左右交互） */
.lc-item:nth-child(even) .lc-media { order: 2; text-align: left; }
.lc-item:nth-child(even) .lc-body { order: 1; text-align: right; }
.lc-item:nth-child(even) .lc-desc { margin-left: auto; }

/* SP：PC同様に中央軸・ドット・2カラム左右交互を維持（モック lcA3-final.html 準拠）。
   各要素を縮めて狭幅でも成立させる。 */
@media (max-width: 760px) {
  .lc-marker { width: 9px; height: 9px; box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--gold-lt); }
  .lc-link { min-height: 240px; }
  .lc-media { padding: 18px 12px; }
  .lc-body { padding: 18px 12px; }
  .lc-en { font-size: 1.8rem; margin-bottom: 10px; }
  .lc-figure { max-width: 100%; padding: 6px; }
  .lc-title { font-size: 1.12rem; margin-bottom: 8px; }
  .lc-age { font-size: .62rem; letter-spacing: .08em; margin-bottom: 12px; }
  .lc-desc { font-size: .78rem; line-height: 1.9; padding-left: 12px; }
  .lc-more { font-size: .74rem; margin-top: 14px; }
}

/* ── お知らせ一覧 ── */
.info-list { list-style: none; margin: 0; padding: 0; }

.info-item { border-bottom: 1px solid rgba(184, 151, 90, .18); }

.info-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 4px;
  transition: background-color var(--t);
}

@media (min-width: 600px) {
  .info-link { flex-direction: row; align-items: baseline; gap: 20px; }
}

.info-link:hover { background: rgba(249, 246, 241, .7); }

.info-date {
  font-family: var(--en);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--gold-dk);  /* 日付は"意味を持つ情報テキスト"＝cream上 gold 2.56:1 は AA未達。gold-dk 4.45:1 へ（QA規約 global.css の gold→gold-dk・2026-07-06） */
  flex-shrink: 0;
}

.info-title {
  font-size: .92rem;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--charcoal);
  transition: color var(--t);
}

.info-link:hover .info-title { color: var(--gold-dk); }

.info-empty {
  text-align: center;
  color: var(--warm-gray);
  font-size: .9rem;
  padding: 48px 0;
}

.info-pagination { margin-top: 32px; }
.info-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.info-pagination a,
.info-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(184, 151, 90, .3);
  border-radius: 6px;
  font-size: .85rem;
  color: var(--text2);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.info-pagination a:hover { border-color: var(--gold-lt); color: var(--gold-dk); }
.info-pagination .current { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ── サイトマップ ── */
.smap-list { list-style: none; margin: 0 0 8px; padding: 0; }

.smap-list--top { margin-bottom: 18px; }

.smap-list > li {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid rgba(184, 151, 90, .16);
}

.smap-list > li > a {
  font-size: .98rem;
  letter-spacing: .03em;
  color: var(--charcoal);
  transition: color var(--t);
}

.smap-list--top > li > a { font-weight: 500; }

.smap-list a:hover { color: var(--gold-dk); }

/* 子ページ（撮影メニュー配下など） */
.smap-list .children {
  list-style: none;
  margin: 10px 0 2px;
  padding: 0 0 0 18px;
}

.smap-list .children li {
  padding: 7px 0;
  border-bottom: none;
}

.smap-list .children li::before {
  content: "└ ";
  color: var(--gold-lt);
  margin-right: 4px;
}

.smap-list .children a {
  font-size: .88rem;
  color: var(--text2);
}

/* ── スタジオについて（/about/） ── */

/* 店内・スタッフ写真プレースホルダ（実写真が来たら img へ差し替え） */
.about-photo,
.staff-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 176, 122, .22), rgba(184, 151, 90, .12));
  border: 1px solid rgba(184, 151, 90, .2);
  border-radius: 10px;
  color: var(--gold-dk);
  font-size: .82rem;
  letter-spacing: .08em;
}

.about-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 18px;
}

/* 店舗情報・納品の定義リスト */
.about-info {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(184, 151, 90, .18);
}

.about-info dt {
  font-family: var(--jp);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold-dk);
  padding: 14px 0 2px;
}

.about-info dd {
  font-size: .9rem;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--text2);
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(184, 151, 90, .18);
}

.about-info dd a { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 2px; }
.about-info dd a:hover { color: var(--gold); }

@media (min-width: 600px) {
  .about-info {
    grid-template-columns: 160px 1fr;
    column-gap: 24px;
  }
  .about-info dt {
    padding: 16px 0;
    border-bottom: 1px solid rgba(184, 151, 90, .18);
  }
  .about-info dd { padding: 16px 0; }
}

/* アクセス：地図 webp（クリックで Google マップ） */
.about-map {
  display: inline-block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(184, 151, 90, .2);
  transition: box-shadow var(--t), border-color var(--t);
  margin-bottom: 14px;
}

.about-map img { display: block; width: 100%; max-width: 360px; height: auto; }

.about-map:hover,
.about-map:focus-visible {
  box-shadow: 0 8px 24px rgba(28, 28, 28, .12);
  border-color: var(--gold-lt);
}

.about-map-note {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(28, 28, 28, .68);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* スタッフ紹介カード */
.staff-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.staff-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(184, 151, 90, .18);
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(28, 28, 28, .05);
}

.staff-meta { flex: 1; min-width: 0; }

.staff-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: .8rem;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--gold-dk);
  margin: 0 0 8px;
}

.staff-photo { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; }

.staff-name {
  font-family: var(--jp);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--charcoal);
  margin: 0 0 4px;
}

.staff-name-kana {
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--warm-gray);
  margin-left: 10px;
}

.staff-role {
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--gold-dk);
  margin: 0 0 10px;
}

.staff-word {
  font-size: .9rem;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--text2);
  margin: 0;
}
/* message が複数段落（wpautop で <p> 化）になっても段落間が詰まりすぎないよう調整。 */
.staff-word p { margin: 0 0 .9em; }
.staff-word p:last-child { margin-bottom: 0; }

/* 受賞歴・資格リスト（年＋内容）。撮影歴・得意分野の下に置く控えめな箇条書き。 */
.staff-awards {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gold-lt);
}
.staff-awards-title {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold-dk);
  margin: 0 0 8px;
}
.staff-awards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 受賞歴が多い人（代表20件）でもページが伸びすぎないよう、約6行分だけ見せて残りは枠内スクロール
     （オーナー指示 2026-06-10）。1行 ≈ .82rem × line-height 1.7 + padding 4px ≈ 約26px → 6行で約156px＋余白。 */
  max-height: 168px;
  overflow-y: auto;
  /* スクロールできることが伝わるよう、上下端に控えめなフェード（スクロール量のヒント）。 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lt) transparent;
}
.staff-awards-list::-webkit-scrollbar { width: 5px; }
.staff-awards-list::-webkit-scrollbar-thumb { background: var(--gold-lt); border-radius: 999px; }
.staff-awards-list::-webkit-scrollbar-track { background: transparent; }
.staff-awards-list li {
  display: flex;
  gap: 10px;
  font-size: .82rem;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--text2);
  padding: 2px 0;
  padding-right: 8px; /* スクロールバーと文字が重ならないように */
}
.staff-awards-list li::marker { content: ""; } /* list-style:none の保険（marker 抑止） */
/* ★真因：規約系の .pdoc-block li::before（金色の丸ビュレット）が受賞歴 li にも効き、
   padding-left が padding:2px 0 で消えるため year に重なる「・」として見えていた。受賞歴では無効化する。 */
.staff-awards-list li::before { content: none; }
.staff-award-year {
  flex: 0 0 auto;
  min-width: 3em;
  color: var(--gold-dk);
  font-variant-numeric: tabular-nums;
}
.staff-award-text { flex: 1; min-width: 0; }

@media (min-width: 600px) {
  /* 経歴が長文＋受賞歴で縦に伸びるため、写真は中央でなく上揃え（中央だと写真が文章の縦中央に浮く）。 */
  .staff-card { flex-direction: row; align-items: flex-start; gap: 24px; }
}

/* ── 共通：LINE / 電話 CTA（about / flow） ── */
.pdoc-cta-block { text-align: center; }

/* よくある質問：Q&A を連続リストで区切る（撮影メニュー .nb__faq-acc と統一・2026-07-24）。
   各行の下罫線は .faq-item／リスト先頭の上罫線は .faq-list（どちらも components.css で共通に敷く＝上下が閉じる）。
   ここでは /faq/・衣装のレイアウト（縦積み・gap0・上マージン）だけを担う。上罫線は二重定義しない（続き412で一本化）。 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
}

.pdoc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}

/* /about/ お問い合わせ：LINE と電話ボタンを縦に積み、横幅を揃える（電話を LINE 幅に合わせる）。
   inline-flex + column + align-items:stretch にすると、コンテナ幅＝広い方のボタン幅になり、
   両ボタンがその幅に伸びる＝電話ボタンが LINE ボタンと同じ横幅に揃う（親 .pdoc-cta-block は
   text-align:center なので中央配置のまま）。 */
.pdoc-cta.pdoc-cta--stack {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* LINE ボタンはサイト共通の .btn.btn-line.line-cta-btn（components.css／line-cta-button.php）に統一。
   ここでは電話の副ボタンだけを、緑の LINE ボタンと同じ角型・同じ高さに揃えて定義する。 */
.pdoc-tel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: 0;
  font-family: var(--jp);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  background: #fff;
  color: var(--gold-dk);
  border: 1px solid var(--gold-lt);
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t), border-color var(--t);
}

@media (min-width: 480px) {
  .pdoc-tel-btn { padding: 15px 28px; }
}

.pdoc-tel-btn:hover,
.pdoc-tel-btn:focus-visible {
  transform: translateY(-1px);
  background: rgba(249, 246, 241, .8);
  color: var(--gold);
  border-color: var(--gold);
}

/* ── 撮影の流れ（/flow/） ── */
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 縦の導線 */
.flow-steps::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--gold-lt), rgba(212, 176, 122, .25));
}

.flow-step { position: relative; padding-left: 40px; margin-bottom: 22px; }

.flow-step::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1px var(--gold-lt);
}

.flow-en {
  font-family: var(--en);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--gold);
  display: block;
}

.flow-step-title {
  font-family: var(--jp);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--charcoal);
  margin: 4px 0 8px;
  padding: 0;
  border: none;
}

.flow-step-desc {
  font-size: .9rem;
  line-height: 1.95;
  letter-spacing: .03em;
  color: var(--text2);
  margin: 0;
}

/* ステップ内の LINE CTA（STEP 01「予約」用）。説明文の下に少し余白を空けて左寄せで置く。
   ボタンの見た目は components.css の .line-cta-btn（白文字緑）＝.pdoc-block a の散文リンク色は
   :not(.btn) 除外で当たらない。 */
.flow-step-cta {
  margin-top: 14px;
}

/* 納品の dl（about-info 流用）。ラベルが長い（例：スタンダード商品（台紙））ため PC ではラベル列を広げる */
@media (min-width: 600px) {
  .flow-delivery { grid-template-columns: 220px 1fr; }
}

/* ============================================================
   グループ概要（/group/）：2店舗カード
   ============================================================ */
.group-shops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .group-shops { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.group-shop {
  /* min-width:0 = grid アイテムが内容（長いリンク文言など）で押し広がり画面外へはみ出すのを防ぐ。
     内側も grid（auto/1fr/auto）＝説明文の行（2行目）を 1fr で伸ばし、リンクを最下行に固定して
     左右カードのボタン下端を揃える（iPad mini 等で説明文の行数が割れても下揃え）。
     ※ 当初は flex+margin-top:auto だったが、grid-stretch で伸びたカード内では auto が余剰を吸収せず
        下揃えにならなかった（CDP実測：左3行/右4行で ctaBottom が29pxズレ・linkMarginTop=0px）ため grid 方式に変更。 */
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--gold-lt);
  border-radius: 10px;
  background: var(--cream);
}
.group-shop-name {
  font-family: var(--jp);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 10px;
  line-height: 1.5;
}
.group-shop-area {
  display: inline-block;
  margin-left: 8px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold-dk);
  vertical-align: middle;
}
.group-shop-desc {
  font-size: .9rem;
  line-height: 1.9;
  letter-spacing: .03em;
  color: var(--text2);
  margin: 0 0 12px;
}
.group-shop-link {
  /* grid 最下行に配置されるので margin は不要。上の説明文(.group-shop-desc)の margin-bottom が間隔を作る */
  margin: 0;
}
.group-shop-link .text-cta {
  /* .text-cta は既定で white-space:nowrap＝文言を折り返さずボタンが内容幅で横に伸びる。
     狭幅スマホ（galaxy s25 等）では枠外へはみ出すため、このカード内に限り折り返しを許可する。
     max-width:100% でカード幅を超えない＝枠内に収まる。 */
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────
   お知らせ記事詳細（single.php・.pfeat）— 特集（読み物）レイアウト
   【新設 2026-07-04】中央一本の読み物。タイトル→写真（横長1枚）→リード→本文を縦に読み下す。
   キャンペーン（左右2分割）・普通（左に日付柱）と骨格を分ける＝中央縦一本のエッセイ体裁。
   スタジオの想い・撮影レポートなど「しっかり読ませたい」記事向け。
   写真の無い記事は .pfeat--nohero で写真帯を出さず、タイトルから始まる端正な読み物に降格。
   ───────────────────────────────────────────────────────── */
.sec.pfeat { background: var(--warm-white); }
.pfeat-article { max-width: 40em; margin-inline: auto; }
/* 見出し：英字キッカー＋和ラベル＋日付を上に一列、その下に中央寄せの大見出し。 */
.pfeat-head { text-align: center; margin-bottom: clamp(28px, 4.5vw, 44px); }
.pfeat-kicker {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 14px;
  margin-bottom: clamp(16px, 2.5vw, 22px);
}
.pfeat-kicker-en {
  font-family: var(--en); font-style: italic; font-weight: 400;
  font-size: 1.15rem; letter-spacing: .04em; color: var(--gold-dk);
}
.pfeat-kicker-jp {
  font-family: var(--jp); font-weight: 300; font-size: .72rem;
  letter-spacing: .28em; color: var(--warm-gray);
  padding-left: 14px; border-left: 1px solid var(--light-gray);
}
.pfeat-kicker-date {
  font-family: var(--en); font-size: .8rem; letter-spacing: .16em; color: var(--warm-gray);
}
.pfeat-title {
  margin: 0; font-family: var(--jp); font-weight: 500;
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  line-height: 1.5; letter-spacing: .03em; color: var(--charcoal);
  max-width: 20em; margin-inline: auto;
}
/* ヒーロー写真：横長1枚を器いっぱいに。読み物の“扉”。 */
.pfeat-hero {
  margin: clamp(28px, 4.5vw, 44px) 0 0;
  aspect-ratio: 3 / 2; overflow: hidden;
}
.pfeat-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 本文：先頭段落はリードとして一段大きく。
   ⚠️ ドロップキャップ（先頭1文字だけ 3.2em の金文字）は撤去した（オーナー指示 2026-07-31）。
   欧文の組版様式で、和文だと1文字目だけが浮いて見える＝再提案しない。 */
.pfeat-body { margin-top: clamp(30px, 4.5vw, 48px); max-width: none; }
.pfeat-body > p:first-of-type {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.95; color: var(--charcoal);
}
/* 本文中の画像・図版（the_content のブロック画像・キャプション対応）。 */
.pfeat-body img { max-width: 100%; height: auto; display: block; }
.pfeat-body figure { margin: 28px 0; }
.pfeat-body .wp-block-image { margin: 28px 0; }
.pfeat-body figure img, .pfeat-body .wp-block-image img { margin-inline: auto; }
.pfeat-body figcaption {
  margin-top: 8px; font-family: var(--en); font-size: .72rem;
  letter-spacing: .1em; color: var(--warm-gray); text-align: center;
}
/* 引用＝プルクオート（金の縦罫＋明朝を一段大きく）。 */
.pfeat-body blockquote {
  margin: 30px 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--gold);
  font-family: var(--jp); font-weight: 300;
  font-size: 1.14rem; line-height: 1.9; letter-spacing: .04em; color: var(--charcoal);
}
.pfeat-foot {
  max-width: 40em; margin: clamp(44px, 7vw, 64px) auto 0; padding-top: 28px;
  border-top: 1px solid var(--light-gray);
}

/* ─────────────────────────────────────────────────────────
   お知らせ記事詳細（single.php・.pinfo）— 通常（お知らせ）レイアウト＝既定
   【リデザイン 2026-07-04】事務連絡・営業案内を「記録／アーカイブの1葉」の顔に。
   左に巨大な日付（欧文・日＝極大／月年＝小）を視覚アンカーとして置き、右に細い明朝の本文。
   誇張された階層（極大の数字 × 極小のラベル）で、装飾ゼロでも“ちゃんとした記録”に見せる。
   ───────────────────────────────────────────────────────── */
.sec.pinfo { background: var(--warm-white); }
/* グリッド：左＝日付柱／右＝本文。720px 未満は縦積み（日付は横並びに切替）。 */
.pinfo-article {
  display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3.5vw, 34px);
  max-width: 60em; margin-inline: auto;
}
@media (min-width: 720px) {
  /* gap は日付柱側の padding-right（縦罫まで）と本文側の gap を合わせて左右均等に見せる。 */
  .pinfo-article { grid-template-columns: clamp(150px, 20vw, 220px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
}

/* 日付柱：巨大な日（2桁）を主役に、下に月・年（欧文小）と区分ラベル。 */
.pinfo-dateline {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--light-gray);
}
@media (min-width: 720px) {
  .pinfo-dateline {
    display: block; padding-bottom: 0; border-bottom: 0;
    /* 日付柱と本文の間を細い縦罫で仕切る（PC のみ・旧「速報」から継承）。 */
    padding-right: clamp(28px, 4vw, 56px);
    border-right: 1px solid var(--light-gray);
    position: sticky; top: clamp(90px, 12vh, 130px);
  }
}
.pinfo-bigdate { display: block; line-height: 1; }
/* 年月＝日の上（DOM も上）。「2026 7月 → 31」と日本語の年月日順に読み下せる
   （オーナー確定 2026-07-31。以前は英語式の 31 → 7月 2026）。
   和文「◯月」を含むので --en（Cormorant）は使わない＝「英字の eyebrow・装飾に限定。
   和文には使わない」（type-and-color【1】）。下の区分ラベル（.pinfo-cat）と同じ明朝で組み、
   柱の中を「大きな数字＝Cormorant／小さなラベル＝明朝」の2階層に澄ませる。 */
.pinfo-bigdate-my {
  display: block; margin-bottom: 14px;
  font-family: var(--jp); font-weight: 400; font-size: clamp(.82rem, 1.4vw, 1rem);
  letter-spacing: .18em; color: var(--gold-dk);
}
.pinfo-bigdate-day {
  display: block; font-family: var(--en); font-weight: 500;
  font-size: clamp(3.4rem, 12vw, 6.6rem); line-height: .82;
  letter-spacing: -.02em; color: var(--charcoal);
  /* 上下の余白は「箱」でなく「実際に描かれる字の形」に合わせる（2026-07-31・実測）。
     line-height:.82 で行の高さを詰めても数字の上には 0.32em の余りが残り、逆に下は
     Cormorant のオールドスタイル数字（3・5・7・9 がベースラインより下へ降りる）が
     0.19em はみ出す＝箱は上下対称でも字は下寄りになる。放っておくと上の年月とは
     離れて見え、下の区分ラベルには食い込む（重なりを実測 12px）。数字の表情は
     変えたくないので line-height は触らず、上は負の margin で余りを打ち消し、
     下は padding で逃げを作る。見える間隔は上の要素の margin-bottom が持つ。
     いずれも em 指定＝font-size が clamp で変わっても常に比例する。 */
  margin-top: -.32em;
  padding-bottom: .21em;
}
.pinfo-cat {
  display: inline-block; margin-top: clamp(0px, 2vw, 22px);
  font-family: var(--jp); font-weight: 300; font-size: .72rem;
  letter-spacing: .24em; color: var(--warm-gray);
}
@media (min-width: 720px) { .pinfo-cat { display: block; } }

/* 本文柱：英字ラベル＋明朝の見出し＋本文。上部に細い罫で日付柱とリズムを揃える。 */
.pinfo-head { margin-bottom: clamp(22px, 3.5vw, 36px); }
.pinfo-kick-en {
  display: block; margin-bottom: clamp(10px, 1.6vw, 16px);
  font-family: var(--en); font-style: italic; font-weight: 400;
  font-size: 1.1rem; letter-spacing: .04em; color: var(--gold-dk);
}
.pinfo-h1 {
  margin: 0; font-family: var(--jp); font-weight: 500;
  font-size: clamp(1.55rem, 4.4vw, 2.5rem); line-height: 1.5;
  letter-spacing: .02em; color: var(--charcoal); max-width: 22em;
}
.pinfo-body { max-width: none; }
/* 本文中の画像・図版は器幅に収める（the_content のブロック画像・キャプション対応）。 */
.pinfo-body img { max-width: 100%; height: auto; display: block; }
.pinfo-body figure { margin: 24px 0; }
.pinfo-body figure img { margin-inline: auto; }
.pinfo-body figcaption {
  margin-top: 8px; font-size: .8rem; color: var(--warm-gray); text-align: center;
}
.pinfo-body .wp-block-image { margin: 24px 0; }

/* ─────────────────────────────────────────────────────────
   お知らせ記事末の一言CTA（.pnote）— 通常のお知らせ・特集で使う「静かな一言」
   cta-line-copy.md 3-6＝記事の用件に紐づく行動だけを静かに置く。どの記事にも同じ
   予約バナーを機械的に貼るのは悪い例なので、カードにも帯にもしない。
   ⚠️ 一辺だけのアクセント線（border-left の金罫）は使わない＝ai-tells-checklist【2】P0。
      本文の引用（.pfeat-body blockquote）が金の縦罫を使うのは**引用符の代替**という
      機能があるからで、CTA にそれを流用すると「飾りとして貼っただけ」の一辺バーになる。
   構造は余白とタイポの差（本文よりわずかに小さい級数・字間）だけで作る。
   ───────────────────────────────────────────────────────── */
.pnote {
  margin: clamp(40px, 6vw, 56px) 0 0;
}
/* 書体はゴシック（--sans）。type-and-color.md【1】の軸＝読者がその文字に「浸る」のか
   「参照する」のか。ここは空き状況の確認・予約という**行動の案内＝参照する実用情報**で、
   かつ本文に対する補足（「補足はゴシックで小さく」）なので明朝ではない。
   直前の記事本文（.pinfo-body）もゴシックなので、明朝にすると続きの一文だけ浮く
   （オーナー指摘 2026-07-26）。字間も和文ゴシックの標準レンジ .04em に合わせる。
   文字色はトップのロケ地リンク周辺と同じ補助テキスト色（--text2）。
   .loc-link は color:inherit ＝この親の色を継ぐので、リンク側で色を上書きしない。 */
.pnote p {
  margin: 0; font-family: var(--sans); font-weight: 400;
  font-size: .84rem; line-height: 1.95; letter-spacing: .04em; color: var(--text2);
}
/* リンクは本文の続きとして置く＝ボタン化しない（去り際に声を張らない）。
   見た目・ホバーとも共通型 .loc-link（components.css）に完全に任せる。
   ⚠️ ここで `.pnote .loc-link { color: … }` のような上書きを足さないこと＝詳細度で
   `.loc-link:hover` の金（--gold-dk）に勝ってしまい、ホバーで文字色が変わらなくなる
   （2026-07-26 に実際にやってオーナーに指摘された）。色を変えたいときは親（.pnote p）を変える。 */
/* 通常レイアウトは左に日付柱があるので本文カラムへ揃える。器の幅・中央寄せは
   .pinfo-article と同条件にしたうえで、日付柱ぶん（柱幅＋gap）を padding で送る
   ＝.pinfo-back と同じ組み立て（片方だけ margin で送ると基準がずれて左端が合わない）。 */
.pinfo .pnote { max-width: 60em; margin-inline: auto; }
@media (min-width: 720px) {
  .pinfo .pnote { padding-left: calc(clamp(150px, 20vw, 220px) + clamp(28px, 4vw, 56px)); }
}
.pfeat .pnote { max-width: 40em; margin-inline: auto; }

/* 戻る導線。区切り罫は器の全幅に引くので、ボタンも**その罫線の中央**に置く。
   ⚠️ 以前は本文カラムへ揃えるため日付柱ぶんの padding-left を入れていたが、
   中身が右に送られたうえで狭まった領域の中央に寄るため、画面中央から左へ
   62〜111px ずれて見えた（オーナー指摘 2026-07-26・実測）。
   本文カラムへ揃えるのは記事の続きである一言CTA（.pnote）までで、記事全体を
   締めるこのボタンは罫線＝器の中央が正しい。 */
.pinfo-back {
  max-width: 60em; margin: clamp(44px, 7vw, 64px) auto 0; padding-top: 28px;
  border-top: 1px solid var(--light-gray);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   お知らせ記事詳細（single.php・.pcamp）— キャンペーン・特典レイアウト
   news_layout=campaign。期間・特典を伝えて公式LINE予約へ促す＝CTAが主役。
   金を効かせて特別感を出すが、カード（角丸＋影）や一辺だけの色バーは使わず、
   上下の金罫＋余白で「予約への区切り」を面として示す。
   ───────────────────────────────────────────────────────── */
/* 【リデザイン 2026-07-04・第2版】全面ヒーロー（振袖の全身が切れる）をやめ、
   PC は画面を縦2分割：左＝振袖写真を天地いっぱい（全身が見える）／右＝クリーム地の情報パネル
   （Campaign ラベル＋タイトル＋期間＋特典本文）。その下に墨の全幅 LINE 予約 CTA 帯で締める。
   写真の無い記事は .pcamp--nophoto で情報パネル1枚のデザインに降格。 */
.sec.pcamp { padding-top: 0; padding-bottom: 0; }
/* 分割：モバイルは縦積み（写真→パネル）、900px 以上で左右2分割（写真は sticky で全身を保持）。 */
.pcamp-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .pcamp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; }
}
/* 写真パネル：モバイルは 4:5 の縦長、PC は右パネルの高さいっぱいに天地フル。 */
/* 写真は <img>（.pcamp-photo-img）を敷き詰める。以前は CSS 背景だったが、背景画像は srcset が
   効かず指定サイズがそのまま画質の上限になっていた（PC の枠 937×1637 に対し実効0.63倍＝
   引き伸ばし。2026-07-31 実測）。見え方（cover・上寄せ）は object-fit / object-position で同じ。 */
.pcamp-photo {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
}
.pcamp-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
/* PC は右パネルの高さに追従させつつ **上限を設ける**。本文が長い記事では枠が 1637px まで伸び、
   WP の長辺2560px上限では 2560÷1637＝1.56倍にしかならず粗かった（2026-07-31 実測）。
   1200px で頭打ちにすれば 2560÷1200＝2.1倍を常に満たす。上限に当たって余った分は
   sticky で写真を留める＝スクロール中も左が空白にならない（この節の冒頭コメントにある
   「写真は sticky で全身を保持」という当初の設計意図どおり）。 */
@media (min-width: 900px) {
  .pcamp-photo {
    aspect-ratio: auto;
    min-height: 560px;
    height: 100%;
    max-height: min(100vh, 1200px); /* 100vh＝sticky で留まったとき画面をちょうど埋め、下に余白が出ない */
    align-self: start;
    position: sticky;
    top: 0;
  }
}
/* 情報パネル：クリーム地。左罫やカードは使わず、面と余白で仕切る。 */
.pcamp-panel { background: var(--warm-white); display: flex; align-items: center; }
.pcamp-panel-inner {
  width: 100%; max-width: 34em;
  margin-inline: auto;
  padding: clamp(40px, 8vw, 88px) clamp(24px, 5vw, 64px);
}
/* 写真なしのときは1枚パネルを中央に。 */
.pcamp--nophoto .pcamp-panel-inner { max-width: 40em; }
.pcamp-eyebrow { line-height: 1; }
.pcamp-eyebrow-en {
  display: block; font-family: var(--en); font-style: italic; font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: .01em; color: var(--gold-dk);
}
.pcamp-eyebrow-jp {
  display: inline-block; margin-top: 12px;
  font-family: var(--jp); font-weight: 300; font-size: .72rem;
  letter-spacing: .34em; color: var(--warm-gray);
}
.pcamp-title {
  margin: clamp(18px, 3vw, 26px) 0 0; font-family: var(--jp); font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.44;
  letter-spacing: .03em; color: var(--charcoal);
}
.pcamp-date {
  display: block; margin-top: 18px;
  font-family: var(--en); font-size: .78rem; letter-spacing: .18em; color: var(--warm-gray);
}
.pcamp-article { margin-top: clamp(26px, 4vw, 40px); }
.pcamp-body { max-width: none; }
/* CTA＝墨の全幅バンド。クリーム白抜きのリード＋公式LINEボタンを主役に、ページを締めくくる。 */
.pcamp-cta {
  background: var(--charcoal);
  margin-top: clamp(44px, 7vw, 72px);
  padding: clamp(44px, 7vw, 76px) 0;
  text-align: center;
}
/* 特典のひとこと＝この帯の主役。読み終えて高まった気持ちに応えるのは煽り文句ではなく
   「何がもらえるのか」の事実なので、明朝を一段大きく組んで言い切る（見せ場＝明朝）。 */
.pcamp-cta-offer {
  margin: 0 0 14px; font-family: var(--jp); font-weight: 400;
  font-size: clamp(1.24rem, 3vw, 1.72rem); line-height: 1.6; letter-spacing: .06em;
  color: var(--gold-lt);
}
.pcamp-cta-lead {
  margin: 0 0 24px; font-family: var(--jp); font-weight: 300;
  font-size: clamp(1.06rem, 2vw, 1.32rem); letter-spacing: .08em; color: var(--cream);
}
/* 特典を出したときの受付案内＝主役を食わないよう一段落として添える。 */
.pcamp-cta-lead--sub {
  margin-bottom: 20px; font-family: var(--sans); font-weight: 400;
  font-size: .88rem; letter-spacing: .04em; color: rgba(249, 246, 241, .78);
}
/* 期限＝急かす言葉の代わりに事実を置く場所（cta-line-copy【5】で煽り文句は禁止）。
   ボタンの下に小さく添える＝押す直前に「いつまでか」だけが目に入る。 */
.pcamp-cta-deadline {
  margin: 18px 0 0; font-family: var(--sans); font-weight: 400;
  font-size: .82rem; letter-spacing: .06em; color: rgba(249, 246, 241, .72);
}
/* 送信後の不安（いつ返るか）だけを消す1行。期限より弱く置いて序列を保つ
   ＝大型カードの3行注記（営業時間・定休日）は入れない（予約の瞬間には不要・フッターにある）。 */
.pcamp-cta-note {
  margin: 10px 0 0; font-family: var(--sans); font-weight: 400;
  font-size: .74rem; letter-spacing: .04em; color: rgba(249, 246, 241, .5);
}
/* 戻る導線。.sec.pcamp は CTA 帯を全幅で敷くため padding-bottom:0 ＝ここで自前に
   下余白を持たないとフッターに直付きする（他レイアウトは .sec の --sec-sp が効く）。 */
.pcamp-foot { margin-top: clamp(40px, 6vw, 56px); padding-bottom: var(--sec-sp); }

/* ─────────────────────────────────────────────────────────
   お知らせ記事詳細（.pcamp）— 本文に差し込む画像・図版の対応
   the_content のブロック画像（figure.wp-block-image）・キャプションを器幅に収める。
   （特集 .pfeat・普通 .pinfo は各区画で対応済み。）
   ───────────────────────────────────────────────────────── */
.pcamp-body img { max-width: 100%; height: auto; display: block; }
.pcamp-body figure { margin: 26px 0; }
.pcamp-body .wp-block-image { margin: 26px 0; }
.pcamp-body figcaption {
  margin-top: 8px; font-size: .8rem; color: var(--warm-gray);
}