@charset "UTF-8";

/* ============================================================
   推しセレ — コーラルピンクのエディトリアル配色
   OGP画像（assets/ogp.png）から色を取っている。
   ハート #ef6766 ／ 淡いピンク #fde4de ／ クリーム #fdf9f1
   ただし --coral は白文字を乗せる背景色なので、画像のハートそのままだと
   コントラストが3.09しかない。白文字が読める濃さまで落として使っている。
   ============================================================ */
:root {
  /* 人物の画像枠のサイズ。人物ページと一覧カードで同じ値を使う。
     Instagram埋め込みは min-width:326px を前提に作られているので、幅はそれ以上を確保する。
     高さは「アカウント名の行＋写真」がちょうど収まる値。Instagramは写真の縦横比
     （正方形・縦長・複数枚）で中の組み方が変わるため、ずれたらこの2つを増減させて合わせる */
  --ig-width: 348px;
  --ig-crop: 404px;

  /* 白文字を乗せる背景色。白とのコントラスト 4.39（旧オレンジ #e2632f は 3.47） */
  --coral: #d93e58;
  /* 明るい地の上に置く文字色。白地 6.09／紙地 5.80 でAAを満たす */
  --coral-deep: #b92843;
  --coral-pale: #fde4de;
  /* 本文の色。補助テキストが薄いと読みにくいので、WCAG AA（4.5:1）を満たす濃さにしている */
  --ink: #1a1114;
  --ink-soft: #574047;
  --ink-faint: #231b1e;
  /* 人物・商品の説明文用。補助テキストより濃く、本文よりはやわらかい */
  --ink-desc: #36272c;
  --paper: #ffffff;
  --panel: #ffffff;
  --line: #f7dedb;
  --line-strong: #f0bcbb;
  --shadow-card: 0 8px 22px -16px rgba(185, 40, 67, 0.32);
  --shadow-feature: 0 10px 28px -18px rgba(185, 40, 67, 0.35);
}

:root[data-theme="dark"] {
  --coral: #f3868c;
  --coral-deep: #f7a8ae;
  --coral-pale: #3a1d22;
  --ink: #f6ebe9;
  --ink-soft: #cbb2b6;
  --ink-faint: #ece0e1;
  --ink-desc: #e3d3d5;
  --paper: #1e1315;
  --panel: #27191c;
  --line: #3e272c;
  --line-strong: #503138;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral: #f3868c;
    --coral-deep: #f7a8ae;
    --coral-pale: #3a1d22;
    --ink: #f6ebe9;
    --ink-soft: #cbb2b6;
    --ink-faint: #ece0e1;
    --ink-desc: #e3d3d5;
    --paper: #1e1315;
    --panel: #27191c;
    --line: #3e272c;
    --line-strong: #503138;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3, h4 { font-weight: 800; text-wrap: balance; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* ---------- ヘッダー ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 28px; flex-wrap: wrap;
}
.logo { display: flex; align-items: baseline; gap: 2px; text-decoration: none; }
.logo .mark {
  font-weight: 900; font-size: 25px; letter-spacing: 0.01em;
  color: var(--ink); font-style: italic;
}
.logo .mark em { color: var(--coral); font-style: italic; }

nav.main-nav { display: flex; gap: 26px; font-size: 13.5px; font-weight: 700; }
nav.main-nav a {
  text-decoration: none; color: var(--ink-soft);
  padding-bottom: 4px; border-bottom: 3px solid transparent;
}
nav.main-nav a:hover,
nav.main-nav a[aria-current] { color: var(--ink); border-color: var(--coral); }

