/*
 * WordPress で増える部分だけの見た目（静的版の CSS は assets/css）
 * - Contact Form 7 が足す要素（隠しフィールド・エラー表示・送信中の表示）
 * - フォームの確認・完了ページ
 * - お知らせの本文（管理画面で書いた <p> を静的版の .pg-body と同じに）
 */

/* ---------- Contact Form 7 ---------- */
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .screen-reader-response {
  position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important;
}
.wpcf7-form-control-wrap { position: relative; display: block; min-width: 0; }
/* 静的版では入力欄が .pg-field（grid）の直下でブロックになる。CF7 の包みの中でも同じに（行の下のすき間をなくす） */
.wpcf7-form-control-wrap > :is(input, select, textarea) { display: block; }
.pg-file .wpcf7-form-control-wrap { position: static; display: contents; }
.wpcf7-list-item { display: block; margin: 0; }
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5em;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(var(--pg-small) * var(--u)), 13px);
  font-weight: 500;
  color: #ff8a9a;
}
.pg-field--row .wpcf7-not-valid-tip { white-space: nowrap; }
.pg-input.wpcf7-not-valid, .pg-select.wpcf7-not-valid, .pg-textarea.wpcf7-not-valid { border-color: #ff8a9a; }
.wpcf7-spinner { display: none; }
.wpcf7 form .wpcf7-response-output { display: none; }
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
  display: block;
  margin: 0;
  padding: 1em 1.2em;
  border: 1px solid rgba(255, 138, 154, 0.6);
  border-radius: 3px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(var(--pg-small) * var(--u)), 14px);
  font-weight: 500;
  color: #ff8a9a;
}
.wpcf7 form.submitting .pg-submit { opacity: 0.6; pointer-events: none; }
/* 送信ボタンの形（.pg-submit）の中のリンク（完了ページ・入力に戻る） */
a.pg-submit__input { display: flex; align-items: center; color: inherit; text-decoration: none; }

/* ---------- 確認ページ ---------- */
.pg-form__intro { margin: 0; }
.pg-confirm { margin: 0; border-top: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 18%, transparent); }
.pg-confirm__row {
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  gap: 0.4em 2em;
  padding: 1.1em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 18%, transparent);
}
.pg-confirm dt {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(var(--pg-small) * var(--u)), 14px);
  font-weight: 500;
  color: color-mix(in srgb, var(--pg-ink, #fff) 75%, transparent);
}
.pg-confirm dd {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(var(--pg-body) * var(--u)), var(--pg-body-cap));
  font-weight: 500;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--pg-ink, #fff) 92%, transparent);
}
@media (max-width: 767px) { .pg-confirm__row { grid-template-columns: 1fr; } }
.pg-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(16 * var(--u)); }
.pg-submit--back svg { order: -1; }
@media (max-width: 720px) { .pg-form__actions { flex-direction: column-reverse; } }

/* ---------- 完了ページ ---------- */
.pg-form--done { justify-items: start; }
.pg-form--done .pg-h3 { margin: 0; }

/* ---------- お知らせの本文（管理画面で書いた段落） ---------- */
.pg-article__body > p:not([class]) {
  margin: 0;
  font-family: var(--pg-font-jp);
  font-size: min(calc(var(--pg-body) * var(--u)), var(--pg-body-cap));
  font-weight: 500;
  line-height: 1.9;
  color: color-mix(in srgb, var(--pg-ink, #fff) 86%, transparent);
}
.pg-article__body > p:not([class]) + p:not([class]) { margin-top: 1.4em; }
.pg-article__body > :is(h2, h3) { margin: 2em 0 0.8em; font-family: var(--pg-font-jp); font-weight: 600; line-height: 1.5; }
.pg-article__body img { max-width: 100%; height: auto; }

/* ---------- Works 一覧：制作物の分類（タグ）と並び順（inc/works-front.php） ---------- */
.zwx {
  position: relative;
  z-index: 6;
  margin: 0;
  padding-top: calc(24 * var(--u));   /* カテゴリの下の線は引かない。下の一覧との間は 1920 で 64px（余白を margin にすると上下で打ち消し合うので padding で）10/28 */
}
.zwx__tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); min-width: 0; }
/* 「Filter by tags ＋」：大カテゴリのボタンの行の先頭（All の前）に小さめの文字で。縦線（カテゴリの文字の高さ）で All と区切る
   押した人だけにタグの欄を開く。開くと ＋ が × に。選んでいるタグの数を丸で 10/28 */
