/*
Theme Name: GeniAds
Theme URI: https://geniads.jp/
Author: GeniAds
Author URI: https://geniads.jp/
Description: 広告クリエイティブ生成AIワークスペース「GeniAds」のコーポレートサイト用テーマ。トップページ・制作実績・資料ダウンロードのテンプレートと、お知らせ／制作実績／使い方／よくあるご質問のカスタム投稿タイプを備えています。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: geniads
Tags: business, landing-page, custom-menu, custom-logo, translation-ready
*/


/* ==========================================================================
   GeniAds — Ad Creative Generation AI
   Design system

   00. Tokens
   01. Base
   02. Typography scale
   03. Layout
   04. Components
   05. Loader
   06. Header / Menu
   07. Hero
   08. Concept
   09. News
   10. Features
   11. Steps
   12. Works
   13. Voice
   14. Pricing
   15. FAQ
   16. Contact
   17. CTA band
   18. Footer
   19. Sub pages
   20. Responsive
   21. Motion preferences
   ========================================================================== */

/* ============ 00. Tokens ============ */
:root {
  /* color — 単一の黒を透明度で運用し、色数を持たない */
  --black:            #141419;
  --black-medium:     rgba(20, 20, 25, .70);
  --black-low:        rgba(20, 20, 25, .35);
  --black-x-low:      rgba(20, 20, 25, .17);
  --black-xx-low:     rgba(20, 20, 25, .06);
  --white:            #ffffff;
  --white-medium:     rgba(255, 255, 255, .70);
  --white-low:        rgba(255, 255, 255, .38);
  --white-x-low:      rgba(255, 255, 255, .20);
  --white-xx-low:     rgba(255, 255, 255, .08);
  --light-gray:       #f4f4f4;
  /* 唯一の有彩色。入力エラーは色だけでなく文言でも示すため、用途はここだけに限る */
  --error:            #b23c3c;

  /* type */
  --font-en: "neue-haas-unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-jp: YakuHanJP, "Noto Sans JP", var(--font-en),
             "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --fs-xs:   .6875rem;   /* 11px   */
  --fs-sm:   .78125rem;  /* 12.5px */
  --fs-base: .9375rem;   /* 15px   */
  --fs-md:   1.0625rem;  /* 17px   */
  --fs-lg:   1.1875rem;  /* 19px   */
  --fs-xl:   1.375rem;   /* 22px   */
  --fs-2xl:  1.625rem;   /* 26px   */
  --fs-3xl:  1.875rem;   /* 30px   */
  --fs-4xl:  2.125rem;   /* 34px   */
  --fs-6xl:  3.1875rem;  /* 51px   */

  /* 寸法 */
  --px: 1.25rem;         /* 画面左右の余白 */
  --gap: 1rem;           /* 12カラムのカラム間 */
  --header-h: 4rem;
  --sec-y: 5rem;         /* セクションの上下 */
  --rail-w: 2rem;        /* ハンバーガーと縦スライドショーの共通幅 */

  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

@media (min-width: 768px) {
  :root { --px: 2rem; --gap: 1.25rem; --header-h: 4.25rem; --sec-y: clamp(2.5rem, 5.5vh, 5rem); }
}
@media (min-width: 1024px) {
  :root { --px: 2.5rem; --gap: 1.5rem; --header-h: 5rem; --sec-y: clamp(3rem, 5.5vh, 6rem); --rail-w: 2.5rem; }
}
@media (min-width: 1536px) {
  :root { --px: 4rem; }
}

/* ============ 01. Base ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .01em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--black); color: var(--white); }

:focus-visible { outline: 1px solid var(--black); outline-offset: 4px; }
.on-dark :focus-visible,
.cta :focus-visible,
.menu :focus-visible,
.header.is-open :focus-visible { outline-color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ 02. Typography scale ============ */
/* 全ての見出しは weight 400。強調は 500 までに留める。 */
.t-xs   { font-size: var(--fs-xs);   line-height: 1.8; }
.t-sm   { font-size: var(--fs-sm);   line-height: 1.8; }
.t-base { font-size: var(--fs-base); line-height: 1.8; }
.t-md   { font-size: var(--fs-md);   line-height: 1.8; }
.t-lg   { font-size: var(--fs-lg);   line-height: 1.6; }
.t-xl   { font-size: var(--fs-xl);   line-height: 1.6; }
.t-2xl  { font-size: var(--fs-2xl);  line-height: 1.5; }
.t-3xl  { font-size: var(--fs-3xl);  line-height: 1.5; }
.t-4xl  { font-size: var(--fs-4xl);  line-height: 1.4; }
.t-6xl  { font-size: var(--fs-6xl);  line-height: 1.35; }
.t-medium { font-weight: 500; }
.t-low    { color: var(--black-low); }
.t-mid    { color: var(--black-medium); }

.en {
  font-family: var(--font-en);
  font-feature-settings: normal;
}

/* 見出し（日本語）: 2xl → 3xl。
   最大の 4xl はヒーローのキャッチコピー専用にして、主従をはっきりさせる */
.h-lead {
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
}
@media (min-width: 768px) { .h-lead { font-size: var(--fs-3xl); } }

/* ============ 03. Layout ============ */
.wrap { padding-inline: var(--px); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: calc(var(--sec-y) * .65); }

/* 広い画面では「1セクション＝1画面」。中身は上下中央に置き、
   ヘッダーが固定なので、その高さぶんだけ上の余白を厚くして下へ寄せる */
@media (min-width: 1024px) {
  .section {
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: calc(var(--sec-y) + var(--header-h)) var(--sec-y);
  }
  /* 2枚の面は引き伸ばす（中身は .gate__half 側で中央寄せ）。
     縮めると真ん中の仕切り線が途中で切れる */
  .gate { min-height: 100svh; }
}
.section--gray { background: var(--light-gray); }
/* 地の色が続くときの切れ目。色を足さず罫線で分ける */
.section--ruled { border-top: 1px solid var(--black-x-low); }

/* 黒地のセクション（CTA帯とフッターに挟まれる位置で使う） */
.section--dark {
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--white-x-low);
}
.section--dark .sec-label { color: var(--white-low); border-bottom-color: var(--white-x-low); }
.section--dark .sec-desc { color: var(--white-medium); }
.section--dark .news__list,
.section--dark .news__item { border-color: var(--white-x-low); }
.section--dark .news__date { color: var(--white-low); }
.section--dark .news__cat { color: var(--white-medium); border-color: var(--white-x-low); }

.rule { border: 0; border-top: 1px solid var(--black-x-low); height: 0; margin: 0; }

/* セクション見出し: 小さなラベル ＋ 日本語の主題 */
.sec-head { margin-bottom: 2rem; }
@media (min-width: 768px) { .sec-head { margin-bottom: 4rem; } }

.sec-label {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--black-low);
  padding-bottom: .875rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--black-x-low);
}
.sec-label span:last-child { margin-left: auto; }