form.search-form {
  display: flex; align-items: center; background: var(--coral-pale);
  border-radius: 999px; padding: 8px 8px 8px 16px; min-width: 200px;
}
form.search-form input {
  border: none; background: transparent; outline: none; font-size: 13px;
  flex: 1; font-family: inherit; color: var(--ink); min-width: 0;
}
form.search-form button {
  border: none; background: var(--coral); color: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
form.search-form svg { width: 13px; height: 13px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* ---------- マストヘッド（TOP） ---------- */
.masthead {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  padding: 22px 28px 26px; color: #fff;
}
.masthead-inner { max-width: 1080px; margin: 0 auto; }
.masthead .eyebrow {
  font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  opacity: 0.9; margin: 0 0 7px;
}
.masthead h1 {
  font-size: clamp(22px, 3vw, 30px); line-height: 1.45;
  margin: 0 0 10px; max-width: 640px;
}
/* 説明文はPC幅で1行に収める（chではなく実幅で指定しないと日本語で折り返す） */
.masthead p {
  font-size: 13.5px; line-height: 1.65; max-width: 100%;
  opacity: 0.95; margin: 0 0 14px;
}

.cat-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-pill {
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 16px;
  border-radius: 999px; text-decoration: none;
}
.cat-pill:hover { background: #fff; color: var(--coral-deep); }

/* ---------- ページ本体 ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 32px 28px 96px; }
.page.narrow { max-width: 760px; padding-top: 36px; }

.breadcrumb {
  font-size: 12px; color: var(--ink-soft);
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 22px;
}
.breadcrumb a { color: var(--coral-deep); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink-desc); }

.page-head { max-width: 680px; margin: 0 0 26px; }
.page-head h1 { font-size: clamp(24px, 3.2vw, 30px); margin: 0 0 12px; }
.page-head p { font-size: 14px; color: var(--ink-desc); margin: 0; }

/* ---------- セクション見出し ---------- */
.section-block { border-top: 3px solid var(--coral); margin: 44px 0 0; }
/* メインビジュアル直下は余白を空けすぎない */
.page > .section-block:first-child { margin-top: 0; }
/* 見出し（h2）として出す。h1→h2→カードのh3 の順を崩さないため */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral); color: #fff; font-size: 13px; font-weight: 800;
  padding: 6px 16px 6px 12px; border-radius: 0 999px 999px 0;
  margin: 0;
}
/* 見出しラベルと「すべて見る」を1行に並べる（縦の余白を稼ぐ） */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin: 0 0 18px;
}
.section-head a.view-all {
  font-size: 12.5px; color: var(--coral-deep); text-decoration: none; font-weight: 700;
}
.section-head a.view-all:hover { text-decoration: underline; }

/* ---------- 絞り込み・並び替え ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin: 0 0 8px;
}
.filter-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-chip {
  font-size: 13px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel);
  color: var(--ink-soft); text-decoration: none; font-weight: 700;
}
.filter-chip:hover,
.filter-chip[aria-current] { background: var(--coral); border-color: var(--coral); color: #fff; }

.sort-select {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
}
.sort-select select {
  font-family: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel);
  color: var(--ink); font-weight: 700;
}

.result-count {
  font-size: 12.5px; color: var(--ink-faint); margin: 18px 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- カード ---------- */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 18px; margin-bottom: 40px;
}
/* 人物カードはInstagram埋め込みが入るので、幅を「埋め込みの幅＋カードの左右パディング」に固定する。
   これを下回るとInstagram側の min-width に負けて埋め込みがはみ出し、
   逆に伸ばすと画像だけが枠の中央に浮いて間延びする。
   カラムを伸ばさず、グリッドごと中央に寄せることで、どのページでも同じ見た目になる */
.card-grid--people {
  grid-template-columns: repeat(auto-fill, calc(var(--ig-width) + 44px));
  justify-content: center;
}

