/*
Theme Name: ARTICUL Theme
Theme URI: https://articul.jp
Author: ARTICUL
Author URI: https://articul.world
Description: Lightweight, jQuery-free theme for ARTICUL Phase1. Implements TOP/WORKS/BLOG/ABOUT/CONTACT and pixel-parity scaffolding.
Version: 1.0.1
Text Domain: articul
*/
/* =========================================================
 * BASE / RESET-LIKE
 * =======================================================*/
:root{
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-6:2rem;
  --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-2xl:1.5rem; --text-3xl:1.875rem;
  --container:1200px;
  --fg:#111; --bg:#fff; --muted:#f5f5f5; --link:#0a66c2;
  --shadow:0 8px 32px rgba(0,0,0,.06);
  --radius:16px;
  --header-menu-color-top:#fff;
  --header-menu-color-other:#111;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--articul-scroll-offset, 0px);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* 100vwフルブリード要素（.hero / .blog-single-tail 等）は縦スクロールバー幅ぶんはみ出すため、横方向のみクリップする */
  overflow-x:clip;
}
body.drawer-open{
  overflow:hidden;
}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Noto Serif JP', serif;
  font-variant-emoji:text;
  background:#fff;
  color:#111;
  line-height:1.75;
}
#main{
  flex:1 0 auto;
  scroll-margin-top:var(--articul-scroll-offset, 0px);
}
body.articul-site-font-sans,
body.articul-site-font-sans button,
body.articul-site-font-sans input,
body.articul-site-font-sans select,
body.articul-site-font-sans textarea{
  font-family:'Noto Sans JP', sans-serif;
}
body.articul-site-font-serif,
body.articul-site-font-serif button,
body.articul-site-font-serif input,
body.articul-site-font-serif select,
body.articul-site-font-serif textarea{
  font-family:'Noto Serif JP', serif;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Layout scaffold: keep generic primitives minimal. */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* =========================================================
 * LAYOUT / HEADER / FOOTER
 * =======================================================*/
/* 単体ページ：下書き・非公開・予約・レビュー待ちのときのステータスバー（編集権限ありで表示時のみ表示） */
.articul-status-bar{
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem 1.25rem;
  width:100%;
  max-width:100%;
  min-width:0;
  padding:.5rem 24px;
  font-size:.875rem;
  background:#f2f3f5;
  color:#5f6670;
  border-bottom:1px solid #d8dde5;
}
.articul-status-bar__text{display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap;min-width:0;flex-shrink:1;overflow-wrap:break-word}
.articul-status-bar__label{font-weight:700}
.articul-status-bar__preview-note{margin:0;font-weight:400}
.articul-status-bar__scheduled{margin:0;opacity:.95}
.articul-status-bar__edit{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .9rem;
  border:1px solid #111;
  border-radius:0;
  background:#111;
  color:#fff;
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.articul-status-bar__edit-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.articul-status-bar__edit-icon svg{width:16px;height:16px;fill:currentColor;display:block}
.articul-status-bar__edit:hover,
.articul-status-bar__edit:focus-visible{
  background:#fff;
  color:#111;
  border-color:#111;
  text-decoration:none;
}
.articul-status-bar--private{background:#f3eefb;color:#6a46b8;border-bottom-color:#d7c9f5}
.articul-status-bar--future{background:#fff3e8;color:#b56414;border-bottom-color:#f1cfad}
.articul-status-bar--pending{background:#fff8df;color:#9b7a0f;border-bottom-color:#f2e2ab}
.header{position:sticky;top:var(--articul-menu-top-offset, 0px);background:rgba(255,255,255,.98);backdrop-filter:saturate(160%) blur(10px);border-bottom:none;box-shadow:0 2px 10px rgba(0,0,0,.08);z-index:50;transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease}
.header.header-hidden{transform:translateY(-100%)}
/* Header scroll reveal/hide animation */
.header.header-scroll-enabled{
  will-change:transform,opacity;
  transition:
    transform .52s cubic-bezier(.22,1,.36,1),
    opacity .42s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}
.header.header-scroll-enabled.header-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.header.header-scroll-enabled.header-hidden{
  opacity:0;
  transform:translate3d(0, calc(-100% - 12px), 0);
  pointer-events:none;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  height:auto;
  width:100%;
  box-sizing:border-box;
  padding:10px clamp(16px, 2.2vw, 32px);
}
.site-title{font-size:1.2rem;font-weight:600;color:#111;margin-right:auto}
.site-title a{
  transition:opacity .2s ease;
}
.site-brand-link{
  display:inline-flex;
  align-items:center;
  max-width:100%;
}
.site-brand__logo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
.site-title .site-brand__logo{
  max-height:56px;
}
.site-title a:hover,
.site-title a:focus-visible{
  text-decoration:none;
  opacity:.65;
}
.util-nav{display:flex;gap:.75rem;font-size:.875rem;color:#555;order:-1}
.util-nav a{color:#666;font-weight:500}
.main-nav{order:2}
.main-nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.main-nav a{
  font-weight:500;
  transition:opacity .2s ease;
}
.main-nav li:not(.articul-free-link):not(.articul-patron-link) > a:hover,
.main-nav li:not(.articul-free-link):not(.articul-patron-link) > a:focus-visible{
  text-decoration:none;
  opacity:.65;
}
.main-nav li:not(.articul-free-link):not(.articul-patron-link).current-menu-item > a,
.main-nav li:not(.articul-free-link):not(.articul-patron-link).current-menu-parent > a,
.main-nav li:not(.articul-free-link):not(.articul-patron-link).current-menu-ancestor > a,
.main-nav li:not(.articul-free-link):not(.articul-patron-link).current_page_item > a,
.main-nav li:not(.articul-free-link):not(.articul-patron-link).current_page_parent > a,
.main-nav li:not(.articul-free-link):not(.articul-patron-link).current_page_ancestor > a,
.main-nav li:not(.articul-free-link):not(.articul-patron-link) > a[aria-current="page"]{
  opacity:.65;
}
.articul-patron-link{
  list-style:none;
}
.main-nav .articul-patron-link{
  margin-left:.4rem;
}
.articul-patron-link > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-height:36px;
  padding:.38rem 1.45rem;
  border-radius:4px;
  background:#a61f24;
  color:#fff;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease;
}
.articul-patron-link > a:hover,
.articul-patron-link > a:focus-visible{
  background:#f3c11a;
  color:#fff;
  opacity:1;
  text-decoration:none;
}
.articul-patron-link--mypage > a{
  background:#f2f3f5;
  border:1px solid #d8dde5;
  color:#111;
  font-weight:500;
}
.articul-patron-link--mypage > a:hover,
.articul-patron-link--mypage > a:focus-visible{
  background:#e7eaf0;
  border-color:#c9d0db;
  color:#111;
}
.articul-patron-link__icon{
  display:inline-flex;
  width:1.575em;
  height:1.575em;
}
.articul-patron-link__icon svg{
  width:100%;
  height:100%;
}
.hamburger{display:none}
.hamburger__icon{
  display:block;
  font-size:24px;
  line-height:1;
  transform:none;
}

:root{
  --drawer-button-gap: 5mm;
}

.menu-drawer{
  position:fixed;
  inset:0;
  z-index:55;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.menu-drawer.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .2s ease;
}
.menu-drawer__backdrop{
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.menu-drawer__panel{
  position:absolute;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  transition:transform .45s ease;
  pointer-events:none;
}
/* side / side-hidden drawer visual rules (shared) */
.menu-drawer--side .menu-drawer__panel{
  top:0;
  bottom:0;
  width:300px;
  padding:1.1rem 1rem;
  background:#fff;
  color:#111;
  border:1px solid #e8e8e8;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.menu-drawer--overlay .menu-drawer__panel{
  left:0;
  right:0;
  top:var(--articul-menu-top-offset);
  bottom:0;
  width:auto;
  padding:0;
  max-height:none;
  overflow:auto;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  border:0;
  box-shadow:none;
  align-items:stretch;
  transform:translateY(-12px);
  opacity:0;
  transition:opacity .48s ease, transform .48s ease;
}
.menu-drawer--overlay .menu-drawer__backdrop{
  top:var(--articul-menu-top-offset);
  background:rgba(0,0,0,.14);
}
.menu-drawer--overlay .menu-drawer__brand{
  display:none;
}
.menu-drawer__topbar{
  display:none;
}
.menu-drawer--overlay .menu-drawer__nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0;
}
.menu-drawer--overlay .menu-drawer__nav ul{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.68rem;
  text-align:center;
}
.menu-drawer--left .menu-drawer__panel{
  left:0;
  transform:translateX(-100%);
}
.menu-drawer--right .menu-drawer__panel{
  right:0;
  transform:translateX(100%);
}
/* overlay(=hamburger) は左右位置に関わらず上から出入りさせる */
.menu-drawer--overlay.menu-drawer--left .menu-drawer__panel,
.menu-drawer--overlay.menu-drawer--right .menu-drawer__panel{
  transform:translateY(-12px);
}
.menu-drawer.is-open .menu-drawer__backdrop{
  opacity:1;
  pointer-events:auto;
}
.menu-drawer.is-open .menu-drawer__panel{
  opacity:1;
  pointer-events:auto;
}
.menu-drawer--side.is-open .menu-drawer__panel{
  transform:translateX(0);
}
.menu-drawer--overlay.is-open .menu-drawer__panel{
  transform:translateY(0);
  opacity:1;
}
.menu-drawer__brand,
.side-floating-menu__brand{
  font-size:.875rem;
  font-weight:600;
  line-height:1.4;
  margin-top:1cm;
  margin-bottom:1rem;
  text-align:center;
}
.menu-drawer__brand a,
.side-floating-menu__brand a{
  color:#111;
  text-decoration:none;
}
.menu-drawer__brand .site-brand-link,
.side-floating-menu__brand .site-brand-link{
  justify-content:center;
}
.menu-drawer__brand .site-brand__logo,
.side-floating-menu__brand .site-brand__logo{
  max-height:60px;
}
.menu-drawer__brand a:hover,
.menu-drawer__brand a:focus-visible,
.side-floating-menu__brand a:hover,
.side-floating-menu__brand a:focus-visible{
  opacity:.72;
  text-decoration:none;
}
.menu-drawer--overlay .menu-drawer__topbar{
  min-height:64px;
  height:auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  padding:10px clamp(16px, 2.2vw, 32px);
  box-sizing:border-box;
}
.menu-drawer__topbar-title{
  font-size:1.125rem;
  font-weight:600;
  line-height:1.2;
  max-width:calc(100% - 72px);
  overflow-wrap:anywhere;
}
body.articul-menu-pos-left .menu-drawer--overlay .menu-drawer__topbar-title{
  margin-left:auto;
  margin-right:0;
  text-align:right;
}
.menu-drawer__topbar-title a{
  color:#111;
  text-decoration:none;
}
.menu-drawer__topbar-title .site-brand__logo{
  max-height:52px;
}
.menu-drawer__topbar-title a:hover,
.menu-drawer__topbar-title a:focus-visible{
  text-decoration:none;
  opacity:.72;
}
.menu-drawer__close{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:#111;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
body.articul-menu-pos-right .menu-drawer--overlay .menu-drawer__close{
  right:var(--drawer-button-gap);
  left:auto;
}
body.articul-menu-pos-left .menu-drawer--overlay .menu-drawer__close{
  left:var(--drawer-button-gap);
  right:auto;
}
.menu-drawer__close-icon{
  font-size:24px;
  line-height:1;
}
.menu-drawer__nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
.menu-drawer--side .menu-drawer__nav ul{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  align-items:center;
  text-align:center;
}
.menu-drawer__nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu-drawer__nav a{
  color:#111;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.02em;
  border-radius:8px;
}
.menu-drawer--side .menu-drawer__nav a{
  display:inline;
  min-height:0;
  padding:0;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:normal;
  border-radius:0;
}
.menu-drawer__nav li:not(.articul-patron-link) > a:hover,
.menu-drawer__nav li:not(.articul-patron-link) > a:focus-visible{
  opacity:.65;
  text-decoration:none;
}
/* hamburger(overlay): slightly larger labels with tighter vertical spacing */
.menu-drawer--overlay .menu-drawer__nav ul{
  gap:.72rem;
}
.menu-drawer--overlay .menu-drawer__nav a{
  min-height:40px;
  padding:.2rem .66rem;
  font-size:clamp(1.18rem, 2.35vw, 1.52rem);
  font-weight:700;
  letter-spacing:.01em;
}
.menu-drawer--overlay .menu-drawer__nav .articul-patron-link > a{
  min-height:40px;
  padding:.45rem 1.6rem;
  font-size:clamp(1.18rem, 2.35vw, 1.52rem);
  letter-spacing:.02em;
  color:#fff;
}
.menu-drawer--overlay .menu-drawer__nav .articul-patron-link > a:hover,
.menu-drawer--overlay .menu-drawer__nav .articul-patron-link > a:focus-visible{
  color:#fff;
}
/* Mypage版は薄グレー背景のため文字色を黒系に戻し、白いパネルに溶けないよう影で浮かせる */
.menu-drawer--overlay .menu-drawer__nav .articul-patron-link--mypage > a,
.menu-drawer--overlay .menu-drawer__nav .articul-patron-link--mypage > a:hover,
.menu-drawer--overlay .menu-drawer__nav .articul-patron-link--mypage > a:focus-visible{
  color:#111;
  box-shadow:0 4px 12px rgba(17,17,17,.14);
}
body.articul-menu-pos-left .header--menu-drawer .site-title{
  margin-left:auto;
  margin-right:0;
  text-align:right;
}

@media (min-width: 961px){
  body.articul-menu-type-side-hidden .main-nav,
  body.articul-menu-type-hamburger .main-nav{
    display:none;
  }
  /* side-hidden はメイン領域を押し出して使うため、bodyスクロールロックは無効化。
     auto だと body がスクロールコンテナ扱いになり、管理バー表示時に
     sticky ヘッダーの top 基準がズレて空白帯ができるため visible で打ち消す */
  body.drawer-open.articul-menu-type-side-hidden{
    overflow:visible;
  }
  /* side-hidden: desktop-only drawer behavior */
  body.articul-menu-type-side-hidden .menu-drawer.is-open{
    pointer-events:none;
  }
  body.articul-menu-type-side-hidden .menu-drawer.is-open .menu-drawer__panel{
    pointer-events:auto;
  }
  /* .menu-drawer.is-open .menu-drawer__backdrop より高い優先度で無効化 */
  body.articul-menu-type-side-hidden .menu-drawer.is-open .menu-drawer__backdrop{
    pointer-events:none;
    opacity:0;
  }
  body.articul-menu-type-side-hidden .menu-drawer--side .menu-drawer__panel{
    top:var(--articul-menu-top-offset);
    bottom:0;
  }
  body.articul-menu-type-side-hidden .header,
  body.articul-menu-type-side-hidden #main,
  body.articul-menu-type-side-hidden .footer{
    width:100%;
    margin-left:0;
    margin-right:0;
    transition:width .45s ease;
  }
  body.articul-menu-type-side-hidden.articul-menu-pos-left .header,
  body.articul-menu-type-side-hidden.articul-menu-pos-left #main,
  body.articul-menu-type-side-hidden.articul-menu-pos-left .footer{
    margin-left:auto;
    margin-right:0;
  }
  body.articul-menu-type-side-hidden.articul-menu-pos-right .header,
  body.articul-menu-type-side-hidden.articul-menu-pos-right #main,
  body.articul-menu-type-side-hidden.articul-menu-pos-right .footer{
    margin-right:auto;
    margin-left:0;
  }
  body.drawer-open.articul-menu-type-side-hidden.articul-menu-pos-left .header,
  body.drawer-open.articul-menu-type-side-hidden.articul-menu-pos-left #main,
  body.drawer-open.articul-menu-type-side-hidden.articul-menu-pos-left .footer{
    width:calc(100% - 300px);
  }
  body.drawer-open.articul-menu-type-side-hidden.articul-menu-pos-right .header,
  body.drawer-open.articul-menu-type-side-hidden.articul-menu-pos-right #main,
  body.drawer-open.articul-menu-type-side-hidden.articul-menu-pos-right .footer{
    width:calc(100% - 300px);
  }
  body.drawer-open.articul-menu-type-side-hidden .articul-front .hero{
    width:100%;
    max-width:100%;
    margin-left:0;
  }

  body.articul-menu-type-side .header--menu-side{
    background:transparent;
    border-bottom:none;
    box-shadow:none;
    backdrop-filter:none;
  }
  body.articul-menu-type-side .header--menu-side .header-inner{
    display:none;
  }

  .side-floating-menu{
    position:fixed;
    top:var(--articul-menu-top-offset);
    bottom:0;
    width:300px;
    z-index:60;
    pointer-events:none;
  }
  .side-floating-menu--left{
    left:0;
  }
  .side-floating-menu--right{
    right:0;
  }
  .side-floating-menu__inner{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:0;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    padding:1.1rem 1rem;
    pointer-events:auto;
  }
  /* サイト名は通常フローから外して上部に固定し、
     ナビが常に枠全体の中央に来るようにする（サイト名非表示時もズレない） */
  .side-floating-menu__brand{
    position:absolute;
    top:calc(1.1rem + 1cm);
    left:1rem;
    right:1rem;
    margin:0;
  }
  .side-floating-menu__nav{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .side-floating-menu__nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.85rem;
    text-align:center;
  }
  .menu-drawer--side .menu-drawer__nav a,
  .side-floating-menu__nav a{
    color:#111;
    text-decoration:none;
  }
  .menu-drawer--side .menu-drawer__nav li:not(.articul-patron-link) > a:hover,
  .menu-drawer--side .menu-drawer__nav li:not(.articul-patron-link) > a:focus-visible,
  .side-floating-menu__nav li:not(.articul-patron-link) > a:hover,
  .side-floating-menu__nav li:not(.articul-patron-link) > a:focus-visible{
    opacity:.65;
    text-decoration:none;
  }
  .menu-drawer--side .menu-drawer__nav .articul-patron-link > a,
  .side-floating-menu__nav .articul-patron-link > a{
    display:inline-flex;
    align-items:center;
    min-width:128px;
    min-height:36px;
    justify-content:center;
    padding:.46rem 1.35rem;
    border-radius:4px;
    background:#a61f24;
    color:#fff;
    font-size:1rem;
    font-weight:700;
    line-height:1.2;
  }
  .menu-drawer--side .menu-drawer__nav .articul-patron-link > a:hover,
  .menu-drawer--side .menu-drawer__nav .articul-patron-link > a:focus-visible,
  .side-floating-menu__nav .articul-patron-link > a:hover,
  .side-floating-menu__nav .articul-patron-link > a:focus-visible{
    background:#f3c11a;
    color:#fff;
    opacity:1;
  }
  .menu-drawer--side .menu-drawer__nav .articul-patron-link--mypage > a,
  .side-floating-menu__nav .articul-patron-link--mypage > a{
    background:#f2f3f5;
    border:1px solid #d8dde5;
    color:#111;
    font-weight:500;
  }
  .menu-drawer--side .menu-drawer__nav .articul-patron-link--mypage > a:hover,
  .menu-drawer--side .menu-drawer__nav .articul-patron-link--mypage > a:focus-visible,
  .side-floating-menu__nav .articul-patron-link--mypage > a:hover,
  .side-floating-menu__nav .articul-patron-link--mypage > a:focus-visible{
    background:#e7eaf0;
    border-color:#c9d0db;
    color:#111;
  }

  body.articul-menu-type-side.articul-menu-pos-left #main,
  body.articul-menu-type-side.articul-menu-pos-left .footer{
    margin-left:300px;
  }
  body.articul-menu-type-side.articul-menu-pos-right #main,
  body.articul-menu-type-side.articul-menu-pos-right .footer{
    margin-right:300px;
  }

  /* Side menu時は 100vw ベースの全幅演出を無効化して横スクロールを防ぐ */
  body.articul-menu-type-side .hero,
  body.articul-menu-type-side .blog-archive-hero,
  body.articul-menu-type-side .blog-single-tail,
  body.articul-menu-type-side .blog-single-tail__divider{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }
  /* ブログ個別ページの末尾エリアは .blog-single-page の左右パディング(24px)を
     打ち消してメイン領域の端まで届かせる（WORKS詳細には影響させない） */
  body.articul-menu-type-side .blog-single-page .blog-single-tail{
    width:auto;
    max-width:none;
    margin-left:-24px;
    margin-right:-24px;
  }
}

@media (min-width: 961px){
  .header-inner--menu-top-center{
    position:relative;
  }
  .header-inner--menu-top-center .site-title{
    margin-right:auto;
  }
  .header-inner--menu-top-center .main-nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    order:1;
  }
  .header-inner--menu-top-center .hamburger{
    margin-left:auto;
  }

  .header-inner--menu-top-left .util-nav{
    order:0;
  }
  .header-inner--menu-top-left .main-nav{
    order:1;
    margin-left:1rem;
    margin-right:auto;
  }
  .header-inner--menu-top-left .site-title{
    order:2;
    margin-right:0;
    margin-left:1rem;
    text-align:right;
  }
}

@media (max-width: 960px){
  .header{
    background:rgba(255,255,255,.98);
    border-bottom:1px solid #eee;
    backdrop-filter:saturate(160%) blur(10px);
  }
  .main-nav{
    display:none;
  }
  .menu-drawer--overlay .menu-drawer__panel{
    left:0;
    right:0;
    width:auto;
  }
  .menu-drawer__panel{
    width:min(78vw, 260px);
  }
  .menu-drawer--overlay .menu-drawer__nav ul{
    gap:.5rem;
  }
  .menu-drawer--overlay .menu-drawer__nav a{
    min-height:34px;
    padding:.12rem .54rem;
    font-size:clamp(1.12rem, 5vw, 1.36rem);
    font-weight:700;
  }
  .util-nav{
    display:none;
  }
  .side-floating-menu{
    display:none;
  }
}

.skip-link{position:absolute;left:-9999px;top:-9999px}
.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem;z-index:1000}

body.articul-header-overlay .header{background:transparent;border-bottom:none;box-shadow:none;backdrop-filter:none}
body.articul-header-overlay .header .site-title,
body.articul-header-overlay .header .site-title a,
body.articul-header-overlay .header .util-nav a,
body.articul-header-overlay .header .main-nav a,
body.articul-header-overlay .header .hamburger,
body.articul-header-overlay .header .patron-shortcut{color:var(--header-menu-color-top);text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* 非overlay時はメニュー文字色を黒で統一（TOP200含む） */
body:not(.articul-header-overlay) .header .site-title,
body:not(.articul-header-overlay) .header .site-title a,
body:not(.articul-header-overlay) .header .util-nav a,
body:not(.articul-header-overlay) .header .main-nav a,
body:not(.articul-header-overlay) .header .hamburger,
body:not(.articul-header-overlay) .header .patron-shortcut{
  color:var(--header-menu-color-other);
  text-shadow:none;
}
/* Header共通文字色ルールより優先して Patron CTA は常に白文字を維持する */
body.articul-header-overlay .header .main-nav .articul-patron-link > a,
body:not(.articul-header-overlay) .header .main-nav .articul-patron-link > a,
body.articul-header-overlay .header .main-nav .articul-patron-link > a:hover,
body:not(.articul-header-overlay) .header .main-nav .articul-patron-link > a:hover,
body.articul-header-overlay .header .main-nav .articul-patron-link > a:focus-visible,
body:not(.articul-header-overlay) .header .main-nav .articul-patron-link > a:focus-visible{
  color:#fff;
  text-shadow:none;
}
body:not(.articul-header-overlay) .header .main-nav .articul-patron-link--mypage > a,
body:not(.articul-header-overlay) .header .main-nav .articul-patron-link--mypage > a:hover,
body:not(.articul-header-overlay) .header .main-nav .articul-patron-link--mypage > a:focus-visible{
  color:var(--header-menu-color-other);
}
body.articul-header-overlay .header .main-nav .articul-patron-link--mypage > a{
  background:rgba(242,243,245,.22);
  border-color:rgba(255,255,255,.68);
  color:var(--header-menu-color-top);
}
body.articul-header-overlay .header .main-nav .articul-patron-link--mypage > a:hover,
body.articul-header-overlay .header .main-nav .articul-patron-link--mypage > a:focus-visible{
  background:rgba(242,243,245,.32);
  border-color:rgba(255,255,255,.86);
  color:var(--header-menu-color-top);
}

.hero{position:relative;width:100vw;max-width:100%;margin-left:calc(50% - 50vw);margin-top:calc(-1 * var(--articul-header-offset, 64px));padding-top:var(--articul-header-offset, 64px);padding-bottom:2rem;display:grid;place-items:center;overflow:hidden;min-height:70vh;box-sizing:border-box}
.hero > picture img,
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:contrast(1.02)}
@media (min-width: 1024px){
  .hero{min-height:100vh;height:auto}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.15), rgba(0,0,0,.15));z-index:1}
.hero-content{position:relative;color:white;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;text-align:right;padding:2rem;z-index:2;box-sizing:border-box;width:min(100%, 52rem);max-width:100%;overflow-wrap:anywhere}
.hero-line{width:80px;height:2px;background:#fff;margin:.25rem 0 .5rem}
.hero-name-line{display:inline-flex;flex-direction:column;width:fit-content;max-width:100%}
.hero-name-line .hero-line{width:100%}
.top-artist-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  margin-top:.35rem;
  padding:.5rem 1.45rem;
  border-radius:999px;
  border:none;
  text-decoration:none;
  font-size:.875rem;
  letter-spacing:.04em;
  line-height:1.2;
}
.top-artist-link-btn--hero{
  color:#111;
  background:#fff;
  padding:.68rem 1.95rem;
}
.top-artist-link-btn--hero:hover,
.top-artist-link-btn--hero:focus-visible{
  text-decoration:none;
  background:#f5f5f5;
}
.sns{display:flex;gap:.75rem;justify-content:flex-end}
.sns a{color:#fff;opacity:.9}
.hero-sns{
  gap:.75rem;
}
.hero-sns__link{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
}
.hero-sns__link:hover,
.hero-sns__link:focus-visible{
  opacity:1;
  background:rgba(255,255,255,.14);
}
.hero-sns__icon{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}

/* TOPヒーロー：ジャンル/作家名の位置とサイズ（スクショ寄せ） */
.articul-front .hero{
  place-items:end;
}
@media (min-width: 769px){
  .articul-front-theme-100 .hero.hero--v-top{
    align-items:start;
  }
  .articul-front-theme-100 .hero.hero--v-center{
    align-items:center;
  }
  .articul-front-theme-100 .hero.hero--v-bottom{
    align-items:end;
  }
}
.articul-front .hero-content{
  --top100-genre-size-min: 1.35rem;
  --top100-genre-size-fluid: 2.9vw;
  --top100-genre-size-max: 2.3rem;
  --top100-artist-size-min: 3rem;
  --top100-artist-size-fluid: 8vw;
  /* Old max 4.75rem -> about 1.5x */
  --top100-artist-size-max: 7.1rem;
  /* ヒーロー文字フィット: JS がこれより小さくしない（2行モード時の下限） */
  --top100-hero-genre-floor: 0.875rem;
  --top100-hero-artist-floor: 1.75rem;
  /* ヒーロー文字フィット: 指定サイズからこの刻みで段階的に縮小（1行に収める試行） */
  --articul-hero-text-fit-step: 0.25rem;
  padding:2.25rem 2rem 5rem;
}
/* Hero / artist copy block:
 * 1) 指定サイズを優先
 * 2) 画面端に張り付かない安全余白の中だけを使用
 * 3) genre は artist block 基準で中央揃え
 */
.articul-front .hero-content,
body.articul-front-theme-200 .top200-artist__inner{
  --articul-copy-safe-inline:24px;
}
.articul-front-theme-100 .hero-copy-stack,
body.articul-front-theme-200 .top200-artist__copy{
  display:flex;
  flex-direction:column;
  width:fit-content;
  max-width:min(100%, calc(100vw - (var(--articul-copy-safe-inline) * 2)));
  align-items:stretch;
}
.articul-front-theme-100 .hero-copy{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  align-items:stretch;
}
.articul-front-theme-100 .hero-name-line,
body.articul-front-theme-200 .top200-artist__name-line{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
@media (min-width: 769px){
  /* 垂直位置「中央」は、上下 padding を対称にして見た目上の中心を合わせる */
  .articul-front-theme-100 .hero-content.hero-content--v-top{
    align-self:start;
    padding-top:4rem;
    padding-bottom:1.5rem;
  }
  .articul-front-theme-100 .hero-content.hero-content--v-center{
    align-self:center;
    padding-top:3.625rem;
    padding-bottom:3.625rem;
  }
  .articul-front-theme-100 .hero-content.hero-content--v-bottom{
    align-self:end;
    padding-top:2.25rem;
    padding-bottom:5rem;
  }
}
.articul-front-theme-100 .hero.hero--v-top{
  align-items:start;
}
.articul-front-theme-100 .hero.hero--v-center{
  align-items:center;
}
.articul-front-theme-100 .hero.hero--v-bottom{
  align-items:end;
}
.articul-front .hero-content .genre{
  box-sizing:border-box;
  /* ジャンル文字サイズに比例した余白で作家名との間隔を確保 */
  margin:0 0 .5em;
  max-width:100%;
  width:100%;
  text-align:center;
  font-family:'Noto Sans JP', sans-serif;
  font-size:var(--articul-top-custom-font-size, clamp(var(--top100-genre-size-min), var(--top100-genre-size-fluid), var(--top100-genre-size-max)));
  line-height:1.12;
  letter-spacing:.12em;
  opacity:.95;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.articul-front .hero-content .artist{
  box-sizing:border-box;
  /* 作家名文字サイズに比例した余白で下線との間隔を確保（ディセンダー接触も防止） */
  margin:0 0 .12em;
  max-width:100%;
  width:100%;
  font-family:'Noto Serif JP', serif;
  font-weight:300;
  font-size:var(--articul-top-custom-font-size, clamp(var(--top100-artist-size-min), var(--top100-artist-size-fluid), var(--top100-artist-size-max)));
  line-height:1.02;
  letter-spacing:.04em;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* JS: 最小フォントでも1行に収まらない場合のみ最大2行（hero のみ） */
.articul-front .hero-content .genre.articul-hero-text--lines-2,
.articul-front .hero-content .artist.articul-hero-text--lines-2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  text-overflow:clip;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.articul-front .hero-line{
  width:92px;
  opacity:.95;
  margin:.35rem 0 .65rem;
}

/* TOP100: viewport-based stepped scaling */
@media (min-width: 640px){
  .articul-front .hero-content{
    --top100-genre-size-min: 1.45rem;
    --top100-genre-size-fluid: 2.5vw;
    --top100-genre-size-max: 2.4rem;
    --top100-artist-size-min: 3.4rem;
    --top100-artist-size-fluid: 7.4vw;
    --top100-artist-size-max: 6.4rem;
  }
}
@media (min-width: 960px){
  .articul-front .hero-content{
    --top100-genre-size-min: 1.55rem;
    --top100-genre-size-fluid: 2.2vw;
    --top100-genre-size-max: 2.55rem;
    --top100-artist-size-min: 4.2rem;
    --top100-artist-size-fluid: 6.2vw;
    --top100-artist-size-max: 7.1rem;
  }
}
@media (min-width: 1440px){
  .articul-front .hero-content{
    --top100-genre-size-min: 2.1rem;
    --top100-genre-size-fluid: 2.2vw;
    --top100-genre-size-max: 2.8rem;
    --top100-artist-size-min: 5.6rem;
    --top100-artist-size-fluid: 5.8vw;
    --top100-artist-size-max: 7.1rem;
  }
}

@media (max-width: 768px){
  .articul-front .hero-content,
  body.articul-front-theme-200 .top200-artist__inner{
    --articul-copy-safe-inline:20px;
  }
  body.home.articul-front-theme-100 .hero-content{
    --articul-copy-safe-inline:12px;
    --top100-hero-genre-floor:.9rem;
    --top100-hero-artist-floor:1.18rem;
    --articul-hero-text-fit-step:.125rem;
  }
  .articul-front .hero-content{
    padding:2rem 1.25rem 2.25rem;
  }
  body.home.articul-front-theme-100 .hero-copy-stack{
    width:min(100%, calc(100vw - (var(--articul-copy-safe-inline) * 2)));
    max-width:min(100%, calc(100vw - (var(--articul-copy-safe-inline) * 2)));
  }
  .articul-front .hero-content .genre{
    font-size:clamp(var(--top100-genre-size-min), var(--top100-genre-size-fluid), var(--top100-genre-size-max));
  }
  .articul-front .hero-content .artist{
    font-size:clamp(var(--top100-artist-size-min), var(--top100-artist-size-fluid), var(--top100-artist-size-max));
    line-height:1.12;
  }
  body.home.articul-front-theme-100 .hero-content .genre{
    letter-spacing:.06em;
  }
  body.home.articul-front-theme-100 .hero-content .artist{
    letter-spacing:.02em;
  }
  body.home.articul-front-theme-100 .hero-content .genre.articul-hero-text--lines-2,
  body.home.articul-front-theme-100 .hero-content .artist.articul-hero-text--lines-2{
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  body.home.articul-front-theme-100 .hero-content .genre.articul-hero-text--lines-2{
    line-height:1.24;
    letter-spacing:.04em;
  }
  body.home.articul-front-theme-100 .hero-content .artist.articul-hero-text--lines-2{
    line-height:1.16;
    letter-spacing:.015em;
  }
}
/* =========================================================
 * COMPONENTS
 * =======================================================*/
.section{padding:3rem 0}
.section.alt{background:var(--muted)}
.section > h2,
.section > .container > h2{font-size:1.25rem;margin:0 0 1rem}
.section.section-works > h2,
.section.section-works > .container > h2,
.section.section-blog > h2,
.section.section-blog > .container > h2{
  text-align:center;
  color:rgb(119,119,119);
  font-size:35px;
}
.works-btn-wrap{
  margin-top:1.5rem;
  text-align:center;
}
.works-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 2.5rem;
  background:rgb(119,119,119);
  color:#fff;
  border:none;
  border-radius:999px;
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s ease;
}
.works-btn:hover,
.works-btn:focus-visible{
  opacity:.85;
}

/* a11y */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
 * TOP200 Theme Styles
 * 1) Tokens
 * 2) Artist block
 * 3) Works filter + grid
 * 4) Works card media
 * =======================================================*/

/* [TOP200] 1) Tokens */
body.articul-front-theme-200{
  --articul-top200-text-main:#111;
  --articul-top200-text-sub:#444;
  --articul-top200-filter-active:#8f8f8f;
  --articul-top200-sns-bg:rgba(0,0,0,.04);
  --articul-top200-sns-bg-hover:rgba(0,0,0,.07);
  --articul-top200-sns-border:rgba(0,0,0,.06);
  --articul-top200-card-bg:#f3f3f3;
  --articul-top200-grid-gap:2.25rem;
}
body.articul-front.home.blog{
  background:#fff;
}

/* [TOP200] 2) Artist block */
body.articul-front-theme-200 .top200-artist{
  padding:5.25rem 0 1.25rem;
}
body.articul-front-theme-200 .top200-artist__inner{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  --top200-artist-genre-floor:0.875rem;
  --top200-artist-name-floor:1.75rem;
  --articul-hero-text-fit-step:0.25rem;
}
body.articul-front-theme-200 .top200-artist__genre{
  box-sizing:border-box;
  /* ジャンル文字サイズに比例した余白で作家名との間隔を確保 */
  margin:0 0 .5em;
  max-width:100%;
  width:100%;
  text-align:center;
  font-family:'Noto Sans JP', sans-serif;
  letter-spacing:.12em;
  color:var(--articul-top200-text-sub);
  font-size:var(--articul-top-custom-font-size, clamp(1.2rem, 2.1vw, 1.85rem));
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
body.articul-front-theme-200 .top200-artist__name{
  box-sizing:border-box;
  /* 作家名文字サイズに比例した余白で下線との間隔を確保 */
  margin:0 0 .12em;
  max-width:100%;
  width:100%;
  font-weight:300;
  font-size:var(--articul-top-custom-font-size, clamp(2.6rem, 6vw, 4.8rem));
  letter-spacing:.04em;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
body.articul-front-theme-200 .top200-artist__name-line{
  align-items:stretch;
}
body.articul-front-theme-200 .top200-artist__genre.articul-hero-text--lines-2,
body.articul-front-theme-200 .top200-artist__name.articul-hero-text--lines-2{
  display:block;
  -webkit-box-orient:initial;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
body.articul-front-theme-200 .top200-artist__line{
  width:100%;
  height:2px;
  background:var(--articul-top200-text-main);
  margin:.35rem 0 .65rem;
}
body.articul-front-theme-200 .top-artist-link-btn--light{
  color:#fff;
  background:#111;
  border:1px solid #111;
  padding:.68rem 1.95rem;
}
body.articul-front-theme-200 .top200-artist__name-line .top-artist-link-btn--light{
  margin-top:.7rem;
}
body.articul-front-theme-200 .top-artist-link-btn--light:hover,
body.articul-front-theme-200 .top-artist-link-btn--light:focus-visible{
  text-decoration:none;
  color:#111;
  background:#fff;
}
body.articul-front-theme-200 .top200-artist__sns{
  display:flex;
  gap:.6rem;
  justify-content:center;
  margin-top:1rem;
}
body.articul-front-theme-200 .top200-sns__link{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:var(--articul-top200-text-main);
  background:var(--articul-top200-sns-bg);
  border:1px solid var(--articul-top200-sns-border);
  text-decoration:none;
}
body.articul-front-theme-200 .top200-sns__link:hover,
body.articul-front-theme-200 .top200-sns__link:focus-visible{
  background:var(--articul-top200-sns-bg-hover);
}
body.articul-front-theme-200 .top200-sns__icon{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}
@media (max-width: 768px){
  body.articul-front-theme-200 .top200-artist__genre{
    font-size:clamp(1.2rem, 2.1vw, 1.85rem);
  }
  body.articul-front-theme-200 .top200-artist__name{
    font-size:clamp(2.6rem, 6vw, 4.8rem);
  }
}

/* [TOP200] 3) Works filter + grid */
body.articul-front-theme-200 .top200-works{
  padding:1rem 0 4rem;
}
body.articul-front-theme-200 .top200-works > .container{
  max-width:none;
}
body.articul-front-theme-200 .top200-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.9rem 1.25rem;
  padding:2rem 0 1.25rem;
}
body.articul-front-theme-200 .top200-filter__btn{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
  font-size:1rem;
  color:#000;
  cursor:pointer;
  text-decoration:none;
  transition:color .25s ease;
}
body.articul-front-theme-200 .top200-filter__btn:hover,
body.articul-front-theme-200 .top200-filter__btn:focus-visible,
body.articul-front-theme-200 .top200-filter__btn.is-active{
  color:var(--articul-top200-filter-active);
}
body.articul-front-theme-200 .top200-grid{
  /* WORKS一覧(#works-grid)と同じ「固定トラック幅 + auto-fit + 中央寄せ」方式。
     作品数が列数より少ないときにカードが中央へ寄る挙動を揃える。 */
  --articul-top200-track-width:calc((100% - (var(--articul-top200-grid-gap) * 2)) / 3);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--articul-top200-track-width)), var(--articul-top200-track-width)));
  justify-content:center;
  gap:var(--articul-top200-grid-gap);
  width:min(100%, var(--articul-top-works-max-width, 100%));
  margin-left:auto;
  margin-right:auto;
}
body.articul-front-theme-200 [data-top200-grid] > .articul-empty-state{
  grid-column:1 / -1;
}
body.articul-front-theme-200 .top200-grid.cols-6{--articul-top200-track-width:calc((100% - (var(--articul-top200-grid-gap) * 5)) / 6)}
body.articul-front-theme-200 .top200-grid.cols-4{--articul-top200-track-width:calc((100% - (var(--articul-top200-grid-gap) * 3)) / 4)}
body.articul-front-theme-200 .top200-grid.cols-3{--articul-top200-track-width:calc((100% - (var(--articul-top200-grid-gap) * 2)) / 3)}
body.articul-front-theme-200 .top200-grid.cols-2{--articul-top200-track-width:calc((100% - var(--articul-top200-grid-gap)) / 2)}
body.articul-front-theme-200 .top200-grid.cols-1{--articul-top200-track-width:100%}
/* 列数切替はWORKS一覧・原寸比率モード(JS)と同じ 1280/1024/840/600px 基準 */
@media (max-width: 1280px){
  body.articul-front-theme-200 .top200-grid.cols-6{--articul-top200-track-width:calc((100% - (var(--articul-top200-grid-gap) * 3)) / 4)}
}
@media (max-width: 1024px){
  body.articul-front-theme-200 .top200-grid.cols-6,
  body.articul-front-theme-200 .top200-grid.cols-4{--articul-top200-track-width:calc((100% - (var(--articul-top200-grid-gap) * 2)) / 3)}
}
@media (max-width: 840px){
  body.articul-front-theme-200 .top200-grid.cols-6,
  body.articul-front-theme-200 .top200-grid.cols-4,
  body.articul-front-theme-200 .top200-grid.cols-3{--articul-top200-track-width:calc((100% - var(--articul-top200-grid-gap)) / 2)}
  body.articul-front-theme-200 .top200-grid{--articul-top200-grid-gap:1.5rem}
}
@media (max-width: 600px){
  /* cols-N 指定ルールより詳細度で勝つよう、全バリエーションを明示して1列化する */
  body.articul-front-theme-200 .top200-grid,
  body.articul-front-theme-200 .top200-grid.cols-6,
  body.articul-front-theme-200 .top200-grid.cols-4,
  body.articul-front-theme-200 .top200-grid.cols-3,
  body.articul-front-theme-200 .top200-grid.cols-2{--articul-top200-track-width:100%;--articul-top200-grid-gap:1.25rem}
}
@media (max-width: 768px){
  body.articul-front-theme-200 .top200-grid{
    width:min(100%, max(var(--articul-top-works-max-width, 100%), 80%));
  }
}

/* [TOP200] 4) Works card media */
body.articul-front-theme-200 .top200-card{
  display:block;
  color:inherit;
  text-decoration:none;
  transform-origin:center center;
}
body.articul-front-theme-200 .top200-card__media{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--articul-top200-card-bg);
}
body.articul-front-theme-200 .top200-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
body.articul-front-theme-200 .top200-grid.works-has-aspect .top200-card__media{
  aspect-ratio:var(--articul-top-works-aspect-ratio);
}
body.articul-front-theme-200 .top200-grid.works-aspect-original{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:var(--articul-top200-grid-gap);
}
/* 列幅はレイアウト列数（JSが--articul-masonry-layout-colsに設定）基準の固定幅。
   作品数が列数より少ないときはJSが空列を作らないため中央寄せになる。 */
body.articul-front-theme-200 .top200-grid.works-aspect-original .articul-masonry-col{
  flex:0 1 calc((100% - (var(--articul-top200-grid-gap) * (var(--articul-masonry-layout-cols, 1) - 1))) / var(--articul-masonry-layout-cols, 1));
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--articul-top200-grid-gap);
}
body.articul-front-theme-200 .top200-grid.works-aspect-original .top200-card{
  width:100%;
}
body.articul-front-theme-200 .top200-grid.works-aspect-original .top200-card__media{
  aspect-ratio:auto;
}
body.articul-front-theme-200 .top200-grid.works-aspect-original .top200-card__media img{
  height:auto;
  object-fit:initial;
}
body.articul-front-theme-200 [data-top200-grid] .top200-card{
  /* WORKSページと同じ控えめな出現に統一（大きなカードで拡大演出が間延びするため） */
  --articul-works-enter-duration:450ms;
  --articul-works-enter-from-scale:0.98;
}
body.articul-front-theme-200 [data-top200-grid] .top200-card.is-work-enter-prep{
  opacity:0;
  transform:scale(var(--articul-works-enter-from-scale, 0.4));
}
body.articul-front-theme-200 [data-top200-grid] .top200-card.is-work-entering{
  animation:articul-works-card-enter var(--articul-works-enter-duration, 2200ms) ease-out both;
  animation-delay:var(--articul-works-enter-delay, 0ms);
  will-change:transform;
  pointer-events:none;
}
body.articul-front-theme-200 [data-top200-grid] .top200-card.is-work-entered{
  opacity:1;
  transform:scale(1);
}