.sec-title { font-weight: 400; }
.sec-desc {
  margin-top: 1.5rem;
  max-width: 42em;
  font-size: var(--fs-base);
  color: var(--black-medium);
}

/* ============ 04. Components ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.5rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease),
              opacity .3s var(--ease), visibility .3s;
}
.btn--dark  { background: var(--black); color: var(--white); border-color: var(--white-x-low); }
.btn--dark:hover  { background: rgba(20, 20, 25, .70); }
.btn--light { background: var(--white); color: var(--black); border-color: var(--black-x-low); }
.btn--light:hover { background: rgba(20, 20, 25, .05); }
.btn--outline { background: transparent; color: var(--black); border-color: var(--black-x-low); }
.btn--outline:hover { background: rgba(20, 20, 25, .05); }
.btn--sm { height: 2rem; padding: 0 1.25rem; }
.btn--lg { height: 3rem; padding: 0 1.75rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.on-dark .btn--light:hover { background: rgba(255, 255, 255, .70); }

/* 矢印つきテキストリンク */
.link {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  position: relative;
  font-size: var(--fs-sm);
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.link:hover::after { opacity: 1; }
.link .arw { font-family: var(--font-en); transition: transform .3s var(--ease); }
.link:hover .arw { transform: translateX(3px); }

/* タグ */
.tag {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 .625rem;
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--black-medium);
  white-space: nowrap;
}

/* スクロール連動フェード
   JS が動く環境でのみ隠す。スクリプトが落ちても本文は必ず読める。 */
.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; }

/* 画像の表示枠 */
.media {
  position: relative;
  overflow: hidden;
  background: var(--light-gray);
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
a:hover .media img, .hoverable:hover .media img { transform: scale(1.03); }

/* ============ 05. Loader / ページ遷移 ============ */
/* 遷移の幕。JS が無い環境では常に透明のままなので、内容が隠れることはない */
.veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s var(--ease);
}
.js .veil { opacity: 1; }                    /* 到着時: 白く覆った状態から始める */
.js.is-entered .veil { opacity: 0; }         /* 読み込み後: ゆっくり晴れる */
.js.is-leaving .veil {                       /* 離脱時: 少し速めに閉じる */
  opacity: 1;
  transition-duration: .5s;
}
@media (prefers-reduced-motion: reduce) { .veil { display: none; } }

.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--white);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { width: auto; height: 72px; }

/* ============ 06. Header / Menu ============ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  transition: transform .5s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(255, 255, 255, .80);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--black-xx-low);
}
.header.is-hidden { transform: translateY(-100%); }

/* メニューを開いているあいだ。ヘッダーはメニューより手前にあるので、
   背景を透かして黒地を見せ、中身だけを白に反転させる */
.header.is-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--white);
}
/* ロゴは黒インクの画像なので、色の指定ではなく反転で白にする */
.header.is-open .logo__mark,
.header.is-open .logo__text { filter: invert(1); }
/* 同じCTAがメニュー内にもあるため、開いているあいだは隠す */
.header.is-open .btns .btn { opacity: 0; visibility: hidden; }

.header__inner {
  height: var(--header-h);
  align-items: center;
}
.header__logo { grid-column: span 3; position: relative; z-index: 20; }
.header__nav  { grid-column: 4 / span 6; }
.header__act  { grid-column: 10 / span 3; justify-self: end; position: relative; z-index: 20; }
/* 項目やボタンが増えても衝突しないよう、デスクトップでは
   12カラムに固定せず、内容の幅に応じて並べる */
@media (min-width: 1024px) {
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2.5vw, 3rem);
  }
  .header__logo, .header__nav, .header__act { grid-column: auto; }
  /* ロゴは縮めない。縮むとワードマークが潰れる */
  .header__logo, .header__act { flex: none; }
}
/* 1280px 未満は項目が7つ入るとボタンと競り合うので、
   白いボタン2つはヘッダーから外す（ハンバーガーメニューには残る） */
@media (max-width: 1279px) {
  .header__act .btns .btn--light { display: none; }
}
.header__menu { display: none; }

.logo { display: inline-flex; align-items: center; gap: .5rem; }
/* ロゴマーク（キューブ）とワードマークの組み。高さで揃える */
.logo__mark { width: auto; height: 22px; flex: none; transition: filter .3s var(--ease); }
.logo__text { width: auto; height: 13px; flex: none; transition: filter .3s var(--ease); }
@media (min-width: 768px) {
  .logo__mark { height: 24px; }
  .logo__text { height: 14px; }
}

.nav__list { display: flex; align-items: center; gap: clamp(.875rem, 1.5vw, 1.75rem); }
.nav__list a {
  position: relative;
  font-size: var(--fs-sm);
  white-space: nowrap;
  padding-block: .25rem;
}
@media (min-width: 1280px) { .nav__list a { font-size: var(--fs-base); } }
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after,
.nav__list a.is-active::after { opacity: 1; }

.header__act .btns { display: flex; align-items: center; gap: .5rem; }

