/* ==========================================================
   webtive 2026
   デザインの決まり: .claude/skills/webtive-design-system/SKILL.md
   - 暗い背景色は使わない
   - 角丸 2px、影なし。区切りは細い線と余白
   - 英字の小見出し・番号・末尾の「→」は使わない
   - 単位は PC が px、スマホ(767px以下)が vw(幅375px基準)。rem・em は使わない
     大きさは --s◯◯(◯◯px)で書き、スマホでは同じ名前の中身を vw に差し替える
   - 横幅の固定・max-width・position は使わない。重ねたいときは grid の同じマスに置く
   ========================================================== */

:root {
  /* 色 */
  --c-bg: #FFFAF5;          /* ページ背景 */
  --c-surface: #FBEBDD;     /* 淡い面(写真の背景・代表紹介) */
  --c-emphasis: #FCE3CF;    /* 強調セクション(つくる・最後の相談) */
  --c-accent: #C8501C;      /* ボタン・アクセント(白文字) */
  --c-accent-hover: #A8410F;
  --c-text: #3A2418;        /* 本文 */
  --c-muted: #7A5543;       /* 補足 */
  --c-muted-strong: #674636; /* 淡い面の上の補足(明朝の細い線が薄く見えるのを補う) */
  --c-line: #EDD5C2;        /* 区切り線 */
  --c-line-strong: #E9B796; /* 強調背景の上の区切り線 */
  --c-on-accent: #FFFFFF;
  --c-on-accent-muted: #FBE3D6;
  --c-on-accent-line: #DE7B50;
  --c-placeholder: #EDD5C2;

  /* 文字 */
  --f-head: 'Zen Kaku Gothic New', sans-serif;
  --f-body: 'Shippori Mincho', serif;
  --lh-body: 1.95;

  /* 大きさ(PC は px) */
  --s1: 1px; --s2: 2px; --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s20: 20px; --s24: 24px;
  --s28: 28px; --s32: 32px; --s36: 36px; --s40: 40px; --s44: 44px; --s48: 48px; --s56: 56px;
  --s64: 64px; --s72: 72px; --s80: 80px; --s88: 88px; --s96: 96px; --s120: 120px;
  --gutter: var(--s32);
  --sec: 112px;             /* セクション上下の余白(PC 96〜120) */
  --radius: 2px;

  /* 動き */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 767px) {
  :root {
    /* 大きさ(スマホは vw。◯◯px ÷ 375 × 100) */
    --s1: .267vw; --s2: .533vw; --s4: 1.067vw; --s8: 2.133vw; --s12: 3.2vw; --s16: 4.267vw; --s20: 5.333vw; --s24: 6.4vw;
    --s28: 7.467vw; --s32: 8.533vw; --s36: 9.6vw; --s40: 10.667vw; --s44: 11.733vw; --s48: 12.8vw; --s56: 14.933vw;
    --s64: 17.067vw; --s72: 19.2vw; --s80: 21.333vw; --s88: 23.467vw; --s96: 25.6vw; --s120: 32vw;
    --gutter: var(--s20);
    --sec: 16vw;            /* スマホ 56〜64 */
    --lh-body: 1.9;
  }
}

/* ---------- ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--s16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 700; line-height: 1.5; text-wrap: balance; }
/* 文節の途中で改行しない(切れ目は main.js の BudouX が入れる) */
.is-phrase { word-break: keep-all; overflow-wrap: anywhere; }
p, li, dd { text-wrap: pretty; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img { height: auto; display: block; }
a { color: var(--c-text); }
a:hover, .footer-nav a:hover, .breadcrumb a:hover { color: var(--c-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* 読み上げ専用の文字(1px の箱に押し込んで見えなくする) */
.screen-reader-text {
  display: inline-block; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* PC/スマホで出し分ける文言 */
@media (min-width: 768px) { .only-sp { display: none !important; } }
@media (max-width: 767px) { .only-pc { display: none !important; } }

/* ---------- 共通の箱 ---------- */
.container, .site-header__inner, .site-footer__inner, .site-footer__copy, .sp-nav { padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--sec); padding-bottom: var(--sec); }
.section--rule { border-top: 1px solid var(--c-line); }
.section--emphasis { background: var(--c-emphasis); }
.section--surface { background: var(--c-surface); }
.section--emphasis, .section--surface, .sim__summary { --c-muted: var(--c-muted-strong); }
.section--emphasis :is(.rule-list > *, .svc, .rule-item) { border-color: var(--c-line-strong); }

/* 補足の色 */
.muted, .sec-lead, .svc__body p, .hero-sub__text, .rule-item p, .demo__body p, .faq details p, .person__text, .final-cta__body p,
.footer-nav a, .site-footer__brand p, .breadcrumb a, .contact__part > p, .footnote, .footnotes, .page-head__aside, .dots,
.work-card > p:not(.work-card__kind), .sim-opt__desc, .event-list strong + small, .prose blockquote { color: var(--c-muted); }
/* 小さい補足(12px) */
.hero__note, .hero__visual figcaption, .photo figcaption, .kv__label, .event-list small:first-child, .person__name small, .breadcrumb,
.rule-item .rule-item__meta, .price__label, .price__sub, .demo__note, .def__term, .rule-list small, .work-card__kind, .work-card dt,
.sim__title small, .sim__total-label, .sim__breakdown, .sim__meta, .sim__reset, .sim__tentative, .contact__mail, .form-privacy,
.post-list__date, .post-list__cat, .prose .date, .work-gallery__note, .legal :is(.policy-content__label, .policy-content__note, .date),
.profile__kana, .post-meta, .site-footer__copy, .price-table thead th, .ph { font-size: var(--s12); color: var(--c-muted); }
/* リンクの下線を消す(行・カードの見出しなど) */
.svc h3 a, .work-tile__title a, .work-card__title a, .hero-sub__text a, .global-nav a, .sp-nav a, .event-list a, .post-list a, .text-link--plain { text-decoration: none; }

.num { font-family: var(--f-head); font-weight: 700; font-size: var(--s28); color: var(--c-text); line-height: 1.2; }
@media (max-width: 767px) { .num { font-size: var(--s24); } }

/* 仮置き([ ])の表示 */
.ph {
  background: var(--c-placeholder);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--s16);
}
.ph-inline { background: var(--c-surface); color: var(--c-muted); padding: 0 var(--s4); border-radius: var(--radius); }

/* ---------- ボタン(2種類のみ) ---------- */
.btn, .wpcf7-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 600; font-size: var(--s16); line-height: 1.5;
  text-decoration: none; text-align: center;
  padding: var(--s16) var(--s28); border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
}
.btn--primary, .wpcf7-form input[type="submit"] { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover, .wpcf7-form input[type="submit"]:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: var(--c-text); }
.btn--secondary:hover { color: var(--c-accent); border-color: var(--c-accent); }
.btn--sm { padding: var(--s12) var(--s24); }
.btn--block { display: flex; width: 100%; }
.btns { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s12); }
@media (max-width: 767px) {
  .btns { flex-direction: column; }
  .btns .btn { width: 100%; }
}

