/* =============================================================
   ZEN Field — Living Zen from Fukui
   明朝 / 白 / 朱の差し色（日本香堂HD準拠）
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --paper:      #FFFFFF;
  --ink:        #1A1814;
  --ink-soft:   #423E37;
  --ink-mid:    #6E6A60;
  --mute:       #9A9588;
  --line:       rgba(26, 24, 20, 0.14);
  --line-soft:  rgba(26, 24, 20, 0.08);
  --shu:        #B0392E;

  --slate:      #7C8E97;   /* ねずみ色（土と風）— 白文字の色面用 */
  --card:       #EEF1F1;   /* スレートの極淡版 — カード淡背景（寒色） */
  --card-hover: #E3E8E9;

  --mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --gothic: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;

  --max: 1280px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --block-y: clamp(5rem, 9vw, 8rem);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);   /* 既定はゴシック。明朝が必要な見出し・名前系は個別指定 */
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --- Reveal（ボワーっと滲み出る：blur + ゆっくりフェード。浮き上がりは控えめ） --- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(14px);
  transition:
    opacity 1.9s var(--ease),
    transform 1.9s var(--ease),
    filter 2.3s var(--ease);
}
/* 完了状態は none にする（translateY(0)/blur(0) だと containing block が残り、
   .prog の stretched-link（inset:0）が本文側に縮むバグの温床になる） */
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* --- Loader（白背景＋中央ロゴ＋細ライン。完了時にラインが画面幅へ広がって明ける） --- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; }
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.loader__brand {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* 字間ぶんの中央ズレ補正 */
  color: var(--ink);
}
.loader__line {
  display: block;
  width: clamp(150px, 22vw, 220px);
  height: 1px;
  position: relative;
  transition: width 0.7s var(--ease);
}
.loader__line-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 55%, rgba(26, 24, 20, 0));  /* 先端が滲む */
  transform-origin: left center;
  transform: scaleX(0);
  animation: loader-line 1.7s var(--ease) infinite;
}
@keyframes loader-line {
  0%   { transform: scaleX(0); opacity: 1; }
  62%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* 完了：ループを止め、実線でビューポート幅いっぱいに広がる */
.loader.is-done .loader__line { width: 100vw; }
.loader.is-done .loader__line-fill {
  animation: none;
  transform: scaleX(1);
  opacity: 1;
  background: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* =============================================================
   共通：二層セクション見出し
   ============================================================= */
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head__title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--ink);
}
.sec-head__lede {
  margin-top: 1.6rem;
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.sec-head--center { text-align: center; }
.sec-head--center .sec-head__label { justify-content: center; }
/* セクション内の第2見出し（#about「生き方のOSとしての禅ZEN」等）：前の段落から十分に離す */
.sec-head--sub { margin-top: clamp(4rem, 8vw, 6.5rem); }
.sec-head--center .sec-head__lede { max-width: 40em; margin-left: auto; margin-right: auto; }

.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.sec-head--split .sec-head__title { margin-bottom: 0; }
/* split ヘッダー左側：タイトル＋説明文をまとめる */
.sec-head__group { max-width: 40em; }
.sec-head__group .sec-head__title { margin-bottom: 0.9rem; }
.sec-head__group .sec-head__lede { margin-top: 0; }

/* --- 共通：View Detail ──→ --- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--gothic);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.link-arrow__line {
  position: relative;
  width: 60px;
  height: 1px;
  background: var(--ink);
  transition: width 0.4s var(--ease);
}
.link-arrow__line::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
}
.link-arrow:hover { opacity: 1; }
.link-arrow:hover .link-arrow__line { width: 80px; }

/* --- 共通：本文 prose --- */
.prose {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.2vw, 1.125rem);
  line-height: 2.05;
  letter-spacing: 0.05em;
  color: var(--ink);
  max-width: 44em;
}
.prose p + p { margin-top: 1.8rem; }
.prose em {
  font-style: normal;
  color: var(--shu);
  font-weight: 600;
  padding: 0 0.1em;
}
.prose--lead { max-width: 46em; }

.dot {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
  vertical-align: middle;
}

/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.4s var(--ease);
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.72);   /* 追従時は薄めの半透明で圧迫感を抑える */
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  color: var(--ink);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  padding-top: 0.8rem; padding-bottom: 0.8rem;
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.nav__brand { display: flex; align-items: center; height: 48px; }
.nav__brand-text {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  letter-spacing: 0.14em;
  color: currentColor;             /* nav の色フリップに追従（ヒーロー上=白／スクロール時=濃） */
  white-space: nowrap;
}

.nav__menu {
  display: flex; align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  margin-left: auto;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.nav__menu a { color: currentColor; text-decoration: none; }
.nav__menu a:hover { color: var(--shu); opacity: 1; }

/* プログラム ドロップダウン（CSSのみ・hover & focus-within で開閉） */
.nav__item--dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__link--has-children {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
}
.nav__caret {
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.3s var(--ease);
}
.nav__item--dropdown:hover .nav__caret,
.nav__item--dropdown:focus-within .nav__caret {
  transform: rotate(180deg);
}
.nav__submenu {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  margin: 0;
  padding: 0.6rem 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-soft);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav__item--dropdown:hover .nav__submenu,
.nav__item--dropdown:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__submenu li { display: block; }
.nav__submenu a {
  display: block;
  padding: 0.7rem 1.4rem;
  font-family: var(--mincho);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: var(--ink) !important;   /* nav 全体の currentColor 継承を打ち消し */
  white-space: nowrap;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav__submenu a:hover {
  color: var(--shu) !important;
  background: rgba(176, 57, 46, 0.05);
}
.nav__cta {
  padding: 0.5rem 1.2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
}
.nav__cta:hover { opacity: 1; background: currentColor; }
.nav:not(.is-stuck) .nav__cta:hover { color: var(--ink); }
.nav.is-stuck .nav__cta:hover { color: var(--paper); }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__menu.is-open {
    display: flex;
    position: fixed; inset: var(--nav-h) 0 0 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.8rem; margin: 0;
    font-size: 1.05rem; color: var(--ink);
  }
  .nav__toggle {
    display: inline-flex; flex-direction: column; gap: 6px; padding: 8px;
  }
  .nav__toggle span {
    display: block; width: 22px; height: 1px; background: currentColor;
    transition: transform 0.4s var(--ease);
  }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 600px;
  overflow: hidden;
  color: var(--paper);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.72) saturate(0.92);   /* 写真は歪ませない（建築の直線を守る） */
  transform: scale(1.05);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.05) translate(0,0); }
  to   { transform: scale(1.10) translate(-1.2%, -1.4%); }
}
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.42) 100%);
}
.hero__chrome {
  position: absolute; inset: 0; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__brand {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.8rem;
}
.hero__title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  letter-spacing: 0.08em;
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 2.6rem;   /* 「只今を、生きる。」の後にひと呼吸 */
}
/* ブランド名（大）：ZEN Field。直下の Living Zen from Fukui. と密着させて1ブロックに見せる */
.hero__name {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.5rem;
}
.hero__tagline {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  letter-spacing: 0.14em;
  color: #fff;
  margin-bottom: 1.8rem;
}
.hero__sub {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.12em;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34em;
}
.hero__scroll {
  position: absolute; bottom: 2rem; right: var(--gutter); z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--gothic);
  font-size: 0.72rem; letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.85);
}
.hero__scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: scrollPulse 2.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(0.55); transform-origin: top; }
  50%     { opacity: 1;   transform: scaleY(1);    transform-origin: top; }
}
/* ヒーロー ピックアップカード（チェックした最新お知らせ1件を右下に） */
.hero__pickup {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.6rem, 4vh, 2.8rem);
  z-index: 3;
  display: grid;
  grid-template-columns: clamp(72px, 8vw, 92px) 1fr;
  align-items: stretch;
  width: min(380px, 76vw);
  background: rgba(255, 255, 255, 0.96);
  color: #1A1814;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hero__pickup:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34); }
