/* ==========================================================
   article.css … 記事ページと、記事の中で使う部品
   （エディタの「みのぷら」パターンの見た目もここにあります）
   ========================================================== */

/* ---------- 記事の頭 ---------- */
.an-entry { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 0; min-width: 0; }
@media (min-width: 1024px) { .an-entry { gap: 24px; max-width: 760px; } }

.an-entry__cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--mute); }
.an-entry__cats a.an-catlabel { font-size: 10px; font-weight: 700; color: var(--ac); border: 1.5px solid var(--ac); border-radius: 4px; padding: 1px 8px; }
.an-entry__title { font-size: 24px; line-height: 1.5; margin-top: -6px; }
@media (min-width: 1024px) { .an-entry__title { font-size: 34px; } .an-entry__cats { font-size: 12px; } }

.an-byline { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.an-byline .an-voice__icon { width: 36px; height: 36px; font-size: 11px; }

/* タイトル下の1行情報（エリア・営業時間・駐車場・わんこ・最寄り駅） */
.an-infoline {
  display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: #555;
}
.an-infoline span::before { content: "● "; color: var(--ac); }
.an-infoline a { margin-left: auto; color: var(--ac); }
@media (min-width: 1024px) { .an-infoline { font-size: 13px; } }

/* ---------- 本文 ---------- */
.an-content { display: flex; flex-direction: column; gap: 18px; font-size: 15px; line-height: 2.05; color: #2A2A2A; }
@media (min-width: 1024px) { .an-content { gap: 24px; font-size: 17px; } }
.an-content > * { margin: 0; }
.an-content a { color: var(--ac); text-decoration: underline; }

.an-content h2 { font-size: 19px; margin-top: 22px; line-height: 1.5; }
.an-content h3 { font-size: 17px; margin-top: 12px; }
@media (min-width: 1024px) { .an-content h2 { font-size: 24px; margin-top: 30px; } .an-content h3 { font-size: 19px; } }

/* 蛍光ペン（エディタの「ハイライト」や太字に使える） */
.an-content mark, .an-content strong, .an-content .an-marker {
  background: linear-gradient(transparent 60%, var(--tint) 60%) !important;
  color: inherit !important; font-weight: 700;
}

/* 写真とキャプション */
.an-content .wp-block-image img { border-radius: 14px; width: 100%; }
.an-content figcaption, .an-content .wp-element-caption { font-size: 11px; color: var(--mute); margin-top: 6px; line-height: 1.6; text-align: left; }
@media (min-width: 1024px) { .an-content figcaption, .an-content .wp-element-caption { font-size: 12px; } }

/* 写真スタイル「画面幅いっぱい」（スマホのみ端まで広げる） */
@media (max-width: 1023px) {
  .an-content .is-style-an-full { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .an-content .is-style-an-full img { border-radius: 0; }
  .an-content .is-style-an-full figcaption { padding: 0 var(--gutter); }
}

/* 写真2枚・3枚並び（ギャラリー） */
.an-content .wp-block-gallery { gap: 6px !important; }
.an-content .wp-block-gallery img { border-radius: 12px; }

/* 段落スタイル「大きな強調」 */
.an-content .is-style-an-big, .an-big { font-size: 26px; font-weight: 900; color: var(--ac); line-height: 1.5; }
@media (min-width: 1024px) { .an-content .is-style-an-big, .an-big { font-size: 36px; } }

/* ---------- 吹き出し（パターン：ゆかのひとこと／お店の人のひとこと） ---------- */
.an-say { display: flex !important; gap: 10px; align-items: flex-start; flex-wrap: nowrap !important; }
.an-say.is-me { flex-direction: row-reverse; }
.an-say .an-say__icon { width: 56px !important; flex-shrink: 0; margin: 0; text-align: center; }
.an-say .an-say__icon img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.an-say .an-say__icon figcaption { font-size: 9px; font-weight: 700; color: var(--mute); text-align: center; margin-top: 2px; }
.an-say .an-say__text {
  position: relative; flex: 1; margin: 0; padding: 12px 15px; border-radius: 18px;
  font-size: 13px; font-weight: 700; line-height: 1.75; background: #fff; border: 2px solid #E2DDD8;
}
.an-say .an-say__text::before {
  content: ""; position: absolute; top: 16px; left: -8px; width: 12px; height: 12px;
  background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg);
}
.an-say.is-me .an-say__text { background: var(--tint); border-color: var(--tint); }
.an-say.is-me .an-say__text::before { left: auto; right: -8px; border-left: 0; border-bottom: 0; border-top: inherit; border-right: inherit; }
@media (min-width: 1024px) {
  .an-say { max-width: 640px; }
  .an-say.is-me { margin-left: auto !important; }
  .an-say .an-say__icon { width: 64px !important; }
  .an-say .an-say__icon img { width: 60px; height: 60px; }
  .an-say .an-say__text { font-size: 15px; padding: 16px 20px; }
}

/* ---------- メモ（ちょこっと歴史メモ／鉄道メモ） ---------- */
.an-memo { border: 2px dashed var(--soft); border-radius: 14px; padding: 14px 16px !important; display: flex; flex-direction: column; gap: 4px; }
.an-memo > * { margin: 0 !important; }
.an-memo .an-memo__title { font-size: 12px; font-weight: 900; color: var(--ac); line-height: 1.6; }
.an-memo p:not(.an-memo__title) { font-size: 13px; line-height: 1.8; }
@media (min-width: 1024px) { .an-memo .an-memo__title { font-size: 14px; } .an-memo p:not(.an-memo__title) { font-size: 15px; } }

/* ---------- また行きたい度 ---------- */
.an-rating { background: var(--tint); border-radius: 18px; padding: 18px !important; display: flex; flex-direction: column; gap: 8px; }
.an-rating > * { margin: 0 !important; }
.an-rating .an-rating__title { font-size: 16px; font-weight: 900; }
.an-rating .an-rating__stars { color: var(--ac); font-size: 20px; letter-spacing: 2px; line-height: 1.4; }
.an-rating p:last-child { font-size: 13px; line-height: 1.9; }
@media (min-width: 1024px) {
  .an-rating { padding: 24px 28px !important; }
  .an-rating .an-rating__title { font-size: 19px; }
  .an-rating .an-rating__stars { font-size: 24px; }
  .an-rating p:last-child { font-size: 15px; }
}

/* ---------- 店舗情報／コースの情報（表） ---------- */
.an-info { border: 2px solid var(--ac); border-radius: 18px; overflow: hidden; padding: 0 !important; scroll-margin-top: 20px; }
.an-info > * { margin: 0 !important; }
.an-info .an-info__title { background: var(--ac); color: #fff; padding: 12px 18px; font-size: 15px; font-weight: 900; line-height: 1.6; }
.an-info .wp-block-table { padding: 6px 18px 0; }
.an-info table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.7; }
.an-info td { border: 0; border-bottom: 1px dashed var(--soft); padding: 11px 0; vertical-align: top; }
.an-info td:first-child { width: 96px; font-weight: 900; color: var(--ac); padding-right: 10px; }
.an-info tr:last-child td { border-bottom: 0; }
.an-info .wp-block-html, .an-info iframe { display: block; width: 100%; padding: 6px 18px 0; border: 0; }
.an-info iframe { height: 220px; border-radius: 10px; padding: 0; }
.an-info .wp-block-buttons { padding: 12px 18px 18px; }
.an-info .wp-block-button__link { background: var(--ac); color: #fff; border-radius: 8px; font-weight: 700; font-size: 13px; width: 100%; }
.an-info .an-info__body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  .an-info .an-info__title { font-size: 18px; padding: 16px 28px; }
  .an-info .wp-block-table, .an-info .wp-block-buttons { padding-left: 28px; padding-right: 28px; }
  .an-info table { font-size: 14px; }
  .an-info iframe { height: 260px; }
}

/* ---------- 道順（番号付きリスト） ---------- */
.an-content ol.an-steps, ol.an-steps { list-style: none; padding: 0; margin: 0; counter-reset: an-step; display: flex; flex-direction: column; gap: 14px; }
ol.an-steps li { counter-increment: an-step; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.7; }
ol.an-steps li::before {
  content: counter(an-step); width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--ac); color: var(--ac); font-family: var(--font-en); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; background: #fff;
}

/* ---------- 縦動画（Instagramリール／YouTubeショート） ---------- */
.an-video { max-width: 320px; margin-left: auto !important; margin-right: auto !important; width: 100%; }
.an-video iframe { border-radius: 18px; }

/* ---------- 記事の下 ---------- */
.an-share { display: flex; gap: 8px; align-items: center; }
.an-share__label { font-size: 12px; font-weight: 700; flex: 1; }
.an-share a {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ac); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}

.an-writer { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 2px dashed var(--soft); border-radius: 16px; }
.an-writer .an-voice__icon { width: 60px; height: 60px; }
.an-writer__body { display: flex; flex-direction: column; gap: 4px; }
.an-writer__name { font-size: 16px; font-weight: 900; }
.an-writer__bio { font-size: 12px; color: #555; line-height: 1.8; }
@media (min-width: 1024px) { .an-writer { padding: 24px; } .an-writer .an-voice__icon { width: 72px; height: 72px; } .an-writer__bio { font-size: 14px; } }

.an-related { background: var(--tint); padding: 36px 0; margin-top: 36px; }
@media (min-width: 1024px) { .an-related { padding: 64px 0; margin-top: 0; } }