/* ハンバーガー: 2本の細いバー。幅を問わず常に出す */
.menu-btn {
  position: relative;
  z-index: 20;
  width: var(--rail-w); height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
}
@media (min-width: 1024px) { .menu-btn { margin-left: 1.5rem; } }
.menu-btn i {
  position: absolute;
  left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.menu-btn i:nth-child(1) { top: 5px; }
.menu-btn i:nth-child(2) { top: 11px; }
.menu-btn.is-open i:nth-child(1) { transform: translateY(3px) rotate(11deg); }
.menu-btn.is-open i:nth-child(2) { transform: translateY(-3px) rotate(-11deg); }

/* フルスクリーンメニュー */
/* 開くと白黒が反転する */
.menu {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: var(--black);
  color: var(--white);
  padding: calc(var(--header-h) + 2.5rem) var(--px) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__list li + li { border-top: 1px solid var(--white-x-low); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .875rem;
  font-size: var(--fs-lg);
}
.menu__list .num {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--white-low);
}
.menu__foot { margin-top: 3rem; display: grid; gap: 1rem; }
.menu__foot .btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.menu__foot .btn { height: 2.75rem; }
.menu__mail {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  color: var(--white-low);
}
/* 黒地では主従が逆になるので、塗りと線を入れ替える */
.menu .btn--dark {
  background: var(--white);
  color: var(--black);
  border-color: transparent;
}
.menu .btn--dark:hover { background: rgba(255, 255, 255, .72); }
.menu .btn--light {
  background: transparent;
  color: var(--white);
  border-color: var(--white-x-low);
}
.menu .btn--light:hover { background: rgba(255, 255, 255, .10); }

/* デスクトップでも開けるので、間延びしないよう幅を抑える */
@media (min-width: 1024px) {
  .menu { padding-top: calc(var(--header-h) + 4rem); }
  .menu__list { max-width: 34rem; }
  .menu__list a { font-size: var(--fs-xl); padding-block: 1rem; }
  .menu__foot { max-width: 34rem; }
}

/* --- 右下のお問い合わせポップ --- */
.pop {
  position: fixed;
  right: var(--px);
  bottom: var(--px);
  z-index: 120;                 /* ヘッダー(150)・メニュー(140)より下に置く */
  /* 表示は JS が行う。スクリプトが無い環境では出さない（閉じられないため） */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pop.is-in { opacity: 1; transform: none; pointer-events: auto; }

.pop__full {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem 2.75rem .75rem 1.25rem;   /* 右は閉じるボタンの分 */
  background: var(--white);
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(20, 20, 25, .08);
}
.pop__text { font-size: var(--fs-sm); white-space: nowrap; }

/* × を押しても入口自体は残す。丸いボタンに畳むだけ */
.pop__mini {
  display: none;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(20, 20, 25, .18);
  transition: opacity .3s var(--ease);
}
.pop__mini:hover { opacity: .8; }
.pop__mini svg {
  width: 1.25rem; height: 1.25rem;
  margin-inline: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pop.is-mini .pop__full { display: none; }
.pop.is-mini .pop__mini { display: block; }

.pop__close {
  position: absolute;
  top: 50%; right: .625rem;
  transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  transition: background-color .3s var(--ease);
}
.pop__close:hover { background: var(--black-xx-low); }
.pop__close::before, .pop__close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1px;
  background: var(--black);
}
.pop__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pop__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 639px) {
  .pop__text { display: none; }   /* 狭い画面ではボタンと × だけにする */
}

/* --- 相談パネル（JS が組み立てる） --- */
.ask {
  position: fixed;
  right: var(--px);
  bottom: var(--px);
  z-index: 130;
  width: min(23rem, calc(100vw - var(--px) * 2));
  max-height: min(34rem, 76vh);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--black-x-low);
  box-shadow: 0 10px 40px rgba(20, 20, 25, .12);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.ask.is-open { opacity: 1; transform: none; pointer-events: auto; }

.ask__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1rem .875rem 1.25rem;
  border-bottom: 1px solid var(--black-x-low);
}
.ask__title { font-size: var(--fs-sm); font-weight: 500; }
.ask__sub { font-size: var(--fs-xs); color: var(--black-low); margin-top: .125rem; }
.ask__close {
  position: relative;
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  transition: background-color .3s var(--ease);
}
.ask__close:hover { background: var(--black-xx-low); }
.ask__close::before, .ask__close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1px;
  background: var(--black);
}
.ask__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ask__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.ask__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ask__view { display: none; }
.ask__view.is-shown { display: block; }

/* 相談相手の選択 */
.ask__pick { border-bottom: 1px solid var(--black-x-low); }
.ask__opt {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  width: 100%;
  text-align: left;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--black-xx-low);
  transition: background-color .3s var(--ease);
}
.ask__opt:last-child { border-bottom: 0; }
.ask__opt:hover { background: var(--black-xx-low); }
/* 各社のマークはサイトの配色に合わせて単色で表示する */
.ask__ico {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: .1875rem;
  color: var(--black);
}
.ask__ico svg { width: 100%; height: 100%; fill: currentColor; }
.ask__ico img { width: auto; height: 100%; margin-inline: auto; }
.ask__opt-body { min-width: 0; }
.ask__opt-body b { display: block; font-size: var(--fs-base); font-weight: 400; }
.ask__opt-body span { display: block; margin-top: .125rem; font-size: var(--fs-xs); color: var(--black-low); }
.ask__note { padding: 1rem 1.25rem; font-size: var(--fs-xs); color: var(--black-low); line-height: 1.9; }

/* やりとり */
.ask__log { padding: 1.25rem; display: grid; gap: .75rem; }
.ask__msg {
  max-width: 88%;
  padding: .625rem .875rem;
  border-radius: 12px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  white-space: pre-wrap;
}
.ask__msg--bot { justify-self: start; background: var(--light-gray); }
.ask__msg--me  { justify-self: end; background: var(--black); color: var(--white); }
.ask__msg a { border-bottom: 1px solid var(--black-x-low); }
.ask__msg--me a { border-bottom-color: var(--white-x-low); }

.ask__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  padding: 0 1.25rem 1.25rem;
}
.ask__chip {
  font-size: var(--fs-xs);
  line-height: 1;
  padding: .5rem .75rem;
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  color: var(--black-medium);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.ask__chip:hover { background: var(--black-xx-low); border-color: var(--black-low); }

.ask__form {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem .625rem 1.25rem;
  border-top: 1px solid var(--black-x-low);
}
.ask__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: .5rem 0;
  font-size: var(--fs-sm);
}
.ask__input:focus { outline: none; }
.ask__send {
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  line-height: 1;
  transition: opacity .3s var(--ease);
}
.ask__send:hover { opacity: .7; }
.ask__back {
  padding: .75rem 1.25rem;
  font-size: var(--fs-xs);
  color: var(--black-low);
  border-top: 1px solid var(--black-xx-low);
}
.ask__back:hover { color: var(--black); }

/* ============ 07. Hero ============ */
.hero {
  /* レールの高さを合わせられるよう、上下の余白を変数で持つ。
     下は画面共通の余白（--px）にして、右下のポップと同じ線に揃える */
  --hero-pt: calc(var(--header-h) + 2rem);
  --hero-pb: var(--px);
  position: relative;
  min-height: 100svh;
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* --- 背景のサービス画面 --- */
/* 全面に敷くとアプリ側の文字とこちらの見出しが競合する。
   左端を透明へ抜いて、コピーは白地の上・画面は右側だけ、と役割で分ける。
   こうするとヴェールで沈める必要がなく、画面はそのままの濃さで見える。 */
.hero__bg {
  position: absolute;
  inset: var(--header-h) 0 0 0;   /* ヘッダーには潜らせない */
  z-index: 0;
  overflow: hidden;
}
.hero__shot {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 下端は次のセクションへ溶かす */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to top, var(--white), rgba(255, 255, 255, 0));
}
@media (max-width: 1023px) {
  /* 縦積みでは逃げ場がないので、こちらは薄く敷いて全面を沈める */
  .hero__shot { opacity: .13; }
}
@media (min-width: 1024px) {
  /* 左：コピー（〜42%）／中央〜右：画面／右端：レール
     両端をぼかして、どの層とも衝突させない */
  .hero__shot {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 46%, #000 86%, transparent 100%);
  }
}

/* .grid と併用するため display:grid のまま、行方向で中央に寄せる。
   背景が絶対配置なので、位置指定が無いとコピーが背面へ隠れる */
.hero__head { position: relative; z-index: 2; flex: 1; display: grid; align-content: end; }
.hero__copy { grid-column: span 12; }
/* 右に画面を置くので、コピーは左半分に収める */
@media (min-width: 1024px) { .hero__copy { grid-column: span 5; align-self: center; } }