/* 出現完了 → 少し置いて一度だけ「ぷるん」と揺らしてアテンション（JS が is-wiggle 付与） */
.hero__pickup.is-wiggle { animation: pickupWiggle 0.9s var(--ease) 1; }
@keyframes pickupWiggle {
  0%   { transform: translateY(0)    rotate(0deg); }
  18%  { transform: translateY(-8px) rotate(-2deg); }
  38%  { transform: translateY(0)    rotate(1.4deg); }
  56%  { transform: translateY(-4px) rotate(-0.8deg); }
  74%  { transform: translateY(0)    rotate(0.4deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__pickup.is-wiggle { animation: none; }
}
.hero__pickup-media { margin: 0; overflow: hidden; }
.hero__pickup-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__pickup-body {
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
}
.hero__pickup-date {
  font-family: var(--gothic);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #6E6A60;
}
.hero__pickup-title {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1A1814;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ピックアップがある時は Scroll ヒントを中央へ寄せて衝突回避 */
.hero--has-pickup .hero__scroll { right: auto; left: 50%; transform: translateX(-50%); }

@media (max-width: 720px) {
  .hero__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero__scroll { display: none; }
  .hero__pickup { display: none; }   /* モバイルは hero が狭いため非表示 */
  /* SP：ヒーロー本文の視認性底上げ（細字 15px → 明快な 16.5px、白ベタ・500） */
  .hero__sub {
    font-size: 16.5px;
    color: #fff;
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.08em;
  }
  .hero__tagline { font-size: 1.15rem; letter-spacing: 0.1em; }
}

/* =============================================================
   BLOCK（汎用セクション）
   ============================================================= */
.block { padding-top: var(--block-y); padding-bottom: var(--block-y); }
.block--tight-bottom { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.block--tight-top { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* =============================================================
   PULLQUOTE（私たちの思い）
   ============================================================= */
.pullquote {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--ink);
}
.br-sm { display: none; }
@media (max-width: 560px) { .br-sm { display: inline; } }

/* =============================================================
   PRACTICE（考えるよりも、感じ取る。6つ）
   ============================================================= */
/* D案：左に連番（丸囲み）＋短線＋縦書きキャプション、右に正方形写真。
   各行の上にグリッド幅いっぱいの横罫線。雑誌の本文ページ的なエディトリアル組み */

/* 見出し左の装飾アーク（大きな円の一部が左上を横切る、ごく淡く） */
#how { position: relative; overflow: hidden; }
#how::before {
  content: "";
  position: absolute;
  top: clamp(-9rem, -9vw, -6rem);
  left: clamp(-13rem, -12vw, -8rem);
  inline-size: clamp(17rem, 27vw, 25rem);
  block-size: clamp(17rem, 27vw, 25rem);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  pointer-events: none;
}
#how > .container { position: relative; }

.practice {
  --pr-row-gap: clamp(2.6rem, 4.4vw, 4rem);
  --pr-col-gap: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pr-row-gap) var(--pr-col-gap);
  margin: clamp(2.4rem, 4vw, 3.6rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: practice;
}
@media (max-width: 880px) { .practice { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .practice { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.practice__item {
  position: relative;
  margin: 0;
  counter-increment: practice;
  display: grid;
  grid-template-columns: clamp(3.4em, 6vw, 4.4em) 1fr;   /* 左：キャプション　右：写真 */
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  align-items: start;
  padding-top: clamp(1.4rem, 2.4vw, 2.2rem);
}

/* 各ブロック（グリッド）ごとに1本の横罫線。
   グリッド間（列ギャップ）には罫線を通さず、罫線にも余白をあける */
.practice__item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1px solid var(--line);
}

/* 左：連番（丸）＋短線＋縦書きテキスト */
.practice__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.85rem);
}
.practice__num {
  inline-size: clamp(2.2em, 3.4vw, 2.7em);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', var(--mincho);
  font-weight: 500;
  font-size: clamp(0.92rem, 1.2vw, 1.06rem);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.practice__num::before { content: counter(practice, decimal-leading-zero); }
.practice__line {
  inline-size: 1px;
  block-size: clamp(1.3rem, 2.4vw, 2rem);
  background: var(--line);
}
.practice__text {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  letter-spacing: 0.16em;
  line-height: 1.85;
  color: var(--ink);
  margin: 0;
  padding: 0;
  min-block-size: 0;
}
.practice__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
}
.practice__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.92);
  transition: transform 2s var(--ease);
}
/* 01-06 は下層リンクが無いのでホバー演出なし（意図的に削除） */

/* =============================================================
   PROGRAMS（片寄せエディトリアル）
   ============================================================= */
/* 年間プログラム：sticky な森ブリッジ写真の上に被さる（不透明背景で透け防止） */
#programs {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
.prog {
  position: relative;                           /* stretched-link（エリア全体クリック）の基準 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;                                       /* 溝はテキスト側 padding で作る */
  max-width: none;                              /* コンテナ制約を外し全幅へ */
  margin: 0 0 clamp(3.5rem, 6vw, 5.5rem);
  padding: 0;                                   /* 画像を画面端までブリード */
}
/* View Detail のリンクを article 全体に引き伸ばす（写真＋テキストどこを押しても遷移） */
.prog .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.prog:hover .link-arrow { opacity: 1; }
.prog:hover .link-arrow .link-arrow__line { width: 80px; }   /* エリアホバーで矢印線も連動 */
.prog:last-of-type { margin-bottom: 0; }        /* 最後の prog 下の二重余白を解消（後続 loopback の margin-top に委ねる） */
.prog--reverse .prog__media { order: 2; }
.prog--reverse .prog__body { order: 1; justify-self: end; }   /* 本文を写真側（内側）へ寄せる */

.prog__media {
  position: relative;
  aspect-ratio: 3 / 2;          /* 横型・大判（素材が横長のためクロップ最小） */
  overflow: hidden;
}
.prog__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.92);
  transition: transform 2s var(--ease);
}
.prog:hover .prog__media img { transform: scale(1.04); }
/* 写真に被せるプログラム名バッジ（白座布団）：SP でのみ表示し、写真とテキストの一塊感を作る */
.prog__badge {
  display: none;
}

@media (max-width: 880px) {
  .prog { grid-template-columns: 1fr; }
  .prog__media { aspect-ratio: 4 / 3; min-height: 0; }   /* モバイルは横長に戻す */
  .prog--reverse .prog__media,
  .prog--reverse .prog__body { order: 0; }
  /* 写真とテキストが分離して見えるのを防ぐため、プログラム名を写真の上部に帯で重ねる。
     帯の左端は写真の左端と揃え、右端は文字量なりに自然な長さで止める（角丸なし・白地・黒文字）。
     .prog__media::after のシアン統一オーバーレイ（z-index:1・multiply）より上に描画されるよう
     z-index を 2 にする。同じ z-index だと ::after が後勝ちでバッジの白が濁って見える */
  .prog__badge {
    display: inline-block;
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    background: #fff;
    color: #1A1814;
    font-family: var(--mincho);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    padding: 0.75em 1.4em;
  }
  /* 写真直下の本文側ラベルは、写真上バッジと二重表示になるため隠す */
  .prog__body .prog__en { display: none; }
}