.text-link { font-weight: 600; }
.text-link--plain { padding: var(--s16) var(--s4); }

/* ---------- 縦書き見出し ----------
   縦書きは高さを明示しないと崩れるので必ず height を入れる */
.v-head {
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: var(--s44);
  letter-spacing: var(--s4);
  line-height: 1;
  height: max-content;
  flex: 0 0 auto;
}
@media (max-width: 767px) { .v-head { font-size: var(--s32); } }

/* ---------- ヘッダー ---------- */
.site-header { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.site-header__inner {
  padding-top: var(--s12); padding-bottom: var(--s12);
  display: flex; align-items: center; gap: var(--s8) var(--s36);
}
.logo {
  display: inline-flex; align-items: center; gap: var(--s8);
  font-family: var(--f-head); font-weight: 900; font-size: var(--s24); letter-spacing: var(--s1);
  color: var(--c-text); text-decoration: none; line-height: 1;
}
.logo img { width: auto; height: var(--s28); }
.global-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s28); flex: 1 1 auto; }
.global-nav a { padding: var(--s12) 0; line-height: 1.5; }
.global-nav a[aria-current="page"] { color: var(--c-accent); }
.menu-toggle {
  display: none;
  padding: var(--s12); margin-left: auto;
  border: 0; background: transparent; cursor: pointer;
}
.menu-toggle svg { width: var(--s24); height: var(--s24); }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.sp-nav { display: none; }

/* メニュー(16px・7項目)が1行に収まるのは1280px以上。それより狭いとハンバーガー */
@media (max-width: 1279px) {
  .site-header__inner { padding-top: var(--s8); padding-bottom: var(--s8); padding-right: var(--s8); }
  .site-header .global-nav, .site-header__cta { display: none; }
  .menu-toggle { display: flex; }
  .logo { font-size: var(--s20); }
  .logo img { height: var(--s24); }
  .sp-nav {
    border-top: 1px solid var(--c-line);
    padding-top: var(--s8); padding-bottom: var(--s20);
    flex-direction: column;
  }
  .sp-nav.is-open { display: flex; }
  .sp-nav a:not(.btn) { padding: var(--s16) 0; border-bottom: 1px solid var(--c-surface); }
  .sp-nav .btn { margin-top: var(--s16); }
}

/* ---------- フッター ---------- */
.site-footer { border-top: 1px solid var(--c-line); }
.site-footer__inner {
  padding-top: var(--s64); padding-bottom: var(--s32);
  display: grid; grid-template-columns: minmax(0, 2fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s40);
}
.site-footer__brand .logo { font-size: var(--s24); }
.site-footer__brand p { margin-top: var(--s12); }
.footer-nav { display: flex; flex-direction: column; gap: var(--s8); }
.footer-nav__title { font-family: var(--f-head); font-weight: 700; }
.site-footer__copy { padding-bottom: var(--s32); }
@media (max-width: 767px) {
  .site-footer__inner { padding-top: var(--s40); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: var(--s4) var(--s12); }
  .site-footer__brand { grid-column: 1 / -1; margin-bottom: var(--s16); }
  .site-footer__brand .logo { font-size: var(--s20); }
  .site-footer__brand p { margin-top: var(--s8); }
  .footer-nav { display: contents; }
  .footer-nav__title { display: none; }
  .footer-nav a { padding: var(--s8) 0; }
  .site-footer__copy { padding-top: var(--s20); }
}

/* ==========================================================
   写真の上に文字を重ねる箱(position を使わず grid の同じマスに置く)
   ========================================================== */
