:root {
  --color-base: #f6f3ff;
  --color-surface: rgba(246, 243, 255, 0.92);
  --color-text: #201a34;
  --color-text-muted: #756d8f;
  --color-line: rgba(32, 26, 52, 0.12);
  --color-accent: #7a3cff;
  --shadow-header: 0 12px 32px rgba(34, 18, 66, 0.1);
  --site-width: 1200px;
  --header-height: 114px;
  --header-height-sp: 98px;
  --header-current-height: var(--header-height);
  --content-gutter: 24px;
  --font-base: "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-heading: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;
  --z-header: 1000;
}

@media (max-width: 767px) {
  :root {
    --content-gutter: 4px;
  }
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* フルワイドブレイクアウト要素による横スクロール防止 */
}

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

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-base);
  font-family: var(--font-base);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.l-container {
  width: min(100% - (var(--content-gutter) * 2), var(--site-width));
  margin-inline: auto;
}

.works-archive__header.l-container,
.works-archive__body.l-container {
  padding-left: 0;
  padding-right: 0;
}

/* SWELLの .l-content { padding-top: 2em/4em } を確実に上書き */
#content.l-content--front,
#content.l-content--hero-top {
  padding-top: 0;
}

/* 全ページ共通：#content の .l-container 効果を解除する
   （#content と内側の section の両方に .l-container が付くと幅が二重縮減され、
     PCで実効1200px取れず狭まる。外側を 100% に開放し、内側の section.l-container
     だけで 1200px を確保する。SP余白は下のメディアクエリで SWELL値を復活させる。 */
#content.l-container,
#content {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 念のため main 要素自体にも左右の余白がつかないよう強制
   （ページ間で main の左右余白に差が出ないことを保証する） */
main.front-page,
main.works-archive,
main.news-archive,
main.recruit-page,
main.trial-page,
main.news-single,
main.works-single {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* SP：他ページ（作品一覧/ニュース）は SWELL本体の .l-container が
   padding-left/right: var(--swl-pad_container) を持ち、これが SP で十数〜20px 程度の
   余白を作っている。トップは上で padding を 0 に解除しているため、その余白が
   失われていた。SP のみ復活させて他ページと同じ実効余白に揃える。 */
@media (max-width: 767px) {
  /* SP：上で全ページの #content.l-container を padding 0 に解除しているため、
     ここで SWELL値（--swl-pad_container）を復活させて、SP の左右余白を作る。
     トップ・作品一覧・ニュースすべて同じ余白計算式になる。 */
  #content.l-container,
  #content {
    padding-left: var(--swl-pad_container, 16px) !important;
    padding-right: var(--swl-pad_container, 16px) !important;
  }

  /* SP：内側 section の SWELL padding は二重余白になるため解除。 */
  .works-archive__header.l-container,
  .works-archive__body.l-container,
  .news-archive__header.l-container,
  .news-archive__body.l-container {
    padding-left: 0;
    padding-right: 0;
  }
}

.l-content--trial {
  padding-top: var(--header-current-height);
}

.l-content--with-breadcrumb {
  padding-top: calc(var(--header-height) + 32px);
}

/* recruit ページのみ：#content 上部の余白をヘッダー実測値ちょうどに合わせ、
   breadcrumb と main の間の空白を除去する（他ページは触らない） */
.page-template-page-recruit #content.l-content--with-breadcrumb {
  padding-top: var(--header-current-height);
}

/* ==========================================
   ヘッダー 2段レイアウト
========================================== */

/* ベース */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  background: rgb(90, 27, 82);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* ---- 上段 ---- */
.site-header__top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}

/* ロゴ以外（検索/お問合せ/翻訳/SP メニュー）を右寄せにまとめる起点 */
.site-header__search {
  margin-left: auto;
}

/* ロゴ */
.site-header__logo {
  flex: 0 0 auto;
  width: 200px;
}

.site-header__logo-link {
  display: flex;
  align-items: center;
  width: 100%;
}

.site-header .site-header__logo-image,
.site-header__logo-link img.site-header__logo-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
}

@media (max-width: 767px) {
  .site-header__logo {
    width: 150px;
  }
}

.site-header__logo-text {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

/* 検索トグルボタン（虫眼鏡アイコン） */
.site-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition-base), background var(--transition-base);
}

