/* =========================================================
   デザインテンプレート C. Sunny Pop（かっこかわいい）
   砂浜のようなクリーム色に、ポラロイド風の写真とステッカー風の飾り。丸い文字（Zen Maru Gothic・Fredoka）。
   body.tpl-pop のときだけ効く（smapochi-core.php が、個人向けでこのデザインを選んだブログに付ける）。
   差し色はお店のキーカラー（--blog-key-color）と、それを白に混ぜた淡い色（--tpl-key2）。
   2026-09-19 清水ひなのさんが確認資料から選んだ（差し色はコーラル）
   ========================================================= */
body.tpl-pop {
  --tpl-bg: #fff7ec;
  --tpl-ink: #43302f;
  --tpl-sub: #94807b;
  --tpl-key: var(--blog-key-color);
  --tpl-key2: #ffd6cf;
  --tpl-key2: color-mix(in srgb, var(--blog-key-color) 30%, #fff);
  --tpl-en: 'Fredoka', 'Zen Maru Gothic', sans-serif;
  --tpl-jp: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
  background: var(--tpl-bg) !important; /* テーマの body { background:#fff !important } を上書き */
  color: var(--tpl-ink);
  font-family: var(--tpl-jp);
  font-weight: 500;
}
body.tpl-pop a:hover { color: inherit; }

/* ---------- ヘッダー ---------- */
body.tpl-pop .blog-header { background: rgba(255, 247, 236, 0.94); border-bottom: 0; box-shadow: none; }
body.tpl-pop .blog-header__store-name { color: var(--tpl-ink); }
body.tpl-pop .blog-header__wordmark { font-family: var(--tpl-en); font-weight: 600; font-size: 21px; letter-spacing: 0.02em; text-transform: lowercase; }
body.tpl-pop .blog-header__wordmark b { color: var(--tpl-key); font-weight: 600; }

/* ---------- トップの帯（parts/hero.php）：ポラロイド風の写真 ---------- */
body.tpl-pop .pb-hero { background: transparent; padding: 26px 0 0; }
body.tpl-pop .pb-hero__media {
  width: 260px; max-width: 72vw; margin: 0 auto;
  border: 10px solid #fff; border-bottom-width: 36px; background: #fff;
  box-shadow: 0 10px 24px rgba(67, 48, 47, 0.18); transform: rotate(-3deg);
}
body.tpl-pop .pb-hero__img { height: auto; aspect-ratio: 5 / 6; }
/* マスキングテープ */
body.tpl-pop .pb-hero__media::before,
body.tpl-pop .pb-hero__media::after {
  content: ""; position: absolute; top: -18px; width: 78px; height: 24px; pointer-events: none;
  background: var(--tpl-key2); opacity: 0.9;
}
body.tpl-pop .pb-hero__media::before { left: -22px; transform: rotate(-24deg); }
body.tpl-pop .pb-hero__media::after { right: -22px; transform: rotate(22deg); }
body.tpl-pop .pb-hero__mark { display: none; }
body.tpl-pop .pb-hero__body { padding: 22px 22px 4px; text-align: center; }
body.tpl-pop .pb-hero__en { font-family: var(--tpl-en); font-weight: 600; font-size: 16px; letter-spacing: 0.14em; color: var(--tpl-sub); }
body.tpl-pop .pb-hero__en b { color: var(--tpl-key); font-weight: 600; }
body.tpl-pop .pb-hero__name {
  display: inline; margin: 0; padding: 0 6px; font-size: 28px; letter-spacing: 0.06em; color: var(--tpl-ink);
  background: linear-gradient(transparent 62%, var(--tpl-key2) 62%);
}
body.tpl-pop .pb-hero__tag { margin: 12px 0 14px; font-size: 14px; line-height: 1.7; color: var(--tpl-ink); }
body.tpl-pop .pb-hero__stats { margin: 0 0 14px; }
body.tpl-pop .pb-hero__stats span {
  background: #fff; color: var(--tpl-ink); border: 2px solid var(--tpl-ink); border-radius: 14px;
  padding: 5px 10px; box-shadow: 2px 2px 0 var(--tpl-ink);
}
body.tpl-pop .pb-hero__stats span:nth-child(2) { transform: rotate(2deg); }
body.tpl-pop .pb-hero__stats span:nth-child(3) { transform: rotate(-2deg); }
body.tpl-pop .pb-hero__stats small { color: var(--tpl-sub); opacity: 1; }
/* 最新の結果：資格のステッカーやボタンと同じ「白・濃い線・ずらした影」のカードに、
   「LATEST RESULT」のラベルを上の線にまたがせて貼る
   （はじめは点線の枠で、画像をアップロードする所のように見えた・2026-09-19 ユーザー指摘） */
body.tpl-pop .pb-hero__latest {
  position: relative; margin: 24px 0 16px; padding: 22px 16px 12px;
  background: #fff; color: var(--tpl-ink);
  border: 2px solid var(--tpl-ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--tpl-ink);
}
body.tpl-pop a.pb-hero__latest:hover { color: var(--tpl-ink); opacity: 1; background: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--tpl-ink); }
body.tpl-pop .pb-hero__latest small {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  padding: 3px 14px; border: 2px solid var(--tpl-ink); border-radius: 999px;
  background: var(--tpl-key); color: #fff; opacity: 1; white-space: nowrap;
  font-family: var(--tpl-en); font-size: 11px; letter-spacing: 0.12em;
}
body.tpl-pop .pb-hero__latest b { font-size: 15px; }
body.tpl-pop .pb-hero__latest em { font-size: 20px; }