/* TOP: ABOUT（スクショの2カラムレイアウト） */
.home-about{
  background:#9b9b9b;
  padding:5rem 0 3.75rem;
}
.home-about__inner{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:3.75rem;
  align-items:start;
}
.home-about__avatar{
  width:380px;
  max-width:100%;
  margin:0;
  aspect-ratio:1 / 1;
  border-radius:9999px;
  overflow:hidden;
  box-shadow:none;
}
.home-about__avatar--square{
  border-radius:0;
}
.home-about__avatar--rounded{
  border-radius:14px;
}
.home-about__avatar--circle{
  border-radius:9999px;
}
.home-about__avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-about__content{
  padding-top:.75rem;
}
.home-about__genre{
  font-size:1rem;
  color:#2b2b2b;
  letter-spacing:.08em;
  margin:0 0 .25rem;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.home-about__name{
  font-family:'Noto Serif JP', serif;
  font-weight:300;
  font-size:clamp(2.75rem, 4.8vw, 4.25rem);
  line-height:1.02;
  letter-spacing:.03em;
  color:#1f1f1f;
  margin:0 0 .85rem;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.home-about__sns{
  display:flex;
  gap:.9rem;
  align-items:center;
  margin:0 0 1.25rem;
}
.home-about__sns-link{
  width:28px;height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:#111;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
  padding:0;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.home-about__sns-link:hover,
.home-about__sns-link:focus-visible{
  color:#000;
  background:rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.22);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform:translateY(-1px);
  opacity:1;
}
.home-about__sns-link:focus-visible{
  outline:2px solid rgba(0,0,0,.35);
  outline-offset:2px;
}
.home-about__sns-icon{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}
.home-about__desc{
  margin:0;
  max-width:52ch;
  color:#2b2b2b;
  line-height:1.9;
}
.home-about__desc p{margin:.5rem 0 0}
.home-about__desc p:first-child{margin-top:0}
.home-about__desc mark{
  background:rgba(82, 194, 120, .45);
  padding:0 .15em;
  border-radius:.2em;
}
.home-about__cta{
  margin-top:2.25rem;
  text-align:center;
}
.home-about__cta .btn{
  background:#7a7a7a;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.home-about__cta .btn:hover,
.home-about__cta .btn:focus-visible{
  opacity:.9;
}

@media (max-width: 900px){
  .home-about__inner{
    grid-template-columns:1fr;
    gap:2rem;
    text-align:center;
  }
  .home-about__avatar{
    margin:0 auto;
  }
  .home-about__sns{
    justify-content:center;
  }
  .home-about__desc{
    margin:0 auto;
  }
}

/* 汎用ボタン（TOPのABOUT「詳しく見る」など） */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 2.5rem;
  background:rgb(119,119,119);
  color:#fff;
  border:none;
  border-radius:999px;
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s ease;
}
.btn:hover,
.btn:focus-visible{
  opacity:.85;
}

/* Generic grid primitive: page-specific spacing should live on page/layout classes. */
.grid{display:grid;gap:1rem}
.grid.cols-6{grid-template-columns:repeat(6,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-1{grid-template-columns:1fr}
@media (max-width: 1024px){.grid.cols-6,.grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 768px){.grid.cols-3,.grid.cols-4,.grid.cols-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 480px){.grid{grid-template-columns:1fr}}

.works-grid-shell{
  width:min(100%, var(--articul-works-max-width, 100%));
  margin-inline:auto;
}
#works-grid{
  --articul-works-gap:1rem;
  --articul-works-track-width:calc((100% - 3rem) / 4);
  width:100%;
  margin-inline:auto;
  gap:var(--articul-works-gap);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--articul-works-track-width)), var(--articul-works-track-width)));
  justify-content:center;
}
#works-grid.cols-6{--articul-works-track-width:calc((100% - 5rem) / 6)}
#works-grid.cols-4{--articul-works-track-width:calc((100% - 3rem) / 4)}
#works-grid.cols-3{--articul-works-track-width:calc((100% - 2rem) / 3)}
#works-grid.cols-2{--articul-works-track-width:calc((100% - 1rem) / 2)}
#works-grid.cols-1{--articul-works-track-width:100%}
@media (max-width: 1280px){
  #works-grid.cols-6{--articul-works-track-width:calc((100% - 3rem) / 4)}
}
@media (max-width: 1024px){
  #works-grid.cols-6,
  #works-grid.cols-4{--articul-works-track-width:calc((100% - 2rem) / 3)}
}
@media (max-width: 840px){
  #works-grid.cols-6,
  #works-grid.cols-4,
  #works-grid.cols-3{--articul-works-track-width:calc((100% - 1rem) / 2)}
}
@media (max-width: 600px){
  /* 840px帯の #works-grid.cols-N より詳細度を上げて1列化を確実に適用する */
  #works-grid,
  #works-grid.cols-6,
  #works-grid.cols-4,
  #works-grid.cols-3,
  #works-grid.cols-2{--articul-works-track-width:100%}
}
@media (max-width: 768px){
  .works-grid-shell{
    width:min(100%, max(var(--articul-works-max-width, 100%), 80%));
  }
}
.works-cat{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.9rem 1.25rem;
  padding:2rem 0 1.25rem;
}
.works-cat a{
  color:#000;
  font-size:1rem;
  text-decoration:none;
  transition:color .25s ease;
}
.works-cat a:hover,
.works-cat a:focus-visible,
.works-cat a.active{
  color:#8f8f8f;
}
/* Original aspect uses flex columns + round-robin distribution for row-major order with masonry heights. */
#works-grid.works-aspect-original{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:var(--articul-works-gap);
}
/* 列幅はレイアウト列数（JSが--articul-masonry-layout-colsに設定）基準の固定幅。
   作品数が列数より少ないときはJSが空列を作らないため中央寄せになる。 */