.site-header__search-toggle:hover,
.site-header__search-toggle[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* 虫眼鏡⇄× アイコン切替 */
.site-header__search-icon--close {
  display: none;
}

.site-header__search-toggle[aria-expanded="true"] .site-header__search-icon--search {
  display: none;
}

.site-header__search-toggle[aria-expanded="true"] .site-header__search-icon--close {
  display: inline;
}

/* 虫眼鏡＋ドロップダウンのラッパー（トグル基準で配置するため relative） */
.site-header__search {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* 検索ドロップダウン（虫眼鏡直下のコンパクトな白ボックス） */
.site-header__search-overlay {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: min(320px, calc(100vw - 24px));
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(32, 26, 52, 0.1);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(34, 18, 66, 0.22);
  z-index: 10;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

.site-header__search-overlay.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__search-overlay[hidden] {
  display: none;
}

.site-header__search-overlay-inner {
  display: block;
}

.site-header__search-overlay-form {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px 0 16px;
  background: var(--color-base);
  border: 1px solid rgba(122, 60, 255, 0.25);
  border-radius: 999px;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.site-header__search-overlay-form:focus-within {
  border-color: var(--color-accent);
  background: #fff;
}

.site-header__search-overlay-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  color: var(--color-text);
  outline: none;
}

.site-header__search-overlay-input::placeholder {
  color: var(--color-text-muted);
}

.site-header__search-overlay-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.site-header__search-overlay-submit:hover {
  opacity: 0.85;
}

/* お問い合わせボタン */
.site-header__contact-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background: #1a3a5c;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition: background var(--transition-base);
}

.site-header__contact-btn:hover {
  background: #224a72;
  color: #fff;
}

/* 言語切替（GTranslate）：ヘッダー設置 */
.site-header__lang {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* gt_switcher の高さをボタン分(実測32px)に固定し、リストは下へはみ出させる。
   高さ固定でヘッダー中央揃えの上はみ出しを防ぐ。
   block にして flex の子潰れ(flex-shrink)を回避。absolute は開閉JSと非互換のため不使用 */
.site-header__lang .gt_switcher {
  display: block !important;
  height: 32px !important;
  overflow: visible !important;
  position: relative;
  font-size: 0.8125rem;
}

/* リストは通常フロー(relative)のまま。gt_switcherのoverflow:visibleで箱の外(下)へはみ出す。
   absolute は使わない（開閉JSと非互換のため） */
.site-header__lang .gt_switcher .gt_option {
  z-index: 1000;
}

/* ---- 下段（ナビ） ---- */
.site-header__bottom {
  background: #0b1520;
}

/* 左：テキストリンク　右：ボタン群＋SNS（右寄せ） */
.site-header__bottom-inner {
  display: flex;
  align-items: stretch;
  height: 50px;
}

/* テキストリンク（左） */
.site-header__nav-text-links {
  display: flex;
  align-items: stretch;
}

.site-header__nav-text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--transition-base), background var(--transition-base);
}

.site-header__nav-text-link:first-child {
  border-left: none;
  padding-left: 0;
}

.site-header__nav-text-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

/* ボタン群：テキストリンクの右に連続配置 */
.site-header__nav-btns {
  display: flex;
  align-items: stretch;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 26px;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
  transition: color var(--transition-base), background var(--transition-base);
}

.site-header__nav-btn+.site-header__nav-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header__nav-btns .site-header__nav-btn:first-child {
  padding-left: 0;
}

.site-header__nav-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

/* ナビアイコン */
.site-header__nav-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  opacity: 0.65;
}

/* SNSリンク（右）：右端に寄せる */
.site-header__sns {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin-left: auto;
}

.site-header__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  color: rgba(255, 255, 255, 0.55);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--transition-base), background var(--transition-base);
}

.site-header__sns-link svg {
  width: 15px;
  height: 15px;
}

.site-header__sns-link:last-child {
  border-right: none;
}

.site-header__sns-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

/* SP専用：翻訳タブ直下のSNS行（PC では非表示） */
.site-header__sns-sp {
  display: none;
}

/* SP：ハンバーガーボタン（PC では非表示） */
.site-header__toggle {
  display: none;
}

/* ==========================================
   パンくずリスト（ヘッダー内・下層ページ）
========================================== */
.site-breadcrumb {
  background: #060d14;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  list-style: none;
  /* 左右位置は l-container クラスに委譲（ヘッダー各段と完全一致） */
  padding-top: 0;
  padding-bottom: 0;
  height: 32px;
  gap: 0;
}

.site-breadcrumb__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

/* 末尾の現在ページだけ縮小を許可して省略 */
.site-breadcrumb__item.is-current {
  flex-shrink: 1;
  min-width: 0;
}

.site-breadcrumb__item.is-current span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.7);
}