/* PC の幅では、ポラロイドの写真と文字を横に並べる（Athlete と同じ構成）。右側は左そろえ。
   写真が無い店舗は :has で1列のまま */
@media (min-width: 900px) {
  body.tpl-pop .pb-hero:has(.pb-hero__media) {
    display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 500px);
    justify-content: center; align-items: center; column-gap: 72px;
    max-width: 1080px; margin: 0 auto; padding: 56px 24px 28px;
  }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__media { width: 340px; max-width: 100%; margin: 0 auto; }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__body { margin: 0; padding: 0; max-width: none; text-align: left; }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__en { font-size: 18px; }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__name { font-size: 36px; padding: 0 4px; }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__tag { font-size: 15px; margin: 16px 0 18px; }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__stats { justify-content: flex-start; }
  body.tpl-pop .pb-hero:has(.pb-hero__media) .pb-hero__latest { text-align: center; }
}

/* ---------- ボタン ---------- */
body.tpl-pop .pb-btn--ig {
  background: var(--tpl-key); color: #fff; border: 2px solid var(--tpl-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--tpl-ink);
}
body.tpl-pop .pb-btn--ig:hover { background: var(--tpl-key); color: #fff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--tpl-ink); }
body.tpl-pop .pb-btn--related {
  margin-top: 12px; background: var(--tpl-key2); color: var(--tpl-ink); border: 2px solid var(--tpl-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--tpl-ink);
}
body.tpl-pop .pb-btn--related:hover { color: var(--tpl-ink); border-color: var(--tpl-ink); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--tpl-ink); }

