/* =========================================================================
   MYS 公開サイト
   旧サイト（Ameba Ownd / sugar テーマ）のレイアウトを再現
   ========================================================================= */

:root {
  --text: #2b2b2b;
  --muted: #999;
  --border: #dcdcdc;
  --bg: #fff;
  --link: #8cbeb7;
  --hover: #9b8dc8; /* マウスを乗せたときの色（ラベンダー） */
  --side-w: 210px;
  /* 書体は2つだけ（Google Fonts で読み込む。src/views/site.tsx）
     本文＝Noto Sans JP（どのパソコン・スマホでも同じ見え方）
     見出し・メニュー・ボタン・日付＝英字は Cormorant Garamond、和文は本文と同じ Noto Sans JP（和文に明朝を混ぜない） */
  --sans: 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --display: 'Cormorant Garamond', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  word-wrap: break-word;
}

a { color: var(--link); text-decoration: none; }
a:hover { opacity: 0.75; }
img { max-width: 100%; height: auto; vertical-align: middle; }

/* ------------------------------------------------------------- 骨組み */

.layout { min-height: 100vh; }

.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 150px 20px 30px;
  overflow-y: auto;
  z-index: 20;
}

.gnav ul { list-style: none; margin: 0; padding: 0; }
.gnav li { margin: 0 0 21px; }
.gnav a {
  color: var(--text);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.gnav a.is-active { color: var(--muted); }
.gnav a:hover { color: var(--hover); opacity: 1; } /* マウスを乗せるとラベンダーに */

.side__site { font-size: 12px; line-height: 1.7; }
.side__logo img { width: 56px; margin-bottom: 28px; }
.side__title { margin: 0 0 4px; font-family: var(--display); font-size: 14px; }
.side__tagline { margin: 0; color: #666; }

.main {
  margin-left: var(--side-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main > main { flex: 1; }

.footer {
  border-top: 1px solid var(--border);
  padding: 22px 20px 30px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-top: 120px;
}
.footer p { margin: 0; }

.sp-header { display: none; }

/* ------------------------------------------------------------- 本文（記事・ページ共通） */

.content h2, .content h3, .content h4 { line-height: 1.5; margin: 1.2em 0 0.6em; }
.content h2 { font-size: 22px; }
.content h3 { font-size: 18px; }
.content h4 { font-size: 16px; }
.content p { margin: 0 0 0.5em; }
.content ul, .content ol { padding-left: 1.6em; }
.content blockquote { margin: 1.2em 0; padding: 0.2em 1.2em; border-left: 3px solid var(--border); color: #666; }
.content hr { border: 0; border-top: 1px solid var(--border); width: 60%; margin: 40px auto; }
.content a { color: var(--link); }
.content center { display: block; text-align: center; }

.content figure.image { margin: 20px 0 30px; }
.content figure.image[data-align='center'] { text-align: center; }
.content figure.image[data-align='right'] { text-align: right; }
.content figure.image img { display: inline-block; }

.content [data-youtube-video] { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 20px 0 30px; }
.content [data-youtube-video] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.content .raw-html { margin: 1em 0; }

/* リンクカード */
.link-card { margin: 20px 0 30px; }
.link-card a {
  display: flex;
  border: 1px solid var(--border);
  color: var(--text);
  min-height: 110px;
  overflow: hidden;
}
.link-card__thumb { flex: 0 0 180px; background: #f4f4f4; }
.link-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.link-card__body { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; min-width: 0; }
.link-card__title { font-weight: bold; line-height: 1.5; margin-bottom: 4px; }
.link-card__desc {
  color: #777;
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-card__host { color: var(--muted); font-size: 11px; margin-top: 6px; }

/* 2列・3列レイアウト（固定ページ） */
.cols { display: grid; gap: 40px; margin: 0 0 40px; align-items: start; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols .col > :first-child { margin-top: 0; }
.cols figure.image { margin: 0; }

.content .text { margin: 0 0 32px; }
.content .text > :last-child { margin-bottom: 0; }

.block-title { text-align: center; font-family: var(--display); font-size: 26px; font-weight: normal; }

/* ------------------------------------------------------------- 固定ページ */

.page { max-width: 1020px; margin: 0 auto; padding: 60px 40px 0; }
.page-title {
  text-align: center;
  font-family: var(--display);
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0 0 40px;
}

/* トップページ：画像は全幅、記事一覧は中央 */
.page--home { max-width: none; padding: 60px 0 0; }
.page--home .page__body > figure.image { margin: 0 0 40px; text-align: center; }
.page--home .page__body > figure.image img { width: 100%; }
.page--home .page__body > :not(figure) { max-width: 780px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
.page--home .page__body > h3 { font-size: 16px; margin-top: 30px; margin-bottom: 40px; }

/* ARTIST ページ：写真を2列に並べ、下に名前。クリックで個人ページへ（migrations/0003_artist_pages.sql） */
.artist-group { margin: 0 0 70px; }
.content .artist-group__title {
  text-align: center;
  font-family: var(--display);
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.25em;
  margin: 0 0 28px;
}
.artist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 720px; margin: 0 auto; }
/* 1人だけの段（STAFF）：2列の1つ分の幅で中央に */
.artist-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
/* カード：写真（個人ページへのリンク）＋ 名前（リンク）と SNS アイコン */
.artist-card { text-align: center; }
.artist-card__photo { display: block; }
/* 写真の縦横比が人によって違うので 3:4 にそろえる（顔が切れないよう上を基準に切り取る） */
.artist-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; transition: opacity 0.2s; }
.artist-card__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 14px; }
.artist-card__name { font-size: 15px; letter-spacing: 0.1em; }
.content a.artist-card__name { color: var(--text); }
.content .artist-card__meta .sns { gap: 12px; }
.content .artist-card__meta .sns a { width: 16px; height: 16px; }
.content .artist-back { text-align: center; margin-top: 50px; }

/* 個人ページ：写真＋プロフィール、その下に NEWS・略歴・開閉できる出演歴（migrations/0005_kataoka_profile.sql） */
.content .profile__name { font-size: 26px; letter-spacing: 0.08em; margin: 0 0 4px; line-height: 1.4; }
.content .profile__kana { color: var(--muted); font-size: 12px; letter-spacing: 0.15em; margin: 0 0 6px; }
.content .profile__role { font-size: 13px; margin: 0 0 24px; }
.content .profile__bio { font-size: 13px; margin: 0 0 24px; }
.profile__info { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px 16px; margin: 0; font-size: 13px; }
.profile__info dt { color: var(--muted); }
.profile__info dd { margin: 0; }
.profile-body { max-width: 780px; margin: 0 auto; }
.profile-body .post-row { min-height: 0; padding-bottom: 26px; }
.content .profile-section .section-title,
.content .profile-body .post-list .section-title { font-size: 24px; margin: 70px 0 30px; }
.history { margin: 0; font-size: 13px; }
.history dt { color: var(--muted); font-size: 12px; margin-top: 14px; }
.history dt:first-child { margin-top: 0; }
.history dd { margin: 2px 0 0; }
/* 開閉できる欄（<details>）。右端の＋をクリックすると開き、−で閉じる */
.accordion { border-bottom: 1px solid var(--border); }
.accordion:first-of-type { border-top: 1px solid var(--border); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 40px 16px 4px;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
}
.accordion[open] summary::after { content: '−'; }
.accordion summary:hover { color: var(--hover); }
.accordion .history { padding: 0 4px 24px; }
/* SNS アイコン（個人ページのプロフィール）。<span class="sns"><a class="sns__x" href="…" aria-label="X"></a>…</span>
   使えるもの: sns__x / sns__instagram / sns__tiktok / sns__youtube / sns__ameba（アメブロ）
   アイコンの形は Simple Icons（CC0, https://simpleicons.org/）の SVG を埋め込んだもの */
.sns { display: inline-flex; flex-wrap: wrap; gap: 16px; align-items: center; vertical-align: middle; }
.content .sns a {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--text);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: opacity 0.2s;
}
.content .sns a:hover { opacity: 0.55; }
.sns__x { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); }
.sns__instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); }
.sns__tiktok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }
.sns__youtube { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }
.sns__ameba { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.575 9.815c0-.653.624-1.161 1.429-1.161s1.429.508 1.429 1.16c0 .653-.624 1.162-1.429 1.162s-1.429-.509-1.429-1.161zM16.107 0c-.303.008-.603.155-.875.467-.397.46-1.111 1.268-1.6 1.748-.641.624-1.056.765-1.626.765-.57 0-.978-.132-1.629-.765-.488-.47-1.212-1.287-1.6-1.748-.435-.49-.94-.566-1.42-.336-.398.192-.624.585-.652 1.2a55.63 55.63 0 0 0-.002 1.423c.004.73.007 1.534-.008 2.014-.027.96-.099 1.543-.496 2.378-.335.71-.876 1.91-.931 3.512a19.72 19.72 0 0 0 .08 2.516c.052.634.098 1.202.054 1.9-.072 1.113-.48 1.66-1.066 2.065l-.078.052c-.728.503-1.133.783-1.36 1.358-.163.423-.163 1.026.317 1.285.307.164.678.136 1.058-.027.075-.032.15-.069.225-.104.22-.106.436-.21.652-.195.226.01.407.143.434.527.036.403.208.567.488.567.226 0 .435-.163.598-.604l.084-.242c.123-.361.217-.64.44-.64.29.01.351.334.37.794.027.662-.207 1.172-.67 1.623-.532.518-.93 1.009-.785 1.65.1.453.57.75 1.31.788.76.029 1.99.038 2.84.02.797-.02 1.258-.385 1.348-.874.057-.29.002-.482-.052-.666-.048-.164-.096-.32-.057-.533.045-.25.263-.356.498-.356s.46.106.496.356c.034.208-.01.362-.058.523-.054.187-.112.381-.05.676.1.48.552.844 1.348.873.85.02 2.08.01 2.83-.03.742-.037 1.212-.335 1.311-.786.145-.643-.251-1.124-.785-1.65-.46-.453-.697-.96-.67-1.622.018-.46.09-.787.371-.797.225-.008.32.275.443.645.026.076.052.156.082.238.162.441.37.606.596.606.28 0 .452-.175.488-.569.036-.393.217-.517.434-.527.216-.014.432.09.652.195.075.036.152.072.227.104.389.163.749.19 1.057.027.498-.26.499-.863.336-1.285-.232-.587-.642-.867-1.409-1.39l-.03-.02c-.589-.403-.995-.952-1.067-2.065-.044-.699.002-1.266.054-1.9.056-.682.118-1.44.08-2.514-.054-1.593-.594-2.803-.93-3.513-.397-.825-.47-1.42-.497-2.38a71.47 71.47 0 0 1-.006-2.013c.003-.597.005-1.142-.004-1.414-.018-.605-.254-.997-.643-1.2a1.147 1.147 0 0 0-.545-.13Zm-7.6 7.08h.032c.335 0 .615.287.615.652 0 .355-.27.653-.615.653a.63.63 0 0 1-.613-.653c0-.343.254-.634.582-.652zm6.929 0h.033c.334 0 .613.287.613.652 0 .355-.27.653-.613.653a.63.63 0 0 1-.615-.653c0-.343.253-.634.582-.652zm-3.442 1.246c1.447 0 2.488.346 3.483 1.248.687.624 1.14 1.862.597 2.783-.262.47-.769.846-1.375.903-.805.077-1.302-.23-1.619-.604-.307-.356-.633-.691-1.094-.691-.46 0-.786.334-1.093.69-.317.374-.824.682-1.62.605a1.803 1.803 0 0 1-1.375-.903c-.515-.93-.071-2.169.616-2.783 1.004-.902 2.033-1.248 3.48-1.248Zm.01 6.278c1.574 0 2.867 1.363 2.867 3.042 0 1.68-1.284 3.043-2.867 3.043-1.582 0-2.867-1.363-2.867-3.043 0-1.68 1.285-3.042 2.867-3.042z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------- 記事一覧 */

.post-list a { color: var(--text); }
.content .post-list .section-title,
.section-title {
  text-align: center;
  font-family: var(--display);
  font-size: 30px;
  font-weight: normal;
  margin: 70px 0 50px;
}

.post-rows { list-style: none; margin: 0; padding: 0; }
.post-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  color: var(--text);
  padding: 0 0 50px;
  min-height: 140px;
}
.post-row__text { display: flex; flex-direction: column; min-width: 0; }
.post-row__date { color: var(--muted); font-size: 11px; font-style: italic; margin-bottom: 8px; }
.post-row__title { font-size: 13px; }
.post-row__excerpt { color: #666; font-size: 12px; margin-top: 6px; }
.post-list__empty { text-align: center; color: var(--muted); }

.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.post-tile, .post-row, .related a { overflow-wrap: anywhere; }
.post-tile { position: relative; display: block; aspect-ratio: 1; color: var(--text); overflow: hidden; }
.post-tile:hover { opacity: 1; }
.post-tile__text { display: flex; flex-direction: column; padding: 20px 18px; height: 100%; }
.post-tile__date { font-size: 13px; margin-bottom: 6px; }
.post-tile__title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-tile__excerpt {
  font-size: 13px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.more { text-align: center; margin: 10px 0 40px; }
/* 「もっと見る」などのボタン：四角い枠ではなく下線 */
.btn-more {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  color: var(--text);
  padding: 4px 2px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.btn-more::after { content: ' ▸'; font-size: 10px; }
/* ボタンを複数並べるとき（トップの NEWS：タレントごとの news ページと MYS NEWS）
   ボタンを入れる枠の幅が 640px 以上なら横1列に同じ幅で並べ、狭ければ縦に1つずつ積む（「2つ＋1つ」にはしない）。
   画面ではなく枠の幅で切り替える（コンテナクエリ）。ボタンの文字は折り返さない */
.more--multi { container-type: inline-size; text-align: center; }
.more--multi > .btn-more { margin: 0 18px 10px; white-space: nowrap; }
@container (max-width: 639px) {
  .more--multi > .btn-more { display: block; width: fit-content; margin: 0 auto 16px; }
}
.content a.btn-more { color: var(--text); } /* 本文中に直接置いたボタンも、リンク色ではなく文字色に */

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 60px 0; font-size: 12px; }
.pager a, .pager span { min-width: 36px; text-align: center; color: var(--muted); padding: 4px; }
.pager .is-current { color: var(--text); }
.pager__arrow { font-size: 16px; }

.archive-page { padding: 60px 40px 0; }
.archive-page .post-grid { margin: 0 auto; max-width: 1200px; }
.archive-page .post-rows { margin: 0 auto; max-width: 780px; }
.archive-page .post-row { min-height: 0; padding: 22px 0; border-bottom: 1px solid var(--border); }
.archive-page .post-row__title { font-size: 15px; }

.blog-side { max-width: 700px; margin: 80px auto 0; font-size: 12px; }
.blog-side section { margin-bottom: 40px; }
.blog-side__heading { font-size: 14px; border-left: 2px solid var(--border); padding-left: 10px; margin: 0 0 14px; font-weight: normal; }
.tagcloud { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a { display: inline-block; border: 1px solid var(--border); padding: 3px 10px; color: var(--text); }
.tagcloud span { color: var(--muted); margin-left: 2px; }
.archive details { margin-bottom: 6px; }
.archive summary { cursor: pointer; }
.archive ul { list-style: none; padding: 4px 0 4px 16px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.archive a { color: var(--text); }
.archive span { color: var(--muted); }
.search { display: flex; gap: 6px; }
.search input { flex: 1; border: 1px solid var(--border); padding: 8px 10px; font: inherit; }
.search button { border: 1px solid var(--text); background: #fff; padding: 0 18px; font: inherit; cursor: pointer; }

/* ------------------------------------------------------------- 記事詳細 */

.article { max-width: 780px; margin: 0 auto; padding: 130px 40px 0; }
/* 旧サイトでは日付ヘッダーを非表示にしていた（サイト独自CSS） */
.article__header { display: none; }
.article__title { font-size: 34px; line-height: 1.4; margin: 0 0 40px; letter-spacing: 0; }
.article__body { font-size: 14px; }
.article__cats { font-size: 10px; color: var(--muted); margin: 60px 0 40px; }
.article__cats a { color: var(--muted); }

.share { list-style: none; display: flex; justify-content: flex-end; gap: 10px; padding: 0; margin: 0 0 40px; }
.share a {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #3b5998;
}
.share li:nth-child(2) a { color: #000; }
.share li:nth-child(3) a { color: #00a4de; font-size: 11px; }
.share a.share__line { color: #06c755; font-size: 8px; }

.author { display: flex; gap: 24px; align-items: flex-start; border: 1px solid var(--border); padding: 24px; margin-bottom: 70px; }
.author__logo { width: 64px; }
.author__name { font-weight: bold; margin: 0 0 4px; }
.author__desc { margin: 0; font-size: 12px; }

.related__heading { font-size: 15px; font-weight: normal; border-left: 2px solid var(--border); padding-left: 12px; margin: 0 0 30px; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { border-bottom: 1px solid var(--border); }
.related a { display: block; color: var(--text); padding: 22px 0 30px; }
.related__title { display: block; font-weight: bold; margin-bottom: 12px; }
.related__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #666;
  font-size: 12px;
}
.related__date { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }

.prevnext { display: flex; justify-content: space-between; gap: 20px; margin: 50px 0 0; font-size: 12px; }
.prevnext__item { display: flex; flex-direction: column; color: var(--text); max-width: 48%; }
.prevnext__item--prev { text-align: right; margin-left: auto; }
.prevnext__label { color: var(--muted); font-size: 11px; }

.notfound { text-align: center; }

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff4d6;
  border-bottom: 1px solid #e8cf86;
  color: #6b5200;
  font-size: 12px;
  text-align: center;
  padding: 6px 12px;
}

/* ------------------------------------------------------------- スマートフォン */

@media (max-width: 800px) {
  .sp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    height: 50px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 30;
  }
  .sp-header__logo img { height: 26px; width: auto; }
  .sp-header__menu {
    position: absolute;
    left: 12px;
    top: 13px;
    width: 26px;
    height: 24px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
  }
  .sp-header__menu span { display: block; height: 1.5px; background: var(--text); margin: 0 0 7px; transition: transform 0.2s, opacity 0.2s; }
  .menu-open .sp-header__menu span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .menu-open .sp-header__menu span:nth-child(2) { opacity: 0; }
  .menu-open .sp-header__menu span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

  .side {
    top: 50px;
    width: 100%;
    border-right: 0;
    padding: 40px 28px;
    transform: translateX(-100%);
    transition: transform 0.25s;
  }
  .menu-open .side { transform: none; }
  .menu-open { overflow: hidden; }

  .main { margin-left: 0; }
  .page, .archive-page { padding: 40px 16px 0; }
  .page--home { padding: 30px 0 0; }
  .page--home .page__body > :not(figure) { padding-left: 16px; padding-right: 16px; }
  .page-title { font-size: 30px; }
  .article { padding: 40px 16px 0; }
  .article__title { font-size: 24px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; gap: 20px; }
  .artist-group { margin-bottom: 50px; }
  .artist-grid { gap: 16px; }
  .content .artist-group__title { font-size: 18px; margin-bottom: 20px; }
  .artist-grid--single { max-width: calc((100% - 16px) / 2); }
  .artist-card__meta { margin-top: 10px; gap: 6px 10px; }
  .artist-card__name { font-size: 13px; }
  .content .artist-card__meta .sns { gap: 10px; }
  .content .artist-card__meta .sns a { width: 15px; height: 15px; }
  .content .profile__name { font-size: 22px; }
  .profile__info { gap: 8px 12px; }
  .content .profile-section .section-title,
  .content .profile-body .post-list .section-title { font-size: 20px; margin: 50px 0 24px; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .post-tile { aspect-ratio: auto; }
  .post-tile__title { font-size: 14px; }
  .post-tile__text { padding: 12px 10px 24px; }
  .pager a, .pager span { min-width: 26px; padding: 4px 2px; }
  .post-row { min-height: 0; padding-bottom: 40px; }
  .link-card__thumb { flex-basis: 110px; }
  .content hr { width: 80%; }
  .footer { margin-top: 60px; }
}

/* =========================================================================
   見た目の調整（2026-11 デザイン B を採用）
   - 記事の一覧：「日付｜見出し」を横に並べ、細い線で区切って詰める
   - 見出し：字間を広げ、下に短い線 ／ ボタン：マウスを乗せると黒く塗りつぶし
   ========================================================================= */
body { letter-spacing: 0.04em; }

.gnav a { font-size: 17px; font-weight: 500; letter-spacing: 0.22em; }
.side__title { font-size: 18px; font-weight: 600; letter-spacing: 0.1em; }

.page-title { font-size: 46px; font-weight: 600; letter-spacing: 0.12em; }
.section-title,
.content .post-list .section-title,
.content .profile-section .section-title,
.content .profile-body .post-list .section-title { font-size: 28px; font-weight: 500; letter-spacing: 0.18em; margin: 70px 0 34px; }
.section-title::after { content: ''; display: block; width: 28px; height: 1px; background: currentColor; margin: 12px auto 0; opacity: 0.6; }
.content .artist-group__title { font-size: 24px; font-weight: 500; letter-spacing: 0.32em; }
.artist-card__name { letter-spacing: 0.16em; }

/* 記事の一覧（リスト）：日付｜見出し の2列。抜粋は見出しの下 */
.post-rows { border-top: 1px solid var(--border); }
.post-row,
.archive-page .post-row,
.profile-body .post-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: baseline;
  gap: 2px 24px;
  min-height: 0;
  padding: 18px 6px;
  border-bottom: 1px solid var(--border);
}
.post-row__text { display: contents; }
.post-row__date { margin: 0; font-family: var(--display); font-style: normal; font-size: 16px; letter-spacing: 0.06em; font-variant-numeric: lining-nums; color: var(--muted); }
.post-row__title { font-size: 14px; transition: color 0.2s; }
.archive-page .post-row__title { font-size: 15px; }
.post-row__excerpt { grid-column: 2; margin-top: 4px; }
.post-row:hover { opacity: 1; }
.post-row:hover .post-row__title { color: var(--hover); }

.post-list .more,
.post-list + .more { margin-top: 28px; }
/* ボタン */
.btn-more { font-family: var(--display); font-size: 15px; letter-spacing: 0.16em; transition: color 0.2s; }
.btn-more:hover,
.content a.btn-more:hover { color: var(--hover); opacity: 1; } /* マウスを乗せると文字と下線がラベンダーに */

/* 個人ページのプロフィール */
.profile__info { grid-template-columns: 8em 1fr; }
.accordion summary { font-weight: 500; letter-spacing: 0.1em; }

@media (max-width: 800px) {
  .page-title { font-size: 34px; }
  .post-row,
  .archive-page .post-row,
  .profile-body .post-row { grid-template-columns: 1fr; padding: 14px 2px; }
  .post-row__excerpt { grid-column: 1; }
}

/* -------------------------------------------------------------
   マウスを乗せたときの動き（パソコンのみ。動きを減らす設定の端末では動かさない）
   - 左のメニュー：色がふわっと変わり、下に細い線が左から伸びる
   - ボタン：下線がラベンダーで左から塗り替わり、文字色も変わる。「▸」が少し右へ
   ------------------------------------------------------------- */
.gnav a { position: relative; display: inline-block; transition: color 0.35s ease; }
.gnav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.gnav a:hover::after { transform: scaleX(1); }

.btn-more {
  border-bottom: 0;
  padding-bottom: 5px;
  background:
    linear-gradient(var(--hover), var(--hover)) left bottom / 0% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: color 0.35s ease, background-size 0.35s ease;
}
.btn-more:hover,
.content a.btn-more:hover { background-size: 100% 1px, 100% 1px; }
.btn-more::after { display: inline-block; transition: transform 0.35s ease; }
.btn-more:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .gnav a, .gnav a::after, .btn-more, .btn-more::after, .post-row__title { transition: none; }
}

/* -------------------------------------------------------------
   ページの切り替わりと、＋の開閉の動き（動きを減らす設定の端末では動かさない）
   ------------------------------------------------------------- */
/* ページの切り替わり：左のメニュー（スマホは上のバー）はそのまま、中身だけをふわっと入れ替える（対応ブラウザのみ） */
@view-transition { navigation: auto; }
.side { view-transition-name: site-side; }
.sp-header { view-transition-name: site-header; }
/* 前のページはふわっと消え、新しいページは少し下から浮かび上がる（ゆっくりめ） */
::view-transition-old(root) { animation: vt-out 0.45s ease both; }
::view-transition-new(root) { animation: vt-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ＋の開閉：＋の縦の線が回って−になる */
.accordion summary::before,
.accordion summary::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--muted);
  transform: none;
  transition: transform 0.3s ease;
}
.accordion summary::after { transform: rotate(90deg); }
.accordion[open] summary::after { content: ''; transform: rotate(0deg); }
/* 開くと中身がふわっと現れる */
.accordion[open] > .history { animation: accordion-in 0.35s ease; }
@keyframes accordion-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* 高さもなめらかに伸び縮みさせる（対応ブラウザのみ） */
@supports selector(::details-content) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete; }
  .accordion[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .accordion summary::before, .accordion summary::after { transition: none; }
  .accordion[open] > .history { animation: none; }
  .accordion::details-content { transition: none; }
}

/* -------------------------------------------------------------
   そのほかの動き（動きを減らす設定の端末では動かさない）
   ------------------------------------------------------------- */
/* リンク全般：マウスを乗せると色がふわっとラベンダーに（画像のリンクは少し薄く） */
a { transition: color 0.35s ease, opacity 0.35s ease; }
a:hover,
.content a:hover,
.post-list a:hover { color: var(--hover); opacity: 1; }
a img { transition: opacity 0.35s ease; }
a:hover img { opacity: 0.85; }
/* SNS アイコン：マウスを乗せるとラベンダーに */
.content .sns a { transition: background-color 0.35s ease; }
.content .sns a:hover { opacity: 1; background-color: var(--hover); }
/* TALENT の写真：写真か名前にマウスを乗せると写真が少し浮き上がり、名前がラベンダーに（SNS アイコンは各アイコンだけ色が変わる） */
.artist-card img { transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.35s ease; }
.artist-card:has(a.artist-card__photo:hover, a.artist-card__name:hover) img { opacity: 1; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.artist-card__name { transition: color 0.35s ease; }
.content .artist-card:has(a.artist-card__photo:hover) a.artist-card__name { color: var(--hover); }
/* スマホのメニュー：ゆっくりめに開閉 */
@media (max-width: 800px) {
  .side { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
}
/* 下へスクロールしたとき、記事の一覧・TALENT の写真・経歴の欄がふわっと現れる（対応ブラウザのみ。最初から見えている所は動かない） */
@supports (animation-timeline: view()) {
  .post-rows > li,
  .artist-card,
  .accordion {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  a, a img, .content .sns a, .artist-card img, .artist-card__name, .side { transition: none; }
  .artist-card:has(a.artist-card__photo:hover, a.artist-card__name:hover) img { transform: none; box-shadow: none; }
  .post-rows > li, .artist-card, .accordion { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}