/* セパレーター */
.site-breadcrumb__item+.site-breadcrumb__item::before {
  content: '/';
  margin: 0 9px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.site-breadcrumb__link {
  color: rgba(255, 255, 255, 0.48);
  transition: color var(--transition-base);
}

.site-breadcrumb__link:hover {
  color: #fff;
}

/* ==========================================
   ヘッダー SP（～767px）
========================================== */
@media (max-width: 767px) {
  .l-content--trial {
    padding-top: 0;
  }

  .l-content--with-breadcrumb {
    padding-top: 12px;
  }

  .site-header__top-inner {
    height: 60px;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .site-header__contact-btn {
    display: none;
  }

  /* ハンバーガーは下段ナビを常時表示するので非表示 */
  .site-header__toggle {
    display: none;
  }

  /* SP ナビ：常時表示（横一列・必要時 横スクロール） */
  .site-header__bottom {
    background: #0b1520;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header__bottom-inner {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    height: 38px;
    padding: 0;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .site-header__bottom-inner::-webkit-scrollbar {
    display: none;
  }

  .site-header__nav-text-links,
  .site-header__nav-btns {
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
  }

  .site-header__nav-text-link,
  .site-header__nav-btn {
    padding: 0 12px;
    font-size: 0.78rem;
    white-space: nowrap;
    border-bottom: 0;
  }

  .site-header__nav-text-link {
    gap: 5px;
  }

  .site-header__nav-btn {
    gap: 5px;
  }

  .site-header__nav-icon {
    width: 13px;
    height: 13px;
  }

  .site-header__sns {
    flex-direction: row;
    margin-left: auto;
    flex-shrink: 0;
  }

  .site-header__sns-link {
    width: 36px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header__sns-link svg {
    width: 13px;
    height: 13px;
  }

  /* 下段ナビ内のSNSはSPで非表示（翻訳タブ直下の専用行に集約） */
  .site-header__bottom .site-header__sns {
    display: none;
  }

  /* SP専用：翻訳タブ直下のSNS行（中央横並び・常時表示） */
  .site-header__sns-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 40px;
    background: #0b1520;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header__sns-sp .site-header__sns-link {
    width: auto;
    padding: 0 12px;
    border-left: none;
  }
}

/* ==========================================
   フッター
========================================== */

/* フッター変数 */
:root {
  --footer-bg: #ebe4f7;
  --footer-bg-secondary: #dfd5f0;
  --footer-panel: rgba(255, 255, 255, 0.68);
  --footer-panel-text: #201a34;
  --footer-panel-line: rgba(32, 26, 52, 0.1);
  --footer-link: #4b4364;
  --footer-link-hover: #201a34;
  --footer-copyright-bg: #d6ccea;
}

.site-footer {
  margin-top: 0;
  background: linear-gradient(180deg, var(--footer-bg-secondary) 0%, var(--footer-bg) 100%);
  color: var(--footer-panel-text);
  border-top: 1px solid rgba(32, 26, 52, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- ブランド行 ---- */
.site-footer__brand-row {
  padding: 40px 0 28px;
}

.site-footer__brand-inner {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.site-footer__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28%;
  min-height: 100px;
  padding: 20px;
  background: transparent;
  border: none;
  text-decoration: none;
  color: var(--footer-panel-text);
  transition: opacity var(--transition-base), border-color var(--transition-base);
}

.site-footer__logo-box:hover {
  opacity: 1;
  border-color: rgba(122, 60, 255, 0.35);
}

.site-footer__logo-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  background: transparent;
}

.site-footer__logo-text {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--footer-panel-text);
  text-align: center;
}

.site-footer__desc-box {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  background: var(--footer-panel);
  border: 1px solid var(--footer-panel-line);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.site-footer__description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(32, 26, 52, 0.8);
}

.site-footer__description--placeholder {
  color: rgba(32, 26, 52, 0.46);
  font-style: italic;
}

/* ---- ナビゲーション行 ---- */
.site-footer__nav-row {
  padding: 20px 0 24px;
  border-top: 1px solid rgba(32, 26, 52, 0.08);
}

.site-footer__nav {
  width: 100%;
}

.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__menu li {
  margin: 0;
  padding: 0;
}

.site-footer__menu a {
  display: inline-block;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--footer-link);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid var(--footer-panel-line);
  border-radius: 4px;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.site-footer__menu a:hover,
.site-footer__menu .current-menu-item > a,
.site-footer__menu .current_page_item > a {
  background: rgba(122, 60, 255, 0.1);
  border-color: rgba(122, 60, 255, 0.4);
  color: var(--footer-link-hover);
  transform: translateY(-1px);
}

.site-footer__sns-row {
  padding: 0 0 24px;
}

.site-footer__sns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--footer-link);
  border: 1px solid var(--footer-panel-line);
  border-radius: 4px;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}

.site-footer__sns-link:hover {
  background: rgba(122, 60, 255, 0.1);
  border-color: rgba(122, 60, 255, 0.4);
  color: var(--footer-link-hover);
  transform: translateY(-1px);
}

.site-footer__sns-link.is-placeholder {
  opacity: 0.55;
  cursor: default;
}

/* ---- コピーライト行 ---- */
.site-footer__copyright-row {
  background: var(--footer-copyright-bg);
  padding: 16px 0;
  border-top: 1px solid rgba(32, 26, 52, 0.08);
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(32, 26, 52, 0.58);
  text-align: center;
  letter-spacing: 0.08em;
}

/* ---- レスポンシブ ---- */
@media (max-width: 767px) {
  .site-footer__brand-inner {
    flex-direction: column;
    gap: 12px;
  }

  .site-footer__logo-box {
    flex: none;
    min-height: 80px;
    padding: 16px;
  }

  .site-footer__desc-box {
    padding: 16px 20px;
  }

  .site-footer__nav-row {
    padding-top: 16px;
  }

  .site-footer__menu {
    justify-content: flex-start;
  }

  .site-footer__sns-row {
    padding-bottom: 20px;
  }

  .site-footer__menu a {
    font-size: 0.8rem;
    padding: 7px 14px;
  }
}

/* ==========================================
   作品一覧ページ（archive-works）
========================================== */

.works-archive__header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-top: calc(var(--header-current-height) + 40px);
  padding-bottom: 0;
  margin-bottom: 40px;
  text-align: left;
}

.works-archive__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  flex: 0 0 auto;
}

/* 見出し横の検索窓レイアウト用：works-filter を header 内で flex 配置 */
.works-archive__header .works-filter {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.works-archive__header .works-filter__search {
  margin-left: auto;
  flex: 0 0 auto;
  width: min(360px, 100%);
}

.works-archive__header .works-filter__genres {
  flex: 1 1 100%;
  order: 2;
}

.works-archive__filter {
  margin-top: 16px;
}

.works-archive__body {
  margin-top: 0;
}

/* 絞り込みフィルター */
.works-filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.works-filter__search-inner {
  display: flex;
  align-items: center;
  max-width: 480px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.works-filter__search-inner:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(143, 45, 45, 0.12);
}

.works-filter__search-input {
  flex: 1;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--color-text);
  outline: none;
}

.works-filter__search-input::placeholder {
  color: var(--color-text-muted);
}

.works-filter__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-base);
}

.works-filter__search-btn:hover {
  color: var(--color-accent);
}

