/* BlogKit generated stylesheet */
:root {
  --color-accent: #8a4b2a;
  --color-bg: #f6f1e8;
  --color-text: #2b2520;
  --color-muted: #7a6f66;
  --font-body: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-heading: 'Zen Antique', 'Hiragino Mincho ProN', serif;
  --font-scale: 1;
  --radius: 4px;
}

/*
 * 罫線と薄い塗りは、文字色から作る。
 * 黒の薄い色を直に書くと、記事ごとの見た目で暗い背景にしたとき
 * 線がまったく見えなくなるため(背景色を明るい前提にしない)。
 * 1行目は color-mix が使えない環境向けの控えの値。
 */
:root {
  --color-line: rgba(128,128,128,0.3);
  --color-line: color-mix(in srgb, var(--color-text) 22%, transparent);
  --color-fill: rgba(128,128,128,0.12);
  --color-fill: color-mix(in srgb, var(--color-text) 8%, transparent);
}

/*
 * 文字色パレット。明るい背景を前提にした濃い色をそのまま出すと、
 * 暗い背景の記事で沈んで読めなくなるため、暗い背景のページには
 * html.bk-ink-dark を付けて明るい方に差し替える。
 */
:root {
  --bk-c-gray: #9b9a97; --bk-c-brown: #64473a; --bk-c-red: #e03e3e;
  --bk-c-orange: #d9730d; --bk-c-yellow: #b78a01; --bk-c-green: #4d6461;
  --bk-c-blue: #0b6e99; --bk-c-purple: #6940a5; --bk-c-pink: #ad1a72;
}
.bk-ink-dark {
  --bk-c-gray: #b9b8b5; --bk-c-brown: #c69c86; --bk-c-red: #ff8b8b;
  --bk-c-orange: #f7a851; --bk-c-yellow: #f0cf5a; --bk-c-green: #74d3b6;
  --bk-c-blue: #6cc5ec; --bk-c-purple: #bda2ee; --bk-c-pink: #f38bc4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.85;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }

/* ---------- 新着バッジ ----------
 * 色はテーマの --color-new で差し替えられる(既定は赤)。
 * 光の明滅は飾りなので、動きを減らす設定の人には止める */
.bk-new {
  display: inline-block;
  margin-left: 7px;
  vertical-align: 0.14em;
  font-family: 'Avenir Next', 'Futura', 'Helvetica Neue', 'Hiragino Sans', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 0.66em;
  letter-spacing: 0.1em;
  color: var(--color-new, #e11d48);
  animation: bk-new-pulse 1.8s ease-in-out infinite;
}
@keyframes bk-new-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { opacity: 0.72; text-shadow: 0 0 10px color-mix(in srgb, var(--color-new, #e11d48) 65%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .bk-new { animation: none; }
}
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

/* --- 12カラムグリッド --- */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px;
  align-items: start;
}
.bk-col-1 { grid-column: span 1; }
.bk-col-2 { grid-column: span 2; }
.bk-col-3 { grid-column: span 3; }
.bk-col-4 { grid-column: span 4; }
.bk-col-5 { grid-column: span 5; }
.bk-col-6 { grid-column: span 6; }
.bk-col-7 { grid-column: span 7; }
.bk-col-8 { grid-column: span 8; }
.bk-col-9 { grid-column: span 9; }
.bk-col-10 { grid-column: span 10; }
.bk-col-11 { grid-column: span 11; }
.bk-col-12 { grid-column: span 12; }

/*
 * 箱(プロフィール・リンク集など)だけが横に並ぶ帯では、箱の高さを揃える。
 * 中身の行数が違うと下端がばらついて、並べたのに不揃いに見えるため。
 * 本文や記事一覧が同じ帯にあるときは揃えない(脇の箱が本文の高さまで伸びてしまう)。
 * :has を解さない古いブラウザでは何も起きない(従来どおり上揃え)
 */
.bk-grid:not(:has(> .bk-block > :not(.bk-widget))) { align-items: stretch; }
.bk-grid:not(:has(> .bk-block > :not(.bk-widget))) > .bk-block > .bk-widget {
  height: 100%; box-sizing: border-box; margin-bottom: 0;
}

/*
 * 本文の横に置く柱。
 * 中の部品は幅いっぱいに縦積みする(グリッドの子ではなくなるため
 * bk-col-* が効かなくなるので、ここで幅を戻す)
 */
.bk-side { display: flex; flex-direction: column; gap: 20px; align-self: start; }

.bk-side > .bk-block { grid-column: auto; }

/* --- 記事の索引(左ナビ) --- */
.bk-post-index ul { list-style: none; }
.bk-post-index li { line-height: 1.6; }
.bk-post-index li a {
  display: block; padding: 5px 0; color: var(--color-text); font-size: 0.92em;
}
.bk-post-index li a:hover { color: var(--color-accent); text-decoration: none; }
/* いま開いている記事。読み上げにも伝わる aria-current をそのまま目印に使う */
.bk-post-index li a[aria-current="page"] {
  color: var(--color-accent); font-weight: 700;
  border-left: 2px solid var(--color-accent); padding-left: 8px; margin-left: -10px;
}
.bk-index-group + .bk-index-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.bk-index-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95em; margin-bottom: 4px;
}
/* 折りたたみの三角は自前で出す(ブラウザ既定の位置がずれるため) */
summary.bk-index-name { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
summary.bk-index-name::-webkit-details-marker { display: none; }
summary.bk-index-name::after {
  content: ""; width: 7px; height: 7px; margin-left: 8px; flex: none;
  border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease;
}
details[open] > summary.bk-index-name::after { transform: rotate(225deg) translate(-2px, -2px); }

/* --- セクション --- */
.bk-section-header { border-bottom: 1px solid var(--color-line); }
.bk-section-header .bk-grid { padding-top: 16px; padding-bottom: 16px; align-items: center; }
.bk-section-footer { border-top: 1px solid var(--color-line); margin-top: 48px; }
.bk-section-footer .bk-grid { padding-top: 24px; padding-bottom: 32px; }
.bk-section-footer .bk-text { color: var(--color-muted); font-size: 0.85em; text-align: center; }

/* --- ブロック --- */
.bk-logo { font-size: 1.3em; font-weight: 700; color: var(--color-text); font-family: var(--font-heading); }
.bk-logo:hover { text-decoration: none; }
.bk-nav ul { display: flex; gap: 20px; justify-content: flex-end; flex-wrap: wrap; }
.bk-nav a { color: var(--color-text); font-size: 0.95em; }
.bk-nav a:hover { color: var(--color-accent); }

/* 背景プリセットが --bk-on-bg で読みやすい文字色を指定する(未指定は白) */
.bk-hero { text-align: center; padding: 24px 0; color: var(--bk-on-bg, #fff); }
.bk-hero-heading { font-family: var(--font-heading); font-size: 2.2em; line-height: 1.4; }
/* トップの顔として大きく出す指定。狭い画面では下の @media で抑える */
.bk-hero-lg .bk-hero-heading { font-size: 3.2em; line-height: 1.25; letter-spacing: 0.02em; }
.bk-hero-xl .bk-hero-heading { font-size: 4.2em; line-height: 1.2; letter-spacing: 0.03em; }
.bk-hero-lg .bk-hero-sub, .bk-hero-xl .bk-hero-sub { font-size: 1.1em; margin-top: 14px; }
.bk-hero-sub { margin-top: 8px; opacity: 0.85; }
.bk-hero-image { margin: 20px auto 0; border-radius: var(--radius); }

.bk-card {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-bg);
  transition: box-shadow 0.15s ease;
}
.bk-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); cursor: pointer; }
/* タイトルリンクをカード全面に広げ、枠内どこをクリックしても記事へ飛べるようにする */
.bk-card-title a::after { content: ""; position: absolute; inset: 0; }
/* カテゴリチップはカード全面リンクより手前に置き、カテゴリページへ飛べるまま残す */
.bk-card-cats a { position: relative; z-index: 1; }
/* サムネの比率は1種類に固定。OGPと同じなので画像1枚を一覧・共有・記事頭で使い回せる */
.bk-card-cover img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.bk-card-body { padding: 18px 20px; }
.bk-card-meta { font-size: 0.8em; color: var(--color-muted); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bk-card-cats a {
  display: inline-block; margin-right: 6px; padding: 1px 10px;
  border: 1px solid var(--color-accent); border-radius: 999px;
  font-size: 0.95em;
}
.bk-card-title { font-family: var(--font-heading); font-size: 1.25em; margin-top: 6px; line-height: 1.5; }
.bk-card-title a { color: var(--color-text); }
.bk-card-title a:hover { color: var(--color-accent); text-decoration: none; }
.bk-card-excerpt { margin-top: 8px; font-size: 0.92em; color: var(--color-muted); }

.bk-list-heading { font-family: var(--font-heading); font-size: 1.5em; margin-bottom: 20px; }

/* --- 記事一覧の3つの形 --- */

/* リスト: サムネを左、右にタイトルと抜粋。画像が無い記事が混ざっても崩れない */
.bk-list-list .bk-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px; }
.bk-list-list .bk-card-cover { flex: 0 0 160px; }
.bk-list-list .bk-card-cover img { border-radius: calc(var(--radius) / 2); }
.bk-list-list .bk-card-body { padding: 0; flex: 1; min-width: 0; }
.bk-list-list .bk-card-title { font-size: 1.1em; margin-top: 2px; }

/* カード: 画像が上、横に並べる */
.bk-list-card .bk-cards { display: grid; gap: 24px; }
.bk-list-card.bk-cols-2 .bk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-list-card.bk-cols-3 .bk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-list-card .bk-card { margin-bottom: 0; }
.bk-list-card .bk-card-title { font-size: 1.05em; }
/* 1件目だけ大きく出す。列をまたいで画像も大きくする */
.bk-list-card .bk-card-feature { grid-column: 1 / -1; }
.bk-list-card .bk-card-feature .bk-card-title { font-size: 1.5em; }

/* 見出しだけ: 日付とタイトルの1行。記事が増えたときに一番効く */
.bk-list-text .bk-rows { list-style: none; }
.bk-row {
  display: flex; gap: 14px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--color-line);
}
.bk-row time { flex: 0 0 auto; font-size: 0.8em; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.bk-row a { color: var(--color-text); }
.bk-row a:hover { color: var(--color-accent); }
.bk-row-month {
  margin-top: 22px; padding-bottom: 4px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9em; color: var(--color-muted);
}
.bk-rows .bk-row-month:first-child { margin-top: 0; }

/* 次のページへ。見た目はボタンだが実体はリンク(検索エンジンはボタンを押さない) */
.bk-more {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; margin-top: 28px; padding: 14px 20px;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  color: var(--color-text); font-weight: 700;
}
.bk-more:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.bk-more-count { font-weight: 400; font-size: 0.85em; color: var(--color-muted); }

@media (max-width: 767px) {
  /* 狭い画面ではカードも1列。note が同じ判断をしている */
  .bk-list-card.bk-cols-2 .bk-cards,
  .bk-list-card.bk-cols-3 .bk-cards { grid-template-columns: 1fr; }
  .bk-list-list .bk-card { display: block; }
  .bk-list-list .bk-card-cover { margin-bottom: 12px; }
}
.bk-empty { color: var(--color-muted); }

.bk-article-header { margin-bottom: 24px; }
.bk-article-title { font-family: var(--font-heading); font-size: 1.9em; line-height: 1.45; margin-top: 6px; }
.bk-article-cover { border-radius: var(--radius); margin-bottom: 24px; }
.bk-article-body > * + * { margin-top: 1em; }
/*
 * 見出しは h6 まで指定する。
 * 本文の見出しは記事タイトル(h1)より1段下げて出すため、
 * エディタで見出し3を選ぶと h4 になる。h3 までしか書かないと
 * 見出し3だけ本文と同じ大きさになってしまう。
 */
.bk-article-body h1, .bk-article-body h2, .bk-article-body h3,
.bk-article-body h4, .bk-article-body h5, .bk-article-body h6 {
  font-family: var(--font-heading); line-height: 1.5; margin-top: 1.8em; font-weight: 700;
}
.bk-article-body h1 { font-size: 1.7em; }
.bk-article-body h2 { font-size: 1.45em; border-bottom: 1px solid var(--color-line); padding-bottom: 6px; }
/* お客様の声。引用と同じ左の線に、署名を小さく添える */
.bk-voice cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.85em; color: var(--color-muted); }
.bk-voice p + p { margin-top: 0.5em; }
.bk-article-body h3 { font-size: 1.2em; }
/* 一番小さい見出し。大きさでは差が出ないので、色付きの縦線で見出しと分かるようにする */
.bk-article-body h4, .bk-article-body h5, .bk-article-body h6 {
  font-size: 1.02em; border-left: 3px solid var(--color-accent); padding-left: 10px;
}
.bk-article-body ul { list-style: disc; padding-left: 1.5em; }
.bk-article-body ol { list-style: decimal; padding-left: 1.5em; }
.bk-article-body code {
  background: var(--color-fill); border-radius: 4px; padding: 0.15em 0.4em; font-size: 0.9em;
}
.bk-article-body pre { background: #23272d; color: #f5f5f5; padding: 16px; border-radius: var(--radius); overflow-x: auto; }
.bk-article-body pre code { background: transparent; padding: 0; color: inherit; }
.bk-article-body blockquote { border-left: 3px solid var(--color-accent); padding-left: 16px; color: var(--color-muted); }
.bk-article-body table { border-collapse: collapse; width: 100%; }
.bk-article-body th, .bk-article-body td { border: 1px solid var(--color-line); padding: 6px 12px; text-align: left; }
.bk-article-body thead th { background: var(--color-fill); font-weight: 700; }

.bk-widget {
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 20px; font-size: 0.92em;
  /* 中の並びを、枠の幅に応じて変えるため */
  container-type: inline-size;
}
/*
 * 3列に組むとサイドバーが狭くなり、タイトルと日付を左右に振ると
 * どちらも1文字ずつ折り返して読めなくなる。狭いときは縦に積む
 */
@container (max-width: 260px) {
  .bk-widget ul li { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.bk-widget-title { font-family: var(--font-heading); font-size: 1.05em; margin-bottom: 10px; }
.bk-widget ul li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--color-line); }
.bk-widget ul li:last-child { border-bottom: none; }
.bk-widget time, .bk-count { color: var(--color-muted); font-size: 0.85em; white-space: nowrap; }
.bk-profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.bk-profile-name { font-weight: 700; }
.bk-profile-bio { margin-top: 6px; color: var(--color-muted); }
.bk-search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--color-line);
  border-radius: var(--radius); font-size: 0.95em; font-family: inherit;
}
.bk-calendar table { width: 100%; border-collapse: collapse; text-align: center; }
.bk-calendar th, .bk-calendar td { padding: 4px 0; font-size: 0.85em; }
.bk-calendar th { color: var(--color-muted); font-weight: 400; }
.bk-divider { border: none; border-top: 1px solid var(--color-line); margin: 8px 0; }