.prog__body {
  max-width: 620px;
  justify-self: start;                                        /* 通常は写真（左）側＝内側へ寄せる */
  padding: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 5rem);   /* テキストを内側へ寄せる */
}
@media (max-width: 880px) {
  .prog__body { padding: 1.8rem var(--gutter) 0; max-width: none; justify-self: stretch; }
}
.prog__en {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.prog__title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.prog__text {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 2rem;
}

/* =============================================================
   LOOPBACK（日常へ持ち帰る）
   ============================================================= */
.loopback {
  max-width: 720px;
  /* 上：直前の全幅写真から十分に離す／下：section の tight-bottom 分を見込んで視覚的に上下を揃える */
  margin: clamp(6rem, 11vw, 10rem) auto clamp(4rem, 7vw, 6.5rem);
  text-align: center;
}
.loopback__lead {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.loopback__text {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 2.15;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* =============================================================
   運営団体（aricata + メンバー）
   ============================================================= */
.block--team {
  background: var(--slate);
  position: relative;
  z-index: 1;                 /* sticky なブリッジ写真の上に被さる */
}
.block--team .sec-head { text-align: center; }

/* =============================================================
   COLOR SECTIONS（見本「土と風」の色面 — 白文字反転）
   #about=暖鼠(土色) / #events=テラコッタ(赤茶) / #team=青鼠
   ============================================================= */
#about  { background: #9F9A8B; }   /* 土色（暖鼠） */
#events { background: #AA887F; position: relative; z-index: 1; }   /* 赤茶（テラコッタ）。書ブリッジに被さる側として positioned 化（描画順を確保） */
/* #team の背景は上の .block--team で var(--slate)=#7C8E97（青鼠） */

/* 色面の上はテキスト系変数を白に振り替えて一括反転 */
#about, #events, #team {
  --ink:       #FFFFFF;
  --ink-soft:  rgba(255, 255, 255, 0.88);
  --ink-mid:   rgba(255, 255, 255, 0.75);
  --mute:      rgba(255, 255, 255, 0.60);
  --line:      rgba(255, 255, 255, 0.32);
  --line-soft: rgba(255, 255, 255, 0.16);
  --shu:       #F2DED7;   /* 濃色面で映える淡いアクセント */
}

/* =============================================================
   写真トーン統一：シアン味オーバーレイ（見本「土と風」風）
   対象：practice / programs / ブリッジ写真
   除外：hero / お知らせ / メンバー（人物）/ 構造図
   ============================================================= */
.practice__media,
.prog__media,
.break-media { position: relative; }

.practice__media::after,
.prog__media::after,
.break-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 110, 130, 0.22);    /* シアン寄り */
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* ブリッジ（写真のみ）：sticky で固定背景化し、次セクションが上に被さる（オーバーラップ・リビール） */

/* ブリッジ写真 → 運営団体の sticky オーバーラップ・リビール
   ラッパーで sticky の効く範囲を限定し、写真を後続セクションに持ち越さない */
.parallax-stack { position: relative; isolation: isolate; }   /* 写真の描画をラッパー内に封じ込め、後続セクションへの透けを防ぐ */
.block--break {
  width: 100%;
  padding: 0;
  position: sticky;
  top: calc((100vh - 70vh) / 2);   /* 画面中央に貼り付く（高さ70vhを中心配置） */
  z-index: 0;
}
.break-media {
  width: 100%;
  height: 70vh;          /* 圧迫感を抑えつつ sticky オーバーラップの持続感は維持 */
  min-height: 360px;
  max-height: 640px;
  overflow: hidden;
}
.break-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}

/* =========================================================
   書ブリッジ（西山 佳邨）── sticky visual バンド
   forest と同じ block--break 構造を継承し、5枚を等幅・切れ目なく並べる
   キャプション「書 西山 佳邨」を画像内に重ね、text-shadow で常時視認性確保
   ========================================================= */
.break-media--calligraphy {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  background: #f7f5f0;
}
.break-media--calligraphy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}
.break-media__credit {
  position: absolute;
  right: clamp(0.8rem, 1.8vw, 1.4rem);
  top: clamp(0.7rem, 1.4vw, 1.2rem);   /* 右上へ（sticky で下端がすぐ隠れるため） */
  margin: 0;
  padding: 0;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.78vw, 0.72rem);
  letter-spacing: 0.2em;
  color: #ffffff;
  white-space: nowrap;
  /* どの背景でも視認できるよう、強めの黒影を多重に重ねる */
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 680px) {
  /* スマホでも 5枚並びを維持。各画像は細くなる */
  .break-media--calligraphy { grid-template-columns: repeat(5, 1fr); }
  .break-media__credit { font-size: 0.58rem; letter-spacing: 0.16em; }
}

/* team 固有：濃色面で破綻する要素の補正 */
#team .aricata-block__logo { filter: brightness(0) invert(1); }   /* ロゴを白に */
/* 白線画の透過インフォグラフィック：鼠色（--slate）を透けさせて白要素を映えさせる。
   旧・カラー図の白カード背景／角丸は付けない */
#team .aricata-block__media {
  background: transparent;
  padding: 0;
}
#team .aricata-block__media img { border-radius: 0; }
#team .support-member__avatar {
  background: rgba(255, 255, 255, 0.94);
  color: #1A1814;                       /* 頭文字は白丸の上に濃色のまま */
  border-color: rgba(255, 255, 255, 0.55);
}

/* aricata 2カラム（説明文 ｜ 構造図） */
.aricata-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;      /* ロゴをインフォグラフィック上部の文字高さに揃えるため上端基準 */
  gap: clamp(2.5rem, 5vw, 5rem);
  max-width: var(--max);
  margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
}
@media (max-width: 820px) {
  .aricata-block { grid-template-columns: 1fr; gap: 2.5rem; }
  .aricata-block__logo { margin-top: 0; }
}
/* aricata ロゴ：画像（白抜き線画 aricata_logo.png）。
   margin-top 5.4% ＝「aricata」の文字中心が、右カラムのインフォグラフィック
   「ZEN Field Project」の文字高さ（画像高の約11.6%）に一致する実測値 */