.works-filter__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.works-filter__genre-btn {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-line);
  border-radius: 100px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.works-filter__genre-btn:hover,
.works-filter__genre-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* 作品グリッド（SP: 2列 / PC: 3列） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
}

.works-grid .front-work-card {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
}

@media (min-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
  }
}

/* ページネーション */
.works-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 56px;
  padding-bottom: 8px;
}

.works-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.works-pagination .page-numbers:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.works-pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  pointer-events: none;
}

/* 検索結果なし */
.works-archive__empty {
  padding: 64px 0;
  text-align: center;
  color: var(--color-text-muted);
}

.works-archive__empty-link {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--color-accent);
  transition: background var(--transition-base), color var(--transition-base);
}

.works-archive__empty-link:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ==============================================
   作品詳細ページ（single-works）
=============================================== */

/* レイアウト */
.works-single {
  padding-bottom: 80px;
}

.works-single__article {
  padding-top: 48px;
}

/* ヘッダー：表紙 + 基本情報 */
.works-single__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .works-single__header {
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
  }
}

/* 表紙画像 */
.works-single__cover {
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .works-single__cover {
    width: 240px;
    margin-inline: 0;
  }
}

@media (min-width: 1200px) {
  .works-single__cover {
    width: 300px;
  }
}

.works-single__cover-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(31, 26, 23, 0.16);
}

@media (max-width: 767px) {
  #content.l-content--with-breadcrumb {
    width: 100%;
  }

  .works-single__article {
    padding-top: 14px;
  }

  .works-single__header {
    gap: 24px;
  }

  .works-single__cover {
    max-width: calc(100vw - 16px);
  }
}

.works-single__cover-placeholder {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-line);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  border-radius: 4px;
}

/* 基本情報エリア */
.works-single__info {
  flex: 1;
  min-width: 0;
}

/* ジャンルタグ */
.works-single__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.works-single__genre a {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  font-size: 0.8rem;
  color: var(--color-accent);
  transition: background var(--transition-base), color var(--transition-base);
}

.works-single__genre a:hover {
  background: var(--color-accent);
  color: #fff;
}

/* タイトル */
.works-single__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* メタ情報 */
.works-single__meta {
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.works-single__meta-row {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 12px;
}

.works-single__meta-row dt {
  flex: 0 0 60px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.works-single__meta-row dd {
  margin: 0;
  color: var(--color-text);
}

/* セクション共通見出し */
.works-single__section-title {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

/* あらすじ */
.works-single__description {
  margin-top: 56px;
}

.works-single__description-body {
  font-size: 0.95rem;
  line-height: 2;
  color: var(--color-text);
}

/* 本文 */
.works-single__content {
  margin-top: 56px;
}

.works-single__content-body {
  font-size: 0.95rem;
  line-height: 2;
}

/* 試し読みギャラリー */
.works-single__trial {
  margin-top: 56px;
}

.works-trial-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .works-trial-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1200px) {
  .works-trial-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

.works-trial-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--color-line);
  transition: opacity var(--transition-base);
}

.works-trial-gallery__item:hover {
  opacity: 0.8;
}

.works-trial-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 試し読みボタン */
.works-single__trial-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
  padding: 14px 20px;
  background: var(--color-accent);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  transition: opacity var(--transition-base);
}

.works-single__trial-btn:hover {
  opacity: 0.85;
  color: #fff;
}

/* ==============================================
   書店リンク（store-links）
=============================================== */
.store-links {
  margin-top: 0;
}

.store-links__heading {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.store-links__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 768px) {
  .store-links__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.store-links__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: #6b21a8;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  transition: opacity var(--transition-base);
}

.store-links__btn:hover {
  opacity: 0.85;
  color: #fff;
}

/* ==============================================
   電子配信書店（store-banners）
=============================================== */
.store-banners {
  margin-top: 56px;
}

.store-banners__heading {
  margin-bottom: 24px;
}

.store-banners__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .store-banners__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 22px;
  }

  .trial-summary .store-banners__list {
    max-width: none;
  }

  .trial-summary .store-banners__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 64px;
  }
}

.store-banners__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-banners__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 84px;
  padding: 0;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.store-banners__link:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.store-banners__img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 52px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .store-banners__img {
    max-width: 220px;
    height: 64px;
  }
}

.store-banners__note {
  margin: 20px 0 0;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--color-text);
}

/* ==============================================
   SNSシェア（sns-share）
=============================================== */
.sns-share {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sns-share__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.sns-share__list {
  display: flex;
  gap: 10px;
}

.sns-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  transition: opacity var(--transition-base);
}

.sns-share__btn:hover {
  opacity: 0.85;
  color: #fff;
}

.sns-share__btn--x {
  background: #000;
}

.sns-share__btn--facebook {
  background: #1877f2;
}

.sns-share__btn--line {
  background: #06c755;
}

.sns-share__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .sns-share {
    margin-top: 40px;
    padding-top: 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sns-share__label {
    text-align: center;
  }

  .sns-share__list {
    flex-direction: column;
    gap: 8px;
  }

  .sns-share__btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.85rem;
    gap: 8px;
  }

  .sns-share__icon {
    width: 15px;
    height: 15px;
  }
}

/* 一覧に戻る */
.works-single__back {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}

.works-single__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.works-single__back-link:hover {
  color: var(--color-accent);
}

/* ==============================================
   試し読みページ（page-trial）
=============================================== */