.avatar {
  border-radius: 50%; color: var(--coral-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; flex-shrink: 0;
  background: linear-gradient(145deg, var(--coral-pale) 0%, #f6d3bd 100%);
}

/*
 * 写真がない人物の頭文字アイコン。
 * 色は氏名から決めてPHPがCSS変数で渡すので、同じ人はいつも同じ色になる。
 */
.avatar-initial {
  background: linear-gradient(145deg, var(--av-from) 0%, var(--av-to) 100%);
  color: var(--av-text);
  letter-spacing: 0.02em;
}
:root[data-theme="dark"] .avatar-initial {
  background: linear-gradient(145deg, var(--av-from-d) 0%, var(--av-to-d) 100%);
  color: var(--av-text-d);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar-initial {
    background: linear-gradient(145deg, var(--av-from-d) 0%, var(--av-to-d) 100%);
    color: var(--av-text-d);
  }
}

.avatar-sm { width: 64px;  height: 64px;  font-size: 24px; }
.avatar-md { width: 104px; height: 104px; font-size: 38px; }
.avatar-lg { width: 144px; height: 144px; font-size: 52px; }

/* 写真アイコン。縦横比が違う写真でも顔が切れにくいよう上寄せで切り抜く */
.avatar-photo {
  object-fit: cover; object-position: center top;
  background: var(--coral-pale); display: block;
  box-shadow: 0 4px 14px -6px rgba(201, 79, 34, 0.45);
}

/* 写真のクレジット表記（CC BY / CC BY-SA は表示が利用条件） */
.image-credit {
  font-size: 10.5px; color: var(--ink-faint); margin: 10px 0 0; line-height: 1.6;
}
.image-credit a { color: var(--ink-faint); }

/* 商品画像（一覧カード） */
.tile-photo {
  aspect-ratio: 4 / 3; margin: -22px -22px 4px; overflow: hidden;
  border-radius: 16px 16px 0 0; background: var(--coral-pale);
}
.tile-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 商品画像（詳細ページ） */
.product-hero {
  margin: 0 0 26px; background: var(--panel); border-radius: 16px;
  border: 1px solid var(--line);
  padding: 20px; box-shadow: var(--shadow-card); text-align: center;
}
.product-hero-photo {
  max-height: 320px; width: auto; max-width: 100%;
  object-fit: contain; display: inline-block;
}
.product-hero .image-credit { text-align: right; margin-top: 12px; }

.ribbon-tag {
  display: inline-block; background: var(--coral); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 11px;
  border-radius: 999px; width: fit-content;
}
/* 詳細ページではカテゴリ一覧へのリンクになる（カード内では span のまま） */
a.ribbon-tag:hover, a.detail-tag:hover { background: var(--coral-deep); }
.cat-mini {
  display: inline-block; font-size: 10px; color: var(--ink-faint);
  border: 1px solid var(--line-strong); padding: 2px 8px; border-radius: 999px;
}

.verified-mini {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  color: var(--coral-deep); font-weight: 800; background: var(--coral-pale);
  padding: 3px 9px; border-radius: 999px; width: fit-content;
}
.verified-mini svg { width: 9px; height: 9px; }

/* 地の色（--paper）とカードの色（--panel）が同じ白なので、
   影だけでは境界が見えない。薄いピンクの線で範囲を示す */
.person-card, .product-tile {
  background: var(--panel); border-radius: 16px; padding: 22px;
  border: 1px solid var(--line);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
}
/* カードの画像枠。写真・Instagram埋め込み・頭文字アイコンのどれが入っても
   同じ大きさになるようにして、カードの高さを揃える */
/* 幅も人物ページと揃える。カードが広がっても枠は広げない。
   枠の幅が変わるとInstagram側の組み方（写真の高さ）も変わり、切り取る位置がずれるため */
.person-card .card-media {
  position: relative;
  width: var(--ig-width); max-width: 100%; margin-inline: auto;
  height: var(--ig-crop);
  border-radius: 14px; overflow: hidden;
  background: var(--coral-pale);
  display: flex; align-items: center; justify-content: center;
}
.card-media-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.person-card .card-media .profile-instagram { width: 100%; }
/* 大きな枠に小さな丸だと間延びするので、頭文字アイコンは枠に合わせて大きくする */
.person-card .card-media .avatar {
  width: 58%; height: 58%; font-size: 84px;
}
/*
 * 埋め込みはiframeなので、そのままだとクリックを奪われてカードのリンクが働かない。
 * 透明な層をかぶせて、カードのどこを押しても人物ページへ行けるようにする。
 */
.person-card .card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}

.person-card h3, .product-tile h3 { margin: 0; font-size: 15.5px; }
.person-card p.bio { font-size: 12.5px; color: var(--ink-desc); margin: 0; line-height: 1.7; }
.person-card .stat { font-size: 12px; color: var(--coral-deep); font-weight: 700; }
.product-tile p.brand { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* 「誰の愛用品か」がカードの主役なので、商品名より先に強く見せる */
.product-tile .used-by {
  font-size: 12px; color: var(--coral-deep); font-weight: 700; margin: 0;
}
.product-tile .used-by strong { font-size: 13.5px; }

.card-placeholder {
  border: 1.5px dashed var(--line-strong); border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--ink-faint); font-size: 12.5px; min-height: 168px; text-align: center;
}

/* ---------- TOP：一覧へ送る導線 ---------- */
/* トップの人物カードは一覧と同じものを使うので、専用のレイアウトは持たない */
.more-link { margin: 4px 0 0; text-align: center; }
.more-link a {
  display: inline-block;
  padding: 12px 28px; border-radius: 999px;
  border: 1.5px solid var(--coral); color: var(--coral-deep);
  font-size: 13.5px; font-weight: 800; text-decoration: none;
}
.more-link a:hover { background: var(--coral); color: #fff; }

/* ---------- 人物詳細 ---------- */
.profile-card {
  background: var(--panel); border-radius: 20px; padding: 30px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-feature); position: relative; overflow: hidden;
  margin-bottom: 40px;
}
.profile-card::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 150px; height: 150px; background: var(--coral-pale);
  border-radius: 0 0 0 150px;
}
.profile-head {
  display: flex; gap: 22px; align-items: center;
  margin-bottom: 16px; position: relative;
}
/* 人物ページの顔写真は主役なので、他ページより一回り大きく見せる。
   狭い画面では氏名と並べられなくなるため、画面幅に応じて縮める */
