/**
 * WP ブロック想定コンポーネント（DesignKit）
 * テーマ化時は Gutenberg ブロック / パターンの見た目ソースになる。
 * 状態は data-* / ARIA。バリエーションは b--name--modifier。
 */
@layer lism-block {
  /* —— Media & Text（wp:media-text） —— */
  .b--mediaText {
    display: grid;
    gap: var(--s40);
    align-items: center;
  }

  @media (min-width: 800px) {
    .b--mediaText {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .b--mediaText.b--mediaText--rev {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }

    .b--mediaText.b--mediaText--rev .b--mediaText_media {
      order: 2;
    }
  }

  .b--mediaText_media {
    overflow: hidden;
  }

  .b--mediaText_media img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* —— 灯火：サービスリンク —— */
  @media (max-width: 799px) {
    .c--serviceLink.b--mediaText .b--mediaText_media {
      order: -1;
    }
  }

  .c--serviceLink_more {
    margin: 0;
    padding-block-start: var(--s10);
  }

  .c--serviceLink_moreLink {
    display: inline-flex;
    align-items: center;
    gap: var(--s10);
    color: var(--link);
    text-decoration: none;
    font-size: var(--fz--s);
    letter-spacing: var(--lts--s);
    border-block-end: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
    transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
  }

  .c--serviceLink_moreIcon {
    width: 1em;
    height: 1em;
    flex: none;
  }

  .c--serviceLink_moreLink:hover,
  .c--serviceLink_moreLink:focus-visible {
    color: var(--light);
    border-block-end-color: var(--brand);
  }

  .c--serviceLink_mediaLink {
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .c--serviceLink_media .c--serviceLink_image {
    display: block;
    width: 100%;
    height: auto;
  }

  .c--serviceLink_mediaLink .c--serviceLink_image {
    transition:
      transform 1.1s var(--ease-out),
      filter 1.1s var(--ease-out);
    filter: brightness(0.78);
  }

  .c--serviceLink_mediaLink:hover .c--serviceLink_image,
  .c--serviceLink_mediaLink:focus-visible .c--serviceLink_image {
    transform: scale(1.03);
    filter: brightness(1);
  }

  .tomoshibi-service-link-editor.c--serviceLink {
    margin-block: var(--s20);
  }

  .tomoshibi-service-link-editor .c--serviceLink_media .components-placeholder {
    min-height: 12rem;
  }

  .c--servicePage_body > .tomoshibi-service-link-block {
    padding-block-start: var(--s50);
    border-block-start: 1px solid var(--divider);
  }

  /* —— Card（インタラクション容器としてのみ） —— */
  .b--card {
    display: flex;
    flex-direction: column;
    gap: var(--s25);
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid var(--divider);
    padding-block-end: var(--s30);
    transition: border-color 0.5s var(--ease-out);
  }

  .b--card:hover,
  .b--card:focus-visible {
    border-block-end-color: var(--brand);
  }

  .b--card_media {
    overflow: hidden;
  }

  .b--card_media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
    filter: brightness(0.78);
  }

  .b--card:hover .b--card_media img,
  .b--card:focus-visible .b--card_media img {
    transform: scale(1.03);
    filter: brightness(1);
  }

  /* —— Step（手順） —— */
  .b--step {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: yoshida-step;
    display: grid;
    gap: var(--s40);
  }

  .b--step_item {
    display: grid;
    gap: var(--s20);
    grid-template-columns: auto 1fr;
    align-items: start;
    counter-increment: yoshida-step;
  }

  .b--step_num {
    font-size: var(--fz--s);
    letter-spacing: var(--lts--xl);
    color: var(--brand);
    line-height: 1.4;
    min-inline-size: 2.5em;
  }

  .b--step_num::before {
    content: counter(yoshida-step, decimal-leading-zero);
  }

  /* —— Table —— */
  .b--table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fz--s);
  }

  .b--table th,
  .b--table td {
    padding: var(--s20) 0;
    border-block-end: 1px solid var(--divider);
    text-align: start;
    vertical-align: top;
  }

  .b--table th {
    color: var(--text-2);
    font-weight: var(--fw--normal);
    letter-spacing: var(--lts--l);
    width: 28%;
  }

  /* —— List —— */
  .b--list {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
    display: grid;
    gap: var(--s15);
  }

  .b--list > li {
    position: relative;
    padding-inline-start: var(--s30);
  }

  .b--list > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.7em;
    width: var(--s15);
    height: 1px;
    background: var(--brand);
  }

  .b--list.b--list--ordered {
    counter-reset: yoshida-list;
  }

  .b--list.b--list--ordered > li {
    counter-increment: yoshida-list;
  }

  .b--list.b--list--ordered > li::before {
    content: counter(yoshida-list, decimal-leading-zero);
    width: auto;
    height: auto;
    background: none;
    inset-block-start: 0;
    color: var(--brand);
    font-size: var(--fz--xs);
    letter-spacing: var(--lts--xl);
  }

  /* —— Form —— */
  .b--form {
    display: grid;
    gap: var(--s35);
  }

  .b--field {
    display: grid;
    gap: var(--s10);
  }

  .b--field_label {
    font-size: var(--fz--xs);
    letter-spacing: var(--lts--xl);
    color: var(--text-2);
  }

  .b--field_ctrl {
    width: 100%;
    appearance: none;
    background: color-mix(in srgb, var(--base-2) 55%, transparent);
    border: 1px solid var(--divider);
    border-radius: 0;
    color: var(--text);
    font: inherit;
    font-size: var(--fz--m);
    padding: var(--s20) var(--s25);
    transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
  }

  .b--field_ctrl:hover {
    border-color: color-mix(in srgb, var(--text-2) 55%, var(--divider));
  }

  .b--field_ctrl:focus {
    outline: none;
    border-color: var(--brand);
    background: color-mix(in srgb, var(--base-2) 80%, transparent);
  }

  .b--field_ctrl::placeholder {
    color: color-mix(in srgb, var(--text-2) 70%, transparent);
  }

  select.b--field_ctrl {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
      linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position:
      calc(100% - var(--s25) - 0.25em) 50%,
      calc(100% - var(--s25)) 50%;
    background-size: 0.35em 0.35em, 0.35em 0.35em;
    background-repeat: no-repeat;
    padding-inline-end: calc(var(--s25) + var(--s30));
  }

  textarea.b--field_ctrl {
    min-height: 8rem;
    resize: vertical;
  }

  /* —— Figure + caption —— */
  .b--figure {
    margin: 0;
    display: grid;
    gap: var(--s15);
  }

  .b--figure img {
    display: block;
    width: 100%;
    height: auto;
    /* うっすら光彩：近い淡い灯 + 遠い落ち影 */
    box-shadow:
      0 0 var(--s35) color-mix(in srgb, var(--light) 13%, transparent),
      0 var(--s10) var(--s40) color-mix(in srgb, var(--shadow) 33%, transparent);
  }

  .b--figure_cap {
    font-size: var(--fz--xs);
    color: var(--text-2);
    letter-spacing: var(--lts--l);
  }

  /* 作品詳細: wp:image 縦積み（キャプション中央）＋あいだの段落 */
  .c--workGallery_stack .b--figure_cap {
    text-align: center;
  }

  /* wp:paragraph など：写真は xl 全幅、テキストだけ読み幅に
     サイト base（PC〜18px）より一段下げ（PC〜16px）／色は本文の白寄り */
  .c--workGallery_stack > :is(
      p,
      .wp-block-paragraph,
      h2,
      h3,
      h4,
      .wp-block-heading,
      ul,
      ol,
      .wp-block-list,
      blockquote,
      .wp-block-quote,
      .wp-block-buttons
    ) {
    max-inline-size: 40em;
    margin: 0;
    color: var(--text);
    font-size: calc(var(--fz--base) * var(--ratio-step-inv));
    line-height: var(--lh--xl);
  }

  /* Gutenberg 区切り — 中央が濃く、左右へ細く消える */
  .c--entryBody hr.wp-block-separator,
  .c--entryBody .wp-block-separator {
    display: block;
    width: 100%;
    max-inline-size: none;
    height: 1px;
    margin-block: var(--s35);
    border: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--text) 20%, transparent) 8%,
      color-mix(in srgb, var(--divider) 85%, var(--text) 40%) 50%,
      color-mix(in srgb, var(--text) 20%, transparent) 92%,
      transparent 100%
    );
    opacity: 1;
  }

  .c--workGallery_stack > hr.wp-block-separator {
    max-inline-size: none;
  }

  /* テキスト同士は詰め、写真ブロックは広め（gap + figure 余白） */
  .c--workGallery_stack.c--entryBody.l--stack {
    --g: var(--s35);
    gap: var(--s35);
  }

  .c--workGallery_stack.c--entryBody > :is(.b--figure, figure.wp-block-image, .wp-block-image) {
    max-inline-size: none;
    margin-block: var(--s50);
    margin-inline: 0;
  }

  .c--workGallery_stack.c--entryBody > :is(.b--figure, figure.wp-block-image, .wp-block-image):first-child {
    margin-block-start: 0;
  }

  .c--workGallery_stack > :is(h2, h3, h4, .wp-block-heading) {
    color: var(--text);
    font-size: var(--fz--l);
    font-weight: var(--fw--normal);
    letter-spacing: var(--lts--l);
    line-height: var(--lh--l);
  }

  .c--workGallery_stack > :is(p, h2, h3, h4, ul, ol, blockquote) a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  /* 記事本文内の素の img にも同じ光彩 */
  .c--entryBody > p img,
  .c--entryBody > img,
  .c--entryBody .b--mediaText_media img,
  .c--entryBody :is(.b--figure, .wp-block-image) img {
    box-shadow:
      0 0 var(--s35) color-mix(in srgb, var(--light) 13%, transparent),
      0 var(--s10) var(--s40) color-mix(in srgb, var(--shadow) 33%, transparent);
  }

  /* wp:image（Figure スタイル）— DesignKit の b--figure と同じ組版 */
  .c--entryBody > :is(.b--figure, .wp-block-image, figure.wp-block-image) {
    display: grid;
    gap: var(--s15);
    margin-block: var(--s50);
    margin-inline: 0;
  }

  .c--entryBody :is(.b--figure, .wp-block-image) img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Works / Note: 縦長画像は max-height で抑え、中央寄せ（横長は従来どおり幅100%） */
  .c--workGallery_stack.c--entryBody > :is(.b--figure, figure.wp-block-image, .wp-block-image),
  .c--noteMain .c--entryBody > :is(.b--figure, figure.wp-block-image, .wp-block-image) {
    justify-items: center;
  }

  .c--workGallery_stack.c--entryBody :is(.b--figure, .wp-block-image) img,
  .c--noteMain .c--entryBody :is(.b--figure, .wp-block-image, figure.wp-block-image) img {
    width: auto;
    max-width: 100%;
    max-height: var(--entry-portrait-max-h, 1000px);
    height: auto;
    margin-inline: auto;
  }

  .c--entryBody :is(.b--figure_cap, .wp-block-image figcaption) {
    margin: 0;
    font-size: var(--fz--xs);
    color: var(--text-2);
    letter-spacing: var(--lts--l);
  }

  .b--band--light .b--figure img,
  .b--band--light .c--entryBody img,
  .c--noteMain .c--entryBody :is(.b--figure, .wp-block-image) img {
    box-shadow:
      0 0 var(--s30) color-mix(in srgb, var(--text) 4%, transparent),
      0 var(--s10) var(--s40) color-mix(in srgb, var(--shadow) 42%, transparent);
  }

  /* —— Gallery —— */
  .b--gallery {
    display: grid;
    gap: var(--s15);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 800px) {
    .b--gallery {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--s20);
    }

    .b--gallery.b--gallery--masonry > :nth-child(3n + 1) {
      grid-row: span 1;
    }
  }

  .b--gallery a,
  .b--gallery figure {
    margin: 0;
    display: block;
    overflow: hidden;
  }

  .b--gallery .b--gallery_item {
    display: grid;
    gap: var(--s15);
    overflow: visible;
  }

  .b--gallery .b--gallery_item > a {
    overflow: hidden;
  }

  .b--gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    filter: brightness(0.82);
  }

  .b--gallery a:hover img,
  .b--gallery a:focus-visible img {
    filter: brightness(1);
    transform: scale(1.02);
  }

  /* 作品詳細向け：縦積み・余白優先（single-works 想定） */
  .b--gallery.b--gallery--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s40);
  }

  @media (min-width: 800px) {
    .b--gallery.b--gallery--stack {
      gap: var(--s50);
    }
  }

  .b--gallery.b--gallery--stack img {
    height: auto;
    object-fit: contain;
    filter: brightness(0.92);
  }

  .b--gallery.b--gallery--stack a:hover img,
  .b--gallery.b--gallery--stack a:focus-visible img {
    filter: brightness(1);
    transform: none;
  }

  /* —— Entry header —— */
  .b--entryHeader {
    display: grid;
    gap: var(--s30);
    padding-block-end: var(--s40);
    border-block-end: 1px solid var(--divider);
  }

  .b--entryHeader_title {
    font-size: clamp(var(--fz--2xl), 4.5vw, var(--fz--4xl));
    font-weight: var(--fw--normal);
    line-height: var(--lh--l);
    letter-spacing: var(--lts--l);
    margin: 0;
  }

  /* 作品ディスクリプション（WP: excerpt / カスタムフィールド想定。幅制限なし） */
  .b--entryDesc {
    margin: 0;
    color: var(--text);
    font-size: var(--fz--s);
    line-height: var(--lh--xl);
  }

  /* —— Breadcrumb —— */
  .b--breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s10) var(--s15);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--text-2);
  }

  .b--breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .b--breadcrumb a:hover,
  .b--breadcrumb a:focus-visible {
    color: var(--light);
  }

  .b--breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-inline-start: var(--s15);
    opacity: 0.45;
  }

  /* —— Taxonomy (cat / tag) —— */
  .b--tax {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s10) var(--s20);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .b--tax a {
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    border-block-end: 1px solid transparent;
    transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  }

  .b--tax a:hover,
  .b--tax a:focus-visible,
  .b--tax a[aria-current="page"] {
    color: var(--light);
    border-block-end-color: var(--brand);
  }

  /* Note 紙面: Category 見出し（--brand）と同色・アクティブのみ下線 */
  .c--noteMain .b--tax:not(.b--tax--tag):not(.b--tax--cat) a {
    color: var(--brand);
    border-block-end-width: 1px;
    border-block-end-color: transparent;
  }

  .c--noteMain .b--tax:not(.b--tax--tag):not(.b--tax--cat) a:hover,
  .c--noteMain .b--tax:not(.b--tax--tag):not(.b--tax--cat) a:focus-visible {
    color: var(--brand);
    border-block-end-color: transparent;
    opacity: 0.82;
  }

  .c--noteMain .b--tax:not(.b--tax--tag):not(.b--tax--cat) a[aria-current="page"] {
    color: var(--brand);
    opacity: 1;
    border-block-end-color: currentColor;
  }

  /* カテゴリ: 線の枠 */
  .b--tax.b--tax--cat {
    gap: var(--s10) var(--s15);
  }

  .b--tax.b--tax--cat a {
    border: 1px solid var(--divider);
    padding: var(--s10) var(--s20);
    color: var(--text-2);
    transition:
      color 0.35s var(--ease-out),
      border-color 0.35s var(--ease-out),
      background-color 0.35s var(--ease-out);
  }

  .b--tax.b--tax--cat a:hover,
  .b--tax.b--tax--cat a:focus-visible,
  .b--tax.b--tax--cat a[aria-current="page"] {
    color: var(--light);
    border-color: color-mix(in srgb, var(--brand) 70%, var(--divider));
    background-color: color-mix(in srgb, var(--base-2) 70%, transparent);
  }

  /* タグ: #XXXX（# と本文で色分け） */
  .b--tax.b--tax--tag a {
    color: var(--text);
    border-block-end: 0;
  }

  .b--tax.b--tax--tag a::before {
    content: "#";
    margin-inline-end: 0.12em;
    color: var(--brand);
  }

  .b--tax.b--tax--tag a:hover,
  .b--tax.b--tax--tag a:focus-visible {
    color: var(--light);
  }

  .b--tax.b--tax--tag a:hover::before,
  .b--tax.b--tax--tag a:focus-visible::before {
    color: var(--light);
  }

  /* —— Share（SNS） —— */
  .b--share {
    margin-block-start: var(--s40);
    padding-block-start: var(--s40);
    border-block-start: 1px solid var(--divider);
  }

  .b--share_list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s15) var(--s20);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .b--share_btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s10);
    margin: 0;
    padding: var(--s10) var(--s20);
    border: 1px solid var(--divider);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
      color 0.35s var(--ease-out),
      border-color 0.35s var(--ease-out),
      background-color 0.35s var(--ease-out);
  }

  .b--share_btn:hover,
  .b--share_btn:focus-visible {
    color: var(--text);
    border-color: var(--brand);
  }

  .b--share_btn.is-copied {
    color: var(--text);
    border-color: var(--brand);
  }

  .b--share_icon {
    display: block;
    width: 1em;
    height: 1em;
    flex: none;
  }

  /* —— Post archive list（Note / archive.php） —— */
  .b--postList {
    display: grid;
    gap: 0;
  }

  .b--postItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--s20);
    padding-block: var(--s35);
    border-block-end: 1px solid var(--divider);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.45s var(--ease-out);
  }

  .b--postItem:first-child {
    border-block-start: 1px solid var(--divider);
  }

  .b--postItem:hover,
  .b--postItem:focus-visible {
    border-block-end-color: var(--brand);
  }

  /* アイキャッチ：左カラム */
  .b--postItem_media {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--base-2);
  }

  .b--postItem_media picture,
  .b--postItem_media img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .b--postItem_media img {
    object-fit: cover;
    object-position: center;
    transition: transform 1.1s var(--ease-out), filter 0.7s var(--ease-out);
  }

  /* アイキャッチ未設定（Note 一覧など） */
  .b--postItem_placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    width: 100%;
    height: 100%;
    padding: var(--s15);
    text-align: center;
    background: hsl(30 6% 88%);
    color: hsl(28 10% 38%);
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    line-height: var(--lh--m);
    user-select: none;
  }

  .b--postItem_media:has(.b--postItem_placeholder) {
    background: hsl(30 6% 88%);
  }

  .b--postItem_placeholder_brand {
    display: block;
    font-size: var(--fz--s);
    letter-spacing: var(--lts--l);
  }

  .b--postItem_placeholder_tag {
    display: block;
    font-size: var(--fz--m);
    letter-spacing: var(--lts--l);
    opacity: 0.88;
  }

  .b--postItem:hover .b--postItem_media img,
  .b--postItem:focus-visible .b--postItem_media img {
    transform: scale(1.04);
    filter: brightness(1.05);
  }

  .b--postItem_body {
    display: grid;
    gap: var(--s20);
    min-inline-size: 0;
  }

  .b--postItem_title {
    margin: 0;
    font-size: var(--fz--l);
    font-weight: var(--fw--normal);
    line-height: var(--lh--l);
    letter-spacing: var(--lts--l);
    color: var(--light);
    transition: color 0.35s var(--ease-out);
  }

  .b--postItem:hover .b--postItem_title,
  .b--postItem:focus-visible .b--postItem_title {
    color: var(--text);
  }

  .b--postItem_excerpt {
    margin: 0;
    font-size: var(--fz--s);
    line-height: var(--lh--xl);
  }

  @media (min-width: 640px) {
    .b--postItem:has(.b--postItem_media) {
      grid-template-columns: 14.5rem minmax(0, 1fr);
      gap: var(--s30);
      padding-block: var(--s40);
    }
  }

  @media (min-width: 960px) {
    .b--postItem:has(.b--postItem_media) {
      grid-template-columns: 16.5rem minmax(0, 1fr);
    }
  }

  /* —— FAQ / Accordion（details ベース → WP Details/Accordion へ） —— */
  .b--faq {
    display: grid;
    gap: 0;
    border-block: 1px solid var(--divider);
  }

  .b--faq_item {
    border-block-end: 1px solid var(--divider);
  }

  .b--faq_item:last-child {
    border-block-end: 0;
  }

  .b--faq_summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s20);
    padding-block: var(--s30);
    font-size: var(--fz--m);
    letter-spacing: var(--lts--l);
  }

  .b--faq_summary::-webkit-details-marker {
    display: none;
  }

  .b--faq_summary::after {
    content: "";
    flex: none;
    width: var(--s20);
    height: var(--s20);
    background:
      linear-gradient(var(--text), var(--text)) center / 100% 1px no-repeat,
      linear-gradient(var(--text), var(--text)) center / 1px 100% no-repeat;
    transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out);
  }

  .b--faq_item[open] > .b--faq_summary::after {
    transform: rotate(45deg);
    opacity: 0.55;
  }

  .b--faq_panel {
    padding-block-end: var(--s35);
    color: var(--text-2);
    font-size: var(--fz--s);
    line-height: var(--lh--xl);
    max-inline-size: 40em;
  }

  /* —— Quote —— */
  .b--quote {
    margin: 0;
    padding-inline-start: var(--s35);
    border-inline-start: 1px solid var(--brand);
    display: grid;
    gap: var(--s20);
  }

  .b--quote p {
    margin: 0;
    font-size: clamp(var(--fz--l), 2.4vw, var(--fz--2xl));
    line-height: var(--lh--l);
    letter-spacing: var(--lts--l);
    font-weight: var(--fw--light);
  }

  .b--quote footer {
    font-size: var(--fz--xs);
    color: var(--text-2);
    letter-spacing: var(--lts--xl);
  }

  /* —— Embed (YT / Vimeo) —— */
  .b--embed {
    display: grid;
    gap: var(--s15);
  }

  .b--embed_frame {
    position: relative;
    overflow: hidden;
    background: var(--void);
  }

  .b--embed_frame::before {
    content: "";
    display: block;
    padding-block-start: 56.25%;
  }

  .b--embed_frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* —— Cover ——
     黒地に写真を半透明で重ねる。どんなアイキャッチでもトーンが破綻しにくい */
  .b--cover {
    position: relative;
    min-height: min(70svh, 36rem);
    display: grid;
    place-items: end stretch;
    overflow: hidden;
    isolation: isolate;
    color: var(--text);
    background-color: var(--void);
  }

  .b--cover_media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.42;
  }

  .b--cover_media picture,
  .b--cover_media img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .b--cover_media img {
    object-fit: cover;
  }

  .b--cover_veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--void) 88%, transparent) 0%,
      color-mix(in srgb, var(--void) 28%, transparent) 52%,
      color-mix(in srgb, var(--void) 48%, transparent) 100%
    );
    pointer-events: none;
  }

  .b--cover_body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-inline-size: none;
    padding-block: var(--s50);
    padding-inline: 0;
    display: block;
    box-sizing: border-box;
  }

  /* DesignKit 単体デモ用（wrapper なし） */
  .b--cover_body:not(:has(.is--wrapper)) {
    max-inline-size: 36rem;
    justify-self: start;
    padding-inline: var(--gutter, var(--s30));
    display: grid;
    gap: var(--s25);
  }

  /* —— Separator —— */
  .b--sep {
    display: block;
    height: 1px;
    width: 100%;
    border: 0;
    background: linear-gradient(
      to right,
      var(--brand),
      color-mix(in srgb, var(--divider) 70%, transparent) 42%,
      transparent
    );
  }

  /* —— Callout / Note —— */
  .b--note {
    display: grid;
    gap: var(--s15);
    padding-block: var(--s30);
    padding-inline-start: var(--s30);
    border-inline-start: 1px solid var(--divider);
  }

  .b--note_label {
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--brand);
  }

  /* —— Site notice（Works / Note の重要なお知らせ。WP: 管理画面オプション想定） —— */
  .b--siteNotice {
    display: grid;
    gap: var(--s10);
    padding: var(--s20) var(--s25);
    padding-block-end: var(--s15);
    margin-block-end: calc(var(--s15) * -1);
    border: 0;
    /* 既定: Works など暗面向け。暖白を混ぜず黒寄りに一段持ち上げ */
    background-color: color-mix(in srgb, white 5%, var(--void));
  }

  .b--siteNotice_label {
    margin: 0;
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--brand);
    text-transform: uppercase;
  }

  .b--siteNotice_body {
    margin: 0;
    font-size: calc(var(--fz--base) * var(--ratio-step-inv));
    line-height: var(--lh--l);
    color: var(--text);
  }

  .b--siteNotice_body > *:first-child {
    margin-block-start: 0;
  }

  .b--siteNotice_body > *:last-child {
    margin-block-end: 0;
  }

  .b--siteNotice_body p {
    margin: 0 0 0.5em;
  }

  .b--siteNotice_body a {
    color: var(--text);
    text-decoration: none;
    border-block-end: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
    transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  }

  .b--siteNotice_body a:hover,
  .b--siteNotice_body a:focus-visible {
    color: var(--light);
    border-block-end-color: var(--brand);
  }

  .c--frontProfile_bioJa > *:first-child,
  .c--frontProfile_bioEn > *:first-child {
    margin-block-start: 0;
  }

  .c--frontProfile_bioJa > *:last-child,
  .c--frontProfile_bioEn > *:last-child {
    margin-block-end: 0;
  }

  .c--frontProfile_bioJa p,
  .c--frontProfile_bioEn p {
    margin: 0 0 0.75em;
  }

  /* —— Buttons group —— */
  .b--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s20);
    align-items: center;
  }

  /* —— Band（フルワイド帯・テーマ切替） —— */
  .b--band {
    padding-block: var(--s60);
    background-color: var(--base);
    color: var(--text);
  }

  /* 親の contentSize 制約を抜けてビューポート全幅へ（✅ フルブリード例外） */
  .b--band.b--band--full {
    width: 100vw;
    max-inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    box-sizing: border-box;
  }

  /* 白地 × 黒文字（サイト本体のダークと対になる面） */
  .b--band.b--band--light {
    --base: hsl(40 20% 98%);
    --base-2: hsl(36 12% 94%);
    --text: hsl(28 10% 10%);
    --text-2: hsl(28 8% 38%);
    --divider: hsl(30 8% 84%);
    --brand: hsl(28 12% 28%);
    --accent: hsl(28 12% 28%);
    --link: hsl(28 14% 22%);
    --light: hsl(28 10% 18%);
    --light-soft: hsl(28 10% 20% / 10%);
    --void: hsl(40 20% 98%);
    --shadow: hsl(28 10% 20% / 10%);
    color-scheme: light;
  }

  .b--band.b--band--light .b--btn {
    --b--btn-bd: color-mix(in srgb, var(--text) 16%, transparent);
  }

  .b--band.b--band--light .b--btn:hover,
  .b--band.b--band--light .b--btn:focus-visible {
    color: var(--base);
    background-color: var(--text);
    border-color: var(--text);
    box-shadow: none;
  }

  .b--band.b--band--light .c--sectionEyebrow,
  .b--band.b--band--light .c--dkLabel {
    color: var(--brand);
  }

  .b--band.b--band--light .b--sep {
    background: linear-gradient(
      to right,
      var(--text),
      color-mix(in srgb, var(--divider) 70%, transparent) 42%,
      transparent
    );
  }

  /* —— Pagination —— */
  /* —— Works adjacent（前後の作品・アイキャッチ背景） —— */
  .b--workAdjacent {
    display: grid;
    gap: var(--s25);
    align-items: stretch;
  }

  @media (min-width: 800px) {
    .b--workAdjacent {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: var(--s20);
      align-items: center;
    }
  }

  .b--workAdjacent_item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-content: center;
    min-block-size: 9.5rem;
    padding: var(--s35) var(--s30);
    color: inherit;
    text-decoration: none;
    /* グラデ溶かし先をページ地色と一致させる（--void だと帯が見える） */
    background-color: var(--base);
  }

  .b--workAdjacent_media {
    position: absolute;
    inset-block: 0;
    z-index: 0;
    width: min(70%, 22rem);
    pointer-events: none;
  }

  .b--workAdjacent_item.is-prev .b--workAdjacent_media {
    inset-inline-start: 0;
  }

  .b--workAdjacent_item.is-next .b--workAdjacent_media {
    inset-inline-end: 0;
  }

  .b--workAdjacent_media picture {
    position: absolute;
    inset: 0;
  }

  .b--workAdjacent_media picture,
  .b--workAdjacent_media img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .b--workAdjacent_media img {
    object-fit: cover;
    object-position: center;
    /* 既定は暗め＝文字優先。ホバーでだけ明るく */
    opacity: 0.55;
    filter: brightness(0.55);
    transition: opacity 0.55s var(--ease-out), filter 0.55s var(--ease-out);
  }

  .b--workAdjacent_item:hover .b--workAdjacent_media img,
  .b--workAdjacent_item:focus-visible .b--workAdjacent_media img {
    opacity: 1;
    filter: brightness(0.92);
  }

  /* 端の画像 → 中央へページ地色（--base）へ溶ける */
  .b--workAdjacent_item.is-prev .b--workAdjacent_media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 22%,
      color-mix(in srgb, var(--base) 55%, transparent) 55%,
      var(--base) 82%,
      var(--base) 100%
    );
  }

  .b--workAdjacent_item.is-next .b--workAdjacent_media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to left,
      transparent 0%,
      transparent 22%,
      color-mix(in srgb, var(--base) 55%, transparent) 55%,
      var(--base) 82%,
      var(--base) 100%
    );
  }

  .b--workAdjacent_body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--s10);
    max-inline-size: 16em;
  }

  /* アイキャッチ上の文字 — ホバーで明るくなる画像でも読めるよう影 */
  .b--workAdjacent:not(.b--workAdjacent--text)
    .b--workAdjacent_body
    :is(.b--workAdjacent_dir, .b--workAdjacent_title, .b--workAdjacent_meta) {
    text-shadow:
      0 1px 1px color-mix(in srgb, var(--void) 72%, transparent),
      0 2px 14px color-mix(in srgb, var(--void) 48%, transparent),
      0 6px 24px color-mix(in srgb, var(--void) 32%, transparent);
  }

  .b--workAdjacent_item.is-prev .b--workAdjacent_body {
    justify-self: start;
    text-align: start;
  }

  .b--workAdjacent_item.is-next .b--workAdjacent_body {
    justify-self: end;
    text-align: end;
  }

  .b--workAdjacent_dir {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--brand);
    text-transform: uppercase;
  }

  .b--workAdjacent_dirIcon {
    display: block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
  }

  .b--workAdjacent_title {
    font-size: var(--fz--m);
    line-height: var(--lh--l);
    letter-spacing: var(--lts--l);
    transition: color 0.35s var(--ease-out);
  }

  .b--workAdjacent:not(.b--workAdjacent--text)
    .b--workAdjacent_item:hover
    .b--workAdjacent_title,
  .b--workAdjacent:not(.b--workAdjacent--text)
    .b--workAdjacent_item:focus-visible
    .b--workAdjacent_title {
    color: var(--light);
  }

  .b--workAdjacent_meta {
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--text-2);
  }

  .b--workAdjacent_home {
    justify-self: center;
    text-align: center;
    font-size: var(--fz--xs);
    letter-spacing: var(--lts--xl);
    order: -1;
  }

  @media (min-width: 800px) {
    .b--workAdjacent_home {
      order: 0;
    }
  }

  /* Note など: 画像なし・文字優先 */
  .b--workAdjacent.b--workAdjacent--text .b--workAdjacent_item {
    min-block-size: 0;
    padding-block: var(--s30);
    padding-inline: 0;
    background-color: transparent;
    border-block: 1px solid var(--divider);
  }

  .b--workAdjacent.b--workAdjacent--text .b--workAdjacent_title {
    font-size: var(--fz--l);
  }

  .b--workAdjacent.b--workAdjacent--text .b--workAdjacent_body {
    max-inline-size: 22em;
  }

  @media (min-width: 800px) {
    .b--workAdjacent.b--workAdjacent--text .b--workAdjacent_item {
      border-block: 0;
      padding-block: var(--s20);
    }

    .b--workAdjacent.b--workAdjacent--text .b--workAdjacent_item.is-prev {
      padding-inline-end: var(--s30);
    }

    .b--workAdjacent.b--workAdjacent--text .b--workAdjacent_item.is-next {
      padding-inline-start: var(--s30);
    }
  }

  .b--pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s20);
    align-items: center;
    justify-content: space-between;
    font-size: var(--fz--xs);
    letter-spacing: var(--lts--xl);
  }

  /* 3点構成: 前 / 中央 / 次 で中央を真中に */
  .b--pager:has(> :nth-child(3):last-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .b--pager:has(> :nth-child(3):last-child) > :nth-child(1) {
    justify-self: start;
  }

  .b--pager:has(> :nth-child(3):last-child) > :nth-child(2) {
    justify-self: center;
    text-align: center;
  }

  .b--pager:has(> :nth-child(3):last-child) > :nth-child(3) {
    justify-self: end;
    text-align: end;
  }

  .b--pager a {
    color: var(--text);
    text-decoration: none;
  }

  .b--pager a:hover,
  .b--pager a:focus-visible {
    color: var(--light);
  }

  .b--pager_ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .b--pager_icon {
    display: block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
  }
}