.trial-page {
  margin: 0;
  padding: 0 0 96px;
  background:
    linear-gradient(180deg, #1f2025 0, #1f2025 520px, #ffffff 520px, #ffffff 100%);
  color: #f0f0f0;
  min-height: 100vh;
}

.trial-reader {
  margin: 0;
}

/* 戻るナビ */
.trial-page__nav {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trial-page__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-base);
}

.trial-page__back-link:hover {
  color: #fff;
}

/* 作品タイトルバー */
.trial-page__title-bar {
  padding: 28px 0 18px;
  text-align: center;
}

.trial-page__work-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.trial-page__work-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  font-weight: 700;
  color: #f0f0f0;
}

/* 試し読みビューア */


.trial-reader__inner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.trial-reader__frame {
  width: 100%;
  padding: 0 40px;
  background: linear-gradient(180deg, #2b2c31 0%, #24252a 100%);
  box-shadow: 0 30px 60px rgba(8, 8, 10, 0.35);
}

.trial-reader__slider {
  overflow: hidden;
}

.trial-reader__track {
  align-items: stretch;
}

.trial-reader__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.trial-reader__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  background: #111214;
}

.trial-reader__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  direction: ltr;
  touch-action: pinch-zoom;
}

/* PC(>=768px) は 2ページ見開き表示。
   隣接スライド境界に縦線を出し、各ページの左右役割を固定するため
   nth-child(odd)=右ページ→左寄せ、nth-child(even)=左ページ→右寄せ にして
   本のように中央で接合させる。 */
@media (min-width: 768px) {
  .trial-reader__slide+.trial-reader__slide .trial-reader__page {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .trial-reader__slide:nth-child(odd) .trial-reader__image-wrap {
    justify-content: flex-start;
  }
  .trial-reader__slide:nth-child(even) .trial-reader__image-wrap {
    justify-content: flex-end;
  }
}

/* 画像の高さを直接指定（Swiper の高さ継承に依存しない） */
.trial-reader__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 500px;
  object-fit: contain;
}

.trial-reader__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color var(--transition-base), opacity var(--transition-base);
}

.trial-reader__nav span {
  display: block;
  width: 18px;
  height: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.trial-reader__nav:hover {
  color: #fff;
}

.trial-reader__nav--prev {
  left: -4px;
}

.trial-reader__nav--prev span {
  transform: rotate(-135deg);
}

.trial-reader__nav--next {
  right: -4px;
}

.trial-reader__nav--next span {
  transform: rotate(45deg);
}

.trial-reader__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 24px 22px;
  margin: 0 -40px;
  background: #24252a;
  flex-shrink: 0;
}

/* 全画面ボタン */
.trial-reader__fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.trial-reader__fullscreen-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* 全画面表示中スタイル */
.trial-reader.is-fullscreen {
  background: #1b1b1f;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trial-reader.is-fullscreen .trial-reader__image {
  height: 90vh;
}

.trial-reader.is-fullscreen .trial-reader__fullscreen-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

/* ページ送り用カーソル（中央：通常 / 左右：ポインタはJSで未設定、デフォルトでよい） */
.trial-reader__image-wrap {
  cursor: default;
}

.trial-reader__pagination {
  min-width: 72px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ページ移動 range スライダー（footer中央） */
.trial-reader__range {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 360px;
  height: 4px;
  margin: 0 12px;
  padding: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.trial-reader__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.trial-reader__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.trial-reader__range:hover::-webkit-slider-thumb,
.trial-reader__range:focus::-webkit-slider-thumb {
  transform: scale(1.15);
}

.trial-reader__range:hover::-moz-range-thumb,
.trial-reader__range:focus::-moz-range-thumb {
  transform: scale(1.15);
}

.trial-reader__hint {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
}

/* 試し読み下部カード */
.trial-summary {
  padding-top: 44px;
  color: var(--color-text);
}

.trial-summary__card {
  position: relative;
  padding: 40px 14px 32px;
  border: 1px solid rgba(31, 26, 23, 0.06);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(31, 26, 23, 0.06);
}

.trial-summary__header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(31, 26, 23, 0.08);
  text-align: center;
}

.trial-summary__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  line-height: 1.4;
  color: #251a49;
  letter-spacing: 0.02em;
}

.trial-summary__title::after {
  content: '';
  display: block;
  width: 182px;
  height: 10px;
  margin: 22px auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='182' height='10' viewBox='0 0 182 10' fill='none'><defs><linearGradient id='a' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%237a3cff' stop-opacity='0'/><stop offset='1' stop-color='%237a3cff' stop-opacity='.5'/></linearGradient><linearGradient id='b' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%237a3cff' stop-opacity='.5'/><stop offset='1' stop-color='%237a3cff' stop-opacity='0'/></linearGradient></defs><rect x='0' y='4.5' width='60' height='1' fill='url(%23a)'/><g transform='translate(74 0)'><path d='M17 1 21 5l-4 4-4-4 4-4Z' fill='%237a3cff' fill-opacity='.7'/><path d='M3 5h8M23 5h8' stroke='%237a3cff' stroke-width='1' stroke-opacity='.5'/></g><rect x='122' y='4.5' width='60' height='1' fill='url(%23b)'/></svg>") center center / 182px 10px no-repeat;
}

.trial-summary__credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: 20px;
}

