/* ============================================
   WTD TOP — style.css (v2)
   ============================================ */

/* ---------- base ---------- */
.br-sp { display: none; }
.lbl-sp { display: none; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-ink);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.en { font-family: var(--font-en); font-weight: var(--fw-en-med); -webkit-text-stroke: 0; }
.en-b { font-family: var(--font-en); font-weight: var(--fw-en-bold); -webkit-text-stroke: 0; }

.inner { max-width: var(--w-content); margin-inline: auto; padding-inline: var(--pad-x); }

.v-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.14em;
  line-height: 2.0;
}
.v-text .pad {
  background: var(--c-white);
  padding: 0.45em 0.16em 0.22em;   /* 下端を約10px詰める(白枠が長すぎる指摘対応) */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
ruby rt { font-size: 0.24em; letter-spacing: 0; }

.chevron {
  display: block;
  width: 42px; height: 20px;
  margin: var(--sp-3) auto 0;
  border: none; background: none; padding: 0; cursor: pointer; color: inherit;
}
.chevron svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- スクロール表示(20th系の「徐々に出る」) ----------
   .js-reveal はJSが付けるため、JS無効時は通常表示のまま。
   transformではなくtranslateを使い、カードの傾き(rotate)と両立させる。 */
.js-reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.9s ease, translate 0.9s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal.is-inview { opacity: 1; translate: 0 0; }

/* ---------- header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background-color var(--tr); }
.site-header.scrolled { background: rgba(255, 255, 255, 0.85); }  /* 白を透過85%(PC) */
.header-logo img { transition: width var(--tr); }
.site-header.scrolled .header-logo img { width: 105px; }
.site-header .inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-top: 85px;
  transition: padding-top var(--tr);
}
.site-header.scrolled .inner { padding-top: 10px; }
.header-logo { display: flex; align-items: center; height: 44px; margin-left: 34px; }
.header-logo img { width: 140px; height: auto; }

.gnav { background: var(--c-white); padding: 0 48px; margin-right: calc(50% - 50vw); }
.gnav-logo { display: none; }
.gnav > ul { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; height: 44px; }
.gnav a { font-family: var(--font-en); font-weight: var(--fw-en-bold); font-size: calc(14.5px * var(--en-scale)); letter-spacing: 0.03em; }
.gnav .has-sub { position: relative; height: 100%; display: flex; align-items: center; }
.gnav .sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; gap: 3px; min-width: 148px; padding-top: 6px; }
.gnav .sub a { background: var(--c-gray); color: var(--c-white); font-size: 11.5px; padding: 5px 10px; text-align: center; white-space: nowrap; }
.gnav .has-sub:hover .sub, .gnav .has-sub:focus-within .sub { display: flex; }
.gnav .chip { background: var(--c-ink); color: var(--c-white); padding: 5px 14px; }
.gnav .chip .ext { margin-left: 4px; }

.ext { display: inline-block; width: 0.62em; height: 0.62em; }
.ext svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }

.menu-btn { display: none; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 10px; }
.menu-btn span { display: block; height: 2px; background: var(--c-ink); margin: 6px 0; transition: transform var(--tr), opacity var(--tr); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero ----------
   リボン画像は元デザイン同様、左端断ち落とし+上部を画面外にクロップ。
   クロップ量・幅配分は下の2変数で調整する。 */
.hero {
  --hero-col: 70.4%;    /* 画像列+左余白(元デザイン採寸値) */
  overflow: hidden;
}
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--hero-col) 1fr;
  align-items: start;
  max-width: var(--w-content);
  margin-inline: auto;
}
.hero-visual {
  margin: 0 0 0 7.66%;       /* 左インセット69px(採寸値) */
  overflow: hidden;
  aspect-ratio: 830 / 852;   /* 表示窓: 2x画像の等倍幅×下端852(特徴点マッチング確定値) */
  display: flex;
  align-items: flex-end;
}
.hero-visual a { position: relative; display: block; transition: opacity var(--tr); }
.hero-visual a:hover { opacity: 0.93; }
.hero-visual img { width: 100%; }
/* クロスフェード: 前の画像(下)をうっすら残しながら、次の画像(上)が浮かび上がる。
   v1.40: 拡大縮小(scale 1.015 → 1)をやめ、濃度だけの入れ替えにした。
   重なっている間だけ上の画像が1.5%大きく、しかも縮み終わる時間(2.6s)が
   濃度が上がりきる時間(1.6s)より遅かったため、2枚が最も濃く重なる区間で
   上下の画像が数px分ずれて見えていた(同じ画像同士だと二重像として出る)。
   位置決めの指定を持たせないことで、上下の画像は必ずぴったり重なる。
   速さの調整は下の 1.6s だけ動かす。 */
#hero-img-next {
  position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
#hero-img-next.is-in { opacity: 1; }

.hero-side {
  padding: 170px var(--pad-x) 0 0;
  display: flex; flex-direction: column; align-items: flex-end;
}
.hero-copy { display: flex; flex-direction: row-reverse; align-items: center; gap: clamp(16px, 2vw, 30px); }
.hero-copy .main { font-size: var(--fs-hero-main); font-weight: 400; -webkit-text-stroke: var(--jp-stroke-strong) currentColor; margin: 0; }
.hero-copy .sub { font-size: var(--fs-hero-sub); font-weight: 500; margin: 3.2em 0 0; }
.hero-en {
  position: absolute;
  left: 15%;
  top: 30%;
  text-align: left;
  font-size: calc(clamp(12px, 1.25vw, 16px) * var(--en-scale));
  line-height: 2.3;
  margin: 0;
}
.hero-stage .chevron {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 64%;
  margin: 0; z-index: 2;
}

/* ---------- TOP初回表示の登場順(20th系・PC/SP共通) ----------
   1. ロゴ+メイン画像がフェイドイン
   2. 「思想を読み、」白背景ごと上から下へ
   3. 「伝わる形に。」上から下へ(終了2.7s)
   4. 間を置いて(3.2s)タグラインが上から下へ。日本語が半分ほど出た
      3.7sから左の英語、最後にシェブロン。3カードはmain.js側で
      英語終了の約2秒後から右→左に時間差表示(初回表示時のみ)。
   時間差の調整は各 animation-delay の数値のみ動かす。 */
@keyframes wtd-intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wtd-intro-wipe {
  from { clip-path: inset(0 0 100% 0); }  /* 上端から下へ開く */
  to   { clip-path: inset(0 0 0 0); }
}
/* WebKit対策: delay中の初期状態をfill-mode(backwards)に頼らず、
   通常スタイルとして持つ。さらにclip-pathはインライン要素(.pad)ではなく
   ブロック化した行(.line)に掛ける——iOS WebKitはインラインへのclip-path
   適用が不安定で「一旦表示→再度流れる」淀みの原因になるため。
   縦書きではブロックの幅=行送りとなり、<br>区切りとピクセル一致(検証済み)。 */
.hero-copy .main .line { display: block; }
.home .header-logo,
.home .hero-visual,
.home .hero-stage .chevron { opacity: 0; }
.home .hero-copy .main .line,
.home .hero-copy .tagline,
.home .hero-en { clip-path: inset(0 0 100% 0); }

.home .header-logo,
.home .hero-visual { animation: wtd-intro-fade 1.2s ease 0.1s both; }
.home .hero-copy .main .line { animation: wtd-intro-wipe 0.9s ease-out both; }
.home .hero-copy .main .line:nth-of-type(1) { animation-delay: 1.1s; }  /* 思想を読み、 */
.home .hero-copy .main .line:nth-of-type(2) { animation-delay: 1.8s; }  /* 伝わる形に。 */
.home .hero-copy .tagline { animation: wtd-intro-wipe 1.0s ease-out 3.2s both; }  /* 伝わる形に。の後に0.5sの間 */
.home .hero-en { animation: wtd-intro-wipe 1.0s ease-out 3.7s both; }             /* 日本語が半分出た後 */
.home .hero-stage .chevron { animation: wtd-intro-fade 0.9s ease 4.8s both; }
/* SPは要素が小さく同じ秒数だと速く見えるため、さらにゆっくり(カードのタイマーはmain.js側で連動) */
@media (max-width: 768px) {
  .home .hero-copy .main .line { animation-duration: 1.5s; }
  .home .hero-copy .main .line:nth-of-type(1) { animation-delay: 1.5s; }  /* 終了3.0s */
  .home .hero-copy .main .line:nth-of-type(2) { animation-delay: 2.8s; }  /* 終了4.3s */
  .home .hero-copy .tagline { animation-duration: 1.3s; animation-delay: 4.8s; }  /* 0.5sの間 */
  .home .hero-en { animation-duration: 1.3s; animation-delay: 5.5s; }             /* 日本語半分後 */
  .home .hero-stage .chevron { animation-delay: 7.2s; }
}
@media (min-width: 769px) {
  /* タグライン位置(PC): 初回-19pxは指示違いにつき+40px戻し=元位置から右へ21px */
  .hero-copy .tagline { transform: translateX(21px); }
}

/* ---------- empathy(3カード) ---------- */
.empathy { margin-top: -222px; padding-block: 0 var(--sp-3); position: relative; z-index: 1; }
.empathy .cards {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  align-items: start;
  padding-inline: 80px;
}
.card { font-size: var(--fs-v-copy); font-weight: 500; margin: 0; display: flex; align-items: center; justify-content: center; }
.card .v-text { display: block; height: 9.3em; }

.card--dashed { order: 3; border: 3px dashed var(--c-white); border-radius: 8px; padding: 1.8em 1.2em; margin-top: 0; }
.card--tilt   { order: 2; border: 3px solid var(--c-white); border-radius: 18px; padding: 2em 1.4em; transform: rotate(-14deg); margin-top: 3.5em; }
.card--solid  { order: 1; background: var(--c-white); border-radius: 8px; padding: 2em 1.6em 3.2em; margin-top: 1.5em; position: relative; }
.card--solid::after {
  content: "";
  position: absolute; left: -10px; bottom: -10px;
  width: 40px; height: 46px;
  background: url("../img/icon_logo_transparent.png") no-repeat center / contain;
}

/* ---------- 確定コピー用の新規要素 ---------- */
.en-sub {
  display: block;
  font-size: calc(12px * var(--en-scale));
  color: var(--c-gray);
  letter-spacing: 0.02em;
  margin-top: 8px;
  font-weight: var(--fw-en-med);
}
.hero-copy .tagline {
  font-size: calc(var(--fs-hero-main) * 0.58);
  height: auto;                /* 白枠内で上下中央に置く(align-items:center)ため内容高に */
  letter-spacing: 0.04em;
  line-height: 2.0;
  margin: 0;
  font-weight: 500;
}
.bridge-line {
  text-align: center;
  font-size: 15px;
  margin: var(--sp-5) auto 0;
  max-width: 34em;
}
.art .en-sub { color: var(--c-gray); }