@layer lism-custom {
  /* DesignKit catalog chrome */
  .c--dkNav {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--base) 90%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--divider);
  }

  .c--dkNav a {
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    white-space: nowrap;
  }

  .c--dkNav a:hover,
  .c--dkNav a:focus-visible,
  .c--dkNav a[aria-current="true"] {
    color: var(--light);
  }

  .c--dkSection {
    scroll-margin-block-start: 5rem;
  }

  .c--dkLabel {
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--brand);
  }

  .c--dkMeta {
    font-size: var(--fz--2xs);
    color: var(--text-2);
    letter-spacing: var(--lts--l);
  }

  /* 記事テンプレート用フロー（wp:post-content / リッチテキスト） */
  .c--entryBody {
    font-size: var(--fz--m);
    line-height: var(--lh--xl);
  }

  .c--entryBody > * + * {
    margin-block-start: var(--s35);
  }

  /* wp:image / b--figure — 段落より広い前後余白（上の * + * より優先） */
  .c--entryBody.l--flow > :is(.b--figure, figure.wp-block-image, .wp-block-image) {
    margin-block: var(--s50);
    margin-inline: 0;
  }

  .c--entryBody.l--flow > :is(.b--figure, figure.wp-block-image, .wp-block-image):first-child {
    margin-block-start: 0;
  }

  /* 作品ギャラリー: Note 用 entry 余白・見出しマージンは使わない */
  .c--workGallery_stack.c--entryBody > * + * {
    margin-block-start: 0;
  }

  .c--workGallery_stack.c--entryBody.l--flow > :is(.b--figure, figure.wp-block-image, .wp-block-image) {
    margin-block: var(--s50);
  }

  .c--workGallery_stack.c--entryBody :is(h2, h3, h4, .wp-block-heading) {
    margin-block: 0;
    font-size: var(--fz--l);
  }

  .c--workGallery_stack.c--entryBody :is(h2, .wp-block-heading) {
    font-size: var(--fz--xl);
  }

  /* H2 下: 作品ヘッダー c--sectionRule と同じ線（静止） */
  .c--workGallery_stack.c--entryBody > :is(h2, h2.wp-block-heading) {
    display: grid;
    gap: var(--s20);
    padding-block: 0;
    border: 0;
  }

  .c--workGallery_stack.c--entryBody > :is(h2, h2.wp-block-heading)::after {
    content: "";
    display: block;
    block-size: 1px;
    inline-size: 100%;
    background: var(
      --section-rule-bg,
      linear-gradient(
        to right,
        var(--brand),
        color-mix(in srgb, var(--divider) 80%, transparent) 40%,
        transparent
      )
    );
  }

  /* H3: sectionRule 系色の左ボーダー */
  .c--workGallery_stack.c--entryBody > :is(h3, h3.wp-block-heading) {
    padding-inline-start: var(--s25);
    border: 0;
    border-inline-start: 2px solid transparent;
    border-image: linear-gradient(
        180deg,
        var(--brand) 0%,
        color-mix(in srgb, var(--divider) 75%, transparent) 100%
      )
      1;
  }

  .c--entryBody h2 {
    font-size: var(--fz--xl);
    font-weight: var(--fw--normal);
    letter-spacing: var(--lts--l);
    line-height: var(--lh--l);
    margin-block: var(--s50) var(--s25);
  }

  .c--entryBody h3 {
    font-size: var(--fz--l);
    font-weight: var(--fw--normal);
    margin-block: var(--s40) var(--s20);
  }

  .c--entryBody h4 {
    font-size: var(--fz--m);
    font-weight: var(--fw--bold);
    letter-spacing: var(--lts--l);
    margin-block: var(--s35) var(--s15);
  }

  .c--entryBody p {
    margin: 0;
  }

  /* margin:0 が * + * / l--flow の上余白を消す。段落の直前だけ戻す */
  .c--entryBody.l--flow > * + :is(p, .wp-block-paragraph) {
    margin-block-start: var(--s35);
  }

  .c--entryBody a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  .c--entryBody strong,
  .c--entryBody b {
    font-weight: var(--fw--bold);
    color: var(--text);
  }

  .c--entryBody em,
  .c--entryBody i {
    font-style: italic;
  }

  .c--entryBody small {
    font-size: var(--fz--s);
    color: var(--text-2);
  }

  .c--entryBody code {
    font-family: var(--ff--mono);
    font-size: 0.9em;
    letter-spacing: 0;
    padding: 0.1em 0.35em;
    border: 1px solid var(--divider);
    background: color-mix(in srgb, var(--base-2) 80%, transparent);
  }

  .c--entryBody mark {
    color: var(--void);
    background: color-mix(in srgb, var(--brand) 55%, var(--text));
    padding-inline: 0.15em;
  }

  .c--entryBody del {
    color: var(--text-2);
    text-decoration: line-through;
  }

  .c--entryBody s {
    text-decoration: line-through;
    color: var(--text-2);
  }

  .c--entryBody u {
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  .c--entryBody sub,
  .c--entryBody sup {
    font-size: 0.75em;
    line-height: 0;
  }

  /* DesignKit: タイポ標本行 */
  .c--dkTypeRow {
    display: grid;
    gap: var(--s10) var(--s30);
    grid-template-columns: 5.5rem 1fr;
    align-items: baseline;
    padding-block: var(--s20);
    border-block-end: 1px solid var(--divider);
  }

  .c--dkTypeRow_meta {
    font-size: var(--fz--2xs);
    letter-spacing: var(--lts--xl);
    color: var(--text-2);
  }

  .c--dkTypeSpec {
    display: grid;
    gap: var(--s15);
    padding-block: var(--s25);
    border-block-end: 1px solid var(--divider);
  }
}

@media (prefers-reduced-motion: reduce) {
  .b--card_media img,
  .b--gallery img,
  .b--faq_summary::after {
    transition: none;
  }
}