.aricata-block__logo {
  width: 55%;
  margin: 5.4% auto clamp(2rem, 4vw, 3rem);  /* body 内で水平中央寄せ */
}
.aricata-block__logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* サブタイトル（「在り方」を意味する、ZEN Field の母体）：本文より目立たせる */
.aricata-block__note {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.aricata-block__text {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.05vw, 0.98rem);
  line-height: 2.0;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.aricata-block__text p + p { margin-top: 1.2rem; }
/* CTA：白い罫線で囲んだボタン（青鼠の色面上で「押せる場所」を明確に）。
   ホバーは白塗り＋--ink 上書きで文字・線・矢印頭を一括で濃色反転 */
.aricata-block__cta {
  margin-top: 2rem !important;
  font-size: 0.85rem;
}
.aricata-block__cta .link-arrow {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  padding: 0.9em 1.6em;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.aricata-block__cta .link-arrow:hover {
  --ink: #1A1814;
  background: #fff;
  border-color: #fff;
}
.aricata-block__cta .link-arrow__line { width: 48px; }
.aricata-block__media img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
@media (max-width: 820px) {
  .aricata-block__media { max-width: 440px; margin: 0 auto; }
}

/* メンバーグループ */
.team-group { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.team-group:last-of-type { margin-bottom: 0; }
.team-group__label {
  text-align: center;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.6rem);   /* sec-head__title より一段小さい脇見出しスケール */
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* コアメンバー（3名・大きめ）── 他セクションと同じ 1145px 幅にスケール揃え */
.core-members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1145px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .core-members { grid-template-columns: 1fr; gap: 3rem; max-width: 340px; }
}
.core-member { text-align: center; }
.core-member__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 1.4rem;
  width: clamp(170px, 22vw, 260px);
}
.core-member__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.15) saturate(0.9);
  transition: transform 1.6s var(--ease), filter 0.6s var(--ease);
}
.core-member:hover .core-member__media img { transform: scale(1.05); filter: grayscale(0) saturate(1); }
/* 前田（墨絵・横長）は顔が他コアと揃うよう拡大トリミング（執行メンバーグループ内2番目を限定） */
#team .core-members--executive .core-member:nth-child(2) .core-member__media img {
  transform: scale(2.5);
  transform-origin: 50% 6%;
}
#team .core-members--executive .core-member:nth-child(2):hover .core-member__media img {
  transform: scale(2.6);
  transform-origin: 50% 6%;
}

/* アドバイザー：2名・執行と完全同スケール。1列幅を執行と同じにし中央寄せ */
.core-members.core-members--advisor {
  grid-template-columns: repeat(2, minmax(0, 360px));   /* 執行の 1145px / 3列 ≒ 360px と同一 */
  justify-content: center;
  max-width: 1145px;
}
@media (max-width: 720px) {
  .core-members.core-members--advisor { grid-template-columns: 1fr; max-width: 340px; }
}

/* 運営メンバー：4名・他セクション幅にスケール揃え。アバターも控えめだが視認性確保 */
.support-members.support-members--operation {
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1145px;
}
.support-members.support-members--operation .support-member__media {
  width: clamp(130px, 16vw, 180px);   /* 104→180、執行(260)の約70% */
}
.support-members.support-members--operation .support-member__name {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  margin-bottom: 0.4rem;
}
.support-members.support-members--operation .support-member__role {
  font-size: clamp(0.78rem, 1vw, 0.86rem);
}
@media (max-width: 680px) {
  .support-members.support-members--operation { grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 420px; }
}
.core-member__name {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.core-member__role {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink-mid);
}

/* サポートメンバー（5名・小さめ） */
.support-members {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 680px) { .support-members { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: 420px; } }
@media (max-width: 380px) { .support-members { grid-template-columns: repeat(2, 1fr); } }
.support-member { text-align: center; }
.support-member__media {
  width: clamp(76px, 11vw, 104px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  overflow: hidden;
}
.support-member__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) saturate(0.9);
  transition: transform 1.4s var(--ease), filter 0.6s var(--ease);
}
.support-member:hover .support-member__media img { transform: scale(1.05); filter: grayscale(0) saturate(1); }
.support-member__name {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.support-member__role {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--ink-mid);
}

.team-note {
  text-align: center;
  margin-top: clamp(3rem, 5vw, 4rem);
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* =============================================================
   VALUES（大切にしていること）
   ============================================================= */
.values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  max-width: 1000px;
}
@media (max-width: 720px) { .values { grid-template-columns: 1fr; gap: 2.5rem; } }

.values__item {
  padding: 0;
}
.values__title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.values__text {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* =============================================================
   EVENTS（これからの集い）
   ============================================================= */
/* イベント予定：カード型（写真付き、日付を主役にする） */
.event-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 880px) {
  .event-cards { grid-template-columns: 1fr; gap: 2rem; max-width: 480px; margin: 0 auto; }
}

/* カード自体は背景なし。テラコッタの色面の上に直接配置 */
.event-card { background: transparent; height: 100%; }
.event-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);   /* 細い白の外枠（見本準拠） */
  border-radius: 10px;                           /* CMS カードは四辺を少しラウンド */
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.event-card__link:hover { opacity: 1; transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.7); }
.event-card__link:hover .event-card__title { opacity: 0.85; }

.event-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;                 /* 写真は枠の幅いっぱい（天地左右フラッシュ） */
}
.event-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.92);
  transition: transform 0.8s var(--ease);
}
.event-card__link:hover .event-card__media img { transform: scale(1.04); }