#works-grid.works-aspect-original .articul-masonry-col{
  flex:0 1 calc((100% - (var(--articul-works-gap) * (var(--articul-masonry-layout-cols, 1) - 1))) / var(--articul-masonry-layout-cols, 1));
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--articul-works-gap);
}
#works-grid.works-aspect-original.works-original-cols-1{
  width:var(--articul-works-track-width);
}
#works-grid.works-aspect-original.works-original-cols-2{
  width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + 1rem);
}
#works-grid.works-aspect-original.works-original-cols-3{
  width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + 2rem);
}
#works-grid.works-aspect-original.works-original-cols-4{
  width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + 3rem);
}
#works-grid.works-aspect-original.works-original-cols-5{
  width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + 4rem);
}
#works-grid.works-aspect-original.works-original-cols-6{
  width:100%;
}
#works-grid.works-aspect-original .work-card{
  display:block;
  width:100%;
  margin:0;
}
@media (max-width: 1280px){
  #works-grid.works-aspect-original.works-original-cols-5,
  #works-grid.works-aspect-original.works-original-cols-6{
    width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + 3rem);
  }
}
@media (max-width: 1024px){
  #works-grid.works-aspect-original.works-original-cols-4,
  #works-grid.works-aspect-original.works-original-cols-5,
  #works-grid.works-aspect-original.works-original-cols-6{
    width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + var(--articul-works-track-width) + 2rem);
  }
}
@media (max-width: 840px){
  #works-grid.works-aspect-original.works-original-cols-3,
  #works-grid.works-aspect-original.works-original-cols-4,
  #works-grid.works-aspect-original.works-original-cols-5,
  #works-grid.works-aspect-original.works-original-cols-6{
    width:calc(var(--articul-works-track-width) + var(--articul-works-track-width) + 1rem);
  }
}
@media (max-width: 600px){
  #works-grid.works-aspect-original,
  #works-grid.works-aspect-original.works-original-cols-2,
  #works-grid.works-aspect-original.works-original-cols-3,
  #works-grid.works-aspect-original.works-original-cols-4,
  #works-grid.works-aspect-original.works-original-cols-5,
  #works-grid.works-aspect-original.works-original-cols-6{
    width:100%;
  }
}
/* =========================================================
 * WORKS
 * =======================================================*/