/* 参考サイトの見出しに合わせる: 2xl → 3xl → 4xl（26 / 30 / 34px）、
   ウェイト400・行送り1.4。実測でも1文字あたり約35pxで一致した */
.hero__title {
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
}
@media (min-width: 768px)  { .hero__title { font-size: var(--fs-3xl); } }
@media (min-width: 1024px) { .hero__title { font-size: var(--fs-4xl); } }
.hero__title .l { display: block; overflow: hidden; }
.hero__title .l > span {
  display: block;
  transition: transform 1.1s var(--ease);
}
.js .hero__title .l > span { transform: translateY(105%); }
.is-ready .hero__title .l > span { transform: none; }
.hero__title .l:nth-child(2) > span { transition-delay: .08s; }
.hero__title .l:nth-child(3) > span { transition-delay: .16s; }
.hero__title .thin { color: var(--black-low); }

/* キャッチの受け。見出しと本文のあいだの段を1つ作る */
/* 見出しが34pxになったので、サブは17pxで据え置く（19pxだと差が付かない） */
.hero__sub {
  margin-top: 1.25rem;
  font-size: var(--fs-md);
  line-height: 1.7;
}
.hero__btns { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .625rem; }

/* --- 作例のスライドショー（右端・下から上へ） --- */
/* 見せるだけの装飾。プレビューとの連動は持たない */
.hero__rail {
  position: absolute;
  /* コピーと同じ帯に収める（ヒーローの上下余白と一致させる） */
  top: var(--hero-pt); bottom: var(--hero-pb);
  right: var(--px);   /* ハンバーガーと同じ右端に揃える */
  z-index: 1;
  width: var(--rail-w);
  overflow: hidden;
  /* 上下は視界の外へ抜けていくように見せる */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
@media (max-width: 1023px) { .hero__rail { display: none; } }

/* 継ぎ目なくループさせるため、間隔は gap ではなく margin で持たせる */
.rail__track {
  display: flex;
  flex-direction: column;
  animation: rail-up 44s linear infinite;
  will-change: transform;
}
.hero__rail:hover .rail__track { animation-play-state: paused; }
@keyframes rail-up { to { transform: translateY(-50%); } }

.rail__item {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: 6px;
  flex: none;
  overflow: hidden;
  background: var(--light-gray);
}
.rail__item img { width: 100%; height: 100%; object-fit: cover; }

/* 中央だけ元の色で見せる。
   画像側をグレーにするのではなく、中央に穴を開けた1枚のフィルムを被せている。
   こうすると流れている最中でも、常に真ん中の1枚だけが色を持つ。 */
.rail__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: grayscale(1);
          backdrop-filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 38%, transparent 46%, transparent 54%, #000 62%, #000 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 38%, transparent 46%, transparent 54%, #000 62%, #000 100%);
}

/* ============ 08. Concept ============ */
.concept__title { grid-column: span 12; }
@media (min-width: 1024px) {
  .concept__title { grid-column: span 5; }
  .concept__text  { grid-column: 7 / span 6; }
}
.concept__text { grid-column: span 12; margin-top: 2rem; display: grid; gap: 1.75rem; }
@media (min-width: 1024px) { .concept__text { margin-top: 0; } }
.concept__text p { color: var(--black-medium); }

/* 4つの設計思想 */
.tenets {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.5rem;
  border-top: 1px solid var(--black-x-low);
  padding-top: 2.5rem;
}
@media (min-width: 768px) { .tenets { margin-top: clamp(2rem, 4.5vh, 4rem); } }
/* 本文の長さが4つで違うので、縦に伸ばして証拠の行（__proof）を下端で揃える */
.tenet {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px)  { .tenet { grid-column: span 6; } }
@media (min-width: 1024px) { .tenet { grid-column: span 3; } }
.tenet__num { font-family: var(--font-en); font-size: var(--fs-xs); color: var(--black-low); }
.tenet__title { margin-top: .75rem; font-size: var(--fs-md); font-weight: 400; line-height: 1.6; }
.tenet__text {
  flex: 1;
  margin-top: .75rem;
  font-size: var(--fs-sm);
  color: var(--black-medium);
}
.tenet__proof {
  margin-top: 1rem;
  padding-top: .75rem;
  /* 折り返しが1行のものと2行のものが混ざるため、2行分を確保して箱の高さも合わせる */
  min-height: calc(2 * 1.8em + .75rem + 1px); /* border-box なので padding と border を足す */
  border-top: 1px solid var(--black-x-low);
  font-size: var(--fs-xs);
  color: var(--black-low);
}
/* ============ 09. News ============ */
.news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.news__list { border-top: 1px solid var(--black-x-low); }
.news__item { border-bottom: 1px solid var(--black-x-low); }
/* 個別ページができたら .news__row を <a> に戻す */
.news__row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: .25rem 1.25rem;
  padding-block: 1.25rem;
}
@media (min-width: 768px) {
  .news__row { grid-template-columns: 7.5rem 7.5rem 1fr; padding-block: 1.5rem; }
}
.news__date {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  color: var(--black-low);
}
.news__cat {
  justify-self: start;
  font-size: var(--fs-xs);
  color: var(--black-medium);
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  padding: 0 .625rem;
  line-height: 1.5rem;
}
.news__title { grid-column: 1 / -1; font-size: var(--fs-base); }
@media (min-width: 768px) { .news__title { grid-column: auto; } }

/* ============ 10. How to use ============ */
/* 6ステップを一度に並べると文字が多くなるので、1件ずつ大きく見せて送る。 */
.feats { position: relative; }

.feats__top {
  display: grid;
  gap: var(--gap);
}
.feats__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--white);
}
@media (max-width: 639px) { .feats__stage { aspect-ratio: 4 / 3; } }
/* 画面が低いときは高さで頭打ちにする。写真は contain なので端は切れない */
@media (min-width: 1024px) { .feats__stage { max-height: 46svh; } }