.profile-head .avatar-lg {
  width: clamp(132px, 30vw, 176px);
  height: clamp(132px, 30vw, 176px);
  font-size: clamp(48px, 11vw, 62px);
}

/* 写真が見つからない人物は、顔写真の位置にそのまま本人のInstagram投稿を置く。
   Instagram側が min-width:326px を前提にしているので、その幅が収まる列にする */
.profile-head.has-instagram { align-items: flex-start; }
.profile-instagram {
  margin: 0; position: relative;
  flex: 0 0 auto; width: var(--ig-width); max-width: 100%;
}
/*
 * 埋め込みの中身（いいね欄・キャプション）はCSSでは隠せない。
 * instagram.comのiframeなので、同一オリジンポリシーにより親のCSSは中まで届かないため。
 * そこで外側の枠の高さを固定し、写真から下を切り落とす。
 * 投稿者名の行は残す（誰の投稿かを示す表示なので、消さずに見せておく）。
 */
.profile-instagram-crop {
  height: var(--ig-crop);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
/* 枠側で角丸と境界を付けるので、埋め込み自身の枠は消して二重にしない */
.profile-instagram-crop .instagram-media {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Instagram側のCSSは min-width:326px を前提にしている。
   そこは尊重し、余白の取り方（margin）と角丸だけ上書きする */
.profile-instagram .instagram-media {
  margin: 0 !important;
  max-width: 100% !important;
  border-radius: 14px !important;
}
/*
 * Instagramのスクリプトは、埋め込み内から親へ高さを通知して iframe をリサイズする。
 * この通知が届かない環境（プライバシー設定や拡張機能で遮られる場合）では高さが0のままになり、
 * 投稿が読み込めているのに何も見えなくなる。写真が見える高さを下限として持たせておく。
 * 通知が届く環境では、Instagramがこれより大きい実際の高さを設定するので影響しない。
 */
.profile-instagram iframe.instagram-media { min-height: 500px; }
.profile-instagram figcaption {
  margin-top: 8px;
  font-size: 11.5px; color: var(--ink-faint);
}
/* 埋め込みが表示できなかったときも、ここから本人の投稿へ行けるようにしておく */
.profile-instagram figcaption a {
  color: var(--coral-deep); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.profile-info h1 { font-size: clamp(22px, 3.2vw, 27px); margin: 4px 0; }
/* 見出しに「の愛用品」を含めつつ、氏名が主役に見えるよう小さく添える */
.profile-info h1 .h1-suffix {
  font-size: 0.6em; color: var(--ink-soft); font-weight: 700; margin-left: 3px;
}
.profile-info .reading { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
.profile-card p.bio { font-size: 14px; color: var(--ink-desc); margin: 0; position: relative; }

.product-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; }
.product-item {
  display: flex; align-items: center; gap: 14px; background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; text-decoration: none;
  color: inherit; box-shadow: var(--shadow-card);
}
.item-avatar {
  width: 82px; height: 82px; border-radius: 14px; background: var(--panel);
  color: var(--coral-deep); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--line);
}
.item-avatar svg { width: 26px; height: 26px; }
/* 商品画像は背景が白いものが多いので、切り抜かず全体を収める */
.item-photo { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-item .info { min-width: 0; }
.product-item .info h3 { margin: 0 0 3px; font-size: 15px; }
.product-item .info p { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.product-item .arrow { margin-left: auto; color: var(--coral-deep); font-size: 20px; flex-shrink: 0; }

/* ---------- 商品詳細 ---------- */
.detail-tag {
  display: inline-block; background: var(--coral); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 13px;
  border-radius: 999px; margin-bottom: 16px;
}
.detail-title { font-size: clamp(24px, 3.6vw, 31px); line-height: 1.55; margin: 0 0 18px; }

.meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 12.5px; color: var(--ink-faint); margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}
.verified-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--coral-deep); background: var(--coral-pale);
  padding: 5px 12px 5px 9px; border-radius: 999px; font-weight: 700;
}
.verified-badge svg { width: 12px; height: 12px; }

article p { max-width: 60ch; font-size: 15.5px; margin: 0 0 22px; }
article h2 { font-size: 18px; margin: 40px 0 16px; }

/* 記事の下に置く関連リンク。見出しは本文と同じ大きさに揃える */
.related { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.related h2 { font-size: 18px; margin: 0 0 16px; }
.related .card-grid + h2 { margin-top: 40px; }
.related-more { margin: 16px 0 0; font-size: 14px; }
.related-more a { color: var(--coral-deep); font-weight: 700; }

.quote-card {
  background: var(--panel); border-radius: 16px; padding: 24px 26px;
  margin: 18px 0 12px; box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
}
.quote-card blockquote {
  margin: 0 0 12px; font-size: 16.5px; line-height: 1.9;
  color: var(--ink); font-weight: 700;
}
.quote-attribution { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.source-note { font-size: 12px; color: var(--ink-faint); margin: 0 0 32px; }
.source-note a { color: var(--coral-deep); }

.feature-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.feature-list li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; max-width: 60ch;
}
.feature-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); flex-shrink: 0; margin-top: 9px;
}