/* Contactブロック(低温) */
.contact-cta { background: var(--c-base); padding-block: var(--sp-5); text-align: center; }
.cta-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; -webkit-text-stroke: var(--jp-stroke-strong) currentColor; margin: 0; letter-spacing: 0.08em; }
.cta-text { font-size: 15px; margin: var(--sp-3) 0 0; }
.cta-btn {
  display: inline-block;
  margin-top: var(--sp-3);
  background: var(--c-ink); color: var(--c-white);
  font-size: 15px; letter-spacing: 0.12em;
  width: 330px; padding: 14px 0;   /* すぐ上のテキスト(最長行)の幅に合わせる */
  text-align: center;
  transition: opacity var(--tr);
  -webkit-text-stroke: var(--jp-stroke-mid) currentColor;
}
.cta-btn:hover { opacity: 0.75; }

.chip-light {
  background: var(--c-gray); color: var(--c-white);   /* 下のEnglish HPボタンと同じグレー */
  font-family: var(--font-en); font-weight: var(--fw-en-bold);
  font-size: calc(13px * var(--en-scale)); width: 230px; padding: 4px 0;   /* 上のロゴ(幅230px)の右端まで伸ばす。高さはStoreチップと同一 */
  display: block; text-align: center; margin-top: 12px;
  line-height: 1.5;   /* Store/EN HPチップと共通の行高(高さ合わせ) */
}
/* フッター since */
.footer-brand .since { font-size: 13px; margin: 0; line-height: 1; }
.footer-brand .since a.chip-light { color: var(--c-white); }
.footer-brand .since a.chip-light:hover { color: var(--c-white); opacity: 0.8; }
/* 2026-08-02: フッターのStore・EN HPボタンも、Philosophy20thと同じオーバー表現にそろえる */
.footer-links .chip { transition: opacity var(--tr); }
.footer-links .chip:hover { opacity: 0.8; }

/* ---------- section見出しセット ---------- */
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.sec-title {
  display: flex; align-items: center; gap: 0.3em;
  font-size: calc(var(--fs-section) * var(--en-scale));
  font-family: var(--font-en); font-weight: var(--fw-en-bold);
  color: var(--c-gray); line-height: 1; margin: 0;
}
.sec-title img { width: 0.85em; }
.sec-sub-en { margin-top: var(--sp-2); font-size: calc(15px * var(--en-scale)); }
.sec-v-copy { font-size: var(--fs-v-copy); font-weight: 500; -webkit-text-stroke: var(--jp-stroke-mid) currentColor; margin: 0; line-height: 2.2; }
.sec-copy-block { align-self: center; }
.design .sec-copy-block { margin-left: auto; margin-right: 3px; text-align: right; }
.art .sec-copy-block { text-align: left; }
.copy-divider {
  border: none; height: 1px; background: #bfbfbf;
  font-size: var(--fs-v-copy);      /* 幅をコピー(sec-v-copy)基準のemで測る */
  width: 13.4em; margin: 18px 0 18px auto;   /* Design: 上のコピー幅に一致 */
}
.art .copy-divider { width: 16.4em; margin: 18px auto 18px 0; }  /* Art: 上のコピー幅に一致 */
.axis-line { font-size: 14px; margin: 0; }

/* ---------- carousel ---------- */
.carousel { position: relative; margin-top: var(--sp-4); }
.carousel {
  /* v1.43: PCの表示枚数と「次があること」を示す覗き幅をここで一括管理する。
     旧 minmax(230px,300px) は横スクロール時に最小値が採用されるため、
     実際には1枚230pxで4枚ちょうど・覗き0だった(=続きがあると分からない)。 */
  --cols: 3;          /* PCで一度に見せる枚数 */
  --peek: 40px;       /* 右端に覗かせる幅。0にすると覗きなし */
  --gap: clamp(24px, 4.5vw, 64px);
}
.carousel .track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--peek) - var(--gap) * var(--cols)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .item { scroll-snap-align: start; margin: 0; }
.carousel .item > a { display: block; }   /* キャプションを画像に対し確実に中央化 */
.carousel .item figcaption { text-align: center; font-size: var(--fs-small); line-height: 2.1; margin-top: var(--sp-2); }
/* v1.43: 4:3に変更。差し替え済みの本文画像が4:3(2732×2048)のため、
   枠と一致させると切り抜きがゼロになる(TOPでは作品全体を見せる役割)。
   旧 320/277(1.155:1)は4:3画像の左右を切っていた。 */
.carousel .item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.c-btn { position: absolute; top: 34%; width: 34px; height: 52px; background: none; border: none; cursor: pointer; padding: 0; color: var(--c-gray); }
.c-btn svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.2; fill: none; }
.c-btn.prev { left: calc(-1 * var(--pad-x) + 6px); }
.c-btn.next { right: calc(-1 * var(--pad-x) + 6px); }

/* 下端行: シェブロン中央+Page→ボタン右端断ち落とし */
.bottom-row { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; margin-top: var(--sp-4); }
.bottom-row .chevron { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.9em; margin: 0; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  min-width: 400px;
  white-space: nowrap;   /* 「Design Page」の2行化防止 */
  font-family: var(--font-en); font-weight: var(--fw-en-bold);
  font-size: calc(clamp(20px, 2.1vw, 27px) * var(--en-scale));
  padding: 0.55em 2em 0.55em 1.8em;
  margin-right: calc(50% - 50vw);
  border-top-left-radius: 16px;
  transition: opacity var(--tr);
}
.page-btn:hover { opacity: 0.75; }
.page-btn .arrow { display: inline-flex; align-items: center; align-self: center; width: 1.5em; height: 0.75em; }
.page-btn .arrow svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.6; fill: none; }

@media (min-width: 769px) {
  /* 8件で横にはみ出すため、先頭が隠れない start を基本に。
     safe center対応ブラウザは「収まる時だけ中央寄せ」になる */
  .design .track { justify-content: start; justify-content: safe center; }
}

/* ---------- Design ---------- */
.design { background: var(--c-white); padding-block: var(--sp-4) 0; }
.design .page-btn { background: var(--c-base); color: var(--c-ink); }

/* ---------- Art ---------- */
.art { background: var(--c-art); color: var(--c-art-text); padding-top: var(--sp-3); padding-bottom: 0; }
.art .sec-head { flex-direction: row-reverse; padding-block: var(--sp-3); }
.art .sec-title { color: var(--c-base); }
.art .full-bleed { max-width: none; padding: 0; }
.art .carousel { margin-top: 0; }
.art .track { grid-auto-columns: 100%; gap: 0; }
/* v1.43: 一覧の帯と同じ 9/5 に統一(旧2.75:1)。
   Artは全幅1枚送りで一覧と同じ形なので、比率が違うと同じ画像が2つの切られ方をする。 */
.art .item img { width: 100%; aspect-ratio: 9 / 5; object-fit: cover; }
.art .item figcaption { text-align: left; padding: var(--sp-2) var(--pad-x); font-size: 14px; }
.art .c-btn { color: var(--c-base); top: 40%; }
.art .c-btn.prev { left: var(--sp-2); }
.art .c-btn.next { right: var(--sp-2); }
.art .page-btn { background: var(--c-gray); color: var(--c-white); }
.art .bottom-row { margin-top: var(--sp-2); }
.art .item figcaption { padding-block: 10px; }