/* 淡く浮かび上がるように入れ替える（下から少し持ち上げながらフェード） */
.feat-vis {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(9%);
}
.feat-vis.is-prev {                  /* 前の図版は、その場で静かに引く */
  opacity: 0;
  transform: translateY(0);
  z-index: 1;
  transition: opacity .55s var(--ease);
}
.feat-vis.is-on {
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
/* 画面写真の下に敷く横ストリップ。写真いっぱいには広げず、左に寄せる */
.feats__rail { display: flex; gap: 6px; height: 2rem; justify-content: flex-start; }
.feats__thumb {
  flex: none;
  width: 3rem;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--black-x-low);
  font-size: var(--fs-xs);
  color: var(--black-low);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.feats__thumb:hover { border-color: var(--black-low); color: var(--black); }
.feats__thumb.is-on { background: var(--black); border-color: var(--black); color: var(--white); }

/* 説明はシャッターせず、静かに入れ替える */
.feats__texts { display: grid; margin-top: 1.75rem; }
.feat-txt {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
  display: grid;
  gap: .75rem 2rem;
}
.feat-txt.is-on { opacity: 1; visibility: visible; }
/* 番号とタイトルは近づけて1かたまりに見せる */
.feat__head { display: grid; gap: .625rem; align-content: start; }
.feat__body { display: grid; gap: .625rem; align-content: start; }
/* 行送りを 1 にして、番号の行box が余計に膨らまないようにする。
   これでベースラインを揃えたときに上端もほぼ一直線になる */
.feat__idx { font-size: var(--fs-sm); line-height: 1; color: var(--black-low); }
.feat__idx b { font-size: var(--fs-2xl); line-height: 1; font-weight: 400; color: var(--black); }
.feat__title { font-size: var(--fs-md); font-weight: 400; line-height: 1.6; }
@media (min-width: 900px) { .feat__title { font-size: var(--fs-lg); } }
@media (min-width: 1024px) { .feat__title { font-size: var(--fs-md); } }
.feat__text { font-size: var(--fs-sm); color: var(--black-medium); }
.feat__note { font-size: var(--fs-xs); color: var(--black-low); }

/* 900px 以上は「番号＋タイトル」と「本文」を左右に分ける。写真とあわせて3列に見える。
   .feat__head を透過させて番号・タイトル・本文を .feat-txt の格子へ直接置くと、
   1行目＝番号だけ／2行目＝タイトルと本文 になり、**タイトルと本文の頭がそろう**。
   （このブロックは .feat__head の基本ルールより後ろに置くこと） */
@media (min-width: 900px) {
  .feat-txt {
    grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.4fr);
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: .75rem;
    align-items: start;
  }
  .feat__head { display: contents; }
  .feat__idx   { grid-area: 1 / 1; }
  .feat__title { grid-area: 2 / 1; }
  .feat__body  { grid-area: 2 / 2; }
}

/* 広い画面では「画面写真＋その下のストリップ」と「説明」を左右に置く。
   縦にすべて積むと 16:9 の写真だけで画面の高さを使い切ってしまい、
   1画面にセクションが収まらないため */
@media (min-width: 1024px) {
  .feats {
    display: grid;
    /* 写真の列幅は「高さの上限 × 16/9」から逆算する。こうすると写真の左右に
       余白が出ず、下のストリップの幅も写真とぴったり揃う */
    grid-template-columns:
      minmax(0, min(58%, calc(46svh * 16 / 9)))
      minmax(15rem, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  .feats__texts { margin-top: 0; }
  /* 写真とストリップは1つのまとまりに見せたいので、間は詰める */
  .feats__top { gap: .5rem; }
}

/* 図版は実際の画面のキャプチャ。比率がまちまちなので contain で収める */
.feat__shot {
  width: 100%; height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
}
.feat__shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border: 1px solid var(--black-x-low);
}
/* 広い画面では余白を外して写真を枠いっぱいに出し、下のストリップと左右の端を揃える。
   （このブロックは .feat__shot の基本ルールより後ろに置くこと） */
@media (min-width: 1024px) { .feat__shot { padding: 0; } }

/* 対応する制作物とサイズ */
.formats { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.formats__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--black);
}
.formats__title { font-size: var(--fs-md); font-weight: 400; }
.formats__lead { font-size: var(--fs-xs); color: var(--black-low); }
.formats .table-wrap { margin-top: 0; }
.formats__note {
  margin-top: 1.25rem;
  font-size: var(--fs-xs);
  color: var(--black-low);
  line-height: 1.9;
}

/* ============ 11. Works ============ */
/* トップは業種の入口だけを置き、実物は一覧ページで見せる */
.industries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  /* 全幅に引き伸ばさず、4枚のまとまりを中央に置く */
  max-width: 55rem;
  margin-inline: auto;
}
@media (min-width: 768px) { .industries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 業種名の長さが違っても枠を揃える。
   flex 項目の初期値は flex:0 1 auto なので、指定しないと文字数ぶんの幅に縮む */
.industry { display: flex; }
.industry__link {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.5rem;
  padding: 2.5rem .75rem;
  background: var(--white);
  border: 1px solid var(--black-x-low);
  transition: border-color .3s var(--ease);
}
@media (min-width: 768px) { .industry__link { padding: 2.5rem 1rem; } }
.industry__link:hover { border-color: var(--black-low); }
/* ボタンも文字数で幅が変わらないよう、上限つきで揃える */
.industry__link .btn {
  width: min(100%, 10.5rem);
  padding-inline: 1rem;
}
.industry__icon {
  display: block;
  width: 2.5rem; height: 2.5rem;
  color: var(--black);
}
.industry__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ボタンは「資料をダウンロード」と同じ見た目。hover は面全体で受ける */
.industry__link:hover .btn--light { background: rgba(20, 20, 25, .05); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.filter {
  height: 2rem;
  padding: 0 1rem;
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--black-medium);
  background: var(--white);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter:hover { border-color: var(--black-low); }
.filter[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }

/* 業種ごとのまとまり。選ばれた業種だけを先頭へ動かす。
   隣接セレクタは並べ替えに追従しないので、間隔は gap で取る */
.worksets {
  display: flex;
  flex-direction: column;
  gap: var(--sec-y);
}
.workset { order: 1; }
.workset.is-first { order: 0; }
.workset__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .875rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--black);
}
.workset__title { font-size: var(--fs-xl); font-weight: 400; }
.workset__count { font-family: var(--font-en); font-size: var(--fs-xs); color: var(--black-low); }

.works {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 3rem;
}
.work { grid-column: span 12; }
@media (min-width: 640px)  { .work { grid-column: span 6; } }
@media (min-width: 1024px) { .work { grid-column: span 4; } }
/* 正方形と縦長が混ざるので、同じ枠に contain で収めて並びを揃える。
   cover にすると広告の端（ロゴやボタン）が切れてしまう */
.work__art { aspect-ratio: 4 / 5; padding: clamp(10px, 1.4vw, 20px); }
.work__art img { object-fit: contain; }
.work__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--black-x-low);
  font-size: var(--fs-sm);
}
.work__meta .size { font-family: var(--font-en); color: var(--black-low); font-size: var(--fs-xs); }
.work__title { margin-top: .875rem; font-size: var(--fs-base); font-weight: 400; line-height: 1.7; }
/* STEP2 で入れた指示。再現できることが伝わる */
.work__spec { margin-top: .75rem; font-size: var(--fs-sm); color: var(--black-medium); }
.work__spec dt {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--black-low);
  margin-bottom: .25rem;
}
.works__note { margin-top: 2rem; font-size: var(--fs-xs); color: var(--black-low); }