/* 写真の上部に暗いグラデーションを被せて、日付（白文字）が確実に読めるようにする */
.event-card__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* 日付バッジ：写真左上に重ねる白文字、上のグラデで視認性確保 */
.event-card__date {
  position: absolute;
  top: clamp(1rem, 1.8vw, 1.6rem);
  left: clamp(1rem, 1.8vw, 1.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: #fff;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.event-card__date-day {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: 0.04em;
}
.event-card__date-year {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(0.72rem, 0.95vw, 0.86rem);
  letter-spacing: 0.22em;
  margin-top: 0.6em;
  opacity: 0.9;
}

/* 丸矢印ボタン：カード下部の右に配置（タグ・本文の下、カード下端で揃える）。
   テラコッタ色面に白文字なので、細い白の輪郭＋白い矢印。ホバーで白に塗りつぶす */
.event-card__arrow {
  flex: none;
  width: clamp(42px, 4.6vw, 50px);
  height: clamp(42px, 4.6vw, 50px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mincho);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: #fff;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.event-card__link:hover .event-card__arrow {
  background: #fff;
  border-color: #fff;
  color: #1A1814;
  transform: translateX(4px);
}

/* 写真下のテキスト：白カードなし、テラコッタ色面に白抜きで直書き。
   写真は枠いっぱい、本文だけ枠から内側に余白を取る */
.event-card__body {
  padding: clamp(1.1rem, 1.9vw, 1.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* カテゴリバッジ：写真右上に重ねる白ピル（プログラム識別＝重要なので目立たせる） */
.event-card__tag {
  position: absolute;
  top: clamp(0.9rem, 1.6vw, 1.5rem);
  right: clamp(0.9rem, 1.6vw, 1.5rem);
  z-index: 2;
  font-family: var(--gothic);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  letter-spacing: 0.08em;
  color: #1A1814;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.42em 1em;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
/* プログラム別のアクセント（左に色ドット） */
.event-card__tag::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  vertical-align: 0.05em;
  background: var(--slate);
}
.event-card__tag--dialogue::before   { background: #7C8E97; }
.event-card__tag--alive::before      { background: #9C7B54; }
.event-card__tag--conference::before { background: #AA887F; }

/* カード下部：CTA（詳しくはこちら ○→）／準備中テキスト */
.event-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8em;
}
.event-card__more {
  font-family: var(--gothic);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #fff;
}
/* 「現在イベント準備中です。」：本文（event-card__meta）に埋もれないよう、
   ドット＋縁取りピルのステータスバッジにして状態表示だと一目で分かるようにする */
.event-card__prep {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--gothic);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.5em 1.1em;
  border-radius: 999px;
}
.event-card__prep::before {
  content: "";
  flex: none;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: #fff;
}
/* 準備中カードはリンクではない（ホバーの浮きを抑える） */
.event-card__link--static { cursor: default; }
.event-card__link--static:hover { transform: none; }
.event-empty {
  font-family: var(--gothic);
  font-size: 0.92rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  text-align: center;
}
.event-card__title {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: 0.05em;
  line-height: 1.65;
  color: #fff;
  margin: 0 0 0.7rem;
  transition: opacity 0.4s var(--ease);
}
.event-card__meta {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 clamp(1.2rem, 2vw, 1.8rem);   /* 矢印との最小間隔 */
}

/* =============================================================
   NEWS（活動の記録）
   ============================================================= */
.news-block { margin-top: clamp(4rem, 8vw, 6rem); }
.news-block .sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* お知らせ：横カード型（サムネ左＋本文右）。TOP（テラコッタ色面）と
   archive（白地）で共用するため、カードは白背景＋文字は濃色を直接指定 */
.news-items {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-item { background: #fff; border: 1px solid rgba(26, 24, 20, 0.10); border-radius: 10px; overflow: hidden; }
.news-item__link {
  display: grid;
  grid-template-columns: clamp(160px, 24vw, 280px) 1fr;
  align-items: stretch;
  color: #1A1814;
  text-decoration: none;
}
.news-item__link:hover { opacity: 1; }
.news-item__link:hover .news-item__media img { transform: scale(1.04); }
.news-item__link:hover .news-item__arrow { transform: translateX(4px); }
.news-item__media {
  margin: 0;
  overflow: hidden;
  min-height: 100%;
}
.news-item__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease);
}
.news-item__body {
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  position: relative;
}
.news-item__meta {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0;
  font-family: var(--gothic);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: #6E6A60;
}
.news-item__cat {
  padding: 0.22em 0.9em;
  border: 1px solid rgba(26, 24, 20, 0.25);
  border-radius: 999px;
  white-space: nowrap;
}
.news-item__title {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: #1A1814;
  margin: 0;
}
.news-item__excerpt {
  font-family: var(--gothic);
  font-size: 0.84rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #6E6A60;
  margin: 0;
}
.news-item__arrow {
  position: absolute;
  right: clamp(1.1rem, 2.2vw, 1.8rem);
  bottom: clamp(1rem, 2vw, 1.4rem);
  font-family: var(--mincho);
  color: #6E6A60;
  transition: transform 0.3s var(--ease);
}
@media (max-width: 640px) {
  .news-item__link { grid-template-columns: 1fr; }
  .news-item__media { aspect-ratio: 16 / 9; min-height: 0; }
  .news-item__arrow { display: none; }
}
.news-item--empty {
  background: transparent;
  border: none;
}
.news-item--empty p {
  padding: 2rem 0;
  text-align: center;
  color: var(--ink-mid);
  margin: 0;
}

/* =============================================================
   JOIN（つながる）
   ============================================================= */
.channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 760px) { .channels { grid-template-columns: 1fr; } }
.channel {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.channel__name {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: 0.08em;
  color: var(--ink);
}
.channel__desc {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.channel__cta { margin-top: 0.8rem; font-size: 0.86rem; }
.channel__cta .link-arrow__line { width: 44px; }

/* つながる：2カラム＋中央縦罫線。他セクション(1145px)に幅揃え */
.channels--duo {
  grid-template-columns: 1fr 1fr;
  max-width: 1145px;
  margin-left: auto;
  margin-right: auto;
}
.channels--duo .channel + .channel { border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .channels--duo { grid-template-columns: 1fr; }
  .channels--duo .channel + .channel {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 2.4rem;
    margin-top: 0.6rem;
  }
}

/* =============================================================
   CONTACT（お問い合わせフォーム）
   ============================================================= */
.container--narrow { max-width: 1000px; }   /* 他セクション 1280px と差を縮め、フォームの「窮屈感」を解消 */
.block--contact { padding-top: clamp(2.5rem, 4vw, 3.5rem); }   /* 直前 #join の padding-bottom と二重にならないよう上余白を抑える */
.contact-form {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.2rem);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3vw, 2.2rem);
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.6rem; }
.form-field__label {
  font-family: var(--gothic);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
}
.form-field input,
.form-field textarea {
  font-family: var(--gothic);
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26, 24, 20, 0.22);
  padding: 0.6rem 0.1rem;
  letter-spacing: 0.04em;
  transition: border-color 0.4s var(--ease);
}
.form-field textarea { resize: vertical; line-height: 1.9; }
.form-field input:focus,
.form-field textarea:focus { outline: none; border-bottom-color: var(--ink); }
/* プライバシーポリシー同意チェックボックス（CF7 acceptance） */
.form-consent {
  margin-top: 1.8rem;
  text-align: center;
  font-family: var(--gothic);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
}
.form-consent .wpcf7-list-item { margin: 0; }               /* CF7 既定の左マージン除去 */
.form-consent .wpcf7-list-item-label { line-height: 1.7; }
.form-consent label { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; }
.form-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.05em; height: 1.05em;
  border: 1px solid var(--ink-mid);
  border-radius: 3px;
  background: transparent;
  display: inline-grid; place-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  flex: 0 0 auto;
}
.form-consent input[type="checkbox"]::before {
  content: ""; width: 0.55em; height: 0.55em;
  transform: scale(0); transform-origin: center;
  transition: transform 0.18s var(--ease);
  box-shadow: inset 1em 1em var(--paper);
  clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 80% 0, 41% 68%);
}
.form-consent input[type="checkbox"]:checked {
  background: var(--ink); border-color: var(--ink);
}
.form-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.form-consent a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.form-consent a:hover { border-bottom-color: var(--ink); }

.form-actions { text-align: center; margin-top: 1.4rem; }
.form-submit {
  font-family: var(--gothic);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 2.4rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.form-submit:hover { background: var(--ink); color: var(--paper); }
.form-submit .link-arrow__line { width: 40px; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(2rem, 3vw, 2.5rem);
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 5vw, 4rem);
}
@media (max-width: 720px) { .footer__top { grid-template-columns: 1fr; gap: 3rem; text-align: center; } }

.footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.footer__brand-name {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
}
.footer__credit {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 720px) { .footer__brand { align-items: center; } }
.footer__tag {
  font-family: var(--mincho);
  font-weight: 400; font-size: 0.85rem; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.footer__nav {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
@media (max-width: 900px) { .footer__nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer__nav { grid-template-columns: 1fr; gap: 2rem; } }
.footer__col-title {
  font-family: var(--mincho);
  font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1.2rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a {
  font-family: var(--mincho);
  font-weight: 400; font-size: 0.88rem; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.footer__bottom {
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mincho);
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 720px) { .footer__bottom { flex-direction: column; gap: 0.8rem; text-align: center; } }

/* 法的リンク（Privacy） */
.footer__legal { display: inline-flex; gap: 0.6rem; align-items: center; }
.footer__legal a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer__legal a:hover {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* =============================================================
   WordPress 拡張：お知らせ archive / single / 404 / ページネーション
   ============================================================= */

/* お知らせ一覧（archive-news.php） — トップの news グリッドを再利用しつつ余白だけ調整 */
.block--news-archive { padding-top: clamp(5rem, 9vw, 8rem); }
.news--archive { margin-top: clamp(2rem, 4vw, 3rem); }

/* お知らせ個別（single-news.php） */
.block--news-single { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.news-single__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.news-single__meta {
  font-family: var(--gothic);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.news-single__title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink);
}
.news-single__media { margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.news-single__media img { width: 100%; height: auto; display: block; border-radius: 4px; }
.news-single__body { max-width: 720px; margin: 0 auto; }
.news-single__body p { margin-bottom: 1.6em; }
.news-single__body h2, .news-single__body h3 {
  font-family: var(--mincho);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 2.2em 0 1em;
}
.news-single__body h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.news-single__body h3 { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }
.news-single__nav { margin-top: clamp(3rem, 6vw, 4rem); text-align: center; }

/* ページネーション */
.pagination {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: flex;
  justify-content: center;
}
.pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--gothic);
  font-size: 0.95rem;
}
.pagination .page-numbers {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pagination .page-numbers:hover { background: var(--ink); color: var(--paper); }
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .dots { border: 0; }

/* 404 */
.block--404 {
  padding-top: clamp(6rem, 12vw, 10rem);
  padding-bottom: clamp(6rem, 12vw, 10rem);
}

/* =============================================================
   固定ページ（page.php）プライバシーポリシー等
   ============================================================= */
.block--page {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
.page-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.page-content {
  font-family: var(--gothic);
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.page-content h2 {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--ink);
  margin: 2.6em 0 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 2em 0 0.8em;
}
.page-content p { margin: 0 0 1.4em; }
.page-content ol, .page-content ul { margin: 0 0 1.6em; padding-left: 1.6em; }
.page-content ol li, .page-content ul li { margin-bottom: 0.8em; line-height: 1.95; }
.page-content ol { list-style-type: decimal; }
.page-content ol ol { margin: 0.8em 0; padding-left: 1.6em; }
.page-content ul { list-style-type: disc; }
.page-content a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.3s var(--ease);
}
.page-content a:hover { border-bottom-color: var(--ink); }

/* リード（ページ冒頭の一段大きい文字） */
.page-content .page-lead {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 2.1;
  color: var(--ink);
  margin: 0 0 3rem;
}

/* 補足（メンバー一覧の下など） */
.page-content .note {
  font-size: 0.82rem;
  color: var(--ink-mid);
  margin: 1.2em 0 2em;
}

/* 団体概要テーブル（縦並びの2列） */
.page-content .org-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 2.4em;
}
.page-content .org-table th,
.page-content .org-table td {
  padding: 0.95em 1em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
  font-weight: 400;
}
.page-content .org-table th {
  width: 9em;
  color: var(--ink-mid);
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* メンバー表（役職・氏名・他の役職） */
.page-content .member-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 2.4em;
  font-size: 0.92rem;
}
.page-content .member-table th,
.page-content .member-table td {
  padding: 0.9em 1em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
  font-weight: 400;
}
.page-content .member-table thead th {
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--ink-mid);
  font-size: 0.82rem;
}
.page-content .member-table tbody td:nth-child(1) { width: 22em; color: var(--ink); }
.page-content .member-table tbody td:nth-child(2) { width: 9em; font-weight: 500; white-space: nowrap; }
.page-content .member-table tbody td:nth-child(3) { color: var(--ink-mid); }

/* =============================================================
   ZEN Conference 詳細ページ（page-zen-conference.php）
   既存デザインシステム（.block / .container / .sec-head / .prose）を
   最大限再利用。追加は「フルスクリーン Hero」と「写真付きバックナンバー
   カード」「principles リスト」の3つのみ。
   ============================================================= */

/* 1. フルスクリーン Hero（背景画像 + タイトル + リード） */
.zc-hero-full {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.zc-hero-full__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: zc-hero-zoom 30s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
@keyframes zc-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .zc-hero-full__media { animation: none; }
}
.zc-hero-full__placeholder {
  background:
    radial-gradient(ellipse at 30% 40%, #4a4640 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, #2a2823 0%, transparent 60%),
    linear-gradient(180deg, #1a1814 0%, #2a2823 100%);
}
.zc-hero-full__placeholder--alive {
  background:
    radial-gradient(ellipse at 30% 30%, #3a4a3e 0%, transparent 60%),
    radial-gradient(ellipse at 70% 75%, #2a3a2e 0%, transparent 60%),
    linear-gradient(180deg, #1a241c 0%, #28342c 100%);
}
.zc-hero-full__placeholder--dialogue {
  background:
    radial-gradient(ellipse at 25% 35%, #3a3848 0%, transparent 60%),
    radial-gradient(ellipse at 75% 70%, #28263a 0%, transparent 60%),
    linear-gradient(180deg, #1a1828 0%, #2a283a 100%);
}
.zc-hero-full__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}
.zc-hero-full__inner {
  position: relative; z-index: 2;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.zc-hero-full__title {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  color: #fff;
}
.zc-hero-full__lede {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: 0.1em;
  line-height: 2.2;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 auto;
  max-width: 40em;
  /* 日本語の単語途中改行を防ぎ、句読点や ／ 区切りで折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* 2. PRINCIPLES（大切にしていること） */
.zc-principles {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.zc-principles li {
  padding: clamp(1.2rem, 2.2vw, 1.8rem) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mincho);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
}

/* バックナンバーカード（[zen_backnumbers] ショートコード出力、写真付き） */
.backnumber-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0;
}
.backnumber-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.backnumber-card:hover {
  border-color: var(--ink-mid);
  transform: translateY(-2px);
}
.backnumber-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #d6d1c6 0%, #b8b3a7 100%);
  overflow: hidden;
}
.backnumber-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.backnumber-card:hover .backnumber-card__media img { transform: scale(1.04); }
.backnumber-card__media--placeholder { position: relative; }
.backnumber-card__media--placeholder::after {
  content: "PHOTO";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--gothic);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.7);
}
.backnumber-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.6rem);
}
.backnumber-card__label {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.backnumber-card__arrow {
  font-family: var(--mincho);
  font-size: 1.1rem;
  color: var(--ink-mid);
  opacity: 0.8;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.backnumber-card:hover .backnumber-card__arrow {
  opacity: 1;
  color: var(--ink);
  transform: translateX(4px);
}

/* コンテンツカード（ZEN Alive / ZEN Dialogue）── シンプルカード */
.content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0;
}
.content-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.content-card--linked:hover {
  border-color: var(--ink-mid);
  transform: translateY(-2px);
}
.content-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #c8c3b6 0%, #a8a397 100%);
  overflow: hidden;
  position: relative;
}
.content-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.content-card--linked:hover .content-card__media img { transform: scale(1.04); }
.content-card__media--placeholder::after {
  content: "PHOTO";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--gothic);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.7);
}
.content-card__body {
  padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 2.2vw, 1.8rem);
}
.content-card__name {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0 0 0.6em;
  line-height: 1.5;
}
.content-card__desc {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 0.92rem);
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--ink-mid);
  margin: 0;
}

