/* ─────────────────────────────────────────────
   ホワイトニングステーションHAKUBA ブログ — 記事ページ・一覧ページ共通
   トップページ（index.html）の <style> とは独立。
   トークンの値はトップと同じものを複製している（見た目を揃えるため）。
   ───────────────────────────────────────────── */
:root {
  --navy-950: #0a2224;
  --navy-900: #0e2f31;
  --navy-800: #122e30;
  --navy-700: #174245;
  --navy-600: #227177;
  --navy-500: #308b91;
  --navy-300: #9dc4c6;

  --cream-000: #ffffff;
  --cream-100: #f4fbfb;
  --cream-200: #e8f6f7;
  --cream-300: #cfebed;

  --gold-500: #69c2c8;
  --mustard: var(--gold-500);

  --hair: rgba(18, 46, 48, .14);
  --text-body: #45595a;
  --text-muted: #5d6f6e;

  --font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
  --font-body: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-logo: 'Montserrat', 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  display: flex; flex-direction: column; min-height: 100vh;   /* 記事が少なくてもフッターが下に付く */
  font-family: var(--font-body);
  background: var(--cream-100);
  color: var(--text-body);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  /* 本文はふつうに折り返す。文節の区切りだけで折り返すと（keep-all）、次の文節が
     入らないたびに早く改行され、行末に大きな空きができて読みにくい。
     文節での折り返しは、短くて見た目が効く所（見出し・リード・カード）だけに使う */
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-600); text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }
h1, h2, h3 { font-family: var(--font-serif); font-feature-settings: "palt"; line-height: 1.5; }

main { flex: 1 0 auto; }
/* 文節の区切り（<wbr>）で折り返すのは、短い見出し類だけ */
h1, h2, h3,
.post .lede, .crumb,
.bhero h1, .bhero p,
.blist .card h2, .blist .card p,
.pcta h2, .pcta p,
.rel a { word-break: keep-all; overflow-wrap: break-word; }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ── ヘッダー ── */
/* ヘッダーはトップページと同じ作り（白地・うっすらぼかし・下に細い線・ロゴは高さ34px） */
.bhead {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 20;
}
.bhead .wrap { max-width: 1080px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.bhead .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bhead .logo svg { width: 26px; height: 26px; }
.bhead .logo img { display: block; height: 34px; width: auto; }
.bhead .logo span { font-family: var(--font-logo); font-size: 17px; letter-spacing: -.01em; color: var(--navy-800); }
.bhead nav { display: flex; align-items: center; gap: 22px; }
.bhead nav a { font-size: 13px; color: var(--text-body); text-decoration: none; letter-spacing: .04em; }
.bhead nav a:hover { color: var(--navy-800); }
.bhead .cta {
  background: var(--mustard); color: var(--navy-900);
  font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 3px; text-decoration: none;
  white-space: nowrap;   /* 折り返すとヘッダーの高さを超えてロゴに重なる */
}


/* ── 一覧ページ上部の帯 ── */
.bhero {
  background: var(--navy-900);
  color: var(--cream-100);
  padding: 62px 0 66px;
  margin: 18px 0 44px;
  position: relative;
  overflow: hidden;
}
.bhero .wrap { position: relative; z-index: 1; }
.bhero h1 {
  font-size: clamp(22px, 6.6vw, 40px); font-weight: 700; letter-spacing: .04em;
  color: var(--cream-100); margin-bottom: 14px;
}
.bhero p { font-size: 15px; line-height: 1.95; color: rgba(232, 246, 247, .76); max-width: 34em; }

/* ── スマホ用の開閉メニュー ── */
.bmenu { display: none; }
.bmenu > summary { list-style: none; cursor: pointer; width: 38px; height: 38px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 7px;
  -webkit-tap-highlight-color: transparent; }
.bmenu > summary::-webkit-details-marker { display: none; }
.bmenu > summary span { display: block; height: 1.5px; background: var(--navy-800); border-radius: 2px; }
.bmenu[open] > summary span:nth-child(2) { opacity: 0; }
.bmenu-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-top: 1px solid var(--hair); padding: 6px 24px 16px; }
.bmenu-panel a { display: block; padding: 14px 0; font-size: 15px; color: var(--text-body);
  text-decoration: none; border-bottom: 1px solid var(--hair); }
