/* sanatalemi.net
   モチーフ：縫い目（ステッチ）と方眼紙。クラス名は2文字の略語で、中の要素はタグで指定する */

@font-face {
  font-family: "Kaisei Opti";
  src: url("kaisei-opti-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #2b3139;
  --sub: #5f6873;
  --line: #d9dfe6;
  --slate: #45617f;
  --slate-deep: #34495f;
  --rose: #b8677a;
  --rose-deep: #9c4a5d;
  --mist: #eef2f6;
  --blush: #f8e9ec;
  --paper: #ffffff;
  --r: 14px;
  --head: "Kaisei Opti", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  --grid: linear-gradient(rgba(69, 97, 127, .09) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(69, 97, 127, .09) 1px, transparent 1px) 0 0 / 16px 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--slate); text-underline-offset: .2em; }
a:hover { color: var(--rose-deep); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.5; margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.sk { position: absolute; left: -9999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.sk:focus { left: 8px; }

.wr { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ヘッダー：下端に縫い目の線 */
.hd { padding: 22px 0 18px; border-bottom: 2px dashed var(--rose); margin-bottom: 32px; }
.sn { display: inline-block; text-decoration: none; color: var(--ink); }
.sn span { display: block; font-family: var(--head); font-weight: 700; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.45; }
.sn small { display: block; font-size: 13px; color: var(--sub); margin-top: 2px; }
.sn:hover span { color: var(--slate); }

/* 本文＋右サイドバー */
.lo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-bottom: 64px; }
.mn, .sb { min-width: 0; }
@media (min-width: 960px) {
  .lo { grid-template-columns: minmax(0, 1fr) 280px; }
  .sp { position: sticky; top: 24px; }
}

/* サイドバー */
.sp { display: grid; gap: 20px; }
.bx {
  background: var(--mist);
  border-radius: var(--r);
  padding: 22px 20px;
  outline: 1.5px dashed rgba(69, 97, 127, .45);
  outline-offset: -7px;
  font-size: 14px;
  line-height: 1.8;
}
.bx h2 { font-family: var(--head); font-size: 17px; margin-bottom: 12px; color: var(--slate-deep); }
.bx p + p { margin-top: 10px; }
.kl li + li { border-top: 1px solid var(--line); }
.kl a { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; text-decoration: none; color: var(--ink); }
.kl a:hover { color: var(--slate); }
.kl a[aria-current] { color: var(--rose-deep); font-weight: 700; }
.th {
  flex: none;
  display: inline-block;
  min-width: 4.8em;
  text-align: center;
  font-family: var(--head);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--rose-deep);
  border: 1px solid var(--rose);
}

/* TOP 冒頭：方眼紙の面＋縦書きのキャッチコピー */
.it {
  display: flex;
  gap: 24px;
  align-items: stretch;
  background: var(--grid), var(--mist);
  border-radius: var(--r);
  padding: 32px 28px;
  outline: 2px dashed var(--rose);
  outline-offset: -9px;
  margin-bottom: 36px;
}
.ib { flex: 1; min-width: 0; }
.it h1 { font-family: var(--head); margin-bottom: 14px; }
.it h1 .tm { display: block; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.45; }
.it h1 .tb { display: block; font-size: clamp(15px, 1.8vw, 17px); color: var(--slate); margin-top: 6px; }
.it .ib p { font-size: 15px; color: var(--ink); }
.vc {
  flex: none;
  writing-mode: vertical-rl;
  font-family: var(--head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--rose-deep);
  padding: 4px 0 4px 18px;
  border-left: 1px solid rgba(184, 103, 122, .5);
  white-space: nowrap;
}
@media (max-width: 719px) {
  .it { flex-direction: column-reverse; padding: 26px 20px; gap: 14px; }
  .vc { writing-mode: horizontal-tb; font-size: 17px; letter-spacing: .08em; padding: 0 0 10px; border-left: 0; border-bottom: 1px solid rgba(184, 103, 122, .5); white-space: normal; }
}

/* TOP の記事一覧：1列の横長カード */
.ix { display: grid; gap: 22px; }
.cd a {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  outline: 1.5px dashed transparent;
  outline-offset: -7px;
  text-decoration: none;
  color: var(--ink);
  transition: outline-color .2s;
}
.cd a:hover { outline-color: var(--rose); }
.cd a:hover h2 .tm { color: var(--slate); }
.cm img, .cm .tx { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.cb .dt { font-size: 13px; color: var(--sub); }
.cb h2 { font-family: var(--head); margin: 2px 0 8px; }
.cb h2 .tm { display: block; font-size: 19px; }
.cb h2 .tb { display: block; font-size: 14px; color: var(--sub); font-weight: 700; }
.ex {
  font-size: 14px;
  color: var(--sub);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 639px) {
  .cd a { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cd a { transition: none; } }

/* 写真のない記事の図柄 */
.tx {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px;
  outline: 2px dashed rgba(255, 255, 255, .9);
  outline-offset: -10px;
  color: var(--paper);
}
.tx.bl { background: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 16px 16px, var(--slate); }
.tx.ro { background: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 16px 16px, var(--rose); }
.tw { font-family: var(--head); font-weight: 700; font-size: 28px; letter-spacing: .12em; line-height: 1.3; }
.ts { font-size: 14px; font-weight: 700; line-height: 1.6; max-width: 26em; }
.ey .tx .tw { font-size: clamp(32px, 6vw, 44px); }
.ey .tx .ts { font-size: clamp(13px, 1.8vw, 15px); }

/* パンくず：区切りはひし形の枠 */
.bc { font-size: 13px; color: var(--sub); margin-bottom: 18px; }
.bc ol { display: flex; flex-wrap: wrap; align-items: center; }
.bc li { display: inline-flex; align-items: center; }
.bc li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--rose);
  transform: rotate(45deg);
  margin: 0 12px;
  flex: none;
}
.bc span[aria-current] { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* 記事ページ */
.ar > h1 { font-family: var(--head); margin-bottom: 22px; }
.ar > h1 .tm { display: block; font-size: clamp(23px, 3.4vw, 30px); line-height: 1.45; }
.ar > h1 .tb { display: block; font-size: clamp(15px, 2vw, 18px); color: var(--slate); margin-top: 6px; }
.ey { margin: 0 auto 30px; max-width: 640px; }
.ey img, .ey .tx { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.ey .dt {
  margin-top: 10px;
  font-size: 13px;
  color: var(--sub);
  display: flex;
  gap: 8px;
  align-items: center;
}
.ey .dt::before { content: ""; width: 24px; border-top: 2px dashed var(--rose); }
.ey .ps { margin-left: auto; font-size: 12px; }

/* 目次：しま模様 */
.tc {
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 22px 22px 18px;
  margin-bottom: 40px;
}
.tc h2 { font-family: var(--head); font-size: 18px; color: var(--slate-deep); margin-bottom: 10px; }
.tc li:nth-child(odd) { background: var(--mist); }
.tc a { display: block; padding: 7px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.7; }
.tc a:hover { color: var(--slate); text-decoration: underline; }

/* 本文 */
.bd > * + * { margin-top: 1.3em; }
.bd h2 {
  font-family: var(--head);
  font-size: clamp(19px, 2.6vw, 22px);
  background: var(--blush);
  border-radius: var(--r) var(--r) 0 0;
  padding: 14px 18px 12px;
  border-bottom: 2px dashed var(--rose);
  margin-top: 2.6em;
}
.bd h2 + * { margin-top: 1.1em; }
.bd h3 {
  font-size: 17px;
  color: var(--slate);
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 1.9em;
}
.bd h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--rose); transform: translateY(-1px); }
.bd h3 + p { margin-top: .6em; }
.bd a { word-break: break-all; }

/* 関連記事：2×2 */
.rl { margin-top: 56px; }
.rl h2 { font-family: var(--head); font-size: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.rl h2::after { content: ""; flex: 1; border-top: 2px dashed var(--rose); }
.rl ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rl a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 18px;
  border-radius: var(--r);
  background: var(--mist);
  outline: 1.5px dashed rgba(69, 97, 127, .4);
  outline-offset: -7px;
  text-decoration: none;
  color: var(--ink);
}
.rl a:hover { outline-color: var(--rose); }
.rl .th { align-self: flex-start; }
.rt { font-weight: 700; font-size: 15px; line-height: 1.7; }
@media (max-width: 559px) { .rl ul { grid-template-columns: 1fr; } }

/* プライバシーポリシー */
.pp > h1 { font-family: var(--head); font-size: clamp(23px, 3.4vw, 28px); margin-bottom: 24px; }
.pp .fs { margin-top: 40px; font-size: 14px; color: var(--sub); }

/* 404 */
.nf h1 { font-family: var(--head); font-size: clamp(21px, 3vw, 26px); margin-bottom: 14px; }
.nf > p { margin-bottom: 20px; }
.nf .kl { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 18px; margin-bottom: 22px; }

/* フッター */
.ft { border-top: 2px dashed var(--rose); padding: 32px 0 40px; font-size: 13px; color: var(--sub); }
.nt {
  max-width: 760px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--mist);
  outline: 1.5px dashed rgba(69, 97, 127, .4);
  outline-offset: -7px;
  line-height: 1.85;
  color: var(--ink);
}
.fl { display: flex; gap: 20px; margin: 18px 0 10px; font-size: 14px; }
.fs { font-size: 12px; }