.hero__visual, .photo, .work-scroll { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
:is(.hero__visual, .photo, .work-scroll) > * { grid-area: 1 / 1; }
.hero__visual, .photo { overflow: hidden; background: var(--c-surface); border-radius: var(--radius); }
:is(.hero__visual, .photo) img { width: 100%; height: 100%; object-fit: cover; }
:is(.hero__visual, .photo) figcaption { align-self: end; margin: 0; background: var(--c-bg); line-height: 1.6; }

/* 画像を枠の中に収める箱(サービス・実績) */
.svc__media, .work-tile__img, .work-card__img {
  background: var(--c-surface); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; padding: var(--s16);
}
:is(.svc__media, .work-tile__img, .work-card__img) img { width: 100%; height: 100%; object-fit: contain; }
.work-tile__img { min-height: 0; }
.work-tile__img--blur, .work-card__img { overflow: hidden; }
:is(.work-tile__img--blur, .work-card__img--blur, .work-gallery--blur) img { filter: blur(8px); }

/* ---------- 線で区切った縦の並び(上に線、行ごとに下線) ---------- */
.event-list, .rule-list, .def, .steps, .faq, .post-list, .work-card dl, .legal .policy-content__table { list-style: none; border-top: 1px solid var(--c-line); }
:where(.event-list, .rule-list, .def, .steps, .faq, .post-list, .work-card dl, .legal .policy-content__table) > * { border-bottom: 1px solid var(--c-line); }
.rule-list, .def, .post-list { margin-top: var(--s32); }
.steps { margin-top: var(--s16); }

/* 左に項目名・右に内容の並び。項目名の列は一番長い項目名に合わせる(subgrid で行をまたいでそろえる) */
.def, .legal .policy-content__table, .work-card dl, .rule-list--date, .event-list { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.def > div, .legal .policy-content__row, .work-card dl > div, .rule-list.rule-list--date > li, .event-list li, .event-list a {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
}
.def, .legal .policy-content__table, .rule-list--date { column-gap: var(--s24); }
.def > div, .legal .policy-content__row { row-gap: var(--s4); padding: var(--s16) 0; }
@media (max-width: 767px) {
  .def, .legal .policy-content__table, .work-card dl { grid-template-columns: minmax(0, 1fr); }
}

/* 区切り線のリスト(受託開発・活動など) */
/* 行: 項目名<small>補足</small>(日付の並びは <small>日付</small>項目名) */
.rule-list > li { padding: var(--s16) 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s24); justify-content: space-between; font-weight: 600; }
.rule-list small { font-weight: 500; }

/* ==========================================================
   トップ
   ========================================================== */

/* ---------- ファーストビュー ----------
   左に横書きキャッチと相談、右に画像 */
.hero {
  padding-top: var(--s64); padding-bottom: var(--s72);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "title visual"
    "text  visual";
  gap: var(--s40) var(--s56);
}
.hero__title {
  grid-area: title;
  align-self: end;
  font-weight: 700;
  font-size: var(--s72);
  line-height: 1.25;
  letter-spacing: var(--s2);
}
.hero__line { display: block; }
.hero__visual { grid-area: visual; }
.hero__visual figcaption { justify-self: start; padding: var(--s8) var(--s16) 0 0; }
.hero__text { grid-area: text; align-self: start; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12) var(--s28); }
.hero__actions .btn { padding-left: var(--s40); padding-right: var(--s40); }
.hero__note { margin-top: var(--s12); }

/* 写真が無いあいだの、文字だけのMV: キャッチを大きく、その下に相談 */
.hero--type {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "title"
    "text";
  row-gap: var(--s48);
  padding-top: var(--s96); padding-bottom: var(--s96);
}
.hero--type .hero__title { font-size: var(--s120); line-height: 1.18; }

/* MVの下:ひろう・おうえんするの予告(本業より軽く) */
.hero-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s56); padding-bottom: var(--s72); }
.hero-sub__item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7fr); align-items: center; gap: var(--s20);
  padding: var(--s20) 0; border-top: 1px solid var(--c-line);
}
.hero-sub__img, .hero-sub__mark { aspect-ratio: 9 / 7; border-radius: var(--radius); overflow: hidden; }
.hero-sub__img img { width: 100%; height: 100%; object-fit: cover; }
.hero-sub__img--poster img { object-position: 50% 62%; } /* 縦長のポスターは背中のゴミ箱あたりを見せる */
.hero-sub__mark {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: var(--c-on-accent); font-size: var(--s12);
}
.hero-sub__item strong { display: block; font-family: var(--f-head); font-weight: 700; color: var(--c-text); }

@media (max-width: 1023px) {
  .hero {
    padding-top: var(--s24); padding-bottom: var(--s40);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title"
      "visual"
      "text";
    row-gap: var(--s24);
  }
  .hero__title { font-size: clamp(var(--s44), 9vw, var(--s64)); line-height: 1.2; }
  .hero__visual { aspect-ratio: 4 / 3; }
  .hero__visual figcaption { padding: var(--s2) var(--s8) 0 0; }
  .hero--type {
    grid-template-rows: auto auto;
    grid-template-areas:
      "title"
      "text";
    padding-top: var(--s48); padding-bottom: var(--s48);
  }
  .hero--type .hero__title { font-size: clamp(var(--s40), 11vw, var(--s80)); }
  .hero-sub { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s48); }
  .hero-sub__item { grid-template-columns: minmax(0, 1fr) minmax(0, 9fr); padding: var(--s16) 0; gap: var(--s16); }
}
@media (max-width: 767px) {
  .hero-sub__item { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); }
}

/* ---------- 章(つくる・ひろう・おうえんする) ----------
   PC: 縦書き見出しが左に立ち、本文が右
   スマホ: 縦書き見出しの横にリード、それ以外は全幅 */
.chapter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s72);
  align-items: start;
}
.chapter > .v-head { grid-column: 1; grid-row: 1 / span 3; }
.chapter > :not(.v-head) { grid-column: 2; }
.chapter__lead { font-size: var(--s24); line-height: 2; }

/* 2列(写真+文、文+カード) */
.chapter--split { column-gap: var(--s56); }
.chapter--split > .v-head { margin-right: var(--s16); }
.chapter--media-left { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr); }
.chapter--media-left > .chapter__media { grid-column: 2; grid-row: 1 / span 2; }
.chapter--media-left > :is(.chapter__head, .chapter__rest) { grid-column: 3; }
.chapter--media-right { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); }
.chapter--media-right > .chapter__media { grid-column: 3; grid-row: 1 / span 2; }
.chapter--media-right > :is(.chapter__head, .chapter__rest) { grid-column: 2; }
.chapter__head h3 { font-size: var(--s28); line-height: 1.5; }
.chapter__head > * + * { margin-top: var(--s16); }
.chapter__rest { margin-top: var(--s20); }

@media (max-width: 1023px) {
  .chapter { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s16); }
  .chapter > .v-head { grid-row: 1; margin-right: 0; }
  .chapter > :not(.v-head) { grid-column: 1 / -1; }
  .chapter > :is(.chapter__lead, .chapter__head) { grid-column: 2; grid-row: 1; }
  .chapter > .chapter__media { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s24); }
  .chapter__lead { font-size: var(--s16); }
  .chapter__head h3 { font-size: var(--s20); line-height: 1.55; }
  .chapter__head > * + * { margin-top: var(--s8); }
}