.trial-summary__credit {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.trial-summary__subtitle {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* SNSシェアボタン */
.trial-summary__share {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed rgba(31, 26, 23, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* PC：shareブロックは content カラム内に居るが、カード全幅で中央寄せしたいので
   cover カラム(220px) + gap(36px) ぶん左方向へ拡張する。
   ※ trial-summary__body の grid-template-columns: 220px 1fr / gap: 36px と連動 */
@media (min-width: 768px) {
  .trial-summary__share {
    margin-left: calc((220px + 36px) * -1);
    width: calc(100% + 220px + 36px);
  }
}

.trial-summary__share-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.trial-summary__share-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  max-width: none;
}

.trial-summary__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(32, 26, 52, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-text);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.trial-summary__share-btn:hover {
  background: #fff;
  border-color: rgba(32, 26, 52, 0.28);
  color: var(--color-text);
  transform: translateY(-2px);
}

/* ボタン内テキストラベルは非表示 */
.trial-summary__share-btn span {
  display: none;
}

.trial-summary__share-btn--x {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.14);
}

.trial-summary__share-btn--x:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.trial-summary__share-btn--fb {
  background: rgba(24, 119, 242, 0.06);
  border-color: rgba(24, 119, 242, 0.2);
  color: #1877f2;
}

.trial-summary__share-btn--fb:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.trial-summary__share-btn--line {
  background: rgba(6, 199, 85, 0.06);
  border-color: rgba(6, 199, 85, 0.22);
  color: #06c755;
}

.trial-summary__share-btn--line:hover {
  background: #06c755;
  border-color: #06c755;
  color: #fff;
}

.trial-summary__body {
  display: grid;
  gap: 32px;
}

.trial-summary__cover {
  max-width: 300px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .trial-summary__cover {
    max-width: 220px;
  }
}

.trial-summary__cover-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(31, 26, 23, 0.12);
}

.trial-summary__cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  background: rgba(31, 26, 23, 0.06);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.trial-summary__content {
  min-width: 0;
}

.trial-summary__section+.trial-summary__section {
  margin-top: 32px;
}

.trial-summary__section-title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 14px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #251a49;
  letter-spacing: 0.04em;
}

.trial-summary__section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--color-accent);
  border-radius: 2px;
}

.trial-summary__description {
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--color-text);
}

.trial-summary .store-links,
.trial-summary .store-banners {
  margin: 0;
}

/* SP：配信サイトのロゴ幅をシェアボタンと揃える */
@media (max-width: 767px) {
  .trial-summary .store-banners__list {
    max-width: 320px;
    margin: 0 auto;
  }

  .trial-summary .store-banners__item,
  .trial-summary .store-banners__link {
    width: 100%;
  }

  .trial-summary .store-banners__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 80px;
  }
}

.trial-summary .store-links__list {
  gap: 12px;
}

.trial-summary .store-links__btn {
  min-height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5dff 0%, #5c2ee6 100%);
  box-shadow: 0 10px 18px rgba(92, 46, 230, 0.22);
}

.trial-summary .store-links__btn:hover {
  opacity: 0.92;
}

.trial-page__actions {
  margin-top: 28px;
  text-align: center;
}

.trial-page__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 26px;
  border: 1px solid rgba(37, 26, 73, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  color: #251a49;
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.trial-page__back-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: #fff;
}

/* 未登録時 */
.trial-page__empty {
  padding: 80px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .trial-reader__frame {
    padding: 0 72px;
  }

  .trial-reader__image {
    height: 720px;
  }

  .trial-reader__footer {
    margin: 0 -72px;
  }

  .trial-summary__card {
    padding: 48px 44px 40px;
  }

  .trial-summary__body {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 36px;
  }
}

@media (max-width: 767px) {
  .trial-reader__frame {
    padding: 0;
  }

  .trial-reader__image {
    height: 460px;
  }

  .trial-reader__footer {
    margin: 0;
  }

  .trial-reader__nav {
    width: 38px;
    height: 38px;
    margin-top: -19px;
  }

  .trial-reader__nav--prev {
    left: -2px;
  }

  .trial-reader__nav--next {
    right: -2px;
  }

  .trial-reader__footer {
    flex-direction: column;
    gap: 8px;
    padding-inline: 16px;
  }

  .trial-reader__hint {
    text-align: center;
    line-height: 1.7;
  }
}

/* ==============================================
   ニュース一覧（archive.php）
=============================================== */
.news-archive {
  padding-bottom: 96px;
}

.news-archive__header {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--color-line);
}

.news-archive__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.news-archive__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.news-archive__body {
  margin-top: 40px;
}

/* ニュースリスト */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item {
  border-bottom: 1px solid var(--color-line);
}

.news-item__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  color: var(--color-text);
  transition: color var(--transition-base);
}