/* 季節カード（春夏秋冬）：4列固定 */
.content-cards--seasons {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.content-cards--seasons .content-card__media { aspect-ratio: 3 / 4; }
.content-cards--seasons .content-card__body { padding: clamp(0.9rem, 1.4vw, 1.3rem); }
.content-cards--seasons .content-card__name {
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
}
.content-cards--seasons .content-card__desc {
  font-size: clamp(0.78rem, 0.92vw, 0.85rem);
}
@media (max-width: 760px) {
  .content-cards--seasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .content-cards--seasons { grid-template-columns: 1fr; }
}

/* スマホ：表をブロック化 */
@media (max-width: 720px) {
  .page-content .org-table,
  .page-content .org-table tbody,
  .page-content .org-table tr,
  .page-content .org-table th,
  .page-content .org-table td { display: block; width: 100%; }
  .page-content .org-table th {
    padding: 1.2em 0 0.2em;
    border-bottom: 0;
    font-size: 0.78rem;
  }
  .page-content .org-table td { padding: 0 0 1em; border-bottom: 1px solid var(--line); }

  .page-content .member-table thead { display: none; }
  .page-content .member-table,
  .page-content .member-table tbody,
  .page-content .member-table tr,
  .page-content .member-table td { display: block; width: 100%; }
  .page-content .member-table tr {
    padding: 1em 0;
    border-bottom: 1px solid var(--line);
  }
  .page-content .member-table td {
    padding: 0.1em 0;
    border-bottom: 0;
  }
  .page-content .member-table tbody td:nth-child(1) { font-size: 0.75rem; color: var(--ink-mid); letter-spacing: 0.06em; }
  .page-content .member-table tbody td:nth-child(2) { font-size: 1rem; font-weight: 500; margin-bottom: 0.3em; }
  .page-content .member-table tbody td:nth-child(3) { font-size: 0.82rem; }
}

/* WordPress 管理バーがある時のヘッダー位置調整 */
body.admin-bar .nav { top: 32px; }
@media screen and ( max-width: 782px ) { body.admin-bar .nav { top: 46px; } }

/* =============================================================
   Contact Form 7 専用：既存フォームスタイルとの整合
   ============================================================= */
.contact-form .wpcf7 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.contact-form .wpcf7 form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.2rem);
}
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font-family: var(--gothic);
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26, 24, 20, 0.22);
  padding: 0.6rem 0.1rem;
  letter-spacing: 0.04em;
  transition: border-color 0.4s var(--ease);
}
.contact-form textarea { resize: vertical; line-height: 1.9; }
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus { outline: none; border-bottom-color: var(--ink); }

.contact-form input[type="submit"].form-submit {
  font-family: var(--gothic);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding: 0.9rem 2.4rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.contact-form input[type="submit"].form-submit:hover { background: var(--ink); color: var(--paper); }

.contact-form .wpcf7-not-valid-tip {
  color: var(--shu);
  font-size: 0.78rem;
  margin-top: 0.3rem;
  letter-spacing: 0.04em;
}
.contact-form .wpcf7-response-output {
  margin: 1.5rem 0 0 !important;
  padding: 1rem 1.2rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px;
  font-family: var(--gothic);
  font-size: 0.9rem;
  text-align: center;
}
.contact-form .wpcf7-spinner { margin: 0 auto; display: block; }

/* =============================================================
   メンバー：クリック可能化（モーダル起動）
   ============================================================= */
.member-trigger {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  transition: opacity 0.3s var(--ease);
}
.member-trigger:hover { opacity: 0.85; }
.member-trigger:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =============================================================
   プロフィールモーダル
   ============================================================= */
.member-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.member-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease), visibility 0s linear;
}

.member-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.member-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--paper);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  border-radius: 6px;
  transform: translateY(20px);
  transition: transform 0.5s var(--ease);
}
.member-modal.is-open .member-modal__panel { transform: translateY(0); }

.member-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.3s var(--ease);
}
.member-modal__close:hover { background: rgba(0,0,0,0.05); }
.member-modal__close::before { content: "×"; font-family: var(--mincho); font-weight: 400; }