/* ---------- サービスの行(つくる) ---------- */
.svc-list { margin-top: var(--s72); }
.svc {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: var(--s24) var(--s48);
  padding: var(--s40) 0; border-top: 1px solid var(--c-line);
}
.svc:last-child { border-bottom: 1px solid var(--c-line); }
.svc__body h3 { font-size: var(--s28); line-height: 1.4; }
.svc__body p { margin-top: var(--s12); }
.svc__price { font-size: var(--s16); }
.svc__media { aspect-ratio: 16 / 10; background: var(--c-bg); }
.svc__media--grid {
  background: transparent; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); align-content: center;
}
.svc__media--grid figure { display: block; }
.svc__media--grid img { height: auto; border-radius: var(--radius); }
.svc-note { margin-top: var(--s28); color: var(--c-muted); }
.svc-note a { margin-left: var(--s12); }

@media (max-width: 767px) {
  .svc-list { margin-top: var(--s40); }
  .svc { display: flex; flex-direction: column; gap: 0; padding: var(--s28) 0; }
  .svc + .svc { margin-top: var(--s4); }
  .svc:not(:last-child) { padding-bottom: var(--s4); }
  .svc__body { display: contents; } /* スマホでは包みをなくし、見出し・本文を .svc の直下として並べる */
  /* 縦並びでは画像の高さに押されて比率ぶん横に広がるので、幅を固定し高さは比率に任せる */
  .svc__media { order: -1; width: 100%; min-height: 0; padding: var(--s12); margin-bottom: var(--s20); }
  .svc__media--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); aspect-ratio: auto; padding: 0; }
  .svc__body h3 { font-size: var(--s20); }
  .svc__body p { margin-top: var(--s8); }
  .svc-note { margin-top: var(--s20); }
}

/* ---------- 実績のグリッド ---------- */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s12); }
.sec-head h2, .sec-title { font-size: var(--s36); line-height: 1.5; }
.sec-lead { margin-top: var(--s16); }
@media (max-width: 767px) { .sec-head h2, .sec-title { font-size: var(--s24); } }

.work-grid {
  margin-top: var(--s40);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s40) var(--s24);
}
.work-tile { display: flex; flex-direction: column; gap: var(--s16); }
.work-tile__img { aspect-ratio: 4 / 3; }
.work-tile__title { font-family: var(--f-head); font-weight: 700; font-size: var(--s16); line-height: 1.5; }
.work-tile__desc { color: var(--c-muted); margin-top: calc(var(--s8) * -1); }
@media (max-width: 767px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24) var(--s12); }
  .work-tile { gap: var(--s8); }
  .work-tile__img { aspect-ratio: 1 / 1; padding: var(--s12); }
  .work-tile__desc { display: none; }
}
.work-grid--detail .work-tile__desc { display: block; }

/* トップの実績: 横スクロールで3件ずつ(スマホは2件ずつ) */
.work-grid--scroll {
  display: flex; gap: var(--s24);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: var(--s16);
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent;
}
.work-grid--scroll .work-tile { flex: 0 0 calc((100% - var(--s24) * 2) / 3); scroll-snap-align: start; }
@media (max-width: 767px) {
  .work-grid--scroll { gap: var(--s12); }
  .work-grid--scroll .work-tile { flex-basis: calc((100% - var(--s12)) / 2); }
}

/* 横スクロールできることを知らせる手のマーク。実績の右上に重ねる。一度スクロールしたら消える(main.js) */
.scroll-hint {
  justify-self: end; align-self: start; z-index: 1; margin-top: var(--s40);
  display: flex; flex-direction: column; align-items: center; gap: var(--s8);
  padding: var(--s16) var(--s20); border-radius: var(--radius);
  background: var(--c-accent); color: var(--c-on-accent);
  font-size: var(--s12); font-weight: 600;
  pointer-events: none;
  transition: opacity .4s ease;
}
.scroll-hint__hand { width: var(--s36); height: var(--s36); animation: scroll-hint-swipe 1.6s ease-in-out infinite; }
@keyframes scroll-hint-swipe {
  0%, 100% { transform: translateX(var(--s12)); }
  50% { transform: translateX(calc(var(--s12) * -1)); }
}
.work-scroll.is-scrolled .scroll-hint { opacity: 0; }
.work-scroll.is-static .scroll-hint { display: none; }
@media (max-width: 767px) {
  .scroll-hint { margin-top: var(--s24); padding: var(--s12) var(--s16); }
  .scroll-hint__hand { width: var(--s32); height: var(--s32); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint__hand { animation: none; }
}

/* ---------- ひろう(TRASH!) ---------- */
.trash-name { font-family: var(--f-head); font-weight: 900; font-size: var(--s20); letter-spacing: var(--s1); line-height: 1.5; }
.trash-name small { font-weight: 500; font-size: var(--s16); }
.photo { aspect-ratio: 4 / 3; }
.photo img { object-position: 50% 40%; }
.photo figcaption { justify-self: end; padding: var(--s4) 0 0 var(--s12); }
/* 縦長のポスター(TRASH!)は切らずに全体を見せる */
.photo--poster { aspect-ratio: 2 / 3; max-width: 480px; }
.photo--poster img { object-position: 50% 50%; }
.kv {
  margin-top: var(--s28); padding: var(--s20) 0;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: var(--s8) var(--s32);
}
.kv__value { font-weight: 600; }
@media (max-width: 767px) {
  .trash-name { font-size: var(--s16); }
  .trash-name small { font-size: var(--s12); }
  .photo figcaption { padding: var(--s2) 0 0 var(--s8); }
  .kv { margin-top: var(--s20); padding: var(--s16) 0; gap: var(--s8) var(--s28); }
}

/* ---------- おうえんする ---------- */
.event-list { margin-top: var(--s28); column-gap: var(--s20); }
/* 行: <a><small>日付</small><strong>名前</strong><small>場所</small></a> */
.event-list a { padding: var(--s16) 0; }
.event-list small:first-child { grid-row: 1 / span 2; }
.event-list strong { grid-column: 2; font-weight: 600; }
.event-list strong + small { grid-column: 2; font-weight: 500; font-size: var(--s16); }
.cheer-card {
  aspect-ratio: 4 / 3;
  background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--radius);
  padding: var(--s48);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s20);
}
.cheer-card__label { font-size: var(--s12); }
.cheer-card__label, .cheer-card__date, .cheer-card__note { color: var(--c-on-accent-muted); }
.cheer-card__name { font-family: var(--f-head); font-weight: 700; font-size: var(--s40); line-height: 1.35; }
.cheer-card__date { margin-top: var(--s16); }
.cheer-card__note { border-top: 1px solid var(--c-on-accent-line); padding-top: var(--s16); }
@media (max-width: 767px) {
  .event-list { margin-top: var(--s20); }
  .event-list a, .event-list :is(small:first-child, strong) { display: block; }
  .event-list strong + small { display: none; }
  .cheer-card { aspect-ratio: auto; padding: var(--s28) var(--s24); display: block; }
  .cheer-card__name { margin-top: var(--s16); font-size: var(--s28); line-height: 1.4; }
  .cheer-card__date { margin-top: var(--s8); }
  .cheer-card__note { display: none; }
}