/* ============ 12. Voice ============ */
.voices {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.5rem;
  border-top: 1px solid var(--black-x-low);
  padding-top: 2.5rem;
}
.voice { grid-column: span 12; }
@media (min-width: 768px) { .voice { grid-column: span 4; } }
.voice p { font-size: var(--fs-md); line-height: 1.9; }
.voice footer { margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--black-low); }
.voice footer span { display: block; color: var(--black); font-size: var(--fs-sm); }

/* ============ 13. Pricing ============ */
/* 月払い／年払いの切り替え */
.billing {
  display: inline-flex;
  padding: .25rem;
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  margin-bottom: 2.5rem;
}
.billing__btn {
  height: 2.25rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--black-medium);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.billing__btn[aria-pressed="true"] { background: var(--black); color: var(--white); }

.plan-group + .plan-group { margin-top: 3.5rem; }
.plan-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .875rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--black-x-low);
}
.plan-group__title { font-size: var(--fs-md); font-weight: 400; }
.plan-group__note { font-size: var(--fs-xs); color: var(--black-low); }

.plans {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1.25rem;
}
@media (min-width: 900px) { .plans--2 > .plan { grid-column: span 6; } }
.plan {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--black-x-low);
  background: var(--white);
  transition: border-color .4s var(--ease);
}
@media (min-width: 900px) { .plan { grid-column: span 4; padding: 2.5rem 2rem 2rem; } }
.plan:hover { border-color: var(--black-low); }
.plan--dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.plan--dark:hover { border-color: var(--black); }
.plan__name { font-family: var(--font-en); font-size: var(--fs-lg); font-weight: 400; }
.plan__for { font-size: var(--fs-xs); color: var(--black-low); }
.plan--dark .plan__for { color: var(--white-low); }
.plan__price {
  margin-top: 1.75rem;
  display: flex;
  align-items: baseline;
  gap: .125rem;
  font-family: var(--font-en);
  line-height: 1.1;
}
.plan__price .cur { font-size: var(--fs-lg); }
.plan__price .num { font-size: var(--fs-4xl); font-weight: 400; }
.plan__price .per { font-size: var(--fs-xs); color: var(--black-low); margin-left: .375rem; font-family: var(--font-jp); }
.plan--dark .plan__price .per { color: var(--white-low); }
.plan__price .num--jp { font-family: var(--font-jp); font-size: var(--fs-xl); }
.plan__note { margin-top: .5rem; font-size: var(--fs-xs); color: var(--black-low); }
.plan--dark .plan__note { color: var(--white-low); }
/* 1枚あたりの単価と、年払いの差額 */
.plan__unit {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: var(--black);
}
.plan--dark .plan__unit { color: var(--white); }
.plan__save { margin-top: .25rem; font-size: var(--fs-xs); color: var(--black-low); }
.plan__save[hidden] { display: none; }
.plan__list {
  flex: 1;
  margin: 1.75rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--black-x-low);
  display: grid;
  gap: .625rem;
  align-content: start;
}
.plan--dark .plan__list { border-top-color: var(--white-x-low); }
.plan__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--black-medium);
}
.plan--dark .plan__list li { color: var(--white-medium); }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .8em;
  width: .5rem; height: 1px;
  background: currentColor;
  opacity: .6;
}
.plan__badge {
  align-self: flex-start;
  margin-bottom: .75rem;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--white-low);
}
.pricing__note {
  margin-top: 1.5rem;
  font-size: var(--fs-xs);
  color: var(--black-low);
}

/* クレジットの説明。PRICING 直下に必ず置く */
.credit {
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid var(--black);
}
.credit h3 { font-size: var(--fs-md); font-weight: 400; }
.credit ul { margin-top: 1rem; display: grid; gap: .625rem; }
.credit li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--black-medium);
}
.credit li::before {
  content: "";
  position: absolute;
  left: 0; top: .8em;
  width: .5rem; height: 1px;
  background: currentColor;
  opacity: .6;
}
.credit li strong { font-weight: 500; color: var(--black); }

/* 比較表（PRICING・使い方ページ共通） */
.table-wrap { overflow-x: auto; margin-top: 2.5rem; }
.table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  text-align: left;
  padding: .875rem 1rem .875rem 0;
  border-bottom: 1px solid var(--black-x-low);
  vertical-align: top;
}
.table thead th {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--black-low);
  border-bottom-color: var(--black);
  white-space: nowrap;
}
.table tbody th { font-weight: 400; color: var(--black); white-space: nowrap; }
.table td { color: var(--black-medium); }
.table .yes { color: var(--black); }
.table .no { color: var(--black-low); }

/* ============ 14. FAQ ============ */
.acc { border-top: 1px solid var(--black-x-low); }
/* 10問を1列に積むと画面の高さを超えるので、広い画面では2列に折り返す */
@media (min-width: 1024px) {
  .acc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}
.acc__item { border-bottom: 1px solid var(--black-x-low); }
/* 10問並ぶので、1行の高さを抑える。設問は本文と同じ15pxで十分に立つ */
.acc__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding-block: 1.125rem;
  font-size: var(--fs-base);
  line-height: 1.7;
  transition: opacity .3s var(--ease);
}
@media (min-width: 768px) { .acc__q { padding-block: 1.125rem; } }
.acc__q:hover { opacity: .55; }
.acc__icon { position: relative; flex: none; width: 1rem; height: 1rem; }
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform .45s var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__q[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.acc__a > div { overflow: hidden; }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a p {
  max-width: 52em;
  padding-bottom: 1.5rem;
  padding-right: 2.5rem;
  font-size: var(--fs-sm);
  line-height: 2.1;
  color: var(--black-medium);
}
/* ここに無い質問の逃げ道 */
.acc__foot { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--black-medium); }

/* ============ 15. Contact / Forms ============ */
.contact__intro { grid-column: span 12; }
.contact__form  { grid-column: span 12; }
@media (min-width: 1024px) {
  .contact__intro { grid-column: span 4; }
  .contact__form  { grid-column: 6 / span 7; }
}
.contact__links { margin-top: 2.5rem; display: grid; gap: .875rem; }
.contact__links a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--black-x-low); font-size: var(--fs-sm); transition: opacity .3s var(--ease); }
.contact__links a:hover { opacity: .55; }

.form { display: grid; gap: .875rem; margin-top: 1.25rem; }
@media (min-width: 1024px) { .form { margin-top: 0; } }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--fs-xs);
  color: var(--black-low);
}
.field .req { color: var(--black); }
.field .opt { color: var(--black-low); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--black-x-low);
  border-radius: 0;
  padding: .625rem 0;
  font-size: var(--fs-base);
  transition: border-color .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--black-low) 50%),
                    linear-gradient(135deg, var(--black-low) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.8; }