/* ---------- カテゴリの絞り込み・記事一覧（ポラロイド風のカード） ---------- */
body.tpl-pop .smapochi-archive,
body.tpl-pop .smapochi-single,
body.tpl-pop .smapochi-related { background: transparent; }
body.tpl-pop .smapochi-filter__btn {
  background: #fff !important; border: 2px solid #ead9c8 !important; color: var(--tpl-ink) !important; border-radius: 999px !important; font-weight: 700;
}
body.tpl-pop .smapochi-filter__btn:hover { border-color: var(--tpl-key) !important; color: var(--tpl-key) !important; }
body.tpl-pop .smapochi-filter__btn.is-active { background: var(--tpl-ink) !important; border-color: var(--tpl-ink) !important; color: #fff !important; }
body.tpl-pop .smapochi-card__link {
  display: block; background: #fff; padding: 8px 8px 12px; box-shadow: 0 6px 14px rgba(67, 48, 47, 0.12); color: var(--tpl-ink);
}
body.tpl-pop .smapochi-card:nth-child(odd) .smapochi-card__link { transform: rotate(-1.5deg); }
body.tpl-pop .smapochi-card:nth-child(even) .smapochi-card__link { transform: rotate(1.5deg); }
/* 写真の比率は店舗設定（アイキャッチ比率）に従う。おすすめ記事も同じ（テーマはスマホで 4:3 にしていて顔が切れやすい） */
body.tpl-pop .smapochi-card__thumb,
body.tpl-pop .smapochi-related .smapochi-card__thumb { aspect-ratio: var(--blog-card-ratio, 1 / 1); border-radius: 0; }
body.tpl-pop .smapochi-card__badge { background: var(--tpl-key2); color: var(--tpl-ink); border-radius: 999px; }
body.tpl-pop .smapochi-card__body { padding: 10px 4px 0; }
body.tpl-pop .smapochi-card__date { color: var(--tpl-sub); font-family: var(--tpl-en); }
body.tpl-pop .smapochi-card__title { color: var(--tpl-ink); }
body.tpl-pop .smapochi-loadmore__button {
  background: #fff !important; color: var(--tpl-ink) !important; border: 2px solid var(--tpl-ink) !important; border-radius: 999px !important; box-shadow: 3px 3px 0 var(--tpl-ink);
}
body.tpl-pop .smapochi-loadmore__button:hover { background: var(--tpl-key2) !important; color: var(--tpl-ink) !important; }

/* ---------- 記事 ---------- */
body.tpl-pop .smapochi-single__title { color: var(--tpl-ink); }
body.tpl-pop .smapochi-single__date,
body.tpl-pop .smapochi-single__writer,
body.tpl-pop .smapochi-single__meta { color: var(--tpl-sub); }
body.tpl-pop .smapochi-gallery-viewer__main { background: #fff; border: 8px solid #fff; box-shadow: 0 8px 18px rgba(67, 48, 47, 0.15); }
body.tpl-pop .smapochi-gallery-viewer__thumb.is-active { outline-color: var(--tpl-key); border-color: var(--tpl-key); }
body.tpl-pop .smapochi-single__content { color: var(--tpl-ink); font-family: var(--tpl-jp); }
/* 見出しの蛍光ペン風の線は、背景ではなく太い下線で引く。下線は行ごとに文字の下だけに付くので、2行になっても自然
   （2026-09-19 はじめは見出し全体の背景にしていて、2行になると1行目に線が無く、2行目の下に枠いっぱいの帯が出た） */
body.tpl-pop .smapochi-single__content h2 {
  color: var(--tpl-ink); background: none; border: 0; border-radius: 0; padding: 0;
  text-decoration-line: underline;
  text-decoration-color: var(--tpl-key2);
  text-decoration-thickness: 0.42em;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}
/* 🌊 には線を引かない（inline-block にすると親の下線が付かない） */
body.tpl-pop .smapochi-single__content h2::before { content: "\1F30A\00A0"; display: inline-block; }
body.tpl-pop .smapochi-single__content strong { background: linear-gradient(transparent 62%, var(--tpl-key2) 62%); }
body.tpl-pop .smapochi-single__content a { color: var(--tpl-key); }
body.tpl-pop .smapochi-single__content ul li::before { background: var(--tpl-key); }
body.tpl-pop .smapochi-single__content .pr-notice { background: #fff; border-color: #ead9c8; color: var(--tpl-sub); }

/* ---------- 記事の最後のプロフィール（parts/profile.php） ---------- */
body.tpl-pop .pb-profile { background: #fff; border: 2px solid var(--tpl-ink); border-radius: 26px; box-shadow: 4px 4px 0 var(--tpl-ink); color: var(--tpl-ink); }
body.tpl-pop .pb-profile__label { font-family: var(--tpl-en); font-size: 14px; color: var(--tpl-key); }
body.tpl-pop .pb-profile__photo { border: 0; box-shadow: none; outline: 3px dashed var(--tpl-key); outline-offset: 3px; }
body.tpl-pop .pb-profile__en { font-family: var(--tpl-en); }
body.tpl-pop .pb-profile__en b { color: var(--tpl-key); }
body.tpl-pop .pb-profile__role { color: var(--tpl-sub); }
body.tpl-pop .pb-profile__bio { position: relative; background: var(--tpl-bg); border-radius: 16px; padding: 10px 14px; }
body.tpl-pop .pb-profile__bio::before {
  content: ""; position: absolute; top: -8px; left: 28px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--tpl-bg);
}
body.tpl-pop .pb-profile__results li { border-bottom: 1px dashed #ead9c8; }
body.tpl-pop .pb-profile__year { font-family: var(--tpl-en); color: var(--tpl-key); }
body.tpl-pop .pb-sponsors__label { font-family: var(--tpl-en); color: var(--tpl-sub); }
body.tpl-pop .pb-sponsors__list span { background: var(--tpl-bg); border: 0; border-radius: 999px; color: var(--tpl-ink); }

/* ---------- ほかの記事・フッター・右下のボタン ---------- */
body.tpl-pop .smapochi-related { border-top-color: #ead9c8; }
body.tpl-pop .smapochi-related__heading { color: var(--tpl-ink); font-family: var(--tpl-jp); }
body.tpl-pop .blog-footer { background: transparent; }
body.tpl-pop .blog-footer__nav a,
body.tpl-pop .blog-footer__copy { color: var(--tpl-sub); }
body.tpl-pop .blog-float-cta__button {
  background: var(--tpl-key); color: #fff; border: 2px solid var(--tpl-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--tpl-ink);
}
body.tpl-pop .blog-float-cta__button:hover { background: var(--tpl-key); color: #fff; }

/* ---------- 固定ページ（プライバシーポリシーなど） ---------- */
body.tpl-pop .blog-page,
body.tpl-pop .smapochi-page { background: transparent; color: var(--tpl-ink); }
body.tpl-pop .blog-page a,
body.tpl-pop .smapochi-page a { color: var(--tpl-key); }
body.tpl-pop .blog-page__store-contact { background: #fff; border-color: #ead9c8; color: var(--tpl-ink); }