/* ---------- 代表紹介 ---------- */
.person { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--s48) var(--s72); align-items: center; }
.person__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__quote { font-size: var(--s28); line-height: 1.9; font-weight: 600; }
.person__name { margin-top: var(--s28); }
.person__name strong { font-family: var(--f-head); font-weight: 700; font-size: var(--s20); }
.person__name small { margin-left: var(--s12); }
.person__text { margin-top: var(--s12); }
.person .text-link { display: inline-block; margin-top: var(--s20); }
/* 写真が未設定(訪問者には仮画像を出さない)ときは、文章を全幅にする */
.person > .person__body:first-child { grid-column: 1 / -1; max-width: 46em; }
@media (max-width: 767px) {
  .person { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; }
  .person__body { grid-column: 1 / -1; }
  .person__quote { margin-top: var(--s24); font-size: var(--s20); line-height: 1.95; }
  .person__name { margin-top: var(--s20); }
  .person__name strong { font-size: var(--s16); }
  .person__text { margin-top: var(--s8); }
  .person .text-link { margin-top: var(--s12); padding: var(--s8) 0; }
}

/* ---------- 最後の相談 ---------- */
.final-cta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s40) var(--s72); align-items: end; }
.final-cta__body h2 { font-size: var(--s48); line-height: 1.45; }
.final-cta__body p { margin-top: var(--s24); }
.final-cta__body .final-cta__assure { margin-top: var(--s12); }
.final-cta .btns { flex-direction: column; }
.final-cta .btns .btn { padding-top: var(--s20); padding-bottom: var(--s20); }
@media (max-width: 767px) {
  .final-cta { display: block; }
  .final-cta__body h2 { font-size: var(--s28); line-height: 1.5; }
  .final-cta__body p { margin-top: var(--s20); }
  .final-cta .btns { margin-top: var(--s24); }
  .final-cta .btns .btn { padding-top: var(--s16); padding-bottom: var(--s16); }
}

/* ==========================================================
   下層ページ
   ========================================================== */
.page-head { padding-top: var(--s64); padding-bottom: var(--s88); }
.page-head h1 { margin-top: var(--s40); font-size: var(--s56); line-height: 1.4; }
.page-head__lead { margin-top: var(--s28); font-size: var(--s20); line-height: 2.05; }
.page-head__actions { margin-top: var(--s36); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12) var(--s24); }
.page-head__actions > .btns { flex: 0 0 auto; }
@media (max-width: 767px) {
  .page-head { padding-top: var(--s24); padding-bottom: var(--s56); }
  .page-head h1 { margin-top: var(--s24); font-size: var(--s28); line-height: 1.5; }
  .page-head__lead { margin-top: var(--s20); font-size: var(--s16); }
  .page-head__actions { margin-top: var(--s24); flex-direction: column; align-items: stretch; }
  .page-head__actions .btn { width: 100%; }
  .page-head__aside { text-align: center; }
}

/* 線で区切った項目の並び(カードの代わり) */
.rule-grid {
  margin-top: var(--s40);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s48);
}
.rule-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rule-item { border-top: 1px solid var(--c-line); padding: var(--s28) 0 var(--s36); }
.rule-item h3 { font-size: var(--s20); line-height: 1.55; }
.rule-item p { margin-top: var(--s12); }
.rule-item .rule-item__meta { margin-top: var(--s16); }
.rule-item .rule-item__for { margin-top: var(--s16); color: var(--c-text); padding-left: var(--s16); border-left: 2px solid var(--c-accent); }
@media (max-width: 767px) {
  .rule-grid { grid-template-columns: minmax(0, 1fr); }
  .rule-item { padding: var(--s24) 0 var(--s28); }
}

/* 左に見出し・右に中身の2段組 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s32) var(--s72); align-items: start; }
.split > :is(.rule-list, .faq, .def) { margin-top: 0; }
@media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* 金額の並び(1行に横並び) */
.prices { margin-top: var(--s40); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 var(--s48); }
.price { border-top: 1px solid var(--c-line); padding: var(--s24) 0 var(--s8); }
.price__value { margin-top: var(--s8); font-family: var(--f-head); font-weight: 700; font-size: var(--s44); line-height: 1.3; }
.price__value small { font-size: var(--s16); font-weight: 500; margin-left: var(--s4); }
.price__sub { margin-top: var(--s8); }
.footnote, .footnotes { margin-top: var(--s28); }
.footnotes { list-style: none; }
.footnotes li + li { margin-top: var(--s8); }
@media (max-width: 767px) {
  .prices { grid-auto-flow: row; }
  .price__value { font-size: var(--s32); }
}