.member-modal__head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.member-modal__avatar {
  width: clamp(120px, 18vw, 180px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.4rem;
}
.member-modal__avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-modal__name {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.member-modal__role {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink-mid);
}
.member-modal__body {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
}
.member-modal__body p + p { margin-top: 1.4rem; }
.member-modal__note {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  font-family: var(--gothic);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-align: center;
}

/* スクロールロック（body に付与） */
body.modal-open { overflow: hidden; }

/* 前田の墨絵だけモーダル内でも顔位置調整 */
.member-modal[data-member="maeda"] .member-modal__avatar img {
  transform: scale(2.5);
  transform-origin: 50% 6%;
}

/* =============================================================
   モーダル内のCSS変数リセット（#team で --ink等を白に再定義しているのを打ち消す）
   ============================================================= */
.member-modal {
  --ink:       #1A1814;
  --ink-soft:  #423E37;
  --ink-mid:   #6E6A60;
  --mute:     #9A9588;
  --line:      rgba(26, 24, 20, 0.14);
  --line-soft: rgba(26, 24, 20, 0.08);
  --shu:       #B0392E;
}

/* タイトル（キャッチコピー、13文字以内） */
.member-modal__title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* SNSリンク：ラベル付きピルボタン（リンクであることが一目で分かる） */
.member-modal__sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.member-modal__sns a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  font-family: var(--gothic);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.member-modal__sns a:hover {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.member-modal__sns svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}
.member-modal__sns .sns-label {
  white-space: nowrap;
}

/* ZEN Field 内での役職（控えめなラベル） */
.member-modal__field-role {
  font-family: var(--gothic);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--mute);
  margin-bottom: 1rem;
  text-align: center;
  /* 日本語の単語途中改行を防ぐ。半角スペース・全角／で折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* 社会的な肩書（複数行可） */
.member-modal__credentials {
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  line-height: 1.85;
  color: var(--ink-mid);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* モーダルcloseボタン：ブラウザ標準の青outlineを整える */
.member-modal__close:focus { outline: none; }
.member-modal__close:focus-visible {
  outline: 1px solid var(--ink-mid);
  outline-offset: 2px;
}
/* =============================================================
   SP 全体：本文コピーの読みやすさ底上げ（ベース定義より後ろで詳細度・後勝ちを確保）
   ============================================================= */
@media (max-width: 720px) {
  /* SP：中央揃えの本文リードは「変な位置での改行」を生むので左寄せに。
     見出し・ラベルは中央のまま維持（sec-head__title / team-group__label / core-member__*） */
  .sec-head--center .sec-head__lede,
  .sec-head__lede { text-align: left; font-size: 15.5px; line-height: 1.9; color: var(--ink); }
  .aricata-block__note { font-size: 1.15rem; line-height: 1.7; }
  .aricata-block__text {
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .news-item__meta { font-size: 13px; letter-spacing: 0.08em; }
  .news-item__title { font-size: 15.5px; line-height: 1.65; }
  .event-card__meta { font-size: 13.5px; color: rgba(255, 255, 255, 0.9); }
  .event-card__prep { font-size: 13.5px; color: rgba(255, 255, 255, 0.95); }
  /* 思想文・引用の中央揃えも SP は左寄せに（1行に収まらないと崩れて読みにくい） */
  .pullquote, .pullquote * { text-align: left; }
  /* 「そして、日常へ持ち帰る。」本文も中央揃えだと改行が不自然になるため左寄せに（見出しは中央のまま） */
  .loopback__text { text-align: left; }
  body { font-feature-settings: "palt"; }
}

/* =============================================================
   書のあしらい（sumi）
   ・親セクションは position: relative（.block は既に relative）
   ・.sumi は絶対配置、pointer-events: none、テキストの下（z-index: 0）
   ・濃度は opacity で控えめに。色は元 PNG が炭黒なのでそのまま
   ・種類ごとに .sumi--<name>-<pos> で位置とサイズを固定
   ============================================================= */
.block {
  position: relative;
  /* あしらいがセクション矩形から意図的にはみ出す想定なので overflow は clip しない。
     横スクロールは下の html/body overflow-x: clip で抑止する（hidden ではなく clip：
     clip はスクロールコンテナを作らないので position: sticky を壊さない） */
}
/* 設計原則「大胆だけど目立たない」
   ・大胆さ＝サイズと切断：セクション高さ級の大物を必ず 1 辺以上で切る
   ・目立たなさ＝濃度：白面 0.045 / 色面 0.06（黒が沈む分を補正）
   ・TOP は最大 5。縦に散らし、同じ隅に固まらないよう位置を振る
   ・本文ブロックの真後ろには置かない */
.sumi {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: var(--sumi-alpha, 0.045);
}
/* テキスト側を relative + z-index: 1 で持ち上げて sumi を確実に背面へ。
   sumi を直下に持つ .block の .container を汎用的に持ち上げる（TOP・詳細ページ共通） */
.block:has(> .sumi) > .container { position: relative; z-index: 1; }

/* 横スクロール抑止。hidden だと sticky（.parallax-stack の写真オーバーラップ）が
   壊れるため、スクロールコンテナを作らない clip を使う */
html, body { overflow-x: clip; }

/* --- #about（青鼠面）左上：くねる大波（syo_image12）を左端で切る -------- */
.sumi--cloud-tl {
  --sumi-alpha: 0.06;                     /* 色面は黒が沈むので少し濃く */
  top: clamp(-5rem, -4vw, -2rem);
  width: clamp(760px, 78vw, 1360px);
  aspect-ratio: 4 / 3;
  left: calc(clamp(760px, 78vw, 1360px) / -3);     /* 幅の 1/3 を左外へ */
  background-image: url(../images/sumi/sumi-cloud.png);
}

/* --- #how（白面）右上：円相（syo_image3）を右端で大きく切る ------------- */
.sumi--enso-tr {
  top: clamp(-6rem, -5vw, -2.5rem);
  width: clamp(560px, 62vw, 1040px);
  aspect-ratio: 1 / 1;
  right: calc(clamp(560px, 62vw, 1040px) / -2.4);  /* 幅の ~42% を右外へ */
  background-image: url(../images/sumi/sumi-enso.png);
}

/* --- #events（テラコッタ面）左上：波打つ横筆（syo_image2）を左端で切る --
   左右交互配置の「左」。見出し帯の背後〜左余白に大きく置いて左で切る */
.sumi--wave-bl {
  --sumi-alpha: 0.07;                     /* テラコッタは特に沈むので気持ち濃く */
  top: clamp(-2rem, -1vw, 0rem);
  width: clamp(720px, 68vw, 1180px);
  aspect-ratio: 3 / 2;
  left: calc(clamp(720px, 68vw, 1180px) / -3.2);
  background-image: url(../images/sumi/sumi-wave.png);
}

/* --- #team（青鼠面）右下：流れる縦筆（syo_image10）を右端で切る ----------
   #contact の hook と縦に近づかないよう、1つ上の運営団体セクション下部に配置。
   インフォグラフィック（上部右）を避け、下端寄りに置く */
.sumi--flow-r {
  --sumi-alpha: 0.06;                     /* 青鼠の色面なので少し濃く */
  bottom: clamp(2rem, 6vw, 8rem);
  width: clamp(520px, 52vw, 900px);
  aspect-ratio: 1055 / 1491;              /* 縦長素材の比率 */
  right: calc(clamp(520px, 52vw, 900px) / -2.8);
  background-image: url(../images/sumi/sumi-flow.png);
}

/* --- #contact（白面）左下：尾を引くフック（syo_image6）を左端で切る ------
   左右交互配置の「左」。scaleX(-1) で尾の向きを左下→右上に反転 */
.sumi--hook-br {
  width: clamp(640px, 60vw, 1080px);
  aspect-ratio: 3 / 2;
  left: calc(clamp(640px, 60vw, 1080px) / -2.7);
  bottom: clamp(-4rem, -3vw, -1.5rem);
  transform: scaleX(-1);
  background-image: url(../images/sumi/sumi-hook.png);
}

/* =============================================================
   書のあしらい：composable クラス（詳細ページ用）
   使い方：<span class="sumi sm-<brush> sm-<pos>">
   ・sm-<brush> がサイズ(--sw)・比率・画像を、sm-<pos> が隅と食み出しを決める
   ・食み出しは幅(--sw)の割合で計算するので、素材サイズが変わっても崩れない
   ・縦位置は --oy で微調整可（例：中段に置くなら style="--oy: 40%"）
   ============================================================= */
.sumi.sm-enso  { --sw: clamp(440px, 46vw, 820px);  width: var(--sw); aspect-ratio: 1 / 1;       background-image: url(../images/sumi/sumi-enso.png); }
.sumi.sm-wave  { --sw: clamp(560px, 56vw, 1000px); width: var(--sw); aspect-ratio: 3 / 2;       background-image: url(../images/sumi/sumi-wave.png); }
.sumi.sm-cloud { --sw: clamp(600px, 60vw, 1120px); width: var(--sw); aspect-ratio: 4 / 3;       background-image: url(../images/sumi/sumi-cloud.png); }
.sumi.sm-flow  { --sw: clamp(420px, 42vw, 760px);  width: var(--sw); aspect-ratio: 1055 / 1491; background-image: url(../images/sumi/sumi-flow.png); }
.sumi.sm-hook  { --sw: clamp(520px, 52vw, 920px);  width: var(--sw); aspect-ratio: 3 / 2;       background-image: url(../images/sumi/sumi-hook.png); }
.sumi.sm-dots  { --sw: clamp(240px, 26vw, 420px);  width: var(--sw); aspect-ratio: 1 / 1;       background-image: url(../images/sumi/sumi-dots.png); }

.sumi.sm-tl { top: var(--oy, -3vw); left:  calc(var(--sw) * -0.32); }
.sumi.sm-tr { top: var(--oy, -3vw); right: calc(var(--sw) * -0.42); }
.sumi.sm-bl { bottom: var(--oy, -2vw); left:  calc(var(--sw) * -0.32); }
.sumi.sm-br { bottom: var(--oy, -2vw); right: calc(var(--sw) * -0.42); }
.sumi.sm-l  { top: var(--oy, 12%); left:  calc(var(--sw) * -0.34); }
.sumi.sm-r  { top: var(--oy, 12%); right: calc(var(--sw) * -0.42); }
/* 左向き配置で尾の向きが不自然な素材（波・フック）は反転 */
.sumi.sm-flip { transform: scaleX(-1); }

/* SP限定改行：デスクトップでは通常表示、SP縦積みレイアウトで改行させる */
.br-sp { display: none; }
@media (max-width: 720px) {
  .br-sp { display: inline; }
}

@media (max-width: 720px) {
  /* SP：#how の01-06キャプション（縦書き）が小さく読みにくいので底上げ */
  .practice__text { font-size: 1.05rem; letter-spacing: 0.14em; }
  .practice__num { font-size: 1rem; }
}

@media (max-width: 720px) {
  /* SP：思想は同じ（大きく・切れて・薄く）。約 55% スケール＋一段薄く */
  .sumi { opacity: calc(var(--sumi-alpha, 0.045) - 0.005); }
  .sumi--cloud-tl { top: -3rem; width: 520px; left: -180px; }
  .sumi--enso-tr  { top: -3rem; width: 420px; right: -180px; }
  .sumi--wave-bl  { width: 520px; left: -180px; top: -1rem; }
  .sumi--flow-r   { bottom: 3rem; width: 380px; right: -150px; }
  .sumi--hook-br  { width: 460px; left: -180px; bottom: -1.5rem; }
  /* composable も SP は約 65% に縮める */
  .sumi.sm-enso  { --sw: clamp(280px, 60vw, 420px); }
  .sumi.sm-wave  { --sw: clamp(340px, 68vw, 520px); }
  .sumi.sm-cloud { --sw: clamp(360px, 72vw, 560px); }
  .sumi.sm-flow  { --sw: clamp(260px, 54vw, 400px); }
  .sumi.sm-hook  { --sw: clamp(320px, 64vw, 480px); }
}