.field input::placeholder, .field textarea::placeholder { color: var(--black-low); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--black);
}
.field .is-error { border-bottom-color: var(--error); }
.field__err { font-size: var(--fs-xs); color: var(--error); min-height: 1rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--fs-sm);
  color: var(--black-medium);
  cursor: pointer;
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem; height: 1rem;
  flex: none;
  margin-top: .35rem;
  border: 1px solid var(--black-low);
  background: transparent;
  position: relative;
  cursor: pointer;
}
.check input:checked { background: var(--black); border-color: var(--black); }
.check input:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--white);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.check a { border-bottom: 1px solid var(--black-x-low); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__msg { font-size: var(--fs-sm); color: var(--black-medium); }
.form__msg.is-ok { color: var(--black); }

/* ============ 16. CTA band ============ */
.cta {
  background: var(--black);
  color: var(--white);
  padding-block: var(--sec-y);
}
.cta__inner { grid-column: span 12; }
@media (min-width: 1024px) { .cta__inner { grid-column: span 8; } }
.cta__label {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--white-low);
  padding-bottom: .875rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--white-x-low);
}
.cta__title { font-weight: 400; }
.cta__lead { margin-top: 1.5rem; max-width: 38em; color: var(--white-medium); }
.cta__btns { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .625rem; }
.cta .btn--outline { color: var(--white); border-color: var(--white-x-low); }
.cta .btn--outline:hover { background: rgba(255, 255, 255, .10); }

/* --- 入口の2枚（トップページの締め） --- */
/* 参考サイトに合わせて、薄いグレーの面を縦の罫線で二分し、
   それぞれ中央揃えで見出し・説明・ボタンを積む。全幅で断ち切る */
.gate {
  /* 前後（お問い合わせ＝灰、お知らせ＝黒）と地色を変えて境目を出す */
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .gate { grid-template-columns: 1fr 1fr; } }
.gate__half {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(4rem, 9vw, 7rem) var(--px);
  text-align: center;
}
.gate__half + .gate__half { border-top: 1px solid var(--black-x-low); }
@media (min-width: 768px) {
  .gate__half + .gate__half { border-top: 0; border-left: 1px solid var(--black-x-low); }
}
.gate__title { font-size: var(--fs-2xl); font-weight: 400; }
@media (min-width: 1024px) { .gate__title { font-size: var(--fs-3xl); } }
.gate__text { font-size: var(--fs-base); color: var(--black-medium); line-height: 2; }
.gate__btn { min-width: min(100%, 15rem); }

/* ============ 17. Footer ============ */
/* 参考サイトに合わせて黒地・白文字。見出しラベルは置かず、リンクを平らに並べる */
.footer {
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--white-x-low);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer__brand { grid-column: span 12; margin-bottom: 3rem; }
@media (min-width: 768px) { .footer__brand { grid-column: span 4; margin-bottom: 0; } }
/* 黒インクのロゴなので、反転させて白にする */
.footer .logo__mark { height: 40px; filter: invert(1); }

.footer__nav {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
@media (min-width: 768px) {
  .footer__nav { grid-column: 5 / span 8; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer__col { display: grid; gap: .875rem; align-content: start; }
.footer__col a {
  font-size: var(--fs-base);
  color: var(--white);
  transition: opacity .3s var(--ease);
}
.footer__col a:hover { opacity: .55; }

.footer__bottom {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--white-xx-low);
}
.footer__bottom p { font-size: var(--fs-xs); color: var(--white-low); }

/* ============ 18. Sub pages ============ */
.page-hero {
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: 3rem;
}
@media (min-width: 768px) { .page-hero { padding-top: calc(var(--header-h) + 7rem); padding-bottom: 4.5rem; } }
.page-hero__inner { grid-column: span 12; }
@media (min-width: 1024px) { .page-hero__inner { grid-column: span 9; } }
.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--black-low);
  margin-bottom: 2rem;
}
.crumbs a:hover { color: var(--black); }
.page-hero__title { font-weight: 400; }
.page-hero__lead { margin-top: 1.5rem; max-width: 40em; color: var(--black-medium); }
/* 下層ページの導入が文字だけで薄くならないよう、規模を1行で添える */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--black-x-low);
  font-size: var(--fs-xs);
  color: var(--black-low);
}
.page-hero__meta b { font-weight: 400; color: var(--black); }

/* 目次 */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--black-x-low);
  border-bottom: 1px solid var(--black-x-low);
}

/* 使い方 — 章立て */
.guide { border-top: 1px solid var(--black-x-low); }
.guide__block { padding-block: var(--sec-y); border-bottom: 1px solid var(--black-x-low); }
.guide__aside { grid-column: span 12; margin-bottom: 2rem; }
.guide__body  { grid-column: span 12; }
@media (min-width: 1024px) {
  .guide__aside { grid-column: span 3; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .guide__body  { grid-column: 5 / span 8; }
}
.guide__num { font-family: var(--font-en); font-size: var(--fs-xs); color: var(--black-low); }
.guide__label { margin-top: .5rem; font-size: var(--fs-md); font-weight: 400; }
.guide__title { font-size: var(--fs-xl); font-weight: 400; line-height: 1.5; }
@media (min-width: 768px) { .guide__title { font-size: var(--fs-2xl); } }
.guide__text { margin-top: 1.25rem; color: var(--black-medium); max-width: 40em; }
.guide__sub {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--black-x-low);
  font-size: var(--fs-md);
  font-weight: 400;
}
/* 本文の補足なので、本文幅いっぱいには広げない。
   幅の上限だけを決め、高さは指定しない。枠も足さないので元画像の比率そのままになる */
.guide__figure { margin-top: 2rem; max-width: 36rem; }
.guide__figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--black-x-low);  /* 白背景のキャプチャなので輪郭だけ足す */
}
.guide__figure figcaption { margin-top: .875rem; font-size: var(--fs-xs); color: var(--black-low); }
.guide__points {
  margin-top: 2rem;
  display: grid;
  gap: 1px;
  background: var(--black-x-low);
  border: 1px solid var(--black-x-low);
}
@media (min-width: 640px) { .guide__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide__point { background: var(--white); padding: 1.5rem; }
.guide__point h4 { font-size: var(--fs-sm); font-weight: 500; }
.guide__point p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--black-medium); }

/* 階層図（ワークスペース → プロジェクト → 制作物） */
.tree {
  margin-top: 2rem;
  border: 1px solid var(--black-x-low);
  padding: 1.75rem;
  font-size: var(--fs-sm);
}
.tree ul { margin-top: .5rem; padding-left: 1.25rem; border-left: 1px solid var(--black-x-low); display: grid; gap: .5rem; }
.tree > ul { margin-top: .75rem; }
.tree li { position: relative; }
.tree .nm { color: var(--black); }
.tree .ds { color: var(--black-low); font-size: var(--fs-xs); display: block; }

/* 注記 */
.note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--light-gray);
  font-size: var(--fs-sm);
  color: var(--black-medium);
}
.section--gray .note { background: var(--white); }
.note strong { font-weight: 500; color: var(--black); }
.note h4 { font-size: var(--fs-sm); font-weight: 500; color: var(--black); margin-bottom: .5rem; }