/* デモ・QR の帯 */
.demo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s32) var(--s72); align-items: center; }
.demo__body h2 { font-size: var(--s32); line-height: 1.55; }
.demo__body p { margin-top: var(--s16); }
.demo__items { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s24); }
.demo-item { display: flex; flex-direction: column; align-items: center; gap: var(--s12); }
.demo-item figure, .demo-item .wp-block-buttons { align-self: stretch; }
.demo-item img { width: 100%; aspect-ratio: 1 / 1; background: #FFFFFF; padding: var(--s8); border-radius: var(--radius); }
.demo-item .btn { width: 100%; }
.demo__note { margin-top: var(--s12); }
@media (max-width: 1023px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo__items { justify-content: start; grid-auto-columns: minmax(0, 30%); }
}
@media (max-width: 767px) {
  .demo__items { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); gap: var(--s12); }
  .demo-item figure { display: none; }
}

/* FAQ */
.faq { margin-top: var(--s40); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--s16); align-items: baseline;
  padding: var(--s24) 0;
  font-family: var(--f-head); font-weight: 700; font-size: var(--s20); line-height: 1.6;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; flex: 0 0 auto; color: var(--c-accent); font-weight: 500; }
.faq details[open] summary::after { content: "－"; }
.faq details p { padding: 0 0 var(--s24); }
@media (max-width: 767px) { .faq summary { padding: 4.8vw 0; font-size: var(--s16); } }

/* 番号を使わない手順リスト */
.steps li { padding: var(--s16) 0; }
.dots { margin-top: var(--s16); padding-left: var(--s20); }
.dots li + li { margin-top: var(--s8); }

/* 絞り込み(実績・コラム)とページ送り */
.filter { margin-top: var(--s36); }
.filter, .pager { display: flex; flex-wrap: wrap; gap: var(--s8); }
.filter button, .filter a, .pager .page-numbers {
  font-family: var(--f-body); font-weight: 600; text-decoration: none; text-align: center;
  padding: var(--s12) var(--s20); border-radius: var(--radius);
  border: 1px solid var(--c-line); background: transparent; color: var(--c-text); cursor: pointer;
}
.filter button:hover, .filter a:hover { border-color: var(--c-text); color: var(--c-text); }
.filter [aria-pressed="true"], .filter [aria-current="page"], .pager .current { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
.filter .count { margin-left: var(--s8); font-weight: 500; opacity: .75; }
.pager { margin-top: var(--s32); }
.pager .page-numbers { font-weight: 500; padding: var(--s8) var(--s12); }
@media (max-width: 767px) { .filter button, .filter a { padding: var(--s8) var(--s12); } }

/* 実績一覧 */
.works-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s56) var(--s32); }
.work-card { display: flex; flex-direction: column; gap: var(--s16); }
.work-card[hidden] { display: none; }
.work-card__img { aspect-ratio: 4 / 3; }
.work-card__img.ph { background: var(--c-placeholder); }
.work-card dl { column-gap: var(--s12); }
.work-card dl > div { padding: var(--s12) 0; }
.work-card__title { font-size: var(--s20); line-height: 1.5; margin-top: calc(var(--s8) * -1); }
@media (max-width: 1023px) { .works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .works-list { grid-template-columns: minmax(0, 1fr); gap: var(--s40); } }