.bmenu-panel a:last-child { border-bottom: 0; }

/* ── パンくず ── */
.crumb { font-size: 12px; color: var(--text-muted); padding: 22px 0 0; letter-spacing: .02em; }
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--navy-800); text-decoration: underline; }
.crumb span { margin: 0 8px; opacity: .55; }

/* ── 記事 ── */
.post { padding: 10px 0 64px; }
.post .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: .08em; margin: 26px 0 14px; }
.post .meta .upd { margin-left: 14px; }
.post h1 { font-size: clamp(20px, 6.4vw, 40px); font-weight: 700; color: var(--navy-900); letter-spacing: .02em; margin-bottom: 26px; }
.post .lede { font-size: 16px; color: var(--text-muted); border-left: 2px solid var(--cream-300); padding-left: 16px; margin-bottom: 40px; }
.post .ogp { border-radius: 4px; border: 1px solid var(--hair); margin-bottom: 44px; }

.body h2 {
  font-size: clamp(20px, 3.6vw, 25px); font-weight: 700; color: var(--navy-900);
  margin: 54px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hair);
}
.body h3 { font-size: 18px; font-weight: 700; color: var(--navy-800); margin: 36px 0 12px; }
.body p { margin: 0 0 22px; }
.body ul, .body ol { margin: 0 0 24px; padding-left: 1.4em; }
.body li { margin-bottom: 8px; }
.body ul { list-style: none; padding-left: 0; }
.body ul > li { padding-left: 22px; position: relative; }
.body ul > li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 6px;
  border-left: 2px solid var(--navy-800); border-bottom: 2px solid var(--navy-800); transform: rotate(-45deg);
}
.body blockquote {
  margin: 0 0 24px; padding: 18px 22px; background: var(--cream-000);
  border-left: 3px solid var(--cream-300); color: var(--text-muted); font-size: 15px;
}
.body code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--cream-200); color: var(--navy-800);
  padding: .12em .38em; border-radius: 3px; word-break: break-all;
}
.body strong { font-weight: 700; color: var(--navy-900); }
.body .mk { background: linear-gradient(transparent 62%, var(--cream-300) 62%); font-weight: 700; }   /* マーカーはトップの「お悩み」欄と同じ薄いティファニー */
.body hr { border: 0; border-top: 1px solid var(--hair); margin: 44px 0; }
.body .tw { overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch; }
.body table { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 14px; line-height: 1.7; }
.body th, .body td { border-bottom: 1px solid var(--hair); padding: 11px 13px; text-align: left; vertical-align: top; }
.body th { background: var(--cream-200); color: var(--navy-900); font-weight: 700; white-space: nowrap; }
.body td:first-child { font-weight: 500; color: var(--navy-900); }
.body tr:last-child td { border-bottom: 0; }
/* 記事中の図（実物の画面など）。説明文を下に添える */
.body figure { margin: 0 0 28px; }
.body figure img { border: 1px solid var(--hair); border-radius: 4px; }
.body figcaption { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

/* ── 記事下の導線 ── */
.pcta { background: var(--navy-900); color: var(--cream-100); border-radius: 5px; padding: 38px 28px; margin: 56px 0 0; text-align: center; }
.pcta h2 { font-size: 21px; font-weight: 700; color: var(--cream-100); margin-bottom: 10px; }
.pcta p { font-size: 14px; color: rgba(232, 246, 247, .8); margin-bottom: 24px; }
.pcta .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pcta a {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 4px;
}
.pcta .primary { background: var(--mustard); color: var(--navy-900); }
.pcta .line { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }   /* 2つ目のボタン（ネット予約）。1つ目の LINE を目立たせるので、こちらは枠だけ */

/* ── 関連記事 ── */
.rel { margin: 56px 0 0; }
.rel h2 { font-size: 17px; font-weight: 700; color: var(--navy-900); letter-spacing: .08em; margin-bottom: 16px; }
.rel ul { list-style: none; }
.rel li { border-top: 1px solid var(--hair); }
.rel li:last-child { border-bottom: 1px solid var(--hair); }
.rel a { display: block; padding: 16px 0; text-decoration: none; color: var(--navy-900); font-size: 15px; font-weight: 500; }
.rel a:hover { color: var(--navy-600); }
.rel .d { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); display: block; letter-spacing: .08em; margin-bottom: 3px; }