body.post-type-archive-portfolio #main > .container,
body.tax-portfolio_category #main > .container{
  max-width:none;
  padding-left:24px;
  padding-right:24px;
}
#works-grid.works-has-aspect .thumb{
  display:block;
  width:100%;
  aspect-ratio:var(--articul-works-aspect-ratio);
}
#works-grid.works-has-aspect .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#works-grid.works-aspect-original .thumb{
  display:block;
  width:100%;
  aspect-ratio:var(--articul-work-image-aspect-ratio, auto);
}
#works-grid.works-aspect-original .thumb img{
  display:block;
  width:100%;
  height:auto;
}
body.post-type-archive-portfolio #works-grid .work-card,
body.tax-portfolio_category #works-grid .work-card{
  border-radius:0;
}

.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-body{padding:1rem}
/* Privacy policy: dedicated card layout + long-form readability */
.articul-privacy-page-card > .articul-privacy-page-card__body{
  padding:clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3.25rem);
}
/* h1 と本文は同じメジャーに揃え、タイトルと本文の間に十分な余白 */
.articul-privacy-page-card .articul-privacy-page-card__body > h1{
  max-width:42rem;
  margin:0 auto clamp(1.125rem, 2.5vw, 1.75rem);
  font-size:clamp(1.35rem, 1.15rem + 0.65vw, 1.75rem);
  font-weight:700;
  line-height:1.3;
  letter-spacing:0.04em;
  color:#111;
}
.articul-privacy-page-card .articul-privacy-policy{
  max-width:42rem;
  margin:0 auto;
  font-size:clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  line-height:1.85;
  letter-spacing:0.03em;
  color:#222;
  -webkit-font-smoothing:antialiased;
}
.articul-privacy-page-card .articul-privacy-policy__lead{
  margin:0 0 1.75rem;
  font-size:1.03em;
  line-height:1.9;
  color:#1a1a1a;
}
.articul-privacy-page-card .articul-privacy-policy h2.articul-privacy-policy__heading{
  font-size:clamp(0.95rem, 0.88rem + 0.35vw, 1.1rem);
  font-weight:700;
  line-height:1.45;
  letter-spacing:0.04em;
  margin:2rem 0 0.65rem;
  padding-bottom:0.4rem;
  border-bottom:1px solid #e6e6e6;
  color:#111;
}
.articul-privacy-page-card .articul-privacy-policy h2.articul-privacy-policy__heading:first-of-type{
  margin-top:0;
}
.articul-privacy-page-card .articul-privacy-policy > p{
  margin:0 0 1em;
}
.articul-privacy-page-card .articul-privacy-policy__list{
  margin:0.35rem 0 1.15rem;
  padding-left:1.4em;
}
.articul-privacy-page-card .articul-privacy-policy__list li{
  margin-bottom:0.5em;
  line-height:1.75;
}
.articul-privacy-page-card .articul-privacy-policy__list li:last-child{
  margin-bottom:0;
}
.articul-privacy-page-card .articul-privacy-policy a{
  color:#0d47a1;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:0.25em;
  word-break:break-all;
}
.articul-privacy-page-card .articul-privacy-policy a:hover,
.articul-privacy-page-card .articul-privacy-policy a:focus-visible{
  color:#082a64;
}
.articul-privacy-page-card .articul-privacy-policy__contact{
  margin-bottom:0.25rem;
}
.articul-privacy-page-card .articul-privacy-policy__contact-link{
  margin:0.65rem 0 0;
  padding:0.75rem 1rem;
  background:#f7f8fa;
  border:1px solid #e8eaee;
  border-radius:6px;
}
@media (max-width:480px){
  .articul-privacy-page-card .articul-privacy-policy{
    letter-spacing:0.02em;
  }
}
.thumb{overflow:hidden;background:#eee}
.thumb img{width:100%;height:auto;transition:transform .3s ease}
.card:hover .thumb img{transform:scale(1.02)}
/* WORKS cards: title in center with smooth fade overlay on hover */
#works-grid .work-card .thumb{
  position:relative;
}
#works-grid .work-card .thumb img{
  opacity:1;
  transition:opacity .32s ease, transform .3s ease;
}
#works-grid .work-card .thumb img.is-image-pending{
  opacity:0;
}
#works-grid .work-card .thumb img.is-image-ready{
  opacity:1;
}
#works-grid .work-card .work-card__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.42);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
#works-grid .work-card .work-card__title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  color:#fff;
  font-size:1rem;
  line-height:1.5;
  text-align:center;
  letter-spacing:.02em;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
#works-grid .work-card:hover .work-card__overlay,
#works-grid .work-card:focus-within .work-card__overlay{
  opacity:1;
}
#works-grid .work-card:hover .work-card__title,
#works-grid .work-card:focus-within .work-card__title{
  opacity:1;
}
.works-grid__loading{
  text-align:center;
  margin:1rem 0;
  color:#666;
  font-size:.92rem;
}
.articul-empty-state{
  display:block;
  width:100%;
  margin:2rem auto;
  text-align:center;
}
#works-grid > .articul-empty-state{
  grid-column:1 / -1;
  justify-self:center;
  column-span:all;
}
#works-grid .work-card{
  --articul-works-enter-duration:450ms;
  --articul-works-enter-from-scale:0.98;
  transform-origin:center center;
}
#works-grid .work-card.is-work-enter-prep{
  opacity:0;
  transform:scale(var(--articul-works-enter-from-scale, 0.4));
}
#works-grid .work-card.is-work-entering{
  animation:articul-works-card-enter var(--articul-works-enter-duration, 450ms) ease-out both;
  animation-delay:var(--articul-works-enter-delay, 0ms);
  will-change:transform;
  pointer-events:none;
}
#works-grid .work-card.is-work-entered{
  opacity:1;
  transform:scale(1);
}
@keyframes articul-works-card-enter{
  from{
    opacity:0;
    transform:scale(var(--articul-works-enter-from-scale, 0.4));
  }
  20%{
    opacity:.55;
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
@media (prefers-reduced-motion: reduce){
  #works-grid .work-card.is-work-enter-prep{
    opacity:1;
    transform:none;
  }
  body.articul-front-theme-200 [data-top200-grid] .top200-card.is-work-enter-prep{
    opacity:1;
    transform:none;
  }
  #works-grid .work-card.is-work-entering{
    animation:none;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  body.articul-front-theme-200 [data-top200-grid] .top200-card.is-work-entering{
    animation:none;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* =========================================================
 * TOP100 Theme Overrides (grouped for maintainability)
 * 1) Header/Hero
 * 2) Shared CTA
 * 3) Section rhythm
 * 4) WORKS area
 * 5) Global layout alignment
 * 6) BLOG list styles
 * =======================================================*/