/* ---------- footer ---------- */
.site-footer { background: var(--c-base); padding-block: var(--sp-4) var(--sp-2); }
.footer-grid {
  display: grid; grid-template-columns: auto auto auto;
  justify-content: space-between; align-items: start; gap: var(--sp-4);
}
.footer-logo img { width: 230px; }
.footer-grid > * + * { border-left: 1px solid #cfcfcf; padding-left: var(--sp-4); }
.footer-links { display: grid; grid-template-columns: auto auto; gap: var(--sp-2) var(--sp-3); align-items: center; font-size: 14px; }
.footer-links .chip { font-family: var(--font-en); font-weight: var(--fw-en-bold); font-size: calc(13px * var(--en-scale)); padding: 4px 0; width: 104px; text-align: center; display: inline-block; box-sizing: border-box; line-height: 1.5; }
.footer-links > .en { white-space: nowrap; }   /* 「Base Store」「English HP」の2行化防止 */
.chip--ink { background: var(--c-ink); color: var(--c-white); }
.chip--gray { background: var(--c-gray); color: var(--c-white); }
.footer-sns { font-size: 14px; }
.sns-row { display: flex; align-items: center; gap: var(--sp-3); }
.sns-icons { display: flex; gap: var(--sp-2); align-items: center; }
.search-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.search-row input {
  width: 220px; height: 34px;
  background: var(--c-white); border: none; padding: 0 10px;
  font-family: var(--font-jp); font-size: 14px;
}
.search-row input:focus-visible { outline: 2px solid var(--c-ink); }
.sns-icons a { width: 24px; height: 24px; color: var(--c-ink); transition: opacity var(--tr); }
.sns-icons a:hover { opacity: 0.6; }
.sns-icons svg { width: 100%; height: 100%; fill: currentColor; }
.sns-icons .icon-note svg { transform: scale(0.85); transform-origin: center; }
.copyright { margin-top: var(--sp-4); text-align: center; font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .menu-btn { display: block; position: relative; z-index: 110; transform: translateX(-10px); }  /* 三本線: 右へ+5px(旧-15px) */
  .lbl-pc { display: none; }
  .lbl-sp { display: inline; }
  .site-header .inner { align-items: center; }
  .gnav {
    position: fixed; inset: 0; background: var(--c-base);
    padding: 84px 45px;   /* 上下対称にして画面中央基準に */
    display: flex; flex-direction: column;
    transform: none; visibility: hidden; opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;   /* パッと切替→ゆるやかなフェイドへ */
    box-shadow: none; overflow-y: auto; z-index: 90;
  }
  .gnav.open { visibility: visible; opacity: 1; }
  /* メニュー項目はフェイドに合わせてわずかに持ち上がる(控えめな動き) */
  .gnav > ul { flex-direction: column; align-items: stretch; gap: 12px; height: auto; margin: auto 0; opacity: 0; translate: 0 12px; transition: opacity 0.45s ease 0.05s, translate 0.45s ease 0.05s; }  /* margin:auto 0 = 画面上下の余白を均等に(はみ出す端末では自動で上詰め) */
  .gnav.open > ul { opacity: 1; translate: 0 0; }
  /* 開いた時のロゴ位置: 閉時のヘッダーロゴ(translate(10px,5px)後)と同位置に固定し、動いて見えないようにする */
  .gnav-logo { display: block; position: absolute; top: 27px; left: calc(var(--pad-x) + 10px); }
  .gnav-logo img { width: 110px; height: auto; }
  .gnav > ul > li > a { font-size: 26px; }
  .gnav .has-sub { height: auto; display: block; }
  .gnav .sub { position: static; transform: none; display: flex; gap: 6px; padding: 6px 0 0 12px; min-width: 0; }
  .gnav .sub a { background: none; color: var(--c-gray); font-size: 15px; padding: 0; text-align: left; }
  .gnav .sub a::before { content: "\2014 "; }
  .gnav .chip { background: none; color: var(--c-ink); padding: 0; }
  .gnav > ul > li.menu-divider {
    border-bottom: 2px solid var(--c-white);
    padding-bottom: 24px; margin-bottom: 12px;
  }

  .hero { margin-top: 0; }
  .hero-stage { grid-template-columns: 1fr; }
  .hero > .chevron { margin-top: var(--sp-2); }
  .site-header { background: transparent; }
  .site-header.scrolled { background: var(--c-base); }
  .site-header .inner,
  .site-header.scrolled .inner { padding-top: 15px; padding-bottom: 15px; min-height: 64px; align-items: center; }  /* グレー背景を上下+15px伸ばし、ロゴ・三本線を中央に */
  .header-logo { margin-left: 0; height: auto; transform: translate(10px, 5px); }  /* 左へ+5px・下へ+5px(旧translateX(15px)) */
  .header-logo img { width: 110px; }
  .hero-stage .chevron { position: static; transform: none; margin: var(--sp-2) auto 0; }
  .hero-visual { aspect-ratio: 905 / 700; }
  .hero-side {
    align-items: flex-end;
    padding: 0 33px 0 var(--pad-x);
    margin-top: -49px;          /* コピーが画像下端に食い込む(見本採寸値) */
    position: relative; z-index: 2;
  }
  .hero-copy { gap: 14px; }
  .hero-copy .main { font-size: 24px; letter-spacing: 0.02em; }
  .hero-copy .main .pad { padding: 0.4em 0.14em 0.22em; }  /* 白枠下端を詰める(PCと同様) */
  .hero-copy .sub { font-size: 15px; margin-top: 2.6em; }
  .hero-en {
    position: static; text-align: left; align-self: flex-start;
    margin: -8px 0 0 13px; font-size: 13px; line-height: 2.3;
  }

  .empathy { margin-top: 0; padding-top: var(--sp-3); }
  .empathy .cards { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-4); }
  .card--dashed { order: 1; margin-top: 0; }
  .card--tilt   { order: 2; transform: rotate(-8deg); margin-top: var(--sp-2); }
  .card--solid  { order: 3; margin-top: var(--sp-2); }

  .sec-head, .art .sec-head { flex-direction: column; }
  .sec-v-copy { align-self: flex-end; }

  /* SPは1枚表示+右に覗き(現行の76%を維持)。PC側の --cols/--peek は使わない */
  .carousel .track { grid-auto-columns: 76%; }
  .art .track { grid-auto-columns: 100%; }
  /* v1.43: ここにあった .art .item img { aspect-ratio: 4/3 } は削除。
     下の「SP修正」ブロックの 16/10 に上書きされて効いていなかった(重複指定)。
     Art の比率は 9/5 でPC・SP共通にする。 */
  .c-btn { display: none; }

  .page-btn { width: auto; min-width: 70%; max-width: 100%; align-self: flex-end; }  /* 文字が収まらない機種では70%より自動で広がる(2行化防止) */
  .bottom-row { margin-top: var(--sp-3); flex-direction: column; gap: var(--sp-3); align-items: stretch; }
  .bottom-row .chevron { position: static; transform: none; margin: 0 auto; }
  .empathy .cards { padding-inline: 0; }
  .footer-grid > * + * { border-left: none; padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }

  /* --- 確定コピー要素のSP調整 --- */
  .bridge-line { margin-top: var(--sp-4); padding-inline: var(--pad-x); font-size: 14px; }
  .scope-line { padding-inline: var(--pad-x); font-size: 13px; }
  .contact-cta { padding-block: var(--sp-4); }
  .footer-brand { text-align: center; }

  /* --- SP修正(2026-07-11 指摘対応) --- */
  .design { padding-top: var(--sp-3); }
  .design .carousel, .carousel { margin-top: var(--sp-3); }
  .art { padding-top: var(--sp-3); }
  .art .sec-head { padding-block: 0 var(--sp-2); }
  /* v1.43: SPのArt比率上書き(16/10)を削除。PCと同じ 9/5 に統一。 */

  .br-pc { display: none; }
  .br-sp { display: inline; }

  /* ヒーロー: 中央配置・上の白解消(表示窓を締める) */
  .hero-visual {
    margin: 0;
    width: 100%;
    aspect-ratio: 830 / 934;   /* 見本: 窓高439@390 */
  }

  /* 3カード: 文字を枠の中央に(iOS縦書き対策で高さ明示) */
  .card { display: flex; align-items: center; justify-content: center; }
  .card .v-text { height: 10em; }
  .card--solid { padding: 2em 1.6em; }

  /* セクションコピー塊: SPは英文サブ直後・左揃え・PCと同構成 */
  .sec-copy-block, .design .sec-copy-block, .art .sec-copy-block {
    align-self: stretch; text-align: left; margin: 6px 0 0;
  }
  .copy-divider, .art .copy-divider { margin: 12px auto 12px 0; }  /* 幅はコピー幅に一致(base側13.4/16.4em) */
  .axis-line { font-size: 13px; }
  .cta-btn { width: auto; padding: 14px 71px; }  /* SPは現状ボタンを左右+15px(PCの全幅化はしない) */
  .hero-copy .tagline { font-size: 14px; height: auto; }  /* 白枠と中心を揃える(PCと同様) */
  .since .chip-light { width: 100%; padding: 10px 0; font-size: 15px; }  /* SP: Base Store先頭〜現在の右端まで全幅化 */

  /* フッター: チップ拡大 */
  .footer-links { font-size: 16px; column-gap: 12px; grid-template-columns: 1fr 150px; }  /* ラベル1行化+チップ右端をPhilosophyチップ右端に一致 */
  .footer-links .chip { width: 150px; padding: 10px 0; font-size: 15px; }

  /* フッター: 各ブロックを幅の中央へ+ロゴ下に白い区切り線 */
  .footer-grid { justify-items: center; text-align: center; }
  .footer-logo { padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-white); min-width: 78%; display: flex; justify-content: center; }
  .footer-links { justify-items: start; }
  .sns-row, .search-row { justify-content: center; }

  /* フッター: since2006をBaseと同サイズ、Philosophy20thボタンを下のBaseボタン列と左右端を揃える */
  .footer-brand, .footer-links { width: 262px; }   /* 共通幅で中央寄せ→チップ右端が一致 */
  .footer-brand .since { font-size: 16px; }
  .footer-brand .since .chip-light { margin-left: 0; }  /* 全幅なので左端=Base Store先頭に一致 */

}

/* 動きを減らす設定の環境では、新設アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  #hero-img-next, .gnav, .gnav > ul, .js-reveal { transition: none !important; }
  .js-reveal { opacity: 1; translate: 0 0; }
  .home .header-logo, .home .hero-visual,
  .home .hero-copy .main .line, .home .hero-copy .tagline,
  .home .hero-en, .home .hero-stage .chevron { animation: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* ©2006-2026が電話番号として自動リンク化された場合の保険(下線なし・タップ無効) */
.copyright a[href^="tel:"] { color: inherit; text-decoration: none; pointer-events: none; }

/* ---------- futura-pt サイズ補正(継承サイズの欧文スパン) ---------- */
.footer-links > .en,
.footer-sns .en,
.footer-brand .since .en,
.copyright .en {
  font-size: calc(1em * var(--en-scale));
}

/* ---------- contact page(/contact/ 専用・2026-07-19追加) ----------
   入力欄はフッター検索バー(.search-row input)と同じ印象:
   白背景・枠線なし・和文14px。フォーカス時のみ薄いグレー線で選択を示す。
   線の濃さ・太さの調整は --contact-focus-line の1行だけ動かす。 */
.contact-page {
  --contact-focus-line: 1px solid #b5b5b5; /* 薄めのグレー線(選択中の箱) */
  max-width: 720px;
  margin: 0 auto;
  padding: 150px var(--pad-x) var(--sp-5); /* 150px=固定ヘッダー分(.wp-simpleと同値) */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.contact-head { text-align: center; }
.contact-head .cta-text { font-size: 15px; margin: var(--sp-3) 0 0; }

/* --- フォーム(Fluent Forms上書き) --- */
.contact-form { margin-top: var(--sp-4); }
.contact-form .ff-el-group { margin-bottom: var(--sp-3); }
.contact-form .ff-el-input--label label {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: inline-block;
}
.contact-form .ff-el-form-control,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  background: var(--c-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 10px;
  height: 44px;                     /* 検索バー(34px)より一回り余裕を持たせた入力高 */
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--c-ink);
}
.contact-form textarea {
  height: auto;
  min-height: 220px;
  padding: 10px;
  line-height: var(--lh-body);
  resize: vertical;
}
.contact-form .ff-el-form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: var(--contact-focus-line);
  outline-offset: 0;
  box-shadow: none;
}
/* 必須マーク・エラーはテーマの墨/グレーに寄せる */
.contact-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.contact-form .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
  color: var(--c-gray);
}
.contact-form .error,
.contact-form .ff-el-is-error .text-danger { font-size: var(--fs-small); }

/* 送信ボタン: TOPの「相談する」(.cta-btn)と同型 */
.contact-form .ff-btn-submit,
.contact-form button[type="submit"] {
  display: block;
  margin: var(--sp-3) auto 0;
  background: var(--c-ink);
  color: var(--c-white);
  border: none;
  border-radius: 0;
  font-family: var(--font-jp);
  font-size: 15px;
  letter-spacing: 0.12em;
  width: min(330px, 100%);
  padding: 14px 0;
  text-align: center;
  cursor: pointer;
  transition: opacity var(--tr);
  -webkit-text-stroke: var(--jp-stroke-mid) currentColor;
}
.contact-form .ff-btn-submit:hover,
.contact-form button[type="submit"]:hover { opacity: 0.75; }

/* 送信完了メッセージ(Fluent Forms確認文) */
.contact-form .ff-message-success {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  font-size: 15px;
  padding: var(--sp-3) 0;
}

/* --- ご連絡にあたって --- */
.contact-notes {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid #cfcfcf; /* フッター罫線と同色 */
}
.contact-notes-title {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-gray);
  margin: 0 0 var(--sp-2);
}
.contact-notes ul { list-style: none; margin: 0; padding: 0; }
.contact-notes li {
  font-size: var(--fs-small);
  line-height: 1.9;
  padding-left: 1em;
  text-indent: -1em;
}
.contact-notes li::before { content: "・"; }

@media (max-width: 768px) {
  .contact-page { padding-top: 120px; }
  .contact-head .cta-text br.br-pc { display: none; }
}

/* ---------- 下層 骨格スタイル(2026-07-19 先行実装) ----------
   カテゴリ一覧(category.php)・個別記事(single.php)の構造用。
   Illustratorデザイン確定後、このセクションを本デザインに置き換える。
   トーンは既存トークン準拠(生成りベース・低温)。 */

/* --- 一覧共通 --- */
.archive-page {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 150px var(--pad-x) var(--sp-5);
}
.archive-head { padding-bottom: var(--sp-3); }
.archive-title {
  font-size: calc(var(--fs-section) * var(--en-scale));
  font-family: var(--font-en); font-weight: var(--fw-en-bold);
  color: var(--c-gray); line-height: 1; margin: 0;
}