.table-scroll { overflow-x: auto; margin: 8px 0; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-table thead tr { border-bottom: 2px solid var(--coral); }
.compare-table th {
  text-align: left; padding: 9px 12px; font-weight: 800;
  color: var(--coral-deep); font-size: 11.5px; white-space: nowrap;
}
.compare-table td { padding: 12px; border-bottom: 1px solid var(--line); }
.compare-table td.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare-table tr.is-official td { background: var(--coral-pale); }
/* 文字リンクだと押せると気づかれにくいので、行ごとにボタンにする */
.compare-table a.buy-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--coral); color: #fff; border: 1px solid var(--coral);
  font-size: 12.5px; font-weight: 800; text-decoration: none;
}
.compare-table a.buy-link:hover {
  background: var(--coral-deep); border-color: var(--coral-deep); text-decoration: none;
}
.compare-note { font-size: 11.5px; color: var(--ink-faint); margin: 4px 0 40px; }

/* ---------- 購入先ボタン（商品ページの上下に置く） ---------- */
.buy-cta {
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: var(--panel); padding: 20px 22px; margin: 0 0 32px;
  box-shadow: var(--shadow-card);
}
.buy-cta-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.buy-cta-title { font-size: 14.5px; font-weight: 800; color: var(--ink); }
/* 広告であることの表示。ボタンと同じ視界に入る位置から動かさないこと */
.pr-mark {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; line-height: 1;
  color: var(--ink-soft); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: 3px 6px;
}
.buy-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
/* 1つ目の販売先は塗り、2つ目以降は白抜きにして主従をつける */
.buy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 190px; padding: 14px 24px; border-radius: 999px;
  font-size: 14.5px; font-weight: 800; text-decoration: none;
  background: var(--coral); color: #fff; border: 2px solid var(--coral);
}
.buy-btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); }
.buy-btn--outline { background: var(--panel); color: var(--coral-deep); }
.buy-btn--outline:hover { background: var(--coral-pale); color: var(--coral-deep); border-color: var(--coral-deep); }
.buy-cta-note { font-size: 11.5px; color: var(--ink-faint); margin: 12px 0 0; }