/* --- 広告枠 --- */
/* 読み込み前でも場所を取っておく。後から入って本文が飛ぶのを防ぐ */
.bk-ad { margin: 20px 0; text-align: center; }
.bk-ad-label {
  font-size: 0.7em; letter-spacing: 0.08em; color: var(--color-muted);
  text-align: left; margin-bottom: 4px;
}
.bk-ad-slot { display: block; width: 100%; min-height: 100px; }
.bk-ad-banner { display: block; }
.bk-ad-banner img { width: 100%; height: 100%; object-fit: contain; }
.bk-image figcaption { text-align: center; font-size: 0.85em; color: var(--color-muted); margin-top: 6px; }
/* 画像は枠にきれいにハマるよう object-fit: cover(形はプリセットCSSで付く) */
.bk-image img { object-fit: cover; }

/* 絵文字の区切り */
.bk-divider-emoji { text-align: center; font-size: 1.3em; letter-spacing: 0.6em; margin: 8px 0; }

/* 絵文字ブロック */
.bk-emoji { line-height: 1.2; letter-spacing: 0.12em; }
.bk-emoji-sm { font-size: 1.4em; }
.bk-emoji-md { font-size: 2.2em; }
.bk-emoji-lg { font-size: 3.2em; }
.bk-emoji-xl { font-size: 4.6em; }