/* --- Designタブ --- */
.archive-tabs { border-bottom: 1px solid #cfcfcf; margin-bottom: var(--sp-2); }  /* 1行で収まる時はこの余白で十分(2026-07-23) */
.archive-tabs.is-wrapped { margin-bottom: var(--sp-4); }  /* カテゴリが多く2行になった時だけ広げる(main.jsが判定) */
.archive-tabs ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
}
.archive-tabs a {
  display: inline-block;
  padding: 6px 2px 10px;
  font-family: var(--font-en); font-weight: var(--fw-en-med);
  font-size: calc(14px * var(--en-scale));
  letter-spacing: 0.06em;
  color: var(--c-gray);
  border-bottom: 2px solid transparent;
  transition: color var(--tr);
}
.archive-tabs a:hover { color: var(--c-ink); }
.archive-tabs a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* --- 作品一覧: 全幅1段積み(Illustratorデザイン準拠) ---
   画像フルブリード+右に六角バッジ。ホバー/フォーカスで
   グレー化+白タイトル中央表示。比率・バッジ寸法は本デザイン反映時に微調整。 */
.work-rows {
  list-style: none; padding: 0;
  margin: 0 calc(50% - 50vw);   /* コンテンツ幅を突き抜けて全幅に */
}
.work-row a { position: relative; display: block; }
.work-row .row-img { margin: 0; background: var(--c-white); }
.work-row .row-img img,
.work-row .thumb-empty {
  display: block; width: 100%;
  /* v1.43: 1.80:1 に確定(PC・SP共通)。
     旧2.75:1では4:3の写真の上下が半分(51%)切れていたため。
     1.80なら4:3で縦74%が残る。SP側の上書き指定は削除済み(比率はサイト内で1つ)。
     ※この比率は add_image_size('wtd-row', 2048, 1138, true) と対。
       片方だけ変えると生成済み画像と食い違うので必ず両方直すこと。 */
  aspect-ratio: 9 / 5;
  object-fit: cover;
  transition: filter var(--tr);
}
.work-row a:hover .row-img img,
.work-row a:focus-visible .row-img img {
  filter: grayscale(1) brightness(0.55);
}
.row-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
  opacity: 0; transition: opacity var(--tr);
  pointer-events: none;
  z-index: 2;   /* バッジより上に置き、タイトルが必ず前面に出るようにする */
}
.work-row a:hover .row-overlay,
.work-row a:focus-visible .row-overlay { opacity: 1; }
.row-title {
  color: var(--c-white);
  font-size: clamp(17px, 2vw, 24px);
  -webkit-text-stroke: var(--jp-stroke-mid) currentColor;
  text-align: center; line-height: 1.7;
}
/* --- 記事バッジ(kategori_taitle2_kage.png・2026-07-26 影付き版に変更) ---
   六角のclip-path仮組みから、支給の台紙画像+中央テキストへ変更。
   2026-07-26: 記事画像が白背景だと台紙が見えなくなる問題への対応として、
   影付き版(720×804・台紙自体は648×732で影の分だけキャンバスが大きい)に
   差し替え。影があるためどんな背景色の上でも輪郭が沈まず視認できる
   (背景色を判定してグレー版に切り替える方式も検討したが、記事ごとに
   背景色を自動判定する仕組みが別途必要になり保守コストが高いため、
   常に影付き1枚で済むこちらを採用。グレー版(kategori_taitle_G.png)も
   img/に置いてあるので、後で気が変わった場合は差し替えるだけでよい)。
   台紙比率(720/804)は.row-badge自体に持たせ(imgは絶対配置で全面フィット)、
   テキストは台紙(影を除いた実体部分)のジャストセンターに来るようにする。
   配置は画像に対して右下寄せ(下・右に少し余白)。 */
.row-badge {
  position: absolute; right: 4%; bottom: 6%;
  width: clamp(96px, 12vw, 168px);
  aspect-ratio: 720 / 804;
  transition: opacity var(--tr), filter var(--tr);
}
.row-badge-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.row-badge-text {
  position: absolute; left: 51.5%; top: 51.5%; /* 影が右下に伸びる分、台紙本体の中心は画像中心よりわずかに左上寄り */
  transform: translate(-50%, -50%);
  width: 74%;
  font-weight: var(--fw-en-bold);
  font-size: calc(clamp(11px, 1.15vw, 15px) * var(--en-scale));
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--c-gray);
  text-align: center;
}
.work-row a:hover .row-badge,
.work-row a:focus-visible .row-badge {
  opacity: 0.5;
  filter: grayscale(1);
}

/* ---------- Designヒーロー(2026-07-26 本実装 / 2026-07-26 全面修正 / 2026-07-26 再採寸) ----------
   kousiki_HP_2_2.jpg を実ピクセルで採寸(connected-component解析・目視のグリッド
   合わせではなく実測)して作り直した版。見本画像の実寸が1280px幅=サイトの
   コンテンツ幅(--w-content)と一致していたため、以後は「1280×660の仮想
   キャンバス」を1枚敷き、その上に3層ロゴ・カテゴリ文字・タイトル・
   黒ベタ2本をすべて絶対配置する方式にした(要素ごとに入れ子の基準箱を
   持たせていた旧方式は、基準がズレて事故の元になっていたため廃止)。
   微調整は各要素の%値をこの章だけで動かせばよい。 */
body.category-design .archive-page { padding-top: 0; } /* ヘッダー分の余白は.design-hero側で持つ(二重padding防止) */
.design-hero { padding-top: 150px; padding-bottom: var(--sp-4); }
/* 重要: .archive-page(padding-inline:pad-x) + .inner(padding-inline:pad-x)の
   二重paddingにより、そのままでは.dh-canvasの実効幅が約1075pxまで
   縮んでしまう(kousiki_HP_2_2.jpgの採寸基準=1280pxと不一致になる原因)。
   .work-rowsと同じ calc(50% - 50vw) 全幅ブリードで一旦ビューポート基準に
   戻し、内側の.dh-canvasだけをmax-width:1280pxで中央寄せする。 */
.dh-canvas-wrap { width: 100vw; margin-inline: calc(50% - 50vw); }
.dh-canvas {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1280 / 660;
  margin-inline: auto;
}
.dh-group { position: absolute; inset: 0; pointer-events: none; } /* 3層が全面で重なるため箱自体は無効化し、リンク部分だけ有効にする */
.dh-shape { position: absolute; display: block; aspect-ratio: 1164 / 1330; pointer-events: none; }
.dh-shape img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dh-shape-over { opacity: 0; transition: opacity var(--tr); }
/* オーバー画像・文字色の黒は「マウスが乗っている間だけ」(.is-over)。既定は常にグレー。 */
.dh-group.is-over .dh-shape-over { opacity: 1; }

/* 中心(50%,50%)を揃えた同心円状の入れ子配置(soto実測573px幅を基準にnaka/tyuouを算出) */
.dh-shape--soto  { left: 27.6%;  top: 0.5%;  width: 44.8%; }
.dh-shape--naka  { left: 34.7%;  top: 16.2%; width: 30.6%; }
.dh-shape--tyuou { left: 41.4%;  top: 31%;   width: 17.2%; }

.dh-label {
  position: absolute;
  color: var(--c-gray);
  transition: color var(--tr);
  line-height: 1.2;
  pointer-events: auto;
  white-space: nowrap;
}
/* 2026-07-26修正: 文字の黒は「その文字自身」がホバー/フォーカスされた時だけ
   (以前はグループ全体が対象になっており、Brand Designにホバーすると
   ALLまで黒くなる等の誤動作があった)。画像(soto/naka)の切替は引き続き
   グループ単位(JSのis-over)のままでよい。 */
.dh-label:hover,
.dh-label:focus-visible { color: var(--c-ink); }

.dh-label--brand {
  left: 14.1%; top: 20%;
  font-size: clamp(20px, 3.36vw, 43px);
  letter-spacing: 0.01em;
}
.dh-label--all     { left: 70.1%; top: 10.2%; font-size: clamp(20px, 3.36vw, 43px); letter-spacing: 0.03em; }
.dh-label--paper   { left: 61.8%; top: 31.2%; font-size: clamp(20px, 3.36vw, 43px); letter-spacing: 0.03em; }
.dh-label--logo    { left: 61.7%; top: 51.8%; font-size: clamp(20px, 3.36vw, 43px); letter-spacing: 0.03em; }
.dh-label--package { left: 28.1%; top: 45%;   font-size: clamp(20px, 3.36vw, 43px); letter-spacing: 0.03em; }
.dh-label--homepage{ left: 36.3%; top: 78.2%; font-size: clamp(20px, 3.36vw, 43px); letter-spacing: 0.03em; }
.dh-label--thought {
  left: 50.4%; top: 51.1%;
  transform: translate(-50%, -50%);
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: 0.06em;
  pointer-events: none;   /* 記事ができるまではリンクなし・装飾のみ */
}

/* 右側 黒ベタのコピー: 見本通り、1本の箱にまとめず独立した2本の縦長バー。
   幅・高さは実測(各76×340px@1280幅)に基づく固定めのプロポーション。
   フォントはTOPメインコピーと同じ太さ(--jp-stroke-strong)。
   2026-07-26修正: 文字はバー内で中央揃えではなく上揃えに(「ズレなく。」が
   短い分、中央揃えだと「あなたの想いを、」と書き出し位置がズレて見えていた)。
   文字サイズを少し拡大し、バー全体の位置も少し下へ。 */
.dh-copybar {
  position: absolute;
  top: 48%;
  width: 5.9%;
  height: 51.5%;
  background: var(--c-ink);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: clamp(19px, 2.5vw, 31px); /* dh-copy-lineと同じ値。padding-topのem基準をここで合わせる */
  padding-top: 1.15em; /* 2026-07-26修正: 文字一文字分ほど下げてほしいとのご指摘で0.6em→1.15em(このemが親の既定フォント基準になっていた不具合も合わせて修正) */
}
.dh-copybar--b { left: 81.5%; } /* ズレなく。(縦書き右→左の並びで左側の列) */
.dh-copybar--a { left: 88.4%; } /* あなたの想いを、(先に読む右側の列) */
.dh-copy-line {
  color: var(--c-white);
  font-size: clamp(19px, 2.5vw, 31px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 400;
  -webkit-text-stroke: var(--jp-stroke-strong) currentColor;
  margin: 0;
}
.dh-copy-line .pad { background: none; padding: 0; } /* TOPの白地パッドは不要(黒ベタ自体が地) */
.dh-copy-line .line { display: block; } /* WebKit対策: clip-pathはブロック化した行へ(TOPヒーローと同じ手法) */

/* タイトル(Design)・英字サブコピー: 見本通りキャンバス内に絶対配置。
   2026-07-26修正: 右のロゴアイコンは削除・タイトル位置を少し下へ */
.dh-title-en { position: absolute; left: 7.7%; top: 82%; }
.dh-title {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 82px);
}
.dh-subcopy { margin: 0.5em 0 0; white-space: nowrap; }