.zwx__toggle {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0;
  /* 文字 → 縦線 → All の間隔を、大カテゴリ同士の文字の間隔（左右の余白 14 × 2 + 間 4 = 32）と同じに */
  --zwx-pr: calc(100vw * 28 / var(--zou-artboard-pc));
  position: relative;
  padding: calc(100vw * 8 / var(--zou-artboard-pc)) var(--zwx-pr) calc(100vw * 8 / var(--zou-artboard-pc)) 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: min(calc(var(--pg-small) * var(--u)), 14px);   /* カテゴリより小さく 10/28 */
  font-weight: 400;
  line-height: 1;
  color: color-mix(in srgb, var(--pg-ink, #fff) 80%, transparent);
  cursor: pointer;
  transition: color .4s cubic-bezier(.22, 1, .36, 1);
}
html.can-hover .zwx__toggle:hover, .works:has(.zwx.is-open) .zwx__toggle { color: var(--pg-ink, #fff); }
.zwx__plus { width: .8em; height: .8em; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.works:has(.zwx.is-open) .zwx__plus { transform: rotate(135deg); }
/* 選んでいるタグの数：幅を取らないよう ＋ の右上に小さく重ねる（数が出てもカテゴリの行がずれない）10/28 */
.zwx__count {
  position: absolute;
  top: 50%;
  left: calc(100% - var(--zwx-pr) + .25em);
  min-width: 1.45em;
  padding: .22em .3em;
  border-radius: 999px;
  background: linear-gradient(90deg, #7DCCF3, #FAED00);
  font-size: .68em;
  line-height: 1;
  text-align: center;
  color: #04050c;
  transform: translateY(-120%);
  pointer-events: none;
}
.zwx__count:empty { display: none; }
/* 数が出る時はポンと小さく弾む */
.zwx__count:not(:empty) { animation: zwx-pop .5s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes zwx-pop { from { opacity: 0; transform: translateY(-120%) scale(.4); } }
/* ＋ はホバーで 90° 回る（開いている時は × のまま） */
html.can-hover .works:not(:has(.zwx.is-open)) .zwx__toggle:hover .zwx__plus { transform: rotate(90deg); }
.zwx__sep { flex: 0 0 auto; align-self: center; width: 1px; height: 1em; margin-right: calc(100vw * 14 / var(--zou-artboard-pc)); background: color-mix(in srgb, var(--pg-ink, #fff) 28%, transparent); font-size: calc(100vw * 19 / var(--zou-artboard-pc)); }
@media (max-width: 1024px) {
  .zwx__toggle { --zwx-pr: calc(100vw * 24 / var(--zou-artboard)); padding: calc(100vw * 8 / var(--zou-artboard)) var(--zwx-pr) calc(100vw * 8 / var(--zou-artboard)) 0; }
  .zwx__sep { font-size: calc(100vw * 18 / var(--zou-artboard)); margin-right: calc(100vw * 12 / var(--zou-artboard)); }
}
@media (max-width: 720px) {
  .zwx__toggle { --zwx-pr: calc(100vw * 20 / var(--zou-artboard)); }   /* スマホの大カテゴリは左右の余白 10 × 2 + 間 4 */
  .zwx__sep { margin-right: calc(100vw * 10 / var(--zou-artboard)); }
}
.works:not(.zwx-has-tags) :is(.zwx__toggle, .zwx__sep) { display: none; }
/* タグの欄：高さを 0 → 中身の高さへ。タグは 1 つずつ下から入ってくる（--d は works-front.js） */
/* タグの欄：下の一覧を押し下げず、上に重ねて出す（すりガラスの黒い板）10/28
   「Filter by tags」のすぐ下から吹き出しのように（小さな三角をボタンへ向け、ボタンの所から広がる）。幅は一覧いっぱい */
.zwx__panel {
  position: absolute;
  top: 100%;   /* 開く時に works-front.js がカテゴリの行のすぐ下に合わせる */
  left: 0;
  width: 100%;   /* 一覧の横幅いっぱい 10/28 */
  padding: 28px 32px;   /* 少し広めに（18 / 20 → 28 / 32）10/28 */
  border: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 14%, transparent);
  border-radius: 8px;
  background: rgba(6, 8, 20, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.97);
  transform-origin: 40px 0;
  transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .45s;
}
/* ボタンへ向けた小さな三角 */
.zwx__panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--zwx-caret, 40px);
  width: 10px;
  height: 10px;
  border-top: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 14%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 14%, transparent);
  background: rgb(6, 8, 20);
  transform: translateX(-50%) rotate(45deg);
}
.zwx.is-open .zwx__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.zwx:not(.has-tags) .zwx__panel { display: none; }
.zwx__tag {
  appearance: none;
  margin: 0;
  font: inherit;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: color .4s cubic-bezier(.22, 1, .36, 1), border-color .4s cubic-bezier(.22, 1, .36, 1), background-color .4s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}
.zwx__tag {
  opacity: 0;
  transform: translateY(.8em);
  transition: color .4s cubic-bezier(.22, 1, .36, 1), border-color .4s cubic-bezier(.22, 1, .36, 1), background-color .4s cubic-bezier(.22, 1, .36, 1), filter .4s ease,
    opacity .3s ease, transform .3s ease;
}
.zwx.is-open .zwx__tag {
  opacity: 1;
  transform: none;
  transition: color .4s cubic-bezier(.22, 1, .36, 1), border-color .4s cubic-bezier(.22, 1, .36, 1), background-color .4s cubic-bezier(.22, 1, .36, 1), filter .4s ease,
    opacity .6s ease calc(.12s + var(--d, 0s)), transform .8s cubic-bezier(.2, .8, .2, 1) calc(.12s + var(--d, 0s));
}
/* 開いたまま大カテゴリを変えた時：いったん消してから入れ直す */
.zwx.is-open.is-swap .zwx__tag { opacity: 0; transform: translateY(.8em); transition: none; }
/* タグ：読みやすく（文字を大きく・明るく、枠をはっきり）10/28 */
.zwx__tag {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .7em 1.15em;
  border: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pg-ink, #fff) 4%, transparent);
  color: color-mix(in srgb, var(--pg-ink, #fff) 92%, transparent);
  font-size: max(11px, min(calc(12 * var(--u)), 12px));   /* 小さく（15 → 13 → 12）10/28 */
  line-height: 1;
}
/* 「All」は英字なので Helvetica、# は付けない */
.zwx__tag[data-zwx-tag=""] { font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* # の付いたタグは細く（500 → 400）10/28 */
.zwx__tag:not([data-zwx-tag=""]) { font-weight: 400; }
.zwx__tag[hidden] { display: none; }
.zwx__n {
  min-width: 1.6em;
  padding: .25em .45em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pg-ink, #fff) 14%, transparent);
  font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .8em;
  text-align: center;
  color: var(--pg-ink, #fff);
}
.zwx__n:empty { display: none; }
/* ボタンの動きはすべてイージングで（枠・背景・選んだ時のグラデーションも切り替えずにフェード）10/28 */
.zwx__tag { position: relative; isolation: isolate; }
/* ホバーの実線の枠：点線の上にフェードで重ねる（border-style は切り替えると一瞬で変わるため） */
.zwx__tag::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--pg-ink, #fff);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
}
/* 選んだ時のグラデーション：少し縮んだ所から広がりながらフェード */
.zwx__tag::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #7DCCF3, #FAED00);
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.zwx__tag.is-active::after { opacity: 1; transform: none; }
.zwx__n { transition: background-color .4s cubic-bezier(.22, 1, .36, 1), color .4s cubic-bezier(.22, 1, .36, 1); }
/* ホバー：点線は実線に、背景を少し明るく 10/28 */
html.can-hover .zwx__tag:not(.is-active):hover { border-color: transparent; background-color: color-mix(in srgb, var(--pg-ink, #fff) 16%, transparent); color: var(--pg-ink, #fff); }
html.can-hover .zwx__tag:not(.is-active):hover::before { opacity: 1; }
.zwx__tag.is-active {
  border-color: transparent;
  background-color: transparent;   /* グラデーションは ::after（フェードで出す） */
  color: #04050c;
}
.zwx__tag.is-active .zwx__n { background: rgba(4, 5, 12, .14); color: #04050c; }
/* 選んでいるタグに乗せた時：グラデーションのまま少し明るく（文字は黒のまま読める）10/28 */
html.can-hover .zwx__tag.is-active:hover { filter: brightness(1.08); }
/* 実績が 0 件のタグ：点線（押せる。選ぶと「まだありません」） */
.zwx__tag.is-zero:not(.is-active) { border-style: dashed; border-color: color-mix(in srgb, var(--pg-ink, #fff) 26%, transparent); background-color: transparent; color: color-mix(in srgb, var(--pg-ink, #fff) 55%, transparent); }
/* 当てはまる実績が無い時 */
.zwx__empty {
  margin: calc(24 * var(--u)) 0 calc(40 * var(--u));
  font-family: 'Noto Sans JP', sans-serif;
  font-size: min(calc(var(--pg-body) * var(--u)), var(--pg-body-cap));
  color: color-mix(in srgb, var(--pg-ink, #fff) 60%, transparent);
}
.zwx__tag:focus-visible { outline: 2px solid var(--pg-accent, #7dccf3); outline-offset: 2px; }
@media (max-width: 1024px) {
  .zwx { padding-top: calc(32 * var(--u)); }
}
@media (max-width: 720px) {
  .zwx__tags { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pg-gutter, 16px)); padding: 0 var(--pg-gutter, 16px) 4px; scrollbar-width: none; }
  .zwx__tags::-webkit-scrollbar { display: none; }
  .zwx__tag { flex-shrink: 0; }
  /* 重ねた欄の中は折り返して並べる（横スクロールにしない） */
  .zwx__panel { padding: 22px 20px; }
  .zwx__panel .zwx__tags { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 8px; }
}

/* ---------- フォームの確認・完了ページ：大きな見出しは置かず、左の列に小さく（template-parts/form-step.php） ---------- */
.pg-hero--step { padding-bottom: calc(48 * var(--u)); }
@media (max-width: 720px) { .pg-hero--step { padding-bottom: 24px; } }
.pg-sec--step { padding-top: 0; }
@media (max-width: 720px) { .pg-sec--step .pg-sec__head { margin-bottom: 28px; } }
@media (max-width: 720px) { body.pg .pg-sec--step > .pg-wrap > .pg-sec__head { margin-bottom: 32px; } }

/* フォームの確認・完了ページ：本文の部分をブラウザの高さいっぱいに（開いた時にフッターが見えないように） */
.pg-main:has(> .pg-sec--step) { min-height: 100vh; }

/* メイン画像が無い実績のダミー（wp/no-image.svg の上に、画面の左右の縦の文字 .hsns__link と同じ Space Mono の大文字で「not available」）10/29 */
.is-noimage {
  position: relative;
  container-type: inline-size;
}
.is-noimage::after {
  content: 'not available';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 3cqi;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.36);
  pointer-events: none;
  transform: translateY(8.8cqi);   /* 上の宇宙飛行士と 1 つのまとまりで中央に */
}
/* 文字の上に小さな宇宙飛行士（ふわっと漂う） */
.is-noimage::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% - 10.3cqi);
  width: 14cqi;
  aspect-ratio: 393 / 440;
  margin-left: -7cqi;
  background: url('no-image-astronaut.webp?v=2') center / contain no-repeat;
  pointer-events: none;
  animation: zou-noimage-float 6s ease-in-out infinite;
}
@keyframes zou-noimage-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-0.8cqi) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .is-noimage::before { animation: none; }
}

/* スマホ Works 一覧：「Filter by tags」を押すと、タグの一覧を画面の上に重ねたモーダルで出す（works-front.js が開く時にタグを移す）10/30
   すりガラスの黒い板（PC の欄と同じ）。外の暗い所・× ・Esc で閉じる。タグは開いた時に 1 つずつ下から入ってくる */
.zwx-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;   /* ヘッダー（1100）より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.zwx-modal[hidden] { display: none; }
.zwx-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 10, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s ease;
}
.zwx-modal__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(80vh, 80dvh);
  border: 1px solid color-mix(in srgb, var(--pg-ink, #fff) 14%, transparent);
  border-radius: 8px;
  background: rgba(6, 8, 20, .9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.zwx-modal.is-open .zwx-modal__bg { opacity: 1; }
.zwx-modal.is-open .zwx-modal__sheet { opacity: 1; transform: none; transition: opacity .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.zwx-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 6px 20px;
}
.zwx-modal__ttl {
  margin: 0;
  font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--pg-ink, #fff);
}
.zwx-modal__close {
  appearance: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pg-ink, #fff);
  cursor: pointer;
}
.zwx-modal__close svg { width: 12px; height: 12px; }
.zwx-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px 22px;
}
.zwx-modal .zwx__tags { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 8px; }
.zwx-modal.is-open .zwx__tag {
  opacity: 1;
  transform: none;
  transition: color .4s cubic-bezier(.22, 1, .36, 1), border-color .4s cubic-bezier(.22, 1, .36, 1), background-color .4s cubic-bezier(.22, 1, .36, 1), filter .4s ease,
    opacity .6s ease calc(.12s + var(--d, 0s)), transform .8s cubic-bezier(.2, .8, .2, 1) calc(.12s + var(--d, 0s));
}
html.zwx-lock, html.zwx-lock body { overflow: hidden; }
/* タブレット：モーダルの左右に余白（ページの中身の幅にそろえる）、中の文字を少し大きく（タグ 12 → 14、見出し 14 → 16）10/31 ユーザー指示 */
@media (min-width: 721px) and (max-width: 1200px) {
  .zwx-modal { padding: 24px var(--zou-rail); }
  .zwx-modal__ttl { font-size: 16px; }
  .zwx-modal .zwx__tag { font-size: 14px; }
  .zwx-modal .zwx__tags { gap: 10px; }
  .zwx-modal__body { padding: 12px 24px 26px; }
  .zwx-modal__head { padding: 16px 14px 6px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .zwx-modal__bg, .zwx-modal__sheet, .zwx-modal .zwx__tag { transition: none; }
}