/* 資料ダウンロード */
.docmain {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 2.5rem;
  align-items: start;
}
.doc { grid-column: span 12; }
@media (min-width: 900px) { .doc { grid-column: span 5; } }
.doc__cover {
  aspect-ratio: 297 / 210;
  background: var(--light-gray);
  border: 1px solid var(--black-x-low);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color .4s var(--ease);
}
.doc:hover .doc__cover { background: #ededed; }
.doc__cover .en { font-size: var(--fs-xs); letter-spacing: .08em; color: var(--black-low); }
.doc__cover strong { font-size: var(--fs-lg); font-weight: 400; line-height: 1.5; }
.doc__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--black-x-low);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--black-low);
}
.doc__title { margin-top: .875rem; font-size: var(--fs-md); font-weight: 400; line-height: 1.6; }
.doc__text { margin-top: .625rem; font-size: var(--fs-sm); color: var(--black-medium); }
/* 資料に何が入っているかを先に見せる */
.doc__contents { grid-column: span 12; }
@media (min-width: 900px) { .doc__contents { grid-column: 7 / span 6; } }
.doc__contents ul { margin-top: 1.25rem; display: grid; gap: .75rem; }
.doc__contents li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-base);
}
.doc__contents li::before {
  content: "";
  position: absolute;
  left: 0; top: .85em;
  width: .75rem; height: 1px;
  background: var(--black-low);
}

/* ============ 19. Responsive ============ */
@media (max-width: 1023px) {
  .header__logo { grid-column: span 6; }
  .header__nav  { display: none; }
  .header__act  { grid-column: 7 / span 6; }
  .header__act .btns .btn { display: none; }
}
@media (max-width: 639px) {
  .hero__btns .btn { flex: 1 1 auto; }
  .form__foot .btn { width: 100%; }
}

/* ============ 20. Motion preferences ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* 自動送りが止まるので、重ねずに並べて全部見えるようにする */
  .feats__top { grid-template-columns: 1fr; }
  .feats__stage { aspect-ratio: auto; height: auto; display: grid; gap: 2rem; }
  .feat-vis { position: static; transform: none; }
  .feat__shot { aspect-ratio: 16 / 9; }
  .feats__texts { gap: 2rem; }
  .feat-txt { grid-area: auto; opacity: 1; visibility: visible; }
  .feats__rail { display: none; }
  .hero__title .l > span { transform: none; }
  .rail__track { animation: none; }
}

/* ============ 22. WordPress ============ */
/* 静的HTMLには無かった、WordPress が出す要素のためのスタイル。
   デザイントークンは上のものをそのまま使い、新しい色や書体は足さない。 */

/* --- 管理バー --- */
/* html に margin-top が入る一方、固定ヘッダーはビューポート基準で残るためズレる */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}
body.admin-bar { --admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar-h: 46px; }
}
body.admin-bar .menu { padding-top: calc(var(--header-h) + var(--admin-bar-h, 0px) + 2.5rem); }

/* --- 本文（固定ページ・お知らせ詳細・投稿） --- */
.page-body {
  max-width: 46rem;
  font-size: var(--fs-md);
  line-height: 1.9;
}
.page-body > * + * { margin-top: 1.5rem; }

.page-body h2 {
  margin-top: 3rem;
  font-size: var(--fs-2xl);
  line-height: 1.5;
  letter-spacing: -.01em;
}
.page-body h3 {
  margin-top: 2.5rem;
  font-size: var(--fs-xl);
  line-height: 1.6;
}
.page-body h4 { margin-top: 2rem; font-size: var(--fs-lg); }
.page-body h2:first-child,
.page-body h3:first-child { margin-top: 0; }

.page-body a {
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--black-low);
}
.page-body a:hover { text-decoration-color: currentColor; }

.page-body ul,
.page-body ol { padding-left: 1.25rem; }
.page-body li + li { margin-top: .5rem; }
.page-body ul { list-style: disc; }
.page-body ol { list-style: decimal; }

.page-body blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--black-x-low);
  color: var(--black-medium);
}

.page-body img,
.page-body video,
.page-body iframe { max-width: 100%; height: auto; }

.page-body figure { margin-left: 0; margin-right: 0; }
.page-body figcaption {
  margin-top: .625rem;
  font-size: var(--fs-sm);
  color: var(--black-medium);
}

.page-body hr {
  border: 0;
  border-top: 1px solid var(--black-x-low);
  margin-block: 3rem;
}

.page-body code,
.page-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
}
.page-body code { background: var(--light-gray); padding: .125em .375em; border-radius: 3px; }
.page-body pre {
  background: var(--light-gray);
  padding: 1.25rem;
  overflow-x: auto;
  line-height: 1.7;
}
.page-body pre code { background: none; padding: 0; }

.page-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.page-body th,
.page-body td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--black-x-low);
  text-align: left;
  vertical-align: top;
}
.page-body th { font-weight: 500; }

/* ブロックエディターの配置クラス */
.page-body .alignleft  { float: left;  margin: .25rem 1.5rem 1rem 0; }
.page-body .alignright { float: right; margin: .25rem 0 1rem 1.5rem; }
.page-body .aligncenter { display: block; margin-inline: auto; }
.page-body .alignwide,
.page-body .alignfull { max-width: none; }
.page-body .wp-block-image { margin-inline: 0; }

/* --- ページ送り・投稿間ナビ --- */
.pagination,
.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--black-x-low);
  font-size: var(--fs-sm);
  color: var(--black-medium);
}
.post-nav { justify-content: space-between; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: .5rem;
  border: 1px solid var(--black-x-low);
  border-radius: 999px;
  font-family: var(--font-en);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.pagination .page-numbers.dots { border-color: transparent; }

.page-links { margin-top: 2rem; display: flex; gap: .5rem; font-family: var(--font-en); }

/* --- コメント --- */
.comments { margin-top: 4rem; }
.comment-list { list-style: none; padding: 0; }
.comment-list ol { list-style: none; padding-left: 1.5rem; }
.comment-list .comment-body {
  padding-block: 1.5rem;
  border-top: 1px solid var(--black-x-low);
}
.comment-list .comment-meta { font-size: var(--fs-sm); color: var(--black-medium); }
.comment-respond { margin-top: 2.5rem; }
.comment-form p { margin-block: 1rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--black-x-low);
  background: var(--white);
  border-radius: 0;
}

/* --- 検索フォーム --- */
.searchform { display: grid; gap: 1rem; max-width: 28rem; margin-top: 2rem; }

/* WordPress が出す読み上げ専用テキスト（テーマ側の .sr-only と同じ扱い） */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  width: auto; height: auto;
  clip-path: none;
  z-index: 400;
  padding: .75rem 1rem;
  background: var(--black);
  color: var(--white);
}