.bk-embed iframe { max-width: 100%; }

/* --- レスポンシブ(モバイルは1カラムに自動スタック) --- */
@media (max-width: 767px) {
  .bk-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px; }
  .bk-grid > .bk-block { grid-column: 1 / -1; }
  .bk-hero-heading { font-size: 1.6em; }
  .bk-hero-lg .bk-hero-heading { font-size: 2.2em; }
  .bk-hero-xl .bk-hero-heading { font-size: 2.6em; }
  .bk-nav ul { justify-content: flex-start; }
  .bk-hide-mobile { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bk-hide-tablet { display: none; }
}
@media (min-width: 1024px) {
  .bk-hide-desktop { display: none; }
}

/* --- 装飾プリセット(選ばれた分だけ) --- */
/* --- background --- */
.bk-bg-paper { background-color: #f7f4ee; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 3px); --bk-on-bg: var(--color-text); }
html.bk-ink-dark .bk-bg-paper { --color-text: #1f2937; --color-muted: #6b7280; --bk-on-bg: #1f2937; --color-line: rgba(0,0,0,0.14); --color-fill: rgba(0,0,0,0.06); --bk-c-gray: #9b9a97; --bk-c-brown: #64473a; --bk-c-red: #e03e3e; --bk-c-orange: #d9730d; --bk-c-yellow: #b78a01; --bk-c-green: #4d6461; --bk-c-blue: #0b6e99; --bk-c-purple: #6940a5; --bk-c-pink: #ad1a72; }
/* 画面に入ったら再生する動き。html.bk-anim-on が付いているときだけ隠す
   (JSが動かない環境では最初から見える = 内容が消えない) */
.bk-anim-on .bk-anim {
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--bk-anim-duration, 700ms);
  transition-timing-function: cubic-bezier(0.22, 0.68, 0.28, 1);
  /* --bk-anim-delay = 帯の「順番に出す」指定 / --bk-anim-enter = 最初の画面を上から順に出す分 */
  transition-delay: calc(var(--bk-anim-delay, 0ms) + var(--bk-anim-enter, 0ms));
  will-change: opacity, transform;
}
.bk-anim-speed-fast { --bk-anim-duration: 420ms; }
.bk-anim-speed-slow { --bk-anim-duration: 1100ms; }

/* 動きを諦めるとき(表示領域が無い・印刷など)は、確実に見える状態へ倒す */
.bk-anim-off .bk-anim {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* 印刷では必ず見える状態にする(白紙で刷られる事故を防ぐ) */
@media print {
  .bk-anim-on .bk-anim,
  [class*="bk-scroll-"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}

/* 動きを減らす設定の人には出さない(酔い・発作の配慮) */
@media (prefers-reduced-motion: reduce) {
  .bk-anim-on .bk-anim,
  [class*="bk-scroll-"] {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}
.bk-anim-on .bk-anim-fade-in { opacity: 0; }
.bk-anim-on .bk-anim-fade-in.bk-in { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
.bk-anim-on .bk-anim-fade-up { opacity: 0; transform: translateY(28px); }
.bk-anim-on .bk-anim-fade-up.bk-in { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
.bk-anim-on .bk-anim-slide-left { opacity: 0; transform: translateX(-140px); }
.bk-anim-on .bk-anim-slide-left.bk-in { opacity: 1; transform: none; filter: none; clip-path: inset(0); transition-duration: 520ms; transition-timing-function: cubic-bezier(0.16, 0.9, 0.3, 1); }
.bk-anim-on .bk-anim-slide-right { opacity: 0; transform: translateX(140px); }
.bk-anim-on .bk-anim-slide-right.bk-in { opacity: 1; transform: none; filter: none; clip-path: inset(0); transition-duration: 520ms; transition-timing-function: cubic-bezier(0.16, 0.9, 0.3, 1); }
/* タイマーが0になったときの合図 */
.bk-tool-done .bk-tool-value { color: #c2451e; }
.bk-tool-done { box-shadow: inset 0 0 0 2px #c2451e; }

/* 「揺れる」。短く1往復半だけ。長く揺らすと不快になる */
.bk-tool-shake { animation: bk-tool-shake .55s ease; }
@keyframes bk-tool-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}

/* 「文字を出す」。数字を隠して、代わりに大きく出す */
.bk-tool-done-label {
  display: none;
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--bk-tool-size, 30px) * 0.9);
  color: #c2451e;
  line-height: 1.2;
}
.bk-tool-say .bk-tool-value { display: none; }
.bk-tool-say .bk-tool-done-label { display: block; }

/* 動きを減らす設定では揺らさない(色と文字だけで知らせる) */
@media (prefers-reduced-motion: reduce) {
  .bk-tool-shake { animation: none; }
}

.bk-embed, .bk-tool { margin: 1.5em 0; }
.bk-embed-frame { position: relative; width: 100%; height: 0; overflow: hidden; }
.bk-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bk-embed-caption { margin-top: 6px; font-size: 0.85em; color: var(--color-muted); text-align: center; }

/* 枠の見た目 */
.bk-frame-box-rounded { border-radius: var(--radius); overflow: hidden; }
.bk-frame-box-shadow { border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.bk-frame-box-border { border: 1px solid rgba(128,128,128,0.35); border-radius: var(--radius); overflow: hidden; }
.bk-frame-box-polaroid { background: #fff; padding: 10px 10px 32px; border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.bk-frame-box-polaroid .bk-embed-caption { color: #444; }

/* ウィジェット */
/* 数字の大きさを箱の幅に合わせて縮める。狭い列に置いても折り返さない */
.bk-tool { padding: 18px; text-align: center; background: rgba(128,128,128,0.06); container-type: inline-size; }
.bk-tool-title { font-size: 0.85em; color: var(--color-muted); margin-bottom: 6px; }
.bk-tool-days { font-size: min(calc(var(--bk-tool-size, 2em) * 0.62), 12cqw); font-weight: 700; line-height: 1.2; }
.bk-tool-value {
  font-size: min(var(--bk-tool-size, 2em), 15cqw);
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  white-space: nowrap;
}
.bk-tool-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.bk-tool-actions button {
  border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent);
  border-radius: var(--radius); padding: 4px 14px; font-size: 0.85em; cursor: pointer;
}
.bk-tool-actions button:hover { background: var(--color-accent); color: var(--color-bg); }
.bk-tool-done .bk-tool-value { color: var(--color-accent); }

.bk-cal { margin: 0 auto; border-collapse: collapse; font-size: 0.9em; }
.bk-cal caption { font-weight: 700; padding-bottom: 6px; }
.bk-cal th, .bk-cal td { width: 2.2em; padding: 4px 0; text-align: center; }
.bk-cal th { color: var(--color-muted); font-weight: 500; font-size: 0.85em; }
.bk-cal-today { background: var(--color-accent); color: var(--color-bg); border-radius: 50%; font-weight: 700; }

/* 写真の切り替え。写真を同じ場所に重ね、見せる1枚だけ不透明にする。
   高さは一番大きい写真に合わせて確保されるので、切り替わっても紙面が動かない */
[data-bk-tool="slides"] .bk-slides-stage { display: grid; }
[data-bk-tool="slides"] .bk-slide {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
[data-bk-tool="slides"] .bk-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
[data-bk-tool="slides"] .bk-slide img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
[data-bk-tool="slides"] figcaption { margin-top: 6px; font-size: 0.85em; color: var(--color-muted); text-align: center; }
[data-bk-tool="slides"] .bk-slides-dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
[data-bk-tool="slides"] .bk-slides-dots button {
  font: inherit; font-size: 0.85em; line-height: 1.4; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--color-line); background: transparent; color: var(--color-text); cursor: pointer;
}
[data-bk-tool="slides"] .bk-slides-dots button[aria-selected="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  [data-bk-tool="slides"] .bk-slide { transition: none; }
}
/* ---------- ここから先は合言葉 ---------- */
.bk-lock {
  margin: 2em 0; padding: 26px 20px; text-align: center;
  border: 1px dashed var(--color-line); border-radius: var(--radius); background: var(--color-fill);
}
.bk-lock-message { margin: 0; }
.bk-lock-note { margin-top: 8px; font-size: 0.85em; color: var(--color-muted); }
.bk-lock-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.bk-lock-form input {
  flex: 1 1 160px; max-width: 280px; padding: 10px 14px; font-size: 1em; font-family: inherit;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-bg); color: var(--color-text);
}
.bk-lock-form button {
  padding: 10px 20px; font-family: inherit; font-size: 0.95em; cursor: pointer;
  border: 1px solid var(--color-accent); border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-bg);
}
.bk-lock-form input:disabled, .bk-lock-form button:disabled { opacity: 0.55; cursor: default; }
.bk-lock-error { margin-top: 10px; font-size: 0.9em; color: #c2451e; }
.bk-lock-buy { margin-top: 14px; font-size: 0.95em; }
/* hidden 属性を、上の display 指定より強くする(出し入れは lock.js がする) */
.bk-lock [hidden] { display: none !important; }
.bk-search-page { max-width: 720px; }
.bk-search-page form { display: flex; gap: 8px; }
.bk-search-page input[type="search"] {
  flex: 1; padding: 10px 14px; font-size: 1em; font-family: inherit;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-bg); color: var(--color-text);
}
.bk-search-page button {
  padding: 10px 20px; font-family: inherit; font-size: 0.95em; cursor: pointer;
  border: 1px solid var(--color-accent); border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-bg);
}
.bk-search-count { margin: 16px 0 8px; color: var(--color-muted); font-size: 0.9em; }
.bk-search-cat {
  display: inline-block; margin-left: 8px; padding: 1px 10px;
  border: 1px solid var(--color-accent); border-radius: 999px; font-size: 0.95em;
}