/* ── 分類（絞り込みのボタンと、記事に付く札） ── */
.bcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 2px; }
.bcats a {
  font-size: 12.5px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  padding: 7px 14px; border: 1px solid var(--hair); border-radius: 999px;
  text-decoration: none; color: var(--navy-800); background: var(--cream-000);
  transition: border-color .25s, background .25s, color .25s;
}
.bcats a:hover { border-color: var(--navy-500); color: var(--navy-900); }
.bcats a[aria-current="page"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream-100); }
.blist .card .c {
  display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 2px; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  color: var(--navy-700); background: var(--cream-200);
}
.post .meta .cat {
  display: inline-block; margin-right: 14px; padding: 2px 9px; border-radius: 2px; white-space: nowrap;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--navy-900); background: var(--cream-300); text-decoration: none;
}
.post .meta .cat:hover { background: var(--navy-900); color: var(--cream-100); }

/* ── 一覧 ── */
.blist { padding: 8px 0 64px; }
.blist .lead { margin: 30px 0 40px; }
.blist .lead h1 { font-size: clamp(21px, 6vw, 36px); font-weight: 700; color: var(--navy-900); margin-bottom: 12px; }
.blist .lead p { font-size: 15px; color: var(--text-muted); }
.blist .card { border-top: 1px solid var(--hair); }
.blist .card:last-of-type { border-bottom: 1px solid var(--hair); }
.blist .card a { display: block; padding: 26px 0; text-decoration: none; color: inherit; }
.blist .card a:hover h2 { color: var(--navy-600); }
.blist .card .d { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .08em; }
.blist .card h2 { font-size: 19px; font-weight: 700; color: var(--navy-900); margin: 6px 0 8px; }
.blist .card p { font-size: 14px; color: var(--text-muted); }
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.pager a, .pager span { font-family: var(--font-mono); font-size: 13px; padding: 9px 14px; border: 1px solid var(--hair); border-radius: 3px; text-decoration: none; color: var(--navy-800); }
.pager .now { background: var(--navy-900); color: var(--cream-100); border-color: var(--navy-900); }

/* ── フッター ── */
.bfoot { background: var(--navy-950); color: rgba(232, 246, 247, .66); padding: 40px 0; margin-top: 10px; }
.bfoot .wrap { max-width: 1080px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.bfoot a { color: rgba(232, 246, 247, .82); text-decoration: none; font-size: 13px; }
.bfoot a:hover { color: #fff; }
.bfoot .cp { font-size: 12px; letter-spacing: .04em; }
.bfoot nav { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 380px) {
  .bhead .wrap { padding: 0 12px; gap: 4px; }
  .bhead .logo { gap: 7px; }
  .bhead .logo span { font-size: 14px; }
  .bhead .logo svg { width: 20px; height: 20px; }
  .bhead .cta { font-size: 11px; padding: 8px 9px; }
  .bmenu { margin-left: 2px; }
  .bmenu > summary { width: 30px; padding: 0 4px; }
}
/* トップページと同じ幅で切り替える（1023px 以下は開閉メニュー）。
   リンクが6つになり、720〜1023px では横並びが入りきらず語の途中で折れていた */
@media (max-width: 1023px) {
  .bhead { position: relative; }
  .bhead .wrap { height: 56px; }
  .bhead nav a:not(.cta) { display: none; }
  .bmenu { display: block; margin-left: 12px; }
  .bhead .wrap { gap: 8px; }
  .bhero { padding: 44px 0 48px; margin: 12px 0 32px; }
  .bhero p { font-size: 14px; }
  .post h1 { letter-spacing: 0; }
  /* 分類のボタンは数が多いと縦に積み上がるので、画面が狭いときは小さくする */
  .bcats { gap: 7px; }
  .bcats a { font-size: 12px; padding: 6px 12px; }
  .pcta { padding: 30px 20px; }
  .pcta .btns { flex-direction: column; }
  .pcta a { width: 100%; }
}