/* [TOP100] 1) Header/Hero color tokens (home only) */
body.home.articul-front-theme-100 .hero-content{
  color:var(--articul-top100-font-color, #ffffff);
}
body.home.articul-front-theme-100 .hero-content .genre,
body.home.articul-front-theme-100 .hero-content .artist{
  color:var(--articul-top100-font-color, #ffffff);
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
body.home.articul-front-theme-100 .hero-line{
  background:var(--articul-top100-font-color, #ffffff);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
body.home.articul-front-theme-100 .top-artist-link-btn--hero{
  background:var(--articul-top100-button-bg, #ffffff);
  color:var(--articul-top100-button-fg, #111111);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body.home.articul-front-theme-100 .top-artist-link-btn--hero:hover,
body.home.articul-front-theme-100 .top-artist-link-btn--hero:focus-visible{
  background:var(--articul-top100-button-bg, #ffffff);
  color:var(--articul-top100-button-fg, #111111);
  opacity:.9;
}
body.home.articul-front-theme-100 .hero-sns__link{
  color:var(--articul-top100-font-color, #ffffff);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body.home.articul-front-theme-100 .hero-sns__icon{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
body.home.articul-front-theme-100 .hero-name-line .top-artist-link-btn--hero{
  margin-top:.7rem;
}
body.home.articul-front-theme-100 .hero-sns{
  margin-top:1rem;
  align-self:stretch;
  width:100%;
  justify-content:center;
}
@media (max-width: 768px){
  body.home.articul-front-theme-100 .hero-content{
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    align-items:center !important;
    text-align:center !important;
  }
  /* hero-text-fit.js が name-line/sns にインライン固定幅を入れるため、内側も中央に寄せる */
  body.home.articul-front-theme-100 .hero-copy-stack,
  body.home.articul-front-theme-100 .hero-copy{
    align-items:center;
  }
  body.home.articul-front-theme-100 .hero-name-line,
  body.home.articul-front-theme-100 .hero-sns{
    align-self:center;
  }
  body.articul-front-theme-200 .top200-artist__inner{
    margin-left:auto !important;
    margin-right:auto !important;
    align-items:center !important;
    text-align:center !important;
  }
}
body.home.articul-front-theme-100 .header{
  border-bottom:none;
}
body.home.articul-front-theme-100 .header .site-title,
body.home.articul-front-theme-100 .header .site-title a,
body.home.articul-front-theme-100 .header .util-nav a,
body.home.articul-front-theme-100 .header .main-nav a,
body.home.articul-front-theme-100 .header .hamburger{
  color:var(--articul-top100-font-color, #ffffff);
}
/* TOP100: 上品な色遷移（背景変化のあとに文字色が追従） */
body.home.articul-front-theme-100 .header .site-title,
body.home.articul-front-theme-100 .header .site-title a,
body.home.articul-front-theme-100 .header .util-nav a,
body.home.articul-front-theme-100 .header .main-nav li:not(.articul-patron-link) > a,
body.home.articul-front-theme-100 .header .hamburger,
body.home.articul-front-theme-100 .header.header--menu-drawer .patron-shortcut{
  transition:
    color .5s cubic-bezier(.22,1,.36,1) .12s,
    text-shadow .5s cubic-bezier(.22,1,.36,1) .12s,
    opacity .2s ease;
}
body.home.articul-front-theme-100 .header .main-nav .articul-patron-link > a,
body.home.articul-front-theme-100 .header .main-nav .articul-patron-link > a:hover,
body.home.articul-front-theme-100 .header .main-nav .articul-patron-link > a:focus-visible{
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body.home.articul-front-theme-100 .header .site-title,
body.home.articul-front-theme-100 .header .site-title a,
body.home.articul-front-theme-100 .header .main-nav li:not(.articul-patron-link) > a{
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
body.home.articul-front-theme-100 .header.header--menu-drawer .patron-shortcut{
  color:var(--articul-top100-font-color, #ffffff);
}
/* TOP100: Hero上は設定色、スクロール後は白背景と黒系文字に固定する */
body.home.articul-front-theme-100 .header.header-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
body.home.articul-front-theme-100 .header.header-scrolled .site-title,
body.home.articul-front-theme-100 .header.header-scrolled .site-title a,
body.home.articul-front-theme-100 .header.header-scrolled .util-nav a,
body.home.articul-front-theme-100 .header.header-scrolled .main-nav li:not(.articul-patron-link) > a,
body.home.articul-front-theme-100 .header.header-scrolled .hamburger,
body.home.articul-front-theme-100 .header.header-scrolled.header--menu-drawer .patron-shortcut{
  color:var(--header-menu-color-other);
  text-shadow:none;
}
body.home.articul-front-theme-100 .header.header-scrolled .main-nav .articul-patron-link > a,
body.home.articul-front-theme-100 .header.header-scrolled .main-nav .articul-patron-link > a:hover,
body.home.articul-front-theme-100 .header.header-scrolled .main-nav .articul-patron-link > a:focus-visible{
  box-shadow:none;
}
body.home.articul-front-theme-100 .header.header-scrolled .main-nav .articul-patron-link--mypage > a{
  background:#f2f3f5;
  border-color:#d8dde5;
  color:#111;
  box-shadow:none;
  text-shadow:none;
}
body.home.articul-front-theme-100 .header.header-scrolled .main-nav .articul-patron-link--mypage > a:hover,
body.home.articul-front-theme-100 .header.header-scrolled .main-nav .articul-patron-link--mypage > a:focus-visible{
  background:#e7eaf0;
  border-color:#c9d0db;
  color:#111;
  text-shadow:none;
}
body.home.articul-front-theme-100 .hero > img,
body.home.articul-front-theme-100 .hero > picture > img{
  transform:scale(1);
  transform-origin:center center;
  will-change:transform;
  animation:articul-top100-hero-zoom-in 15s ease forwards;
}
body.home.articul-front-theme-100 .hero-content .genre{
  animation:articul-top100-copy-reveal 800ms cubic-bezier(.22,1,.36,1) 600ms backwards;
}
body.home.articul-front-theme-100 .hero-content .artist{
  animation:articul-top100-copy-reveal 800ms cubic-bezier(.22,1,.36,1) 800ms backwards;
}
body.home.articul-front-theme-100 .hero-content .hero-line{
  transform-origin:left center;
  animation:articul-top100-line-reveal 700ms cubic-bezier(.22,1,.36,1) 1000ms backwards;
}
body.home.articul-front-theme-100 .hero-content .top-artist-link-btn--hero,
body.home.articul-front-theme-100 .hero-content .hero-sns{
  animation:articul-top100-action-reveal 700ms cubic-bezier(.22,1,.36,1) 1200ms backwards;
}
@keyframes articul-top100-hero-zoom-in{
  from{transform:scale(1)}
  to{transform:scale(1.15)}
}
@keyframes articul-top100-copy-reveal{
  from{
    opacity:0;
    transform:translateY(18px);
    clip-path:inset(100% 0 0 0);
  }
  to{
    opacity:1;
    transform:translateY(0);
    clip-path:inset(0);
  }
}
@keyframes articul-top100-line-reveal{
  from{
    opacity:0;
    transform:scaleX(0);
  }
  to{
    opacity:1;
    transform:scaleX(1);
  }
}
@keyframes articul-top100-action-reveal{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
body.home.articul-front-theme-100.articul-top100-anim-off .hero > img,
body.home.articul-front-theme-100.articul-top100-anim-off .hero > picture > img,
body.home.articul-front-theme-100.articul-top100-anim-off .hero-content .genre,
body.home.articul-front-theme-100.articul-top100-anim-off .hero-content .artist,
body.home.articul-front-theme-100.articul-top100-anim-off .hero-content .hero-line,
body.home.articul-front-theme-100.articul-top100-anim-off .hero-content .top-artist-link-btn--hero,
body.home.articul-front-theme-100.articul-top100-anim-off .hero-content .hero-sns{
  animation:none;
  opacity:1;
  transform:none;
  clip-path:none;
}
@media (prefers-reduced-motion: reduce){
  body.home.articul-front-theme-100 .hero > img,
  body.home.articul-front-theme-100 .hero > picture > img,
  body.home.articul-front-theme-100 .hero-content .genre,
  body.home.articul-front-theme-100 .hero-content .artist,
  body.home.articul-front-theme-100 .hero-content .hero-line,
  body.home.articul-front-theme-100 .hero-content .top-artist-link-btn--hero,
  body.home.articul-front-theme-100 .hero-content .hero-sns{
    animation:none;
    opacity:1;
    transform:none;
    clip-path:none;
  }
}

/* [TOP100] 2) Shared CTA design (WORKS / BLOG / ABOUT) */
.articul-front-theme-100{
  --articul-top100-cta-font-size: .875rem;
  --articul-top100-cta-padding: .72rem 2.05rem;
  --articul-top100-works-cta-shadow: 0 10px 26px rgba(0,0,0,.22);
  --articul-top100-section-heading-gap: 2rem;
  --articul-top100-section-cta-gap: 2.6rem;
  --articul-top100-blog-section-padding: clamp(2.2rem, 5vw, 3rem);
  --articul-top100-blog-hover-bg: rgba(0,0,0,0.10);
}
.articul-front-theme-100 .works-btn,
.articul-front-theme-100 .home-about__cta .btn{
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, opacity .2s ease;
  font-size:var(--articul-top100-cta-font-size);
  padding:var(--articul-top100-cta-padding);
}
.articul-front-theme-100 .works-btn{
  box-shadow:var(--articul-top100-works-cta-shadow);
}
.articul-front-theme-100 .works-btn:hover,
.articul-front-theme-100 .works-btn:focus-visible,
.articul-front-theme-100 .home-about__cta .btn:hover,
.articul-front-theme-100 .home-about__cta .btn:focus-visible{
  text-decoration:none;
  background:#4f4f4f;
  color:#fff;
  opacity:1;
}

/* [TOP100] 3) Section rhythm (headings / CTA spacing / blog section padding) */
.articul-front-theme-100 .section-works h2,
.articul-front-theme-100 .section-blog h2{
  margin-bottom:var(--articul-top100-section-heading-gap);
}
.articul-front-theme-100 .section-works .works-btn-wrap,
.articul-front-theme-100 .section-blog .works-btn-wrap{
  margin-top:var(--articul-top100-section-cta-gap);
}
body.articul-front-theme-100 .section-blog{
  padding:var(--articul-top100-blog-section-padding) 0;
}

/* [TOP100] 4) WORKS area */
/* Layout */
.articul-front-theme-100 .section-works{
  --articul-top100-works-arrow-space: clamp(24px, 4vw, 40px);
  --articul-top100-works-arrow-offset: clamp(2px, .8vw, 10px);
  --articul-top100-stage-gap: 30px;
  overflow-x:visible;
}
.articul-front-theme-100 .section-works .top100-works{
  position:relative;
  padding-left:var(--articul-top100-works-arrow-space);
  padding-right:var(--articul-top100-works-arrow-space);
}
body.articul-front-theme-100 .section-works.container{
  /* ヒーローと揃えて作品カルーセルは全幅で見せる */
  max-width:none;
  padding-left:clamp(12px, 3.2vw, 22px);
  padding-right:clamp(12px, 3.2vw, 22px);
}
.articul-front-theme-100 .top100-works-stage{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:220px;
}
.articul-front-theme-100 .top100-works-track{
  position:relative;
  width:100%;
  min-height:inherit;
}
.articul-front-theme-100 .top100-works-slot{
  position:absolute;
  top:0;
  left:0;
}
.articul-front-theme-100 .top100-works-slot.is-sliding{
  transition:transform 400ms ease;
}
.articul-front-theme-100 .top100-works-slot.is-empty{
  pointer-events:none;
}
.articul-front-theme-100 .top100-works-card{
  width:100%;
}
.articul-front-theme-100 .top100-works-card__link{
  display:block;
}
.articul-front-theme-100 .top100-works-card .thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/2;
  background:transparent;
}
.articul-front-theme-100 .top100-works-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.articul-front-theme-100 .top100-works-card .work-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.42);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.articul-front-theme-100 .top100-works-card .work-overlay__title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  margin:0;
  background:transparent;
  color:#fff;
  font-size:1rem;
  line-height:1.5;
  text-align:center;
  letter-spacing:.02em;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.articul-front-theme-100 .top100-works-card:hover .work-overlay,
.articul-front-theme-100 .top100-works-card:focus-within .work-overlay{
  opacity:1;
}
.articul-front-theme-100 .top100-works-card:hover .work-overlay__title,
.articul-front-theme-100 .top100-works-card:focus-within .work-overlay__title{
  opacity:1;
}
.articul-front-theme-100 .top100-works-card.is-top100-third-entering{
  animation:articul-top100-third-enter-image var(--articul-top100-third-duration, 2200ms) ease-out both;
  transform-origin:center center;
  will-change:transform;
}
.articul-front-theme-100 .top100-works-card.is-top100-initial-entering{
  animation:articul-top100-initial-enter-image var(--articul-top100-initial-duration, 2200ms) ease-out both;
  transform-origin:center center;
  will-change:transform;
}
@keyframes articul-top100-third-enter-image{
  from{
    transform:scale(var(--articul-top100-third-from-scale, 0.88));
  }
  to{
    transform:scale(1);
  }
}
@keyframes articul-top100-initial-enter-image{
  from{
    transform:scale(var(--articul-top100-third-from-scale, 0.88));
  }
  to{
    transform:scale(1);
  }
}

.articul-front-theme-100 .section-works .top100-works-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  color:rgba(0,0,0,.55);
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.articul-front-theme-100 .section-works .top100-works-nav--prev{
  left:var(--articul-top100-works-arrow-offset);
}
.articul-front-theme-100 .section-works .top100-works-nav--next{
  right:var(--articul-top100-works-arrow-offset);
}
.articul-front-theme-100 .section-works .top100-works-nav span{
  font-size:22px;
  line-height:1;
}
@media (max-width: 639px){
  .articul-front-theme-100 .section-works{
    --articul-top100-stage-gap: 0px;
  }
}
/* [TOP100] 5) Global layout alignment (hero / blog container / about section) */
body.articul-front-theme-100 .hero{
  width:100%;
  max-width:100%;
  margin-left:0;
  min-height:100vh;
  min-height:100svh;
}
/* ヒーローコピーは他セクション同様コンテナ基準（最大1200px・中央）で左右揃えする。
 * ビューポート端基準にすると広い画面で余白が padding 分しか無くなるため。 */
body.articul-front-theme-100 .hero-content{
  width:100%;
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  justify-self:center;
}
body.articul-front-theme-100 .section-blog > .container{
  max-width:var(--container);
}
@media (min-width: 1025px){
  body.articul-front-theme-100 .section-blog > .container{
    max-width:1000px;
  }
}
body.articul-front-theme-100 .home-about__inner{
  grid-template-columns:minmax(240px, 420px) minmax(0, 1fr);
  gap:clamp(2rem, 4vw, 3.75rem);
  align-items:center;
}
body.articul-front-theme-100 .home-about__content{
  min-width:0;
  padding-top:0;
}
body.articul-front-theme-100 .home-about{
  overflow-x:clip;
}
body.articul-front-theme-100 .home-about__avatar{
  width:clamp(101px, 19vw, 213px);
  max-width:100%;
  justify-self:end;
  margin-right:clamp(8px, 1.4vw, 18px);
}
body.articul-front-theme-100 .home-about__genre{
  font-size:1.125rem;
}
body.articul-front-theme-100 .home-about__name{
  font-size:clamp(2.25rem, 4vw, 3.5rem);
}
body.articul-front-theme-100 .home-about__sns{
  margin-bottom:2rem;
}
body.articul-front-theme-100 .home-about__desc{
  max-width:100%;
  overflow-wrap:anywhere;
  line-height:1.75;
}
@media (max-width: 1024px){
  body.articul-front-theme-100 .home-about__inner{
    grid-template-columns:1fr;
    gap:2rem;
    text-align:left;
  }
  body.articul-front-theme-100 .home-about__avatar{
    margin:0 auto;
  }
  body.articul-front-theme-100 .home-about__sns{
    justify-content:flex-start;
  }
  body.articul-front-theme-100 .home-about__desc{
    margin:0;
  }
}

/* [TOP100] 6) BLOG list styles */
.articul-front-theme-100 .blog-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.articul-front-theme-100 .blog-list-item{
  transition:background-color .22s ease;
}
.articul-front-theme-100 .blog-list-item:hover,
.articul-front-theme-100 .blog-list-item:focus-visible{
  text-decoration:none;
  background-color:var(--articul-top100-blog-hover-bg);
}
.articul-front-theme-100 .blog-list-item:hover .blog-title,
.articul-front-theme-100 .blog-list-item:focus-visible .blog-title{
  text-decoration:none;
}
.articul-front-theme-100 .blog-new-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.08rem .25rem;
  border-radius:4px;
  background:rgb(252, 45, 8);
  color:#fff;
  font-size:.875rem;
  line-height:1.2;
  letter-spacing:.03em;
  font-weight:700;
}
/* [TOP100] 6-1) BLOG list styles (mobile) */
@media (max-width: 768px){
  body.articul-front-theme-100 .section-blog h2{
    margin-bottom:1.25rem;
  }
  body.articul-front-theme-100 .section-blog .works-btn-wrap{
    margin-top:1.6rem;
  }
  body.articul-front-theme-100 .section-blog .blog-list-item{
    padding:.68rem 0;
  }
  body.articul-front-theme-100 .section-blog .blog-date{
    margin-bottom:.12rem;
    font-size:.88rem;
  }
}
/* ===== End of TOP100 Theme Overrides ===== */

.blog,
.home.blog{
  background:#f7f7f7;
}
.blog-index-page{
  padding-top:3rem;
  padding-bottom:3rem;
  color:#000;
}
.blog-index-page a{color:#000}
/* =========================================================
 * BLOG
 * =======================================================*/
.blog-index-page .blog-index-layout{gap:4rem}
.blog-index-layout{
  grid-template-columns:3fr 1fr;
  gap:2rem;
}
.blog-card__meta{
  font-size:.875rem;
  color:#000;
  margin:0;
}
.blog-card__title{
  margin:0;
  font-size:1.125rem;
  line-height:1.6;
}
.blog-card__title a{
  color:#000;
  text-decoration:none;
}
.blog-card__title a:hover,
.blog-card__title a:focus-visible{
  color:#0a66c2;
  text-decoration:none;
}
.blog-card__excerpt{
  margin:0;
  color:#444;
  font-size:.92rem;
  font-weight:300;
  line-height:1.45;
  line-clamp:2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:0;
}
.blog-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:1.5rem;
  align-items:center;
  max-width:760px;
  width:100%;
  border-radius:0;
  border:none;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  height:auto;
  padding:0;
  margin:0 auto 1.5rem;
  background:#fff;
}
.blog-card .thumb{
  width:220px;
  height:220px;
  aspect-ratio:1 / 1;
  display:block;
}
.blog-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:640px){
  .blog-card{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
    align-items:stretch;
    width:100%;
    max-width:calc(100% - 20px);
  }
}
@media (max-width:640px){
  .blog-card .thumb{
    width:100%;
    height:auto;
  }
}

.blog-card .card-body{
  padding:1.5rem 1.75rem 1.5rem 0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.6rem;
  min-height:0;
}
@media (max-width:768px){
  .blog-card .card-body{
    padding:1.25rem 1.5rem;
  }
}
@media (max-width:768px){
  .blog-card{
    grid-template-columns:1fr;
    align-items:stretch;
    min-height:0;
    max-width:calc(100% - 24px);
  }
  .blog-card .thumb{
    width:100%;
    height:auto;
  }
}
@media (max-width:720px){
  .blog-index-page .blog-index-layout{gap:2rem}
  .blog-index-layout{
    grid-template-columns:1fr;
  }
  .blog-card{
    width:100%;
    max-width:calc(100% - 28px);
  }
}

.blog-index-page .sidebar{
  position:sticky;
  top:80px;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:1rem;
}
.blog-index-page .sidebar .block{
  background:transparent;
  border:none;
  border-top:1px solid #dcdcdc;
  border-radius:0;
  padding:1rem 0;
  box-shadow:none;
}
.blog-index-page .sidebar .block:last-child{border-bottom:1px solid #dcdcdc}
.blog-index-page .sidebar .block h3{
  margin:0 0 .7rem;
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#000;
}
.blog-index-page .sidebar ul{
  list-style:none;
  margin:0;
  padding:0;
}
.blog-index-page .sidebar li{
  list-style:none;
  margin:0;
  padding:.25rem 0;
  display:flex;
  align-items:baseline;
  gap:.45rem;
}
.blog-index-page .sidebar li::before{
  content:">";
  color:#6f6f6f;
  flex:0 0 auto;
}
.blog-index-page .sidebar a{color:#000}
.blog-index-page .sidebar a:hover,
.blog-index-page .sidebar a:focus-visible{
  color:#0a66c2;
  text-decoration:none;
}
.blog-index-page .sidebar .blog-tags-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.blog-index-page .sidebar .blog-tags-cloud .tag-cloud-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #000;
  border-radius:0;
  padding:.24rem .58rem;
  line-height:1.2;
  /* wp_tag_cloud() injects inline font-size, so this override still needs !important. */
  font-size:.84rem !important;
  color:#000;
  text-decoration:none;
}
.blog-index-page .sidebar .blog-tags-cloud .tag-cloud-link:hover,
.blog-index-page .sidebar .blog-tags-cloud .tag-cloud-link:focus-visible{
  color:#0a66c2;
  border-color:#0a66c2;
  text-decoration:none;
}
.blog-search-form{
  display:block;
}
.blog-search-input{
  width:100%;
  border:1px solid #d2d2d2;
  border-radius:2px;
  padding:.55rem .7rem;
  font-size:1rem;
  color:#000;
  background:transparent;
  transition:border-color .2s ease, background-color .2s ease;
}
.blog-index-page .sidebar .blog-search-input{
  background:#fff;
}
.blog-search-input::placeholder{color:#666}
.blog-search-input:focus{
  outline:none;
  border-color:#bbbbbb;
  background:#fcfcfc;
}

/* Archive/search page surface */
.archive.category,
.archive.date,
.search{
  background:#f7f7f7;
}
.search{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.search #main{
  flex:1;
}
.search .blog-archive-hero{
  width:100%;
  margin-left:0;
}
.search .blog-index-page.search-results--empty{
  padding-top:0;
  padding-bottom:0;
  min-height:0;
}
.search .footer{
  margin-top:0;
}

.blog-archive-hero{
  position:relative;
  width:100%;
  margin-left:0;
  margin-top:calc(-1 * var(--articul-header-offset, 64px));
  padding-top:var(--articul-header-offset, 64px);
  min-height:33vh;
  display:grid;
  place-items:center;
  background:#d8d8d8;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.blog-archive-hero--has-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
}
.blog-archive-hero__inner{
  position:relative;
  z-index:1;
  min-height:33vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.blog-archive-hero__title{
  margin:0;
  color:#fff;
  font-size:clamp(1.4rem, 3.2vw, 2.2rem);
  font-weight:500;
  letter-spacing:.06em;
  text-align:center;
}

.blog-archive-page{
  color:#000;
  max-width:none;
  box-sizing:border-box;
  padding-left:20px;
  padding-right:20px;
}
.blog-single-page{
  padding-top:4rem;
  padding-bottom:3rem;
  color:#000;
  max-width:none;
  padding-left:24px;
  padding-right:24px;
}
.single-post #main{
  display:flex;
  flex-direction:column;
}
.single-post .blog-single-page{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  padding-bottom:0;
  /* #main(flex縦)のアイテムに .container の左右 margin:auto が付くと
     align-items:stretch が無効化され中身の幅まで縮むため打ち消す */
  margin-left:0;
  margin-right:0;
}
.blog-single-content{
  max-width:1000px;
  margin:0 auto;
}
.single-post .blog-single-content{
  font-variant-emoji:unicode;
  /* flexアイテムは左右 margin:auto があると fit-content に縮むため、
     幅を明示して max-width:1000px + 中央寄せを維持する */
  width:100%;
}
.blog-single-content > *:first-child{
  margin-top:0;
}
.blog-single-content > *:last-child{
  margin-bottom:0;
}
.blog-single-content img{
  max-width:100%;
  height:auto;
}
.blog-single-content img.js-work-lightbox-trigger{
  cursor:zoom-in;
}
.blog-single-content .wp-block-image,
.blog-single-content figure{
  text-align:center;
}
.blog-single-content .wp-block-image img,
.blog-single-content figure img{
  margin-left:auto;
  margin-right:auto;
}
/* リッチエディタの画像配置クラス（WordPress標準）をフロントでも反映する */
.articul-richtext .alignleft{
  float:left;
  margin:.4em 1.5em .8em 0;
}
.articul-richtext .alignright{
  float:right;
  margin:.4em 0 .8em 1.5em;
}
.articul-richtext .aligncenter{
  display:block;
  float:none;
  margin:.8em auto;
}
/* 末尾のfloat画像が後続要素（タグ・シェア欄等）へ回り込むのを防ぐ */
.articul-richtext::after{
  content:"";
  display:block;
  clear:both;
}
.articul-richtext blockquote{
  border-left:3px solid #c9c9c9;
  padding-left:14px;
  margin:1em 0;
  color:#555;
  font-style:normal;
  line-height:1.8;
}
.articul-richtext blockquote > *:first-child{
  margin-top:0;
}
.articul-richtext blockquote > *:last-child{
  margin-bottom:0;
}
.articul-richtext pre{
  margin:1em 0;
  padding:14px 16px;
  border:1px solid #d9d9d9;
  background:#f7f7f7;
  color:#222;
  font-style:normal;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-x:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.blog-single-tail{
  margin-top:auto;
  padding-top:4rem;
  /* WORKS/BLOG 共通の末尾エリアは viewport 幅まで広げる */
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:none;
  box-sizing:border-box;
}
.blog-single-tail--pagination{
  margin-top:0;
  padding-top:0;
}
@media (max-width: 768px){
  /* スマホでは本文上下の余白を抑える */
  .blog-single-page{
    padding-top:2.5rem;
  }
  .blog-single-tail--meta{
    padding-top:2.5rem;
  }
}
.blog-single-tail__divider{
  width:100%;
  height:1px;
  margin:0;
  background:#e4e4e4;
}
.blog-single-tags{
  max-width:1000px;
  margin:0 auto;
  padding:1rem 0 .35rem;
  display:flex;
  justify-content:flex-start;
  gap:.45rem;
  flex-wrap:wrap;
}
.blog-single-tags__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #111;
  border-radius:0;
  padding:.24rem .56rem;
  color:#111;
  font-size:.875rem;
  line-height:1.2;
  text-decoration:none;
}
.blog-single-tags__link:hover,
.blog-single-tags__link:focus-visible{
  color:#0a66c2;
  border-color:#0a66c2;
  text-decoration:none;
}
.blog-single-share{
  max-width:1000px;
  margin:0 auto;
  padding:1.1rem 0;
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.blog-single-share a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.2rem;
  border:none;
  border-radius:0;
  background:transparent;
  color:#111;
  font-size:1rem;
  text-decoration:none;
}
.blog-single-share a img{
  width:16px;
  height:16px;
  display:block;
}
.blog-single-share a:hover{
  background:transparent;
  text-decoration:none;
}
.blog-single-nav{
  width:100%;
  max-width:none;
  margin:0;
  padding:1.15rem clamp(24px, 4vw, 64px);
  box-sizing:border-box;
  background:#f3f3f3;
}
.blog-single-nav__inner{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
  gap:.8rem;
}
.blog-single-nav__item{
  min-height:2.2rem;
  display:flex;
  align-items:center;
  min-width:0;
}
.blog-single-nav__item a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .4rem;
  color:#111;
  font-size:.875rem;
  letter-spacing:.04em;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.blog-single-nav__item a:hover{
  color:#0a66c2;
  text-decoration:none;
}
.blog-single-nav__item a:focus-visible{
  color:#0a66c2;
  text-decoration:none;
}
.blog-single-nav__disabled{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .4rem;
  color:#9a9a9a;
  font-size:.875rem;
  letter-spacing:.04em;
  cursor:default;
  overflow-wrap:anywhere;
}
.blog-single-nav__disabled:focus-visible{
  color:#9a9a9a;
  text-decoration:none;
}
.blog-single-nav__item--prev{
  justify-content:flex-start;
}
.blog-single-nav__item--index{
  justify-content:center;
}
.blog-single-nav__item--next{
  justify-content:flex-end;
  text-align:right;
}
.blog-single-hero .blog-archive-hero__inner{
  align-items:center;
}
.single-post .blog-single-hero{
  width:100%;
  margin-left:0;
}
.blog-single-hero__heading{
  text-align:center;
  overflow-wrap:anywhere;
}
.blog-single-hero__meta{
  margin:0 0 .45rem;
  color:#fff;
  font-size:10pt;
  line-height:1.5;
  letter-spacing:.03em;
  overflow-wrap:anywhere;
}
.blog-single-hero .blog-archive-hero__title{
  font-size:clamp(2.1rem, 4.8vw, 3.3rem);
}
.blog-archive-grid{
  display:grid;
  box-sizing:border-box;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.2rem;
  padding-left:40px;
  padding-right:40px;
}
@media (min-width:1024px){
  .blog-archive-grid{
    --blog-archive-base-gap:1.2rem;
    --blog-archive-card-width-from-4col:calc((100% - (var(--blog-archive-base-gap) * 3)) / 4);
  }
  .blog-archive-grid--count-1,
  .blog-archive-grid--count-2,
  .blog-archive-grid--count-3{
    display:flex;
    justify-content:center;
    gap:var(--blog-archive-base-gap);
  }
  .blog-archive-grid--count-1 .blog-archive-card,
  .blog-archive-grid--count-2 .blog-archive-card,
  .blog-archive-grid--count-3 .blog-archive-card{
    flex:0 0 var(--blog-archive-card-width-from-4col);
    max-width:var(--blog-archive-card-width-from-4col);
  }
  .blog-archive-grid--count-4plus{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    max-width:none;
    margin-left:0;
    margin-right:0;
    gap:1.2rem;
  }
}
@media (max-width:1023px){
  .blog-archive-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding-left:20px;
    padding-right:20px;
  }
}
.blog-archive-card{
  background:#fff;
  border:none;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.blog-archive-thumb{
  display:block;
  aspect-ratio:4 / 3;
  overflow:hidden;
}
.blog-archive-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.blog-archive-body{
  padding:.85rem 1rem 1rem;
}
.blog-archive-date{
  font-size:.875rem;
  color:#000;
  margin-bottom:.35rem;
}
.blog-archive-type{
  font-size:.875rem;
  letter-spacing:.08em;
  color:#555;
  margin-bottom:.3rem;
}
.search-empty{
  min-height:auto;
  margin:0;
  width:100%;
  max-width:520px;
  text-align:left;
}
.search-empty p{
  margin:0;
}
.search-empty-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:2cm 0 .5rem;
}
.search-empty-form{
  margin-top:.35rem;
  max-width:360px;
  margin-left:0;
  margin-right:0;
}
.blog-archive-title{
  margin:0;
  font-size:1rem;
  line-height:1.5;
}
.blog-archive-title a{
  color:#000;
  text-decoration:none;
}
.blog-archive-title a:hover,
.blog-archive-title a:focus-visible{
  color:#0a66c2;
  text-decoration:none;
}
.blog-archive-excerpt{
  margin:.38rem 0 0;
  color:#444;
  font-size:.875rem;
  font-weight:300;
  line-height:1.45;
  line-clamp:2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.45em * 2);
}

@media (max-width:680px){
  .blog-archive-grid{
    grid-template-columns:1fr;
    padding-left:0;
    padding-right:0;
  }
}

/* Footer (黒背景 / 全幅で統一した上下余白 / TOPは同一バンド内で縦中央) */
.footer{
  background:linear-gradient(180deg, #0e0f10 0%, #070707 100%);
  border-top:none;
  margin-top:3rem;
  color:rgba(255,255,255,.92);
  overflow-x:hidden;
}
.footer a{color:rgba(255,255,255,.9)}
.footer a:hover,
.footer a:focus-visible{color:#fff;text-decoration:underline}
.footer-inner{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  column-gap:1rem;
  row-gap:10px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding-top:1rem;
  padding-left:clamp(14px, 2vw, 28px);
  padding-right:calc(clamp(14px, 2vw, 28px) + 44px);
  padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  font-size:.875rem;
  line-height:1.45;
  color:rgba(255,255,255,.85);
}
.footer-left{
  display:none;
}
.footer-center{
  text-align:center;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
.footer-right{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  column-gap:.65rem;
  row-gap:2px;
  min-width:0;
  max-width:100%;
  white-space:normal;
}
.footer-sep{
  opacity:.55;
  flex:0 0 auto;
  padding:0 .2rem;
  user-select:none;
}
.footer-mark{
  flex:0 0 auto;
  width:16px;
  height:16px;
  border-radius:3px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.footer-mark img{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
}
.footer-top{
  position:absolute;
  right:clamp(14px, 2vw, 28px);
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  box-sizing:border-box;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex-shrink:0;
}
.footer-top:hover,
.footer-top:focus-visible{
  background:rgba(255,255,255,.12);
}
.footer-top span{font-weight:700;line-height:1;transform:translateY(-1px)}

/* 十分な横幅: コピーを中央、補助リンク群を右端に配置 */
@media (min-width:1080px){
  .footer-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:1rem;
  }
  .footer-left{
    display:block;
  }
  .footer-center{
    text-align:center;
  }
  .footer-right{
    justify-self:end;
    justify-content:flex-end;
    font-size:.8rem;
    padding-right:56px;
  }
  .footer-right a{
    color:rgba(255,255,255,.65);
  }
}

/* タブレット幅: 1行目コピー / 2行目 プライバシー ｜ Powered … */
@media (max-width:1079px){
  .footer-inner{
    row-gap:10px;
  }
  .footer-center::after{display:none}
  .footer-center{
    flex:1 0 100%;
    width:100%;
    text-align:center;
  }
  .footer-right{
    flex:1 0 100%;
    width:100%;
    justify-content:center;
  }
}

/* スマホ: 3段（コピー / プライバシー / Powered+マーク）、区切り | 非表示 */
@media (max-width:640px){
  .footer-inner{
    font-size:.875rem;
    row-gap:10px;
  }
  .footer-right .footer-sep{display:none}
  .footer-right > a:first-of-type{
    flex:0 0 100%;
    width:100%;
    text-align:center;
  }
  .footer-right > a:nth-of-type(2){
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:100%;
  }
}

/* TOP: ABOUT直下の余白をなくす */
.articul-front .footer{
  margin-top:0;
}
.single-post .footer{
  margin-top:0;
}
.single-portfolio .footer{
  margin-top:0;
}

.breadcrumbs{font-size:.875rem;color:#666;margin:.75rem 0}

.consent-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  transform:none;
  width:100%;
  background:rgba(17,17,17,.92);
  color:#fff;
  border-radius:0;
  padding:.55rem 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  z-index:120;
  backdrop-filter:blur(6px);
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
  text-align:center;
}
.consent-bar__text,
.consent-bar__detail,
.consent-bar__accept,
.consent-bar__reject{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  line-height:1.2;
}
.consent-bar__actions{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  justify-content:center;
}
.consent-bar__accept{
  background:#fff;
  color:#111;
  border:1px solid transparent;
  padding:0 .85rem;
  border-radius:0;
  cursor:pointer;
  font-weight:600;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.consent-bar__reject{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  padding:0 .85rem;
  border-radius:0;
  cursor:pointer;
  font-weight:500;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.consent-bar__accept:hover,
.consent-bar__accept:focus-visible{
  background:#111;
  color:#fff;
  border-color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
  text-decoration:none;
}
.consent-bar__reject:hover,
.consent-bar__reject:focus-visible{
  background:rgba(255,255,255,.14);
  border-color:#fff;
}
.consent-bar__detail{
  color:#fff;
  position:absolute;
  right:1.5cm;
  top:50%;
  transform:translateY(-50%);
  opacity:.84;
  font-size:.875rem;
  line-height:1.4;
  transition:opacity .2s ease;
  max-width:min(32vw, 18rem);
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:right;
}
.consent-bar__detail:hover,
.consent-bar__detail:focus-visible{
  opacity:1;
  text-decoration:underline;
}
.mobile-patron-badge{
  position:fixed;
  right:10px;
  bottom:max(10px, calc(env(safe-area-inset-bottom) + 10px));
  width:max-content;
  max-width:calc(100vw - 20px);
  z-index:125;
}
/* =========================================================
 * UTILITIES / STATE / OVERRIDES
 * =======================================================*/
.mobile-patron-badge[hidden]{
  display:none;
}
/* メニュー(ハンバーガー/サイド隠)展開中はメニュー内のPatronボタンと重複するため非表示 */
body.drawer-open .mobile-patron-badge{
  display:none;
}
.mobile-patron-badge__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  width:auto;
  max-width:100%;
  min-height:50px;
  padding:.62rem 2.45rem .62rem .6rem;
  border-radius:999px;
  background:#a61f24;
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.mobile-patron-badge__link:hover,
.mobile-patron-badge__link:focus-visible{
  background:#f3c11a;
  color:#fff;
  text-decoration:none;
}
.mobile-patron-badge__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:2.5rem;
  height:2.5rem;
  border-radius:999px;
  background:#fff;
  color:#a61f24;
}
.mobile-patron-badge__icon .articul-patron-link__icon{
  width:1.5rem;
  height:1.5rem;
}
.mobile-patron-badge__text{
  display:flex;
  flex-direction:column;
  font-size:.82rem;
  font-weight:700;
  line-height:1.22;
}
.mobile-patron-badge__text-line{
  display:block;
  white-space:nowrap;
}
.mobile-patron-badge__close{
  position:absolute;
  top:-8px;
  right:-2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1px solid rgba(166,31,36,.14);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#a61f24;
  cursor:pointer;
  z-index:1;
  box-shadow:0 6px 14px rgba(17,17,17,.14);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.mobile-patron-badge__close:hover,
.mobile-patron-badge__close:focus-visible{
  background:#fff7e3;
  border-color:rgba(243,193,26,.5);
  color:#8f1b1f;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(17,17,17,.2);
}
.mobile-patron-badge__close span{
  display:block;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
@media (max-width: 640px){
  .consent-bar{
    gap:.45rem;
    padding:.5rem .6rem;
    flex-wrap:wrap;
    justify-content:center;
  }
  .consent-bar__text{
    flex:1 1 100%;
  }
  .consent-bar__actions{
    flex:0 0 auto;
  }
  .consent-bar__detail{
    position:static;
    transform:none;
    right:auto;
    top:auto;
    width:100%;
    text-align:right;
  }
  .mobile-patron-badge{
    right:8px;
    max-width:calc(100vw - 16px);
    bottom:max(8px, calc(env(safe-area-inset-bottom) + 8px));
  }
  .mobile-patron-badge__link{
    gap:.5rem;
    min-height:46px;
    padding:.56rem 2.15rem .56rem .55rem;
    border-radius:999px;
  }
  .mobile-patron-badge__icon{
    width:2.25rem;
    height:2.25rem;
  }
  .mobile-patron-badge__icon .articul-patron-link__icon{
    width:1.35rem;
    height:1.35rem;
  }
  .mobile-patron-badge__text{
    font-size:.76rem;
    line-height:1.18;
  }
  .mobile-patron-badge__close{
    top:-7px;
    right:-1px;
    width:22px;
    height:22px;
  }
  .mobile-patron-badge__close span{
    font-size:11px;
  }
}
@media (min-width: 961px){
  .mobile-patron-badge{
    display:none;
  }
}

.pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:2.4rem 0 0;
}
.pager .page-numbers{
  min-width:2.4rem;
  height:2.4rem;
  padding:0 .82rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d2d6de;
  border-radius:999px;
  background:#fcfcfd;
  color:#2f333a;
  text-decoration:none;
  font-weight:500;
  font-size:.92rem;
  line-height:1;
  box-shadow:0 1px 4px rgba(17, 24, 39, .05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.pager a.page-numbers:hover,
.pager a.page-numbers:focus-visible{
  border-color:#aeb5c2;
  background:#f4f6f9;
  box-shadow:0 6px 16px rgba(15, 23, 42, .10);
  transform:translateY(-1px);
  color:#1b1f27;
}
.pager .page-numbers.current{
  border-color:#9ea4ae;
  background:linear-gradient(180deg, #eef1f5 0%, #e1e5eb 100%);
  color:#1f2530;
  box-shadow:0 4px 12px rgba(26, 32, 44, .14);
  font-weight:600;
}
.pager .page-numbers.dots{
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  min-width:auto;
  padding:0 .3rem;
}

/* WORKS single: full-width gray title strip under header (旧レイアウト準拠の細い帯) */
.works-single-title-area{
  width:100%;
  background:#f7f7f7;
  border-top:1px solid #eaeaea;
  border-bottom:1px solid #eaeaea;
  margin:0;
}
.works-single-title-area__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  padding-top:2.25rem;
  padding-bottom:2.25rem;
  /* 本文(.works-single-content)と同じ幅にしてタイトル左端=コンテンツ左端を揃える */
  max-width:1400px;
}
.works-single-title-area__title{
  margin:0;
  font-size:1.25rem;
  font-weight:600;
  color:rgba(48,49,51,.65);
  line-height:1.35;
}
.works-single-title-area__path{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.8125rem;
  color:rgba(48,49,51,.65);
  white-space:nowrap;
  min-width:0;
  overflow:hidden;
}
/* 長い作品名はパンくず末尾で省略してはみ出しを防ぐ */
.works-single-title-area__path > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}
.works-single-title-area__path a{
  color:inherit;
  text-decoration:none;
}
.works-single-title-area__path a:hover,
.works-single-title-area__path a:focus-visible{
  color:#888;
}
.works-single-content{
  margin-top:4.2rem;
  max-width:1400px;
  padding-left:24px;
  padding-right:24px;
}
/* WORKS single content area: layout controlled by post_meta (view-*) */
.work-detail{
  --articul-work-detail-stack-max-width:1024px;
  --articul-work-detail-caption-body-max-width:620px;
  --articul-work-detail-side-caption-width:420px;
  --articul-work-detail-side-gap:clamp(2rem, 4vw, 3.375rem);
  margin-top:1rem;
  display:grid;
  gap:1.25rem;
  align-items:start;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.work-detail__media{
  display:grid;
  gap:1rem;
  max-width:min(100%, var(--articul-work-detail-stack-max-width));
  box-sizing:border-box;
  min-width:0;
}
.work-detail__caption{min-width:0}
.work-detail__caption.card{
  background:transparent;
  border:0;
  box-shadow:none;
  /* padding:0化で区切り線が端まで届くため、角丸クリップを無効化 */
  border-radius:0;
  overflow:visible;
}
.work-detail__caption .card-body{
  font-size:.9375rem;
  /* 旧レイアウト準拠: 内側paddingなし（余白はガターとブロック間リズムが担う） */
  padding:0;
}
.work-detail__caption-body{
  margin:0 0 1.7rem;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.work-detail__meta-block{
  margin:0;
}
.work-detail__meta-block--has-meta{
  overflow-wrap:anywhere;
}
.work-detail__meta{
  width:100%;
  border-collapse:collapse;
  margin:0;
}
.work-detail__meta th,
.work-detail__meta td{
  text-align:left;
  padding:.2rem 0;
  vertical-align:top;
  line-height:1.75;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.work-detail__meta th{
  width:9.5em;
  font-weight:600;
}
.work-detail__share{
  margin-top:1.25rem;
  padding-top:0;
  border-top:0;
  display:flex;
  gap:0.75rem;
  align-items:center;
  justify-content:flex-start;
}
.work-detail__caption--has-meta .work-detail__share{
  padding-top:1.7rem;
  border-top:1px solid #d9d9d9;
}
.work-detail__share-label{
  width:9.5em;
  font-weight:600;
  line-height:1.2;
}
.work-detail__share .blog-single-share{
  margin:0;
  padding:0;
}
.work-detail--caption-top .work-detail__caption .card-body,
.work-detail--caption-bottom .work-detail__caption .card-body{
  display:grid;
  grid-template-columns:minmax(0,var(--articul-work-detail-caption-body-max-width)) minmax(280px,360px);
  gap:2.5rem;
  align-items:start;
  justify-content:center;
  width:100%;
  max-width:min(100%, var(--articul-work-detail-stack-max-width));
  /* 旧レイアウトの36pxリズム: 画像との間隔が gap 20px + 36px ≒ 左右ガター(54px)と揃う */
  padding-top:2.25rem;
  padding-bottom:2.25rem;
  margin-left:auto;
  margin-right:auto;
}
.work-detail--caption-top .work-detail__caption-body,
.work-detail--caption-bottom .work-detail__caption-body{
  margin:0;
}
.work-detail--caption-top .work-detail__meta-block,
.work-detail--caption-bottom .work-detail__meta-block{
  justify-self:end;
  width:min(100%,360px);
}
/* 説明文なしの作品は2カラム目が空になるため、メタブロック単体の1カラムとして中央に寄せる */
.work-detail--caption-top .work-detail__caption:not(.work-detail__caption--has-body) .card-body,
.work-detail--caption-bottom .work-detail__caption:not(.work-detail__caption--has-body) .card-body{
  grid-template-columns:minmax(280px,360px);
}
/* キャプション本文の有無に関わらず、メタ情報(説明欄)の上に区切り線を出して見た目を揃える */
.work-detail--caption-left .work-detail__meta-block--has-meta,
.work-detail--caption-right .work-detail__meta-block--has-meta{
  border-top:1px solid #d9d9d9;
  padding-top:1.7rem;
}
.work-detail__media-item img{
  display:block;
  width:100%;
  height:auto;
}
/* 縦並び: 複数画像の横幅を「最も広い画像」基準で揃える（fit-content + 子を stretch） */
.work-detail--layout-vertical .work-detail__media{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:fit-content;
  max-width:min(100%, var(--articul-work-detail-stack-max-width));
  gap:1rem;
  min-width:0;
}
.work-detail--layout-vertical .work-detail__media-item{
  width:100%;
  min-width:0;
}
.work-detail--layout-vertical.work-detail--caption-top .work-detail__media,
.work-detail--layout-vertical.work-detail--caption-bottom .work-detail__media{
  justify-self:center;
}
/* 左右キャプション時は固定カラム(ステージ)の中央に画像を置く（キャプション位置は固定のまま） */
.work-detail--layout-vertical.work-detail--caption-right .work-detail__media{
  justify-self:center;
}
.work-detail--layout-vertical.work-detail--caption-left .work-detail__media{
  justify-self:center;
}
.work-detail--layout-grid .work-detail__media{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* 1枚目: 描画幅そのものが要素幅になり、コンテナ(fit-content)の基準幅を決める */
.work-detail--layout-vertical.work-detail--caption-top .work-detail__media-item:first-child img,
.work-detail--layout-vertical.work-detail--caption-bottom .work-detail__media-item:first-child img{
  width:auto;
  max-width:100%;
  max-height:min(76vh, calc(var(--articul-work-detail-stack-max-width) * .75));
  object-fit:contain;
  margin:0;
}
/* 2枚目以降: コンテナ幅の計算に影響させず(width:0)、1枚目の幅いっぱいに追従する */
.work-detail--layout-vertical.work-detail--caption-top .work-detail__media-item:not(:first-child) img,
.work-detail--layout-vertical.work-detail--caption-bottom .work-detail__media-item:not(:first-child) img{
  width:0;
  min-width:100%;
  height:auto;
  max-height:none;
  margin:0;
}
.work-detail--layout-slide .work-detail__media{
  display:block;
  position:relative;
  overflow:hidden;
  background:transparent;
  width:100%;
  max-width:min(100%, var(--articul-work-detail-stack-max-width));
}
.work-detail--layout-slide .work-detail__media .swiper-wrapper{
  display:flex;
  width:100%;
}
.work-detail--layout-slide .work-detail__media-item{
  width:100%;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
/* Keep width enforcement for Swiper slides: Swiper injects inline width values here. */
.work-detail--layout-slide .work-detail__media .swiper-slide{
  flex:0 0 100% !important;
  width:100% !important;
  min-width:100% !important;
}
.work-detail--layout-slide .work-detail__media-item img{
  width:100%;
  height:auto;
  max-height:min(78vh, calc(var(--articul-work-detail-stack-max-width) * .75));
  object-fit:contain;
  margin:0 auto;
}
.work-detail__slider-prev,
.work-detail__slider-next{
  color:#fff;
  width:36px;
  height:36px;
  margin-top:-18px;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  display:none;
}
.work-detail__slider-prev::after,
.work-detail__slider-next::after{
  font-size:20px;
}
.work-detail__slider-pagination{
  position:static;
  margin-top:10px;
  text-align:center;
}
.work-detail__slider-pagination .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:rgba(17,17,17,.28);
  opacity:1;
  margin:0 4px;
}
.work-detail__slider-pagination .swiper-pagination-bullet-active{
  background:#111;
  transform:scale(1.15);
}

.work-detail--caption-right{
  grid-template-columns:minmax(0,var(--articul-work-detail-stack-max-width)) minmax(280px,var(--articul-work-detail-side-caption-width));
}
.work-detail--caption-left{
  grid-template-columns:minmax(280px,var(--articul-work-detail-side-caption-width)) minmax(0,var(--articul-work-detail-stack-max-width));
}
.work-detail--caption-right,
.work-detail--caption-left{
  width:100%;
  max-width:min(100%, calc(var(--articul-work-detail-stack-max-width) + var(--articul-work-detail-side-caption-width) + var(--articul-work-detail-side-gap)));
  column-gap:var(--articul-work-detail-side-gap);
  justify-content:center;
}
/* 縦表示も汎用の固定カラム定義を使う（画像の縦横比でキャプション位置が動かないよう、旧レイアウト準拠で列幅を固定） */
.work-detail--caption-right .work-detail__caption{
  justify-self:start;
}
.work-detail--caption-left .work-detail__caption{
  justify-self:end;
}
.work-detail--caption-left .work-detail__caption{
  order:-1;
}
.work-detail--caption-right .work-detail__meta td,
.work-detail--caption-left .work-detail__meta td{
  overflow-wrap:break-word;
  word-break:normal;
}
/* 左右キャプションでも縦長画像が端に寄らないよう、画像エリアは中央揃えにする */
.work-detail--caption-right .work-detail__media{
  justify-self:center;
  justify-items:center;
}
.work-detail--caption-left .work-detail__media{
  justify-self:center;
  justify-items:center;
}
.work-detail--caption-right.work-detail--layout-slide .work-detail__media-item{
  justify-content:center;
}
.work-detail--caption-left.work-detail--layout-slide .work-detail__media-item{
  justify-content:center;
}
.work-detail--caption-right.work-detail--layout-grid .work-detail__media{
  justify-items:center;
}
.work-detail--caption-left.work-detail--layout-grid .work-detail__media{
  justify-items:center;
}
.work-detail--caption-top,
.work-detail--caption-bottom{
  grid-template-columns:1fr;
}
.work-detail.work-detail--caption-top .work-detail__media,
.work-detail.work-detail--caption-bottom .work-detail__media{
  max-width:min(100%, var(--articul-work-detail-stack-max-width));
  margin-left:auto;
  margin-right:auto;
}
.work-detail--caption-top .work-detail__caption{
  order:-1;
}
.work-detail--caption-sticky .work-detail__caption{
  position:sticky;
  top:80px;
  align-self:start;
}
/* 1枚目基準の幅揃え（上下キャプションと同構造。1枚目の高さ制限は現行値を維持） */
.work-detail--layout-vertical.work-detail--caption-right .work-detail__media-item:first-child img,
.work-detail--layout-vertical.work-detail--caption-left .work-detail__media-item:first-child img{
  width:auto;
  max-width:100%;
  max-height:min(76vh,739px);
  object-fit:contain;
  margin:0;
}
.work-detail--layout-vertical.work-detail--caption-right .work-detail__media-item:not(:first-child) img,
.work-detail--layout-vertical.work-detail--caption-left .work-detail__media-item:not(:first-child) img{
  width:0;
  min-width:100%;
  height:auto;
  max-height:none;
  margin:0;
}
.work-detail--layout-slide.work-detail--caption-right .work-detail__media-item img,
.work-detail--layout-slide.work-detail--caption-left .work-detail__media-item img{
  max-height:min(82vh,874px);
  object-fit:contain;
  margin:0;
  width:auto;
  max-width:100%;
}
@media (max-width: 1024px){
  .works-single-title-area__inner{
    max-width:100%;
  }
  .work-detail{
    max-width:100%;
  }
}
/* 左右キャプションの1段化はやや狭い幅まで遅らせる（1024→900） */
@media (max-width: 900px){
  .work-detail--caption-right,
  .work-detail--caption-left{
    grid-template-columns:1fr;
  }
  .work-detail--caption-right .work-detail__caption,
  .work-detail--caption-left .work-detail__caption{
    order:1;
    justify-self:stretch;
  }
  .work-detail--caption-right .work-detail__caption .card-body,
  .work-detail--caption-left .work-detail__caption .card-body{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
  }
  .work-detail--caption-right .work-detail__caption-body,
  .work-detail--caption-left .work-detail__caption-body{
    margin:0;
  }
  .work-detail--caption-right .work-detail__meta-block,
  .work-detail--caption-left .work-detail__meta-block{
    justify-self:stretch;
    width:100%;
  }
  .work-detail--caption-right.work-detail--caption-sticky .work-detail__caption,
  .work-detail--caption-left.work-detail--caption-sticky .work-detail__caption{
    position:static;
    top:auto;
  }
  .work-detail--layout-vertical.work-detail--caption-top .work-detail__media,
  .work-detail--layout-vertical.work-detail--caption-bottom .work-detail__media,
  .work-detail--layout-vertical.work-detail--caption-right .work-detail__media,
  .work-detail--layout-vertical.work-detail--caption-left .work-detail__media{
    width:100%;
    max-width:100%;
    justify-self:stretch;
  }
  /* 画像1枚のみ: 従来どおり高さ制限付きで全幅表示（letterboxで中央寄せ） */
  .work-detail--layout-vertical.work-detail--caption-right .work-detail__media-item:only-child img,
  .work-detail--layout-vertical.work-detail--caption-left .work-detail__media-item:only-child img{
    max-width:none;
    width:100%;
    min-width:0;
    max-height:min(76vh,880px);
    object-fit:contain;
    margin:0;
  }
  .work-detail--layout-vertical.work-detail--caption-top .work-detail__media-item:only-child img,
  .work-detail--layout-vertical.work-detail--caption-bottom .work-detail__media-item:only-child img{
    max-width:none;
    width:100%;
    min-width:0;
    max-height:min(76vh, calc(var(--articul-work-detail-stack-max-width) * .75));
    object-fit:contain;
    margin:0;
  }
  /* 複数画像: コンテナが全幅になるため、全画像を同一幅（全幅）・高さ自動で統一 */
  .work-detail--layout-vertical.work-detail--caption-top .work-detail__media-item:not(:only-child) img,
  .work-detail--layout-vertical.work-detail--caption-bottom .work-detail__media-item:not(:only-child) img,
  .work-detail--layout-vertical.work-detail--caption-right .work-detail__media-item:not(:only-child) img,
  .work-detail--layout-vertical.work-detail--caption-left .work-detail__media-item:not(:only-child) img{
    width:100%;
    min-width:0;
    max-width:none;
    height:auto;
    max-height:none;
    margin:0;
  }
  .work-detail--caption-right .work-detail__media,
  .work-detail--caption-left .work-detail__media{
    justify-items:stretch;
  }
  .work-detail--caption-right.work-detail--layout-slide .work-detail__media-item,
  .work-detail--caption-left.work-detail--layout-slide .work-detail__media-item{
    justify-content:center;
  }
  .work-detail--caption-right.work-detail--layout-grid .work-detail__media,
  .work-detail--caption-left.work-detail--layout-grid .work-detail__media{
    justify-items:stretch;
  }
  .work-detail--layout-slide.work-detail--caption-right .work-detail__media-item img,
  .work-detail--layout-slide.work-detail--caption-left .work-detail__media-item img{
    max-height:min(82vh, 1040px);
    width:100%;
    max-width:100%;
  }
}
.work-related__title{
  text-align:center;
  font-size:1rem;
  font-weight:500;
  letter-spacing:.08em;
  margin:0 0 1rem;
}
.work-related{
  padding:1.25rem 0 2.25rem;
}
.work-related__grid{
  gap:1.1rem;
}
.work-related__card{
  border-radius:0;
  box-shadow:none;
  border:0;
}
.work-related__card .card-body{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:.55rem 0 0;
  text-align:center;
}
.work-related__card .card-body a{
  color:#111;
  text-decoration:none;
}
.work-related__card .card-body a:hover,
.work-related__card .card-body a:focus-visible{
  color:#0a66c2;
  text-decoration:none;
}
.work-related__thumb{
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
.work-related__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:filter .3s ease, transform .3s ease;
}
.work-related__thumb:hover img,
.work-related__thumb:focus-visible img{
  filter:brightness(.72);
}
/* デスクトップ(3カラム)は3件で1行に揃え、4件目はスマホ(2カラム)の2x2用に隠す */
@media (min-width: 769px){
  .work-related__grid > .work-related__card:nth-child(n+4){
    display:none;
  }
}
@media (max-width:768px){
  .work-related{
    padding:1rem 0 1.8rem;
  }
  .work-related__grid{
    gap:.85rem;
  }
}
@media (max-width:480px){
  .work-related__thumb{
    aspect-ratio:4 / 3;
  }
}

.work-detail__image.js-work-lightbox-trigger{
  cursor:zoom-in;
}
.work-detail__media-item .work-detail__image.js-work-lightbox-trigger:focus-visible{
  outline:2px solid rgba(17,17,17,.55);
  outline-offset:4px;
}
body.work-lightbox-open{
  overflow:hidden;
}
.work-lightbox{
  position:fixed;
  inset:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
}
.work-lightbox[hidden]{
  display:none;
}
.work-lightbox__overlay{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.88);
  animation:work-lightbox-fade-in .28s ease;
}
.work-lightbox__dialog{
  position:relative;
  z-index:1;
  width:min(96vw,1600px);
  height:min(96vh,1040px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:3rem 1.25rem 1.1rem;
  box-sizing:border-box;
  animation:work-lightbox-fade-in .28s ease;
}
.work-lightbox__stage{
  position:relative;
  width:100%;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.work-lightbox__image-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action:none;
}
.work-lightbox__image-wrap.is-draggable{
  cursor:grab;
}
.work-lightbox__image-wrap.is-dragging{
  cursor:grabbing;
}
.work-lightbox__image{
  width:auto;
  max-width:90vw;
  max-height:84vh;
  object-fit:contain;
  user-select:none;
  transform-origin:center center;
  transition:opacity .24s ease, transform .2s ease;
  will-change:transform,opacity;
}
.work-lightbox__image.is-switching{
  opacity:.22;
}
.work-lightbox__thumbs{
  width:min(90vw,760px);
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:1rem;
  overflow-x:auto;
  padding:.2rem .4rem .5rem;
  scrollbar-width:thin;
}
.work-lightbox__thumb{
  appearance:none;
  border:1px solid rgba(255,255,255,.24);
  background:transparent;
  padding:0;
  width:62px;
  height:62px;
  border-radius:3px;
  overflow:hidden;
  opacity:.58;
  cursor:pointer;
  transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.work-lightbox__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.work-lightbox__thumb:hover,
.work-lightbox__thumb:focus-visible,
.work-lightbox__thumb.is-active{
  opacity:1;
  border-color:rgba(255,255,255,.78);
}
.work-lightbox__thumb:focus-visible{
  outline:none;
}
.work-lightbox__close,
.work-lightbox__nav,
.work-lightbox__zoom-toggle{
  appearance:none;
  border:0;
  padding:0;
  color:#fff;
  background:rgba(22,22,22,.52);
  cursor:pointer;
  transition:opacity .2s ease, background .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.work-lightbox__close:hover,
.work-lightbox__close:focus-visible,
.work-lightbox__nav:hover,
.work-lightbox__nav:focus-visible,
.work-lightbox__zoom-toggle:hover,
.work-lightbox__zoom-toggle:focus-visible{
  background:rgba(18,18,18,.8);
}
.work-lightbox__close{
  position:absolute;
  top:.75rem;
  right:.85rem;
  width:38px;
  height:38px;
  border-radius:999px;
  z-index:4;
}
.work-lightbox__zoom-toggle{
  position:absolute;
  top:.75rem;
  left:.85rem;
  width:38px;
  height:38px;
  border-radius:999px;
  z-index:4;
}
.work-lightbox__close-icon,
.work-lightbox__zoom-icon,
.work-lightbox__nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
}
.work-lightbox__close-icon path,
.work-lightbox__zoom-icon path,
.work-lightbox__nav-icon path{
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.work-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:64px;
  border-radius:999px;
  font-size:1.7rem;
  line-height:1;
  z-index:3;
}
.work-lightbox__nav--prev{
  left:.45rem;
}
.work-lightbox__nav--next{
  right:.45rem;
}
.work-lightbox.is-zoomed .work-lightbox__thumbs{
  opacity:0;
  pointer-events:none;
}
.work-lightbox.is-zoomed .work-lightbox__nav{
  opacity:.25;
}
.work-lightbox.is-zoomed .work-lightbox__close,
.work-lightbox.is-zoomed .work-lightbox__zoom-toggle{
  opacity:.75;
}

@keyframes work-lightbox-fade-in{
  from{opacity:0}
  to{opacity:1}
}

@media (max-width: 768px){
  /* スマホは旧レイアウト同様「タイトル+パンくず」の2行中央組みにする */
  .works-single-title-area__inner{
    flex-direction:column;
    align-items:center;
    gap:.4rem;
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    justify-content:center;
  }
  .works-single-title-area__title{
    text-align:center;
  }
  .works-single-title-area__path{
    justify-content:center;
    white-space:normal;
    flex-wrap:wrap;
    row-gap:.25rem;
    font-size:.75rem;
  }
  /* スマホヘッダーのブランド表示は控えめに（旧レイアウト準拠） */
  .site-title{
    font-size:1.05rem;
  }
  .site-title .site-brand__logo{
    max-height:44px;
  }
  .work-detail{
    grid-template-columns:1fr;
  }
  .work-detail--layout-grid .work-detail__media{
    grid-template-columns:1fr;
  }
  .work-detail--caption-top .work-detail__caption .card-body,
  .work-detail--caption-bottom .work-detail__caption .card-body{
    grid-template-columns:1fr;
    padding-top:1.25rem;
    padding-bottom:1.25rem;
  }
  /* 1列化時はメタブロックの右寄せ・固定幅を解除する（左右キャプションの900px時と同じ扱い） */
  .work-detail--caption-top .work-detail__meta-block,
  .work-detail--caption-bottom .work-detail__meta-block{
    justify-self:stretch;
    width:100%;
  }
  .work-detail--caption-sticky .work-detail__caption{
    position:static;
  }
  .work-lightbox__dialog{
    width:100vw;
    height:100dvh;
    padding:calc(env(safe-area-inset-top, 0px) + .75rem) .55rem calc(env(safe-area-inset-bottom, 0px) + .55rem);
    justify-content:flex-start;
  }
  .work-lightbox__stage{
    flex:1 1 auto;
    min-height:0;
  }
  .work-lightbox__image{
    max-width:92vw;
    max-height:calc(100dvh - 150px);
  }
  .work-lightbox__thumbs{
    width:100%;
    justify-content:flex-start;
    margin-top:.5rem;
    padding:.15rem .65rem .2rem;
    gap:.38rem;
    flex:0 0 auto;
  }
  .work-lightbox__thumb{
    width:48px;
    height:48px;
  }
  .work-lightbox__close,
  .work-lightbox__zoom-toggle{
    width:36px;
    height:36px;
    top:calc(env(safe-area-inset-top, 0px) + .4rem);
  }
  .work-lightbox__close-icon,
  .work-lightbox__zoom-icon,
  .work-lightbox__nav-icon{
    width:18px;
    height:18px;
  }
  .work-lightbox__nav{
    width:34px;
    height:52px;
    font-size:1.45rem;
  }
  .work-lightbox__nav--prev{
    left:.2rem;
  }
  .work-lightbox__nav--next{
    right:.2rem;
  }
}

/* BLOG list section */
.section.section-blog > .container{max-width:1000px}
.blog-list{display:flex;flex-direction:column;gap:0}
.blog-list-item{
  display:flex;
  align-items:center;
  padding:0.85rem 0;
  text-decoration:none;
  color:inherit;
  transition:background-color 0.2s ease;
  /* 区切り線をリンク自体に持たせて「線と線の間＝ホバー領域」にする */
  border-top:1px solid #e0e0e0;
}
.blog-list-item:last-child{border-bottom:1px solid #e0e0e0}
.blog-list-item:hover{background-color:rgba(0,0,0,0.02)}
.blog-date{display:inline-block;min-width:120px;padding-left:1.5rem;margin-right:1.5rem;color:#666;font-size:1rem;flex-shrink:0}
.blog-title{display:inline-block;margin:0;font-size:1rem;font-weight:400;color:#111;flex:1}
.blog-title:hover{text-decoration:underline}
@media (min-width: 769px){
  .blog-date{padding-left:3rem}
}
@media (max-width: 768px){
  .blog-list-item{flex-direction:column;align-items:flex-start;padding:0.95rem 0}
  .blog-date{min-width:auto;padding-left:0;margin-right:0;margin-bottom:0.25rem}
  .blog-title{width:100%}
}

/* =========================================================
 * CONTACT
 * =======================================================*/
.contact-page{
  background:#fff;
  padding:4rem 0 5rem;
}
.contact-page__container{
  max-width:760px;
}
@media (max-width: 1024px) and (min-width: 769px){
  .contact-page__container{
    max-width:680px;
  }
}
.contact-page__title{
  margin:0 0 1.75rem;
  text-align:center;
  letter-spacing:.06em;
}
.contact-page__body{
  margin:0 auto;
  width:100%;
}
.articul-contact-form{
  width:100%;
}
.articul-contact-form__notice{
  margin:0 0 1rem;
  padding:1rem;
}
.articul-contact-complete{
  width:100%;
  border:1px solid #e1e1e1;
  background:#fff;
  padding:2rem 1.5rem;
  text-align:center;
}
.articul-contact-complete__title{
  margin:0 0 .9rem;
  font-size:1.35rem;
  line-height:1.5;
}
.articul-contact-complete__text{
  margin:0 auto 1.5rem;
  max-width:38rem;
  color:#222;
}
.articul-contact-complete__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:.9rem 1.2rem;
  background:#111;
  color:#fff;
  text-decoration:none;
}
.articul-contact-complete__button:hover,
.articul-contact-complete__button:focus-visible{
  opacity:.88;
  text-decoration:none;
}
.articul-contact-form__intro{
  margin:0 0 3rem;
  text-align:left;
  color:#222;
}
.articul-contact-form__form{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  width:100%;
}
.articul-contact-form__field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  width:100%;
}
.articul-contact-form__field label{
  color:#1b1b1b;
}
.articul-contact-form__field input,
.articul-contact-form__field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d9d9d9;
  background:#fff;
  color:#111;
  font:inherit;
  padding:.7rem .85rem;
}
.articul-contact-form__field textarea{
  min-height:131px;
  resize:vertical;
}
.articul-contact-form__check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  color:#222;
  font-size:1rem;
  width:100%;
}
.articul-contact-form__check input{
  margin-top:.35rem;
}
.articul-contact-form__submit{
  width:100%;
  appearance:none;
  border:0;
  background:#111;
  color:#fff;
  padding:1rem 1.2rem;
  font:inherit;
  cursor:pointer;
}
.articul-contact-form__submit:hover,
.articul-contact-form__submit:focus-visible{
  opacity:.88;
}

/* =========================================================
 * ABOUT
 * =======================================================*/
/* ABOUT: 2-column layout + configurable hero color + minimal cards */
.about-layout{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 5.25rem);
  padding-top:clamp(2rem, 5vw, 5rem);
  padding-bottom:clamp(3rem, 6vw, 6rem);
}
.about-layout.container{
  /* 作品詳細ページのコンテンツ幅(1400px)と統一（旧レイアウトの1404px相当） */
  max-width:1400px;
}
.about-layout--font-sans,
.about-layout--font-sans *{
  font-family:'Noto Sans JP', sans-serif;
}
.about-layout--font-serif,
.about-layout--font-serif *{
  font-family:'Noto Serif JP', serif;
}
.about-sidebar{
  position:sticky;
  top:92px;
  align-self:start;
}
.about-sidebar__nav{
  display:flex;
  flex-direction:column;
  gap:.18rem;
  padding-top:clamp(1.1rem, 2vw, 1.8rem);
}
.about-sidebar__link{
  display:block;
  color:rgba(26, 26, 26, .72);
  font-size:.96rem;
  font-weight:500;
  line-height:1.42;
  letter-spacing:.05em;
  padding:.28rem 0;
  text-decoration:none;
  transition:color .2s ease;
}
.about-sidebar__link:hover,
.about-sidebar__link:focus-visible{
  color:#111;
  text-decoration:none;
}
.about-sidebar__link--name{
  margin-bottom:.65rem;
  color:#1a1a1a;
  font-size:1.05rem;
  font-weight:500;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.about-main{
  display:flex;
  flex-direction:column;
  gap:1.35rem;
  background:#fff;
  border-radius:0;
  padding:clamp(1rem, 2.2vw, 1.8rem);
  margin-top: -50px;
}
.about-hero{
  background:var(--about-hero-bg, #c7a9af);
  border-radius:0;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding:clamp(2rem, 3.6vw, 3rem) clamp(1.6rem, 5vw, 4.5rem);
}
.about-hero__inner{
  display:grid;
  grid-template-columns:minmax(150px, 200px) minmax(0, 1fr);
  gap:clamp(1.6rem, 3vw, 3rem);
  align-items:center;
}
.about-hero__media{
  width:100%;
  max-width:200px;
  justify-self:center;
}
.about-hero__image{
  width:100%;
  height:auto;
  display:block;
  /* TOP画面のABOUTエリアと同様、元画像の縦横比に関わらず正方形にクロップする */
  aspect-ratio:1/1;
  object-fit:cover;
}
.about-hero__image--square{
  border-radius:0;
}
.about-hero__image--rounded{
  border-radius:14px;
}
.about-hero__image--circle{
  border-radius:999px;
}
.about-hero__genre{
  margin:0 0 .3rem;
  color:rgba(17, 17, 17, .76);
  font-size:1.125rem;
  letter-spacing:.16em;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.about-hero__name{
  margin:0 0 1rem;
  color:#161616;
  font-weight:300;
  font-size:clamp(1.45rem, 3.9vw, 3rem);
  line-height:1.08;
  letter-spacing:.03em;
  line-break:strict;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.about-hero__body{
  min-width:0;
  text-align:left;
  overflow-wrap:break-word;
}
.about-hero__sns{
  justify-content:flex-start;
  align-self:flex-start;
  text-align:left;
  margin-bottom:1.8rem;
}
.about-hero__text{
  width:100%;
  color:#222;
  font-size:1rem;
  line-height:1.95;
  overflow-wrap:anywhere;
  text-align:left;
}
.about-hero__text p{
  margin:.5rem 0 0;
}
.about-hero__text p:first-child{
  margin-top:0;
}
.about-sections{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.about-card{
  background:#fff;
  border:none;
  border-radius:0;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding:clamp(2rem, 3.6vw, 3rem) clamp(1.6rem, 5vw, 4.5rem);
}
.about-card__title{
  margin:0 0 2rem;
  color:#1a1a1a;
  font-weight:400;
  font-size:clamp(1.25rem, 2.8vw, 2rem);
  line-height:1.3;
  letter-spacing:.03em;
  text-align:left;
}
.about-card__body{
  color:#333;
  font-size:1rem;
  line-height:2.15;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}
.about-sections .about-card .about-card__body{
  /* 旧レイアウト準拠: タイトルは左端のまま、本文だけ字下げする（旧はcol-lg-1で約114px） */
  padding-left:clamp(2.5rem, 10%, 7rem);
}
.about-card__body p{
  margin:.55rem 0 0;
}
.about-card__body p:first-child{
  margin-top:0;
}

@media (max-width: 980px){
  .about-layout{
    display:block;
    padding-right:4mm;
    padding-left:4mm;
  }
  .about-sidebar{
    display:none;
  }
  .about-sections .about-card .about-card__body{
    padding-left:0;
  }
  .about-main{
    width:100%;
    margin-inline:auto;
    /* サイドバー非表示時はデスクトップ用の負マージン(-50px)を打ち消す */
    margin-top:0;
    padding-right:max(4mm, 1rem);
    padding-left:max(4mm, 1rem);
    box-sizing:border-box;
  }
  .about-hero__inner{
    grid-template-columns:1fr;
    align-items:center;
    justify-items:center;
  }
  .about-hero__media{
    margin-inline:auto;
  }
  .about-hero__body{
    width:100%;
    text-align:left;
  }
  .about-hero__text{
    box-sizing:border-box;
    max-width:none;
    margin-inline:0;
    padding-left:0;
    text-align:left;
  }
  .about-hero__sns{
    justify-content:flex-start;
    align-self:flex-start;
    text-align:left;
  }
}

@media (max-width: 720px){
  .about-hero__inner{
    grid-template-columns:1fr;
    align-items:center;
  }
}

/* Drawer header normalize */
.header.header--menu-drawer .header-inner{
  position:relative;
}
.header.header--menu-drawer .hamburger{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:transparent;
  border:0;
  border-radius:0;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  line-height:1;
  padding:0;
  margin:0;
  cursor:pointer;
  color:#111;
}
.header.header--menu-drawer .patron-shortcut{
  position:absolute;
  top:calc(50% + 0.5mm);
  transform:translateY(-50%);
  z-index:2;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  line-height:1;
  padding:0;
  margin:0;
  text-decoration:none;
  color:#111;
}
.header.header--menu-drawer .patron-shortcut .articul-patron-link__icon{
  width:28px;
  height:28px;
}
.header.header--menu-drawer .patron-shortcut:hover,
.header.header--menu-drawer .patron-shortcut:focus-visible{
  opacity:.65;
  text-decoration:none;
}
.header.header--menu-drawer .hamburger__icon{
  font-size:24px;
  line-height:1;
  margin:0;
  padding:0;
  transform:none;
}
body.articul-menu-pos-left .header.header--menu-drawer .hamburger{
  left:var(--drawer-button-gap);
  right:auto;
}
body.articul-menu-pos-right .header.header--menu-drawer .hamburger{
  right:var(--drawer-button-gap);
  left:auto;
}
body.articul-menu-pos-left .header.header--menu-drawer .patron-shortcut{
  left:calc(var(--drawer-button-gap) + 35px);
  right:auto;
}
body.articul-menu-pos-right .header.header--menu-drawer .patron-shortcut{
  right:calc(var(--drawer-button-gap) + 35px);
  left:auto;
}

/* Public sites do not render WordPress Admin Bar chrome. */
:root{
  --articul-menu-top-offset:0px;
}
body.articul-admin-strip-visible{
  --articul-menu-top-offset:var(--articul-admin-strip-height);
}
body.articul-menu-type-side .side-floating-menu{
  top:var(--articul-menu-top-offset);
}

/* =========================================================
 * 404 PAGE
 * 旧テーマ(Uncode)の404構成（大きな404/Page Not Found/案内文/
 * 区切り線/Back Homepageボタン）を踏襲しつつ、新テーマの
 * 白基調に合わせた淡いライト配色で中央寄せ表示する。
 * 100vw全幅化はサイドメニュー時に切れるため使わない
 * （#main は元々全幅なので通常フローで足りる）。
 * =======================================================*/
/* #main の残り空間をすべて404セクションで埋め、フッターまで隙間なく到達させる */
body.error404 #main{
  display:flex;
  flex-direction:column;
}
body.error404 .footer{
  margin-top:0;
}
.error-404-page{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:calc(100vh - var(--articul-header-offset, 64px));
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:4rem 24px;
  background:var(--muted);
  color:#111;
  text-align:center;
}
.error-404-page__inner{
  width:100%;
  max-width:504px;
  margin:0 auto;
}
.error-404-page__code{
  margin:0;
  font-size:clamp(6.5rem, 30vw, 15rem);
  line-height:.9;
  font-weight:700;
  letter-spacing:-.05em;
  text-transform:uppercase;
  color:#c9c9c9;
}
.error-404-page__subtitle{
  margin:.25rem 0 0;
  font-size:clamp(1.9rem, 9vw, 4rem);
  line-height:1;
  font-weight:700;
  letter-spacing:-.05em;
  white-space:nowrap;
  color:#111;
}
.error-404-page__message{
  margin:2.5rem 0 0;
  font-size:1rem;
  font-weight:500;
  line-height:1.75;
  color:#444;
}
.error-404-page__login-link{
  color:#444;
  text-decoration:underline;
}
.error-404-page__login-link:hover{
  opacity:.75;
}
.error-404-page__divider{
  margin:2rem auto;
  border:0;
  border-top:1px solid #ddd;
  width:100%;
}
.error-404-page__home-link{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.8em 2.2em;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s ease;
}
.error-404-page__home-link:hover,
.error-404-page__home-link:focus-visible{
  opacity:.8;
  text-decoration:none;
  color:#fff;
}
.error-404-page__home-arrow{
  line-height:1;
}