.news-item__link:hover {
  color: var(--color-accent);
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.news-item__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.news-item__cat {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.news-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ページネーション */
.news-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.news-pagination .page-numbers:hover,
.news-pagination .page-numbers.current {
  border-color: var(--color-accent);
  color: #fff;
  background: var(--color-accent);
}

/* 空のとき */
.news-archive__empty {
  padding: 80px 0;
  text-align: center;
}

.news-archive__empty p {
  margin: 0 0 24px;
  color: var(--color-text-muted);
}

.news-archive__empty-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  font-size: 0.9rem;
  color: var(--color-accent);
  transition: background var(--transition-base), color var(--transition-base);
}

.news-archive__empty-link:hover {
  background: var(--color-accent);
  color: #fff;
}

@media (max-width: 767px) {
  .news-item__link {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==============================================
   ニュース詳細（single.php）
=============================================== */
.news-single {
  padding-bottom: 96px;
}

.news-single__article {
  padding-top: 64px;
  max-width: 800px;
}

.news-single__header {
  margin-bottom: 40px;
}

.news-single__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.news-single__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.news-single__cat {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.news-single__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.news-single__thumbnail {
  margin-bottom: 40px;
  border-radius: 4px;
  overflow: hidden;
}

.news-single__thumbnail-img {
  width: 100%;
  height: auto;
}

/* 本文 */
.news-single__content {
  font-size: 1rem;
  line-height: 1.85;
}

.news-single__content p {
  margin: 0 0 1.5em;
}

.news-single__content h2 {
  margin: 2em 0 0.8em;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
}

.news-single__content h3 {
  margin: 1.8em 0 0.6em;
  font-size: 1.1rem;
  font-weight: 700;
}

.news-single__content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 戻るリンク */
.news-single__back {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}

.news-single__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.news-single__back-link:hover {
  color: var(--color-accent);
}

/* ==============================================
   作品募集ページ（page-recruit.php）
=============================================== */
.recruit-page {
  padding-bottom: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(122, 60, 255, 0.10) 0%, rgba(246, 243, 255, 0) 55%),
    var(--color-base);
}

/* ---- ヒーロー ---- */
.recruit-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 8px;
  text-align: center;
}

.recruit-hero::before,
.recruit-hero::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at center, rgba(184, 156, 255, 0.22), rgba(184, 156, 255, 0) 70%);
  pointer-events: none;
}

.recruit-hero::before { top: -60px; left: -60px; }
.recruit-hero::after  { top: 40px; right: -80px; }

.recruit-hero__inner {
  position: relative;
  z-index: 1;
}

.recruit-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  background: linear-gradient(180deg, #5b2bbf 0%, #7a3cff 45%, #b89cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.recruit-hero__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 26px;
  color: var(--color-accent);
}

.recruit-hero__ornament-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(122, 60, 255, 0), rgba(122, 60, 255, 0.5));
}

.recruit-hero__ornament-line:last-child {
  background: linear-gradient(90deg, rgba(122, 60, 255, 0.5), rgba(122, 60, 255, 0));
}

.recruit-hero__lead {
  margin: 0;
  font-size: 1.3rem;
  line-height: 2;
  color: var(--color-text-muted);
}

/* ---- 本文カード ---- */
.recruit-page__body {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-top: 40px;
  margin-bottom: 0;
  padding: 56px clamp(24px, 5vw, 64px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(34, 18, 66, 0.10);
}

/* セクション共通 */
.recruit-section {
  margin-bottom: 52px;
}

.recruit-section:last-child {
  margin-bottom: 0;
}

.recruit-section__title {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 14px;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.recruit-section__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}

.recruit-section__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
}

.recruit-section__note {
  margin: 18px 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* セクション内に導入文＋リストが連続する場合の間隔（募集ジャンル・応募形式） */
.recruit-section__lead + .recruit-list {
  margin-top: 16px;
}

.recruit-section__note + .recruit-section__lead {
  margin-top: 26px;
}

/* リスト（丸ポチ） */
.recruit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recruit-list__item {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.recruit-list__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* 応募要項（定義リスト） */
.recruit-dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.recruit-dl__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-line);
}

.recruit-dl__term {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.recruit-dl__term::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.recruit-dl__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text);
}

.recruit-dl__mail {
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(122, 60, 255, 0.35);
}

.recruit-dl__mail:hover {
  color: #5b2bbf;
}

/* 本文中インラインリンク（応募フォーム → お問い合わせ窓口 等） */
.recruit-link {
  color: var(--color-accent);
  font-weight: 700;
  border-bottom: 1px solid rgba(122, 60, 255, 0.35);
}

.recruit-link:hover {
  color: #5b2bbf;
}

/* 注意事項 */
.recruit-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recruit-notes__item {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.recruit-notes__item::before {
  content: '※';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.85rem;
  color: var(--color-accent);
}

/* CTA */
.recruit-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 8px;
  padding: 36px clamp(24px, 4vw, 44px);
  background: #efeaff url('/wp-content/uploads/2026/06/satorkuCTA.webp') center / cover no-repeat;
  border: 1px solid rgba(122, 60, 255, 0.22);
  border-radius: 12px;
}

.recruit-cta__body {
  position: relative;
  z-index: 1;
}

.recruit-cta__title {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.recruit-cta__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
}

.recruit-cta__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-text);
}

.recruit-cta__btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: linear-gradient(135deg, #7a3cff, #5b2bbf);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  box-shadow: 0 10px 24px rgba(91, 43, 191, 0.30);
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}

.recruit-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(91, 43, 191, 0.38);
  color: #fff;
}

.recruit-cta__btn-arrow {
  transition: transform var(--transition-base);
}

.recruit-cta__btn:hover .recruit-cta__btn-arrow {
  transform: translateX(3px);
}

/* レスポンシブ */
@media (max-width: 767px) {
  .recruit-hero {
    padding: 48px 0 4px;
  }

  .recruit-hero__lead br {
    display: none;
  }

  .recruit-page__body {
    padding: 40px 22px;
    border-radius: 12px;
  }

  .recruit-dl__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .recruit-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 22px;
  }

  .recruit-cta__btn {
    justify-content: center;
  }
}

/* ==============================================
   404ページ（404.php）
=============================================== */
.error-404 {
  min-height: calc(100vh - var(--header-height) - 200px);
  display: flex;
  align-items: center;
}