/* 料金シミュレーター */
.sim { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s40) var(--s56); align-items: start; }
.sim__title { font-size: var(--s28); }
.sim__title small { font-family: var(--f-body); font-weight: 500; margin-left: var(--s8); }
.sim__options { margin-top: var(--s24); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12); }
.sim-opt {
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s20); border-radius: var(--radius);
  background: var(--c-bg); border: 1px solid var(--c-line);
  font-family: var(--f-body);
}
.sim-opt:hover { border-color: var(--c-text); }
.sim-opt[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-emphasis); }
.sim-opt__label { font-family: var(--f-head); font-weight: 700; font-size: var(--s20); display: flex; justify-content: space-between; gap: var(--s8); }
.sim-opt__state { font-family: var(--f-body); font-weight: 600; font-size: var(--s12); color: var(--c-accent); visibility: hidden; }
.sim-opt[aria-pressed="true"] .sim-opt__state { visibility: visible; }
.sim-opt__desc { line-height: 1.7; }
.sim-opt__price { font-weight: 600; }
.sim__summary { background: var(--c-surface); border-radius: var(--radius); padding: var(--s32) var(--s28); }
.sim__summary h2 { font-size: var(--s20); }
.sim__total-label { margin-top: var(--s20); }
.sim__total { font-family: var(--f-head); font-weight: 700; font-size: var(--s56); line-height: 1.2; color: var(--c-accent); }
.sim__total small { font-size: var(--s20); color: var(--c-text); margin-left: var(--s4); }
.sim__breakdown { margin-top: var(--s8); }
.sim__msg { margin-top: var(--s16); padding-left: var(--s16); border-left: 2px solid var(--c-accent); }
.sim__meta { margin-top: var(--s16); padding-top: var(--s16); border-top: 1px solid var(--c-line); }
.sim__summary .btn { margin-top: var(--s20); width: 100%; }
.sim__reset { margin-top: var(--s12); background: none; border: 0; padding: var(--s8) 0; text-decoration: underline; cursor: pointer; }
.sim__tentative { margin-top: var(--s12); }
@media (max-width: 1023px) { .sim { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .sim__options { grid-template-columns: minmax(0, 1fr); }
  .sim__summary { padding: var(--s24) var(--s20); }
}

/* 料金表 */
.price-table { margin-top: var(--s32); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table table { width: 100%; border-collapse: collapse; }
.price-table thead { border: 0; }
.price-table th, .price-table td { text-align: left; padding: var(--s16) var(--s16) var(--s16) 0; border: 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.price-table thead th { font-weight: 500; border-bottom-color: var(--c-text); }
.price-table tbody th { font-family: var(--f-head); font-weight: 700; }
.price-table td:nth-child(2) { font-weight: 600; white-space: nowrap; }
/* スマホでは4列だと1文字ずつ折り返すので、1行を「サービス名 / 金額・期間 / 内容」の縦積みにする */
@media (max-width: 767px) {
  .price-table thead { display: none; }
  .price-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4) var(--s16); padding: var(--s16) 0; border-bottom: 1px solid var(--c-line); }
  .price-table tbody :is(th, td) { padding: 0; border: 0; }
  .price-table tbody :is(th, td:last-child) { grid-column: 1 / -1; }
  .price-table tbody td:last-child { color: var(--c-muted); }
}

/* 問い合わせ(1カラム。LINE → フォーム → メールの順に線で区切る) */
.contact__part { padding: var(--s40) 0 var(--s48); border-top: 1px solid var(--c-line); }
.contact__part h2 { font-size: var(--s24); }
.contact__part > p { margin-top: var(--s12); }
.contact__part > .wp-block-buttons { margin-top: var(--s24); }
.contact__mail { padding-top: var(--s24); border-top: 1px solid var(--c-line); }
@media (max-width: 767px) {
  .contact__part { padding: var(--s28) 0 var(--s36); }
  .contact__part h2 { font-size: var(--s20); }
  .contact__part .btn { width: 100%; }
}

/* フォーム(Contact Form 7 にもそのまま効く) */
.form { margin-top: var(--s24); }
.form .field, .wpcf7-form .field { margin-top: var(--s24); }
.form label, .wpcf7-form label { display: block; font-weight: 600; }
.req, .opt { margin-left: var(--s8); font-size: var(--s12); font-weight: 600; padding: 1px var(--s8); border-radius: var(--radius); vertical-align: 1px; }
.req { background: var(--c-accent); color: var(--c-on-accent); }
.opt { border: 1px solid var(--c-line); color: var(--c-muted); }
.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select),
.form :is(input[type="text"], input[type="email"], textarea, select) {
  display: block; width: 100%; margin-top: var(--s8);
  font-size: var(--s16); line-height: 1.7; /* 16px未満だと iPhone が入力時に拡大する */
  padding: var(--s12) var(--s16); background: #FFFFFF;
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
/* 1行の入力欄は高さを 56px に固定(枠線込み) */
.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], select), .form :is(input[type="text"], input[type="email"], select) { height: var(--s56); }
.wpcf7-form :is(input, textarea, select):focus { border-color: var(--c-accent); outline: none; }
.wpcf7-form > label { margin-top: var(--s28); }
.wpcf7-form > label:first-of-type { margin-top: 0; }
.wpcf7-form .required { margin-left: var(--s8); font-size: var(--s12); color: var(--c-accent); white-space: nowrap; }
.wpcf7-form :is(.wpcf7-radio, .wpcf7-checkbox) { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s20); margin-top: var(--s12); }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label { font-weight: 500; display: inline-flex; gap: var(--s8); align-items: center; padding: var(--s4) 0; }
.wpcf7-form input:is([type="radio"], [type="checkbox"]) { width: var(--s20); height: var(--s20); margin: 0; accent-color: var(--c-accent); }
.wpcf7-form input[type="submit"] { margin-top: var(--s28); width: 100%; padding: var(--s20) var(--s28); border: 0; }
.wpcf7-not-valid-tip { color: var(--c-accent-hover); font-size: var(--s12); margin-top: var(--s4); }
.wpcf7 form .wpcf7-response-output { margin: var(--s20) 0 0; padding: var(--s12) var(--s16); border-radius: var(--radius); }
.wpcf7-spinner { display: block; margin: var(--s12) auto 0; }
.form-privacy { margin-top: var(--s24); }

/* コラム一覧 */
.post-list a { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s24); padding: var(--s20) 0; }
.post-list__cat { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0 var(--s8); align-self: center; }
.post-list__title { flex: 1 1 0; font-weight: 600; }
@media (max-width: 767px) { .post-list__title { flex-basis: 100%; } }