@media (max-width: 900px) {
  /* 2026-07-26 SP専用に作り直し(SP_img.jpgを実ピクセル採寸)。
     以前はPCのキャンバス(1280×660)をそのまま縮小するミニチュア表示に
     していたが、ご指示によりSPは専用レイアウトに変更:
     ・キャンバスの縦横比をSP用に変更(PCの1280×660のままでは縦に潰れ
       すぎて文字が入らない)
     ・Brand Designは3層ロゴの外に出し、独立した行として下に配置
     ・中心ロゴ(tyuou)を大きく、ALL・Brand Designの位置を変更
     ・コピー2本の位置・幅を見本に合わせる
     2026-07-31 全面修正: 前回、キャンバスの縦横比だけを縮めて3層ロゴの
     top%を据え置いたため、各層の中心がズレて「上にちょっとずつ全部が
     上がってる」状態になっていた(shapeの高さはwidth基準の固定pxだが、
     top%はキャンバスの高さが変わると意味が変わるため、縮小すると
     中心が合わなくなる)。今回は3層の中心を1点にそろえる計算をやり直し、
     ソト(外側)の幅も少し小さくして収まりを良くした。あわせて前回の
     140px圧縮がファーストビューでグレーが全面に見えない原因になって
     いたため、高さを戻し気味に調整。タイトル・コピーはヒーロー下寄りへ。 */
  /* 2026-08-02: Artヒーローと同じ上余白(150px)にして、四角枠・コピー2本・
     タイトルの位置をArtページと完全にそろえる(以前は95pxだったため
     Designだけ全体が約55px上にあり「同じ位置に見えない」状態だった)。 */
  .design-hero { padding-top: 150px; }
  .dh-canvas { aspect-ratio: 804 / 1200; max-width: 600px; }

  /* 3層ロゴ: 中心(50%, 25%)を1点にそろえて算出。
     重要: shapeの高さ%は「幅%×自身の縦横比」では出せない
     (幅%はキャンバス幅基準・高さ%はキャンバス高さ基準で分母が違うため)。
     正しくは 高さ% = 幅% × (1330/1164) × (キャンバス幅804/キャンバス高さ1200)。
     これを外していたため前回、3層の中心がバラバラになっていた。 */
  /* 2026-08-02: 全体を150%に拡大。あわせて3層の中心を(50%, 26%)へそろえ直した
     (Artページの5枚の中心と同じ点なので、両ページで四角枠の位置が一致する)。
     高さ% = 幅% × (1330/1164) × (804/1200) = 幅% × 0.76554 */
  .dh-shape--soto  { left: 8.75%;   top: -5.58%; width: 82.5%; }
  .dh-shape--naka  { left: 21.88%;  top: 4.47%;  width: 56.25%; }
  .dh-shape--tyuou { left: 34.18%;  top: 13.89%; width: 31.65%; }

  /* Paper/LOGO: 右端をそろえる指定(「rが右上角」「Oが右下角」)のため
     leftではなくrightで位置決めする方式に変更 */
  /* 2026-08-02: 図形の150%拡大に合わせ、文字も1.5倍(位置は中心(50%,26%)からの
     距離を1.5倍にして算出。Paper/Logoは従来通り右端そろえ)。
     2026-08-02追加: 文字だけ少し大きすぎたため0.85倍に縮小(1.5×0.85=1.275倍)。
     Logoは中の枠(naka)の右下角あたりまで少し下げた。 */
  .dh-label--paper    { left: auto; right: 17%; top: 5%;    font-size: clamp(20px, 6.63vw, 41px); }
  .dh-label--package  { left: 11%;  top: 18.5%; font-size: clamp(20px, 6.63vw, 41px); }
  .dh-label--logo     { left: auto; right: 17%; top: 26.5%; font-size: clamp(20px, 6.63vw, 41px); }
  .dh-label--thought  { left: 50%;  top: 26%;   font-size: clamp(13px, 3.3vw, 19px); } /* tyuouの中心と一致させた */
  .dh-label--homepage { left: 8%;   top: 42.5%; font-size: clamp(20px, 6.63vw, 41px); }
  .dh-label--all      { left: 72.5%; top: 41%;  font-size: clamp(20px, 6.63vw, 41px); }
  /* Brand Design: 拡大率どおりに置くと画面左外へ出てしまう(文字が切れる)ため、
     ここだけは比例配置をやめ、外枠(soto)の下の独立した行として左端に固定する。 */
  .dh-label--brand    { left: 5%;   top: 61%;   font-size: clamp(20px, 6.63vw, 41px); }

  .dh-copybar--b { left: 70.3%; }
  .dh-copybar--a { left: 82.5%; }
  /* コピー黒ベタ: 2026-08-02 バーの下端が左の英文コピーの下端と揃う位置まで
     全体を少し上へ(top 58%→52.5%。Artページも共通) */
  .dh-copybar    { top: 52.5%; height: 30%; width: 10.6%; font-size: clamp(14px, 3.6vw, 20px); }
  .dh-copy-line  { font-size: clamp(14px, 3.6vw, 20px); letter-spacing: 0.08em; }

  /* タイトル・コピー: 注釈画像を実測し、コピーの下端が黒バーの下端と
     揃う位置まで上げた */
  .dh-title-en { left: 7.5%; top: 74%; }
  .dh-title    { font-size: clamp(30px, 10vw, 44px); }
  .dh-subcopy  { font-size: clamp(11px, 3vw, 13px); white-space: normal; max-width: 60vw; }
}

/* --- 登場シーケンス(初回表示のみ・TOPヒーローと同じ手法) ---
   01 header(既存) → 02 タイトル+英字コピー → 03 黒ベタ2本: TOPの
   .hero-copy .main .line と全く同じ手法(秒数も同一=1.1s/1.8s・
   duration 0.9s)で、バーとその中の文字が1つの動きとして一緒にwipeで
   現れる(以前はバー→間を置いて文字フェイドの2段階にしていたが、
   TOPと出方が違って見えるとのご指摘で1motionに統一)。右(あなたの
   想いを、)が先、左(ズレなく。)が後 → 04 中心ロゴ(tyuou) → 中(naka)
   ロゴ+Paper/LOGO/PACKAGE/HOMEPAGEを時間差 → 05 外(soto)ロゴ+
   Brand Design/ALLを時間差 → 06 スクロールで下の記事がパラパラ表示
   (既存の.js-revealが.work-rowに対応済みのためJS追加不要)。 */
body.category-design .dh-title,
body.category-design .dh-subcopy { opacity: 0; }
body.category-design .dh-copybar { clip-path: inset(0 0 100% 0); }
body.category-design .dh-shape--tyuou, body.category-design .dh-label--thought,
body.category-design .dh-shape--naka,  body.category-design .dh-label--paper,
body.category-design .dh-label--logo,  body.category-design .dh-label--package,
body.category-design .dh-label--homepage,
body.category-design .dh-shape--soto,  body.category-design .dh-label--brand,
body.category-design .dh-label--all { opacity: 0; }

body.category-design .dh-title { animation: wtd-intro-fade 0.9s ease 0.1s both; }
body.category-design .dh-subcopy { animation: wtd-intro-fade 0.9s ease 0.4s both; }

/* TOPの .home .hero-copy .main .line と同一の値(1.1s/1.8s・duration0.9s) */
body.category-design .dh-copybar { animation: wtd-intro-wipe 0.9s ease-out both; }
body.category-design .dh-copybar--a { animation-delay: 1.1s; }  /* 右: あなたの想いを、のバーが先(TOPの1行目と同じ秒数) */
body.category-design .dh-copybar--b { animation-delay: 1.8s; }  /* 左: ズレなく。のバーは後(TOPの2行目と同じ秒数) */

body.category-design .dh-shape--tyuou    { animation: wtd-intro-fade 0.8s ease 3.0s both; }
body.category-design .dh-label--thought  { animation: wtd-intro-fade 0.8s ease 3.2s both; }
body.category-design .dh-shape--naka     { animation: wtd-intro-fade 0.8s ease 3.4s both; }
body.category-design .dh-label--paper    { animation: wtd-intro-fade 0.8s ease 3.5s both; }
body.category-design .dh-label--logo     { animation: wtd-intro-fade 0.8s ease 3.7s both; }
body.category-design .dh-label--package  { animation: wtd-intro-fade 0.8s ease 3.9s both; }
body.category-design .dh-label--homepage { animation: wtd-intro-fade 0.8s ease 4.1s both; }
body.category-design .dh-shape--soto     { animation: wtd-intro-fade 0.9s ease 4.4s both; }
body.category-design .dh-label--brand    { animation: wtd-intro-fade 0.9s ease 4.5s both; }
body.category-design .dh-label--all      { animation: wtd-intro-fade 0.9s ease 4.8s both; }