@media (max-width: 560px) {
  /* 指で押しやすいよう、狭い画面ではボタンを横幅いっぱいにする */
  .buy-btn { width: 100%; min-width: 0; }
}

.empty-note {
  background: var(--panel); border: 1.5px dashed var(--line-strong);
  border-radius: 14px; padding: 20px; text-align: center;
  color: var(--ink-faint); font-size: 13px; margin: 0 0 32px;
}

.cta-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 20px; background: var(--coral); color: #fff;
  font-size: 15px; font-weight: 800; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 22px -12px rgba(201, 79, 34, 0.5);
}
.cta-note { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- 開示・方針パネル ---------- */
/* サイトの説明文。読み物として読ませたいので、パネルにせず本文の見た目にする */
.intro-block { max-width: 760px; margin: 56px 0 0; }
.intro-block h2 {
  font-size: 18px; line-height: 1.6; margin: 0 0 16px;
  padding-left: 14px; border-left: 4px solid var(--coral);
}
.intro-block h3 { font-size: 15px; margin: 26px 0 10px; color: var(--ink); }
.intro-block p { font-size: 14px; line-height: 1.95; color: var(--ink-desc); margin: 0 0 16px; }
.intro-block p:last-child { margin-bottom: 0; }
.intro-block strong { color: var(--ink); font-weight: 800; }
.intro-block a { color: var(--coral-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.policy-strip, .disclosure-panel {
  background: var(--coral-pale); border-radius: 16px; padding: 22px 26px;
  font-size: 13px; color: var(--ink-soft); line-height: 1.9;
}
.policy-strip { margin: 60px 0 0; padding: 28px 30px; border-radius: 18px; }
.policy-strip h2 { font-size: 15px; margin: 0 0 14px; color: var(--coral-deep); }
.policy-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.policy-strip li::before { content: "☀ "; color: var(--coral); font-weight: 700; }
.disclosure-panel { margin-top: 48px; }
.disclosure-panel .title {
  font-size: 12px; letter-spacing: 0.06em; color: var(--coral-deep);
  font-weight: 800; margin: 0 0 10px;
}
.disclosure-panel dl {
  margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: 6px 16px; font-size: 12.5px;
}
.disclosure-panel dt { color: var(--ink); font-weight: 700; white-space: nowrap; }
.disclosure-panel dd { margin: 0; word-break: break-all; }
.disclosure-panel a { color: var(--coral-deep); }

/* ---------- ページ送り ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 8px 0 0; font-size: 13px; }
.pagination a, .pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px;
  border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-weight: 700;
}
.pagination a:hover { background: var(--coral-pale); color: var(--coral-deep); }
.pagination [aria-current] { background: var(--coral); color: #fff; }

/* ---------- フッター ---------- */
.site-footer {
  margin-top: 64px; padding: 30px 28px; font-size: 12px;
  color: var(--ink-faint); border-top: 1px solid var(--line);
}
.foot-inner { max-width: 1080px; margin: 0 auto; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.foot-links a { color: var(--coral-deep); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* アフィリエイトプログラムの規約上必要な表示。控えめに、ただし読める大きさで */
.affiliate-notice {
  font-size: 10px; line-height: 1.7; color: var(--ink-faint);
  opacity: 0.75; margin: 14px 0 0;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 720px) {
  .masthead { padding: 22px 18px 26px; }
  .page { padding: 32px 18px 72px; }
}

@media (max-width: 560px) {
  .site-header { padding: 16px 18px; }
  form.search-form { min-width: 0; width: 100%; order: 3; }
  .page.narrow { padding: 28px 18px 72px; }
  .profile-head { flex-direction: column; }
  .toolbar { flex-direction: column; align-items: flex-start; }
  /* 画面幅がInstagramの想定する326pxを下回るので、縮めることを許可したうえで
     切り取る高さもその組み方に合わせる */
  :root { --ig-crop: 315px; --ig-width: 100%; }
  .card-grid--people { grid-template-columns: 1fr; }
  /* 許可しないと埋め込みがカードからはみ出して切れてしまう */
  .profile-instagram .instagram-media { min-width: 0 !important; }
  /* 幅が狭い分だけ写真も小さくなるので、下限の高さも合わせて下げる */
  .profile-instagram iframe.instagram-media { min-height: 430px; }
}