/* 本文(記事・規約・実績詳細) */
.prose > * + * { margin-top: var(--s24); }
.prose h2 { margin-top: var(--s56); font-size: var(--s24); padding-bottom: var(--s12); border-bottom: 1px solid var(--c-line); }
.prose h3 { margin-top: var(--s40); font-size: var(--s20); }
.prose ul, .prose ol { padding-left: var(--s24); }
.prose li + li { margin-top: var(--s8); }
.prose a, .profile__text a { color: var(--c-accent); }
.prose img { border-radius: var(--radius); }
.prose blockquote { margin-left: 0; padding-left: var(--s20); border-left: 2px solid var(--c-line); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: var(--s12) var(--s12) var(--s12) 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.prose th { font-weight: 600; }

.post-nav { margin-top: var(--s64); padding-top: var(--s24); border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; gap: var(--s16); }
/* 実績詳細の前後リンクは .page-head の外にあるので、下の相談との間をコラム記事と同じだけ空ける */
.post-nav-wrap { padding-bottom: var(--s88); }
@media (max-width: 767px) { .post-nav-wrap { padding-bottom: var(--s56); } }

/* 実績詳細 */
.work-gallery { display: grid; gap: var(--s16); }
.work-gallery figure { background: var(--c-surface); border-radius: var(--radius); padding: var(--s40); display: flex; justify-content: center; overflow: hidden; }
.work-gallery img { width: 100%; max-height: 640px; object-fit: contain; }
@media (max-width: 767px) { .work-gallery figure { padding: var(--s16); } }

/* 小さな部品 */
.sub-title { margin-top: var(--s32); font-size: var(--s16); }
.photo-pair { margin-top: var(--s12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12); }
.photo-pair .ph { aspect-ratio: 4 / 3; }
.photo-pair .photo { margin: 0; }
.mt-section { margin-top: var(--s40); }
.after-btns { margin-top: var(--s24); }
.after-list { margin-top: var(--s20); }
.section--flush { padding-top: 0; }
.profile { margin-top: var(--s40); align-items: flex-start; }
.profile .profile__name { margin-top: 0; }
.profile__kana { margin-top: var(--s4); }
.profile__text { margin-top: var(--s28); }
.profile__text p + p { margin-top: var(--s20); }
.post-meta { margin-top: var(--s20); }
.prose--spaced { margin-top: var(--s48); }
.single-kind { margin-top: var(--s40); }
.single-title { margin-top: var(--s8) !important; }
@media (max-width: 767px) {
  .profile__text { margin-top: var(--s20); }
  .single-kind { margin-top: var(--s24); }
}

/* ==========================================================
   動き(スクロールで現れる)
   - html.js-motion のときだけ効く(functions.php が head で付ける。動きを減らす設定の端末では付かない)
   - main.js が画面に入った要素へ .is-in を付ける。一度出たら戻さない
   - ホバーの動きは入れない
   - 遅れ: --d(要素ごとの固定の遅れ)+ --i(main.js が付ける兄弟内の順番)× 0.1秒
   ========================================================== */
.js-motion :is(
  .v-head,
  .section--rule, .svc, .rule-item, .hero-sub__item, .rule-list, .rule-list > li, .event-list, .event-list li,
  .hero__text, .chapter__lead, .chapter__head, .chapter__rest > :not(.svc-list):not(.event-list), .svc__body, .sec-head,
  .work-tile, .person__body, .final-cta__body, .final-cta .btns, .page-head h1, .page-head__lead, .page-head__actions,
  .svc__media, .work-tile__img, .photo, .hero__visual, .person__photo
) {
  transition:
    opacity .9s var(--ease-out), transform .9s var(--ease-out),
    clip-path 1.1s var(--ease-out), background-size 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .1s);
}
.hero__text { --d: .9s; }
.hero__visual { --d: .5s; }
.hero-sub__item { --d: 1.1s; }

/* A. ファーストビューのキャッチを1行ずつ左から書くように出す */
.js-motion .hero__line { animation: wt-wipe-x 1s var(--ease-out) both; }
.js-motion .hero__line:nth-child(1) { animation-delay: .15s; }
.js-motion .hero__line:nth-child(2) { animation-delay: .4s; }
.js-motion .hero__line:nth-child(3) { animation-delay: .65s; }
@keyframes wt-wipe-x {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* A. 縦書きの章見出しは上から下へ / D. 写真は左から右へ切り抜きを広げ、少し寄った状態から戻る */
.js-motion .v-head { clip-path: inset(0 0 100% 0); }
.js-motion :is(.svc__media, .work-tile__img, .photo, .hero__visual, .person__photo) { clip-path: inset(0 100% 0 0); }
.js-motion :is(.v-head, .svc__media, .work-tile__img, .photo, .hero__visual, .person__photo).is-in { clip-path: inset(0 0 0 0); }
.js-motion :is(.svc__media, .work-tile__img, .photo, .hero__visual) img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * .1s + .2s);
}
.js-motion .svc__media--grid img,
.js-motion :is(.svc__media, .work-tile__img, .photo, .hero__visual).is-in img { transform: none; }

/* B. 区切り線を左から伸ばす(線を背景のグラデーションで描き直す) */
.section--emphasis { --line-c: var(--c-line-strong); }
.js-motion :is(.section--rule, .svc, .rule-item, .hero-sub__item, .rule-list, .event-list, .rule-list > li, .event-list li) {
  background-image: linear-gradient(var(--line-c, var(--c-line)), var(--line-c, var(--c-line)));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: left top;
  background-size: 0 1px;
}
.js-motion :is(.section--rule, .svc, .rule-item, .hero-sub__item, .rule-list, .event-list) { border-top-color: transparent; }
.js-motion :is(.rule-list > li, .event-list li) { border-bottom-color: transparent; background-position: left bottom; }
.js-motion .svc:last-child {
  border-bottom-color: transparent;
  background-image:
    linear-gradient(var(--line-c, var(--c-line)), var(--line-c, var(--c-line))),
    linear-gradient(var(--line-c, var(--c-line)), var(--line-c, var(--c-line)));
  background-position: left top, left bottom;
}
.js-motion :is(.section--rule, .svc, .rule-item, .hero-sub__item, .rule-list, .event-list, .rule-list > li, .event-list li).is-in { background-size: 100% 1px; }

/* C. 下からふわっと現れる */
.js-motion :is(
  .hero__text, .hero-sub__item, .chapter__lead, .chapter__head, .chapter__rest > :not(.svc-list):not(.event-list), .svc__body, .sec-head,
  .work-tile, .person__body, .final-cta__body, .final-cta .btns, .page-head h1, .page-head__lead, .page-head__actions, .rule-item
):not(.is-in) { opacity: 0; transform: translateY(var(--s20)); }

/* E. 数字は main.js が数え上げる。桁が変わっても横の文字が動かないように数字の幅をそろえる */
.num.is-counting { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* F. 応援カードはスタンプを押すように */
.js-motion .cheer-card:not(.is-in) { opacity: 0; }
.js-motion .cheer-card.is-in { animation: wt-stamp .7s var(--ease-out) both; }
@keyframes wt-stamp {
  0% { opacity: 0; transform: rotate(-7deg) scale(1.18); }
  60% { opacity: 1; transform: rotate(1deg) scale(.98); }
  100% { opacity: 1; transform: none; }
}

/* 編集できる人にだけ見える仮置きに印を付ける(一般の訪問者には inc/blocks.php で出さない) */
.logged-in :is(.ph, .ph-inline) { outline: 1px dashed var(--c-accent); outline-offset: -1px; }