@media (prefers-reduced-motion: reduce) {
  body.category-design .dh-title,
  body.category-design .dh-subcopy,
  body.category-design .dh-shape--tyuou, body.category-design .dh-label--thought,
  body.category-design .dh-shape--naka,  body.category-design .dh-label--paper,
  body.category-design .dh-label--logo,  body.category-design .dh-label--package,
  body.category-design .dh-label--homepage,
  body.category-design .dh-shape--soto,  body.category-design .dh-label--brand,
  body.category-design .dh-label--all { animation: none !important; opacity: 1 !important; }
  /* 2026-08-02 修正: 以前はこの一括指定に clip-path: none が含まれていたため、
     視差効果オフ(reduce motion)のときだけ .dh-fill(ベタ面)のクリップまで消えて
     ベタ面が「四角いグレーの箱」になり、白線の枠からはみ出して見えていた。
     clip-path を消してよいのは黒ベタバーとその行だけ。 */
  body.category-design .dh-copybar,
  body.category-design .dh-copy-line .line { animation: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* --- NEWS一覧 --- */
.news-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.news-list li { border-bottom: 1px solid #cfcfcf; }
.news-list a { display: flex; gap: var(--sp-3); align-items: baseline; padding: 18px 0; }
.news-list .date { font-family: var(--font-en); font-size: var(--fs-small); color: var(--c-gray); flex-shrink: 0; }
.news-list .ttl { font-size: var(--fs-body); line-height: 1.7; }

/* --- ページ送り --- */
.archive-pagination { margin-top: var(--sp-5); }
.archive-pagination .nav-links {
  display: flex; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-en); font-size: calc(14px * var(--en-scale));
}
.archive-pagination .page-numbers {
  display: inline-block; min-width: 32px; text-align: center; padding: 4px 6px;
  color: var(--c-gray);
}
.archive-pagination .page-numbers.current { color: var(--c-ink); border-bottom: 2px solid var(--c-ink); }
.archive-pagination .page-numbers.dots { cursor: default; }
.archive-empty { font-size: var(--fs-body); }

/* --- 個別記事 ---
   2026-07-22: 画像は全幅ブリード(見本BLOG準拠)。戻りリンク・日付/カテゴリは
   本文の下へ移動。Design/Artの背景・文字色切替は body.wtd-cat-* 側で行う。 */
.single-page {
  max-width: 860px; margin: 0 auto;
  padding: 150px var(--pad-x) var(--sp-5);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.single-head { text-align: center; }
.single-head .entry-title {
  display: inline-block;
  max-width: 640px;    /* 2行になった時に横幅いっぱいまで広がらないよう抑える(自然な二行の角に) */
  text-align: left;    /* ブロック自体は中央寄せ・行内は左揃え(2行目が1行目の左端から続く) */
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.5; margin: 0 0 0.8em;
}
.single-page .entry-eyecatch,
.single-page .entry-content > figure,
.single-page .entry-content .wp-block-gallery {
  /* コンテンツ幅(860px)を突き抜けてビューポート全幅に(.work-rowsと同じ手法)
     ※ .carousel .item のような「本文内の直下ではないfigure」は対象外(直下子セレクタで除外)。
       本文内カルーセルの全幅化は専用ルール(.entry-content .carousel)側で行う。 */
  margin: var(--sp-3) calc(50% - 50vw);
}
.single-page .entry-eyecatch img,
.single-page .entry-content > figure img,
.single-page .entry-content .wp-block-gallery img {
  display: block; width: 100%; height: auto;
}
.single-page .entry-content > figure figcaption,
.single-page .entry-content .wp-caption-text {
  padding: var(--sp-2) var(--pad-x) 0;
  font-size: var(--fs-small); color: var(--c-gray); text-align: center;
}
.single-page .entry-content img, .single-page .entry-content iframe,
.page-fixed .entry-content img, .page-fixed .entry-content iframe { max-width: 100%; height: auto; }
.single-page .entry-content h2, .page-fixed .entry-content h2 { font-size: 1.3em; margin: 2.2em 0 0.8em; }
.single-page .entry-content h3, .page-fixed .entry-content h3 { font-size: 1.1em; margin: 2em 0 0.7em; }
.single-page .entry-content p, .page-fixed .entry-content p { margin: 0 0 1.4em; }
.single-page .entry-content a, .page-fixed .entry-content a { text-decoration: underline; }

/* --- 本文内の仕切り線(hr): 白基準の薄い線に(2026-07-23) ---
   既定のブラウザ標準hr(濃いグレーの立体線)は低温トーンと合わないため、
   白をベースにした控えめな線に統一する。Artは背景が黒いためその分濃さを上げる。 */
.single-page .entry-content hr, .page-fixed .entry-content hr {
  border: none; border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: var(--sp-4) 0;
}
body.single-post.wtd-cat-art .entry-content hr {
  border-top-color: rgba(255, 255, 255, 0.22);
}

/* --- 本文内で使える自前スライダー(Jetpack不要・2026-07-23) ---
   TOPのDesign/Artカルーセルと同じ .carousel をCustom HTMLブロックに貼るだけで、
   同じ矢印送り(main.js側は既に汎用 querySelectorAll(".carousel") のため追加JS不要)。
   ブログ本文用に全幅ブリード+トリミングしすぎない比率にしている。 */
.single-page .entry-content .carousel {
  margin: var(--sp-4) calc(50% - 50vw) 0;
  padding-inline: var(--pad-x);
}
.single-page .entry-content .carousel .track { grid-auto-columns: minmax(240px, 62%); }
.single-page .entry-content .carousel .item img { aspect-ratio: 4 / 3; }
@media (max-width: 768px) {
  .single-page .entry-content .carousel .track { grid-auto-columns: 78%; }
}
/* --- 本文内のギャラリー(WP標準の「ギャラリー」・Tiled Gallery)を全幅に(2026-07-23) ---
   これらはJSでの位置計算を持たない単純なCSSレイアウトなので、!important上書きで安全に全幅化できる。
   それでも小さいまま/崩れる場合、原因の多くは「挿入時の画像サイズが小さい(サムネイル等)」
   ことによるものなので、編集画面で画像サイズを「大」または「フルサイズ」にして挿入し直すと解決する。 */
.single-page .entry-content .gallery,
.single-page .entry-content .tiled-gallery,
.single-page .entry-content .wp-block-gallery {
  width: 100% !important; max-width: 100% !important;
  margin: var(--sp-3) calc(50% - 50vw) !important;
}
.single-page .entry-content .gallery-item,
.single-page .entry-content .tiled-gallery-item,
.single-page .entry-content .gallery img,
.single-page .entry-content .tiled-gallery img {
  width: 100% !important; height: auto !important; max-width: 100% !important;
}

/* --- 本文内のJetpackスライドショー: 全幅化はやめて中央寄せに(2026-07-23) ---
   Jetpackのスライドショーは内部でSwiper.jsが「1枚あたりの幅×枚数」を
   px単位で厳密に計算し、スライドを送るtransformもその数値に依存している。
   そこにCSSでwidth:100%等を強制すると、その計算と食い違って表示が崩れる
   (前回入れていた !important の幅指定はここが原因だったため撤去した)。
   ここでは中身のサイズ計算には一切触れず、ブロック自体を中央寄せするだけに留める。 */
.single-page .entry-content .wp-block-jetpack-slideshow {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- 本文の下: 戻りリンク+日付/カテゴリ(見本BLOG準拠で下段に移動) --- */
.single-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid #cfcfcf;
  font-size: var(--fs-small);
}
.single-back { color: var(--c-gray); transition: color var(--tr); }
.single-back:hover { color: var(--c-ink); }
.single-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.single-meta .date { font-family: var(--font-en); font-size: var(--fs-small); color: var(--c-gray); }
.single-meta .cat {
  font-size: 12px; color: var(--c-gray);
  border: 1px solid #cfcfcf; padding: 2px 10px;
  transition: color var(--tr), border-color var(--tr);
}
.single-meta .cat:hover { color: var(--c-ink); border-color: var(--c-gray); }

/* --- Blog記事テンプレ: ヘッダー色+背景(Design=f1f1f1のまま/Art=黒反転) ---
   2026-07-22 修正:
   ・Design側の背景を白→#f1f1f1(var(--c-base))に戻した(サイト全体の基調と合わせる)
   ・文字色の反転は body ではなく .single-page 側だけに限定。
     bodyに掛けていた頃はSPフルスクリーンメニューの通常項目(NEWS/About/Design/Art/Contact等、
     色指定なしでbodyから白を継承)がメニュー背景(常にc-base=明るい)と同化して見えなくなる
     事故があったため、その原因を断つ(メニュー自体は今後もDesign/Art問わず明るい背景・黒文字で固定)。
   ・Artはヘッダー・フッターの背景も黒にする(ロゴはheader.php側でTOP_header_logo_Art.pngに差し替え済み)。 */
body.single-post .site-header,
body.single-post .site-header.scrolled { background: var(--c-base); }
body.single-post { background: var(--c-base); }
body.single-post.wtd-cat-art { background: var(--c-art); }
body.single-post.wtd-cat-art .single-page { color: var(--c-art-text); }
body.single-post.wtd-cat-art .single-nav { border-top-color: #4a4340; }
body.single-post.wtd-cat-art .single-foot { border-top-color: #4a4340; }
body.single-post.wtd-cat-art .single-meta .cat { border-color: #4a4340; }

/* Art: ヘッダー背景も黒+ハンバーガーの3本線を白に(黒背景での視認性確保) */
body.single-post.wtd-cat-art .site-header,
body.single-post.wtd-cat-art .site-header.scrolled { background: var(--c-art); }
body.single-post.wtd-cat-art .menu-btn span { background: var(--c-art-text); }

/* Art: フッターの背景も黒に(ロゴ画像は元が濃色のためinvertで応急対応。
   専用の白ロゴ素材が届き次第、footer.php側の画像差し替えに切替可) */
body.single-post.wtd-cat-art .site-footer { background: var(--c-art); color: var(--c-art-text); }
body.single-post.wtd-cat-art .site-footer .footer-logo img { filter: invert(1) brightness(1.8); }
body.single-post.wtd-cat-art .footer-grid > * + * { border-left-color: #4a4340; }
body.single-post.wtd-cat-art .sns-icons a { color: var(--c-art-text); }
body.single-post.wtd-cat-art .search-row input { color: var(--c-ink); } /* 入力欄は白のまま維持 */

/* 固定ページ本文: タイトル(一覧と同位置)の下に、ブログ記事と同じ860px幅で置く */
.page-fixed .entry-content {
  max-width: 860px; margin: 0 auto;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.single-nav {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3);  /* 1行で収まる時はこの余白で十分(2026-07-23) */
  border-top: 1px solid #cfcfcf;
  font-size: var(--fs-small);
}
.single-nav.is-roomy { margin-top: var(--sp-5); }  /* カテゴリが多く2行になった時だけ広げる(main.jsが判定) */
.single-nav .next { text-align: right; margin-left: auto; }
.single-nav a { color: var(--c-gray); transition: color var(--tr); }
.single-nav a:hover { color: var(--c-ink); }

@media (max-width: 768px) {
  .archive-page, .single-page { padding-top: 120px; }
  .row-badge { right: 5%; width: clamp(96px, 24vw, 140px); }
  /* v1.43: SPの比率上書き(830/460)は削除。PCと同じ 9/5 に統一した。
     PC/SPで比率が違うと「PCでは成立するがSPで崩れる」記事が別種の確認対象になるため。 */
  .news-list a { flex-direction: column; gap: 4px; }

  /* v1.44: SPの記事本文のみ 15px→16px。行送りは1.9→1.85でわずかに詰める
     (文字を上げた分だけ行間が開くのを吸収し、ブロック全体の印象を変えない)。
     --fs-body 自体は触らない。触るとNEWS一覧・カルーセル等へ波及するため、
     記事ページのSP表示だけに限定している。
     参考: X(SNS)の本文も15pxだが行送りが約1.3のため、同じ字面でも大きく見える。 */
  .single-page { font-size: 16px; line-height: 1.85; }
}



/* ============================================================
   Artヒーロー + Designヒーローのベタ面 (2026-08-01 追加)
   ------------------------------------------------------------
   ・図形はすべてCSSのclip-pathで描画(画像の追加なし)。
     MARK = WTDロゴマークの形(外形+中の抜き)、HEX = 外形だけの六角。
   ・Artは 収束 → 呼吸 → スクロールでほどける の3段。
     ほどけ具合はJS(main.js 4.9)がキャンバスに --p (0〜1) を渡し、
     各面のtransformがそれを掛け算しているだけ。動く量を変えたい時は
     下の .ah-shape--n の transform のpx値だけを動かせばよい。
   ・Designのベタ面は「読み込み時に一度だけ収束→以降静止」。
     濃さは .dh-fill の背景アルファ(既定0.06=6%)。
   ============================================================ */

@keyframes wtd-fill-conv-a { from { transform: translate(-22%,-16%) rotate(-26deg) scale(1.55); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes wtd-fill-conv-b { from { transform: translate(20%,14%) rotate(22deg) scale(1.4); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes wtd-fill-conv-c { from { transform: translate(-14%,20%) rotate(18deg) scale(0.6); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes wtd-fill-conv-d { from { transform: translate(16%,-18%) rotate(-14deg) scale(0.7); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes wtd-art-core { from { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes wtd-art-breathe   { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.055) rotate(2.2deg); } }
@keyframes wtd-art-breathe-r { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.955) rotate(-2.8deg); } }
@keyframes wtd-art-glow { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } }

/* ---- Artヒーローの黒帯(ヘッダー下の余白ごと全幅で塗る) ----
   .archive-pageの上余白(150px)は黒帯の内側に取り込むので0にする */
body.category-art .archive-page { padding-top: 0; }
.art-hero {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--c-art);
  padding: 150px 0 var(--sp-4);
}
.ah-canvas { position: relative; }
.ah-stack { position: absolute; inset: 0; pointer-events: none; }
.ah-shape { position: absolute; display: block; }
.ah-shape i { display: block; width: 100%; height: 100%; clip-path: polygon(64% 0%, 99.3% 25%, 99.3% 54.4%, 35.4% 98.8%, 0% 74.4%, 0% 45%, 62.9% 30.6%, 22.1% 59.4%, 35% 68.8%, 36.4% 68.8%, 77.1% 40%, 64.3% 30.6%, 62.9% 30.6%, 0% 45%); }

/* 中心(50%,50%)にそろえた同心の5枚。
   高さ% = 幅% × 1.1426(マークの縦横比) × (1280/660 キャンバス換算) */
.ah-shape--1 { left: 27.60%; top: 0.35%;  width: 44.8%; height: 99.3%; transform: translate3d(calc(var(--p,0) * -90px), calc(var(--p,0) * -26px), 0) rotate(calc(var(--p,0) * -7deg))  scale(calc(1 + var(--p,0) * 0.14)); }
.ah-shape--2 { left: 33.00%; top: 12.30%; width: 34.0%; height: 75.3%; transform: translate3d(calc(var(--p,0) *  70px), calc(var(--p,0) *  34px), 0) rotate(calc(var(--p,0) *  6deg))  scale(calc(1 + var(--p,0) * 0.10)); }
.ah-shape--3 { left: 37.25%; top: 21.75%; width: 25.5%; height: 56.5%; transform: translate3d(calc(var(--p,0) * -46px), calc(var(--p,0) *  44px), 0) rotate(calc(var(--p,0) *  9deg)); }
.ah-shape--4 { left: 41.00%; top: 30.05%; width: 18.0%; height: 39.9%; transform: translate3d(calc(var(--p,0) *  36px), calc(var(--p,0) * -52px), 0) rotate(calc(var(--p,0) * -11deg)); }
.ah-shape--5 { left: 44.75%; top: 38.35%; width: 10.5%; height: 23.3%; transform: translate3d(0, calc(var(--p,0) * -18px), 0) scale(calc(1 + var(--p,0) * 0.5)); }

/* 面の色(黒帯の上での重なりの濃度)。数値を触るのはここだけでよい */
.ah-shape--1 i { background: rgba(241,241,241,0.055); }
.ah-shape--2 i { background: rgba(214,182,170,0.11); }
.ah-shape--3 i { background: rgba(233,205,193,0.17); }
.ah-shape--4 i { background: rgba(244,226,216,0.32); }
.ah-shape--5 i { background: rgba(255,246,240,0.94); }

/* 登場(収束)→ 呼吸。秒数はDesignの登場シーケンスと同じ考え方で、
   タイトル→コピー2本→図形の順に出るよう3.0s以降に置いている */
body.category-art .ah-shape--1 i { animation: wtd-fill-conv-a 1.6s cubic-bezier(0.16,1,0.3,1) 3.0s both, wtd-art-breathe   5.2s ease-in-out 4.8s infinite; }
body.category-art .ah-shape--2 i { animation: wtd-fill-conv-b 1.6s cubic-bezier(0.16,1,0.3,1) 3.3s both, wtd-art-breathe-r 4.4s ease-in-out 5.1s infinite; }
body.category-art .ah-shape--3 i { animation: wtd-fill-conv-c 1.6s cubic-bezier(0.16,1,0.3,1) 3.6s both, wtd-art-breathe   3.6s ease-in-out 5.4s infinite; }
body.category-art .ah-shape--4 i { animation: wtd-fill-conv-d 1.6s cubic-bezier(0.16,1,0.3,1) 3.9s both, wtd-art-breathe-r 3.2s ease-in-out 5.7s infinite; }
body.category-art .ah-shape--5 i { animation: wtd-art-core    1.2s cubic-bezier(0.16,1,0.3,1) 4.2s both, wtd-art-glow      2.4s ease-in-out 5.6s infinite; }

/* ---- Artの白ベタコピー・タイトル(位置と動きはDesignと共通・色だけ反転) ---- */
body.category-art .dh-copybar { background: var(--c-white); }
/* 2026-08-02: Artの1行目「内側にある感覚を、」はDesignの「あなたの想いを、」より
   1文字長く、PCだけ1列に収まらず2列に折り返っていたので、バーの高さを伸ばし
   (51.5%→55%)、上側の余白を少し詰めて文字の入る長さを確保した。 */
body.category-art .dh-copybar { top: 45%; height: 55%; padding-top: 0.85em; }
body.category-art .dh-copy-line { color: var(--c-ink); }
body.category-art .dh-title { color: var(--c-art-text); }
body.category-art .dh-subcopy { color: #cfc6c2; }

body.category-art .dh-title,
body.category-art .dh-subcopy { opacity: 0; }
body.category-art .dh-copybar { clip-path: inset(0 0 100% 0); animation: wtd-intro-wipe 0.9s ease-out both; }
body.category-art .dh-copybar--a { animation-delay: 1.1s; }
body.category-art .dh-copybar--b { animation-delay: 1.8s; }
body.category-art .dh-title   { animation: wtd-intro-fade 0.9s ease 0.1s both; }
body.category-art .dh-subcopy { animation: wtd-intro-fade 0.9s ease 0.4s both; }

/* ---- Artの記事一覧: 選択時は白透過+タイトル黒(Designは黒透過+白文字) ---- */
body.category-art .work-row a:hover .row-img img,
body.category-art .work-row a:focus-visible .row-img img { filter: grayscale(1) brightness(1.18); }
body.category-art .row-overlay { background: rgba(255,255,255,0.62); }
body.category-art .row-title { color: var(--c-ink); }

/* ---- Designヒーローのベタ面(線画はそのまま・面だけが最初に一度収束) ---- */
.dh-fill { background: rgba(35,24,21,0.06); clip-path: polygon(64.3% 0%, 99.6% 24.5%, 99.6% 55.4%, 35.8% 99.9%, 0% 75.3%, 0% 44.4%); }
body.category-design .dh-fill.dh-shape--tyuou { animation: wtd-fill-conv-d 1.7s cubic-bezier(0.16,1,0.3,1) 3.2s both; }
body.category-design .dh-fill.dh-shape--naka  { animation: wtd-fill-conv-c 1.7s cubic-bezier(0.16,1,0.3,1) 3.6s both; }
body.category-design .dh-fill.dh-shape--soto  { animation: wtd-fill-conv-a 1.7s cubic-bezier(0.16,1,0.3,1) 4.6s both; }

@media (max-width: 900px) {
  /* SP: キャンバスがDesignと同じ804/1200になるため、5枚の中心を(50%, 26%)に
     そろえ直す。高さ% = 幅% × 1.1426 × (804/1200) = 幅% × 0.76554
     2026-08-02: 全体を150%拡大。あわせて中心が下にズレていた(1枚目と25枚目で
     中心がバラバラだった)のを、全枚同じ中心になるよう計算し直した。 */
  .ah-shape--1 { left:  8.00%; top: -6.16%; width: 84.0%; height: 64.31%; }
  .ah-shape--2 { left: 18.50%; top:  1.88%; width: 63.0%; height: 48.23%; }
  .ah-shape--3 { left: 26.75%; top:  8.20%; width: 46.5%; height: 35.60%; }
  .ah-shape--4 { left: 33.50%; top: 13.37%; width: 33.0%; height: 25.26%; }
  .ah-shape--5 { left: 40.25%; top: 18.54%; width: 19.5%; height: 14.93%; }

  /* SPはDesignと同じ共通値(top58%/height30%)に戻す
     (下のPC用の高さ拡大はSPには不要なため) */
  body.category-art .dh-copybar { top: 52.5%; height: 30%; padding-top: 1.15em; }
}

@media (prefers-reduced-motion: reduce) {
  body.category-art .dh-title,
  body.category-art .dh-subcopy,
  .ah-shape i,
  .dh-fill { animation: none !important; opacity: 1 !important; transform: none !important; }
  body.category-art .dh-copybar { animation: none !important; clip-path: none !important; }
  .ah-shape { transform: none !important; }
}


/* ============================================================
   2026-08-02 実装後の修正
   ============================================================ */

/* ---- 1. Artカテゴリ一覧ページを、Art記事ページと同じ黒背景の
           ヘッダー・フッターにそろえる ----
   ロゴ画像の差し替え(TOP_header_logo_Art.png)はheader.php側で対応済み。
   スクロール後に通常色(白/c-base)に戻ってしまうのを防ぐため、
   .scrolled 側も必ず黒で上書きする(PC・SP共通)。 */
body.category-art .site-header,
body.category-art .site-header.scrolled { background: var(--c-art); }
body.category-art .menu-btn span { background: var(--c-art-text); }

body.category-art .site-footer { background: var(--c-art); color: var(--c-art-text); }
body.category-art .site-footer .footer-logo img { filter: invert(1) brightness(1.8); }
body.category-art .footer-grid > * + * { border-left-color: #4a4340; }
body.category-art .sns-icons a { color: var(--c-art-text); }
body.category-art .search-row input { color: var(--c-ink); } /* 入力欄は白のまま維持 */
body.category-art .footer-logo { border-bottom-color: #4a4340; } /* SPのロゴ下区切り線 */

/* ---- 2. Artのフッターのみ: Storeボタンを #c7c8ca に ---- */
body.category-art .footer-links .chip--ink,
body.single-post.wtd-cat-art .footer-links .chip--ink { background: #c7c8ca; color: var(--c-ink); }

/* ---- 2b. Artのページ送り(フッター直上)もArt仕様の黒背景+白文字に ----
   2026-08-02修正: 帯だけを黒くしていたため、その上下(記事一覧の下の余白と
   フッターまでの余白)にグレーの地が残っていた。Artページは記事ページと同様に
   ページ全体の地を黒にする(記事一覧は画像が主なので影響なし)。 */
body.category-art { background: var(--c-art); }
body.category-art .archive-empty { color: var(--c-art-text); }
body.category-art .archive-pagination .page-numbers { color: #a89f9a; }
body.category-art .archive-pagination .page-numbers.current { color: var(--c-art-text); border-bottom-color: var(--c-art-text); }

/* ---- 2c. Art画面(一覧・記事)のときだけ、SPのフルスクリーンMENUも反転 ----
   背景=黒 / 文字=白 / 区切り線はそのまま(白) / 左のロゴはArt用の白ロゴ
   (header.php側で差し替え済み) / 右上の×は .menu-btn span が白なので対応済み。 */
body.category-art .gnav,
body.single-post.wtd-cat-art .gnav { background: var(--c-art); color: var(--c-art-text); }
body.category-art .gnav a,
body.single-post.wtd-cat-art .gnav a { color: var(--c-art-text); }
body.category-art .gnav .sub a,
body.single-post.wtd-cat-art .gnav .sub a { color: #a89f9a; }

/* ---- 2d. MENU(PC)のマウスオーバー: 選択中の項目が分かるよう文字色を #c7c8ca に ---- */
.gnav a:hover,
.gnav a:focus-visible { color: #c7c8ca; }

/* ---- 3. Design: カテゴリをクリックした後は「今選んでいる状態」を保ったままに ----
   ・選択中の文字は黒(aria-currentはPHP側で付与済み)
   ・そのグループのオーバー画像(濃めの枠)を出したままに(is-current)
   ・登場アニメーション(Bの収束を含む)は再生しない
     (html.wtd-no-intro は、直前にカテゴリ文字をクリックしたときだけ
      header.phpの先頭スクリプトが付与する。通常の再読み込みでは従来通り動く) */
.dh-group--mid.is-current .dh-shape-over { opacity: 1; }
html.wtd-no-intro .dh-group.is-current .dh-shape-over { opacity: 1; }
.dh-label[aria-current="page"]:not(.dh-label--all),
html.wtd-no-intro .dh-label[aria-current="page"] { color: var(--c-ink); }

html.wtd-no-intro body.category-design .dh-title,
html.wtd-no-intro body.category-design .dh-subcopy,
html.wtd-no-intro body.category-design .dh-shape--tyuou,
html.wtd-no-intro body.category-design .dh-shape--naka,
html.wtd-no-intro body.category-design .dh-shape--soto,
html.wtd-no-intro body.category-design .dh-fill { animation: none !important; opacity: 1 !important; transform: none !important; }
/* .dh-label--thought は translate(-50%,-50%) で中心合わせしているため transform は触らない */
html.wtd-no-intro body.category-design .dh-label { animation: none !important; opacity: 1 !important; }
html.wtd-no-intro body.category-design .dh-copybar { animation: none !important; clip-path: none !important; }


/* ============================================================
   v1.38(2026-08-02)
   ============================================================ */

/* ---- 1. Art画面のMENU(PC)でマウスオーバーが効いていなかった件 ----
   原因: 下の2行の詳細度の差。
     body.category-art .gnav a  … クラス2つ+要素2つ
     .gnav a:hover              … クラス1つ+擬似クラス1つ+要素1つ
   Art側の色指定の方が強く、既存の .gnav a:hover が上書きされて
   「ホバーしても色が変わらない」状態になっていた(=効いていなかった)。
   Art画面は白文字なので、ホバーでは逆に一段沈める(#a89f9a)。
   サブメニュー(既に沈んだ色)はホバーで明るくして向きをそろえる。 */
body.category-art .gnav a:hover,
body.category-art .gnav a:focus-visible,
body.single-post.wtd-cat-art .gnav a:hover,
body.single-post.wtd-cat-art .gnav a:focus-visible { color: #a89f9a; }

body.category-art .gnav .sub a:hover,
body.category-art .gnav .sub a:focus-visible,
body.single-post.wtd-cat-art .gnav .sub a:hover,
body.single-post.wtd-cat-art .gnav .sub a:focus-visible { color: var(--c-art-text); }

/* ついでの整合(不要ならこの4行を削除すればv1.37の状態に戻ります):
   Art画面はヘッダー背景が黒のため、Storeチップ(黒地)が背景に溶けていた。
   フッターのStoreボタンと同じ #c7c8ca にそろえる。 */
body.category-art .gnav .chip,
body.single-post.wtd-cat-art .gnav .chip { background: #c7c8ca; color: var(--c-ink); }
body.category-art .gnav .chip:hover,
body.single-post.wtd-cat-art .gnav .chip:hover { color: var(--c-ink); opacity: 0.8; }

/* ---- 2. NEWS記事の画像が幅いっぱいにならない件 ----
   どのブロックが「単独で置かれた画像」かの判定は、HTMLの構造を見ないと
   分からないため functions.php の8章で行い、該当ブロックに wtd-media を付けている。
   ここはそれを全幅にするだけ。旧記事のwp-captionにはstyle="width:310px"のような
   実寸がインラインで書かれているため、そこだけ !important で上書きする。
   v1.41: 直下(>)に戻した。v1.39で外した結果、Jetpackスライドショーの中の
   スライド1枚1枚にまで全幅指定が当たり、スライダーが壊れていたため。
   どのブロックが対象かの判定はPHP側(8章)が本文の一番外側だけを見て行うので、
   ここは直下限定で正しく当たる。 */
.single-page .entry-content > .wtd-media {
  margin: var(--sp-3) calc(50% - 50vw);
  width: auto !important;
  max-width: none !important;
}
.single-page .entry-content > .wtd-media > a { display: block; }
.single-page .entry-content > .wtd-media img {
  display: block; width: 100%; height: auto;
}
.single-page .entry-content > .wtd-media .wp-caption-text,
.single-page .entry-content > .wtd-media figcaption {
  padding: var(--sp-2) var(--pad-x) 0;
  font-size: var(--fs-small); color: var(--c-gray); text-align: center;
}

/* ---- 3. NEWS一覧: マウスオーバーで行が薄く浮くように ----
   左右のpaddingとmarginを同値で相殺しているため、文字の位置は今までと1pxも変わらない。
   帯の濃さを変えたい場合は下の rgba の最後の数値(0.55)だけ動かす。 */
.news-list a {
  padding: 18px 12px; margin: 0 -12px;
  transition: background-color var(--tr);
}
.news-list a:hover,
.news-list a:focus-visible { background-color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   v1.46: 記事内の動画の表示
   ------------------------------------------------------------
   これまで動画は max-width:100% しか指定がなく、記事HTMLに残った
   width / height 属性(旧エディタの埋め込みは 425px や 640px 固定)が
   そのまま効いていた。そのため
     ・本文幅に対して極端に小さく表示される
     ・入れ物の幅が固定されているため、中央揃えを指定しても左に寄る
   という状態になっていた。ここで幅の固定を解除し、本文幅いっぱい・
   中央揃えに戻す。

   なお動画はフルブリード(画面幅いっぱい)にはしない。functions.php の
   構造判定で iframe / video を含むブロックは全幅化の対象外にしてあり、
   本文幅のまま中央に置く方針(v1.42の割り切りを維持)。
   ============================================================ */

/* --- 1. 埋め込み動画(YouTube・Vimeo)本体 ---
   16:9で本文幅いっぱいに。src で対象を絞っているため、地図など
   動画以外のiframeには影響しない。 */
.single-page .entry-content iframe[src*="youtube"],
.single-page .entry-content iframe[src*="youtu.be"],
.single-page .entry-content iframe[src*="vimeo"],
.page-fixed .entry-content iframe[src*="youtube"],
.page-fixed .entry-content iframe[src*="youtu.be"],
.page-fixed .entry-content iframe[src*="vimeo"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
}

/* --- 2. 埋め込みの外側の入れ物 ---
   Jetpack(.embed-youtube / .jetpack-video-wrapper)、ブロックエディタ
   (.wp-block-embed)、旧エディタ(.video-container 等)が幅をインラインで
   持っている場合、1番の指定だけでは中央に来ないため入れ物側も解除する。 */
.single-page .entry-content .embed-youtube,
.single-page .entry-content .embed-vimeo,
.single-page .entry-content .jetpack-video-wrapper,
.single-page .entry-content .wp-block-embed,
.single-page .entry-content .wp-block-embed__wrapper,
.single-page .entry-content .video-container,
.page-fixed .entry-content .embed-youtube,
.page-fixed .entry-content .embed-vimeo,
.page-fixed .entry-content .jetpack-video-wrapper,
.page-fixed .entry-content .wp-block-embed,
.page-fixed .entry-content .wp-block-embed__wrapper,
.page-fixed .entry-content .video-container {
  display: block;
  width: 100% !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* --- 3. アップロードした動画([video]ショートコード / mediaelement) ---
   .wp-video は style="width:640px" のように幅が直接書き込まれるため
   !important で解除する。高さはアスペクト比で決める。 */
.single-page .entry-content .wp-video,
.page-fixed .entry-content .wp-video {
  width: 100% !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.single-page .entry-content .mejs-container,
.page-fixed .entry-content .mejs-container {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  background: transparent;
}
.single-page .entry-content .mejs-overlay,
.single-page .entry-content .mejs-poster,
.single-page .entry-content .mejs-mediaelement,
.page-fixed .entry-content .mejs-overlay,
.page-fixed .entry-content .mejs-poster,
.page-fixed .entry-content .mejs-mediaelement {
  width: 100% !important;
  height: 100% !important;
}
.single-page .entry-content video,
.page-fixed .entry-content video {
  display: block;
  width: 100% !important;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.single-page .entry-content .mejs-mediaelement video,
.page-fixed .entry-content .mejs-mediaelement video {
  height: 100% !important;
  object-fit: contain;
}

/* ============================================
   note誘導(記事下)  2026-08-26 / v1.47
   出力は functions.php 10章 + single.php。
   本文(.entry-content)の外にあるため、本文画像の全幅化・
   srcset差し替え(8章)の対象にならない。最大幅はカスタマイザーの
   数値がインラインの --wtd-note-maxw として渡ってくる。
   文字色は指定しない(.single-page から継承 → Art記事の反転にも自動で追従)。
   ============================================ */
.wtd-note-cta {
  max-width: var(--wtd-note-maxw, 520px);
  margin: var(--sp-4) auto 0;
  text-align: center;
}
.wtd-note-cta__lead {
  margin: 0 0 1.1em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.wtd-note-cta__link {
  display: block;
  transition: opacity var(--tr);
}
.wtd-note-cta__link:hover { opacity: 0.75; }
.wtd-note-cta__link img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* バナー未選択のときの控えの導線 */
.wtd-note-cta__text { margin: 0; font-size: var(--fs-body); }
.wtd-note-cta__text a { text-decoration: underline; }

@media (max-width: 767px) {
  /* SPでは画面幅の方が先に効くため、最大幅の指定は上限としてだけ働く */
  .wtd-note-cta { margin-top: var(--sp-3); }
}

/* ============================================
   Art子カテゴリ一覧(2026-08-29 / v1.50)

   /art-calligraphy/ など、Artの子カテゴリの一覧が白背景のままだった問題。
   黒背景の指定が body.category-art(スラッグ由来のクラス)を見ていたため、
   子カテゴリでは一致していなかった。

   functions.php 11-1 で body に wtd-art-screen を付け、ここで色だけ当てる。
   ヒーローは無いので上余白は通常のまま(padding-topは0にしない)。
   ============================================ */
body.wtd-art-screen { background: var(--c-art); }
body.wtd-art-screen .archive-page { color: var(--c-art-text); }
body.wtd-art-screen .archive-title { color: var(--c-art-text); }

body.wtd-art-screen .site-header,
body.wtd-art-screen .site-header.scrolled { background: var(--c-art); }
body.wtd-art-screen .menu-btn span { background: var(--c-art-text); }

body.wtd-art-screen .site-footer { background: var(--c-art); color: var(--c-art-text); }
body.wtd-art-screen .site-footer .footer-logo img { filter: invert(1) brightness(1.8); }
body.wtd-art-screen .footer-grid > * + * { border-left-color: #4a4340; }
body.wtd-art-screen .sns-icons a { color: var(--c-art-text); }
body.wtd-art-screen .search-row input { color: var(--c-ink); }

/* 一覧のホバー: /art/ と同じ挙動にそろえる */
body.wtd-art-screen .work-row a:hover .row-img img,
body.wtd-art-screen .work-row a:focus-visible .row-img img { filter: grayscale(1) brightness(1.18); }
body.wtd-art-screen .row-overlay { background: rgba(255,255,255,0.62); }
body.wtd-art-screen .row-title { color: var(--c-ink); }

body.wtd-art-screen .archive-pagination .page-numbers { color: var(--c-art-text); }
body.wtd-art-screen .archive-empty { color: var(--c-art-text); }