.error-404__inner {
  padding: 80px 0;
  width: 100%;
}

/* ==============================================
   トップページ（front-page.php）
=============================================== */

/* ヒーローセクション：JSで動的にセット（main.js の applyHeroPadding）
   JSが未実行の場合のフォールバック値 */
.front-hero {
  padding-top: calc(var(--header-height) + 10px);
}

/* works-hero：ヘッダー高さ＋パンくず（32px）分をオフセット */
.works-hero {
  padding-top: calc(var(--header-height) + 32px + 10px);
}

/* works-archive ではパンくずを非表示にしてヒーローを上に詰める */
.post-type-archive-works .site-breadcrumb {
  display: none;
}

.post-type-archive-works .works-hero {
  padding-top: calc(var(--header-height) + 10px);
}

@media (max-width: 767px) {
  .front-hero {
    padding-top: 12px;
    padding-bottom: 0;
  }

  .works-hero {
    padding-top: calc(var(--header-height-sp) + 32px);
  }

  .post-type-archive-works .works-hero {
    padding-top: 12px;
  }
}

/* セクション共通 */
.front-section {
  padding: 44px 0;
}

.front-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
}

.front-section__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.front-section__more {
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  transition: opacity var(--transition-base);
}

.front-section__more:hover {
  opacity: 0.7;
}

/* 新刊情報グリッド（PC: 3列 / SP: 1列） */
.front-section--works .front-works-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px 14px;
  float: none;
}

@media (min-width: 768px) {
  .front-section--works .front-works-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 28px;
  }
}

/* 新刊情報セクションも標準の l-container 幅（1200px）に統一 */
.front-section--works.l-container {
  width: min(100% - (var(--content-gutter) * 2), 1200px);
}

/* カード要素の SWELL リセット */
.front-works-grid .front-work-card {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

/* 作品カード */
.front-work-card {
  margin: 0;
  border: 1px solid rgba(122, 60, 255, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 235, 255, 0.94) 100%);
  box-shadow: 0 14px 28px rgba(59, 34, 112, 0.08);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.front-work-card__link {
  display: block;
  color: var(--color-text);
  transition: opacity var(--transition-base);
}

.front-work-card__link:hover {
  opacity: 1;
}

.front-work-card:hover {
  transform: translateY(-4px);
  border-color: rgba(122, 60, 255, 0.24);
  box-shadow: 0 20px 36px rgba(59, 34, 112, 0.14);
}

.front-work-card__thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(236, 227, 255, 0.75);
  margin-bottom: 12px;
}

.front-work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.front-work-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.front-work-card__body {
  padding: 0 14px 16px;
}

.front-work-card__genre {
  margin: 0 0 4px;
  font-size: 0.72rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}

.front-work-card__title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.03em;
}

.front-work-card__credits {
  display: grid;
  gap: 4px;
}

.front-work-card__credit {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.front-work-card__credit-label {
  color: var(--color-text);
}

.front-work-card__credit-value {
  color: inherit;
}

/* ニュースリスト */
.front-news-panel {
  background: #fff;
  border: 1px solid rgba(32, 26, 52, 0.08);
  border-radius: 12px;
  padding: 28px 32px;
}

.front-news-empty {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
}

.front-news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.front-news-card {
  border-bottom: 1px solid var(--color-line);
}

.front-news-card:last-child {
  border-bottom: none;
}

.front-news-card__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  color: var(--color-text);
  transition: color var(--transition-base);
}

.front-news-card__link:hover {
  color: var(--color-accent);
}

.front-news-card__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.front-news-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .front-section {
    padding: 24px 0;
  }

  /* SP: ヒーローバナーと最初のセクションの間に SWELL本体由来の margin-top 56px
     が乗ってしまうのを抑制。padding(=24px) だけで余白を作り、作品一覧の
     ヒーロー直下と同じ詰め具合に揃える。 */
  .front-page > .front-section {
    margin-top: 0 !important;
  }

  /* 作品一覧 見出し＋検索窓の縦積み */
  .works-archive__header {
    gap: 16px;
    padding-top: calc(var(--header-current-height) + 20px);
  }

  .works-archive__header .works-filter__search {
    width: 100%;
    margin-left: 0;
  }

  /* ヘッダー検索ドロップダウン：SPでは画面中央に配置する。
     ラッパー(site-header__search)が space-between レイアウトで中央寄りにあり、
     ラッパー基準で right:0 すると画面左に伸びてしまうため、SPだけ fixed + left:50%
     で viewport 中央に揃える。 */
  .site-header__search-overlay {
    position: fixed;
    top: var(--header-height-sp);
    left: 50%;
    right: auto;
    width: min(320px, calc(100vw - 24px));
    transform: translate(-50%, -8px);
  }

  .site-header__search-overlay.is-open {
    transform: translate(-50%, 0);
  }

  .front-news-card__link {
    flex-direction: column;
    gap: 6px;
  }

  .front-news-panel {
    padding: 20px 18px;
  }
}

.error-404__content {
  text-align: center;
}

.error-404__code {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  line-height: 1;
  opacity: 0.4;
}

.error-404__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.error-404__message {
  margin: 0 0 40px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.error-404__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.error-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  transition: background var(--transition-base), color var(--transition-base);
}

.error-404__btn:hover {
  background: var(--color-accent);
  color: #fff;
}

.error-404__btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.error-404__btn--primary:hover {
  opacity: 0.85;
}