/* ==================================================
   Preview Home｜共通コンテナ
   ================================================== */

.wf-home {
  --wf-gutter: clamp(28px, 8.33vw, 120px);
  --wf-container: min(100% - (var(--wf-gutter) * 2), var(--wf-content-max));
  --wf-card-padding: 32px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #161616 !important;
  background: var(--wf-color-paper);
  font-family: var(--wf-font-ja);
  font-size: var(--wf-font-size-body);
  line-height: var(--wf-line-body);
}

.wf-home *,
.wf-home *::before,
.wf-home *::after {
  box-sizing: border-box;
}
.wf-home a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.wf-header,
.wf-footer {
  width: var(--wf-container);
  margin-right: auto;
  margin-left: auto;
}

/* ==================================================
   Preview Home｜ヘッダー
   ================================================== */

.wf-header {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: var(--wf-header-height);
}
.wf-brand {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
}
.wf-header .wf-brand {
  font-size: clamp(20px, 2.6vw, 26px);
}
.wf-nav {
  display: flex;
  gap: 25px;
  margin-left: auto;
  font-size: 14px;
}
.wf-nav a,
.wf-footer a {
  text-decoration: none;
}
.wf-join,
.wf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 28px;
  border: 1px solid var(--wf-color-ink);
  background: var(--wf-color-ink);
  color: var(--wf-color-paper) !important;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none !important;
}
.wf-join {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 13px;
}
.wf-button:hover,
.wf-button:focus-visible,
.wf-join:hover,
.wf-join:focus-visible {
  background: var(--wf-color-paper);
  color: var(--wf-color-ink) !important;
}
/* 枠線だけのボタン。主CTAより弱いが、テキストリンクだと埋もれる副CTA用。
   .wf-button と同一詳細度のため、必ずこの順序（後）で上書きする。 */
.wf-button--ghost {
  background: transparent;
  color: var(--wf-color-ink) !important;
}
.wf-button--ghost:hover,
.wf-button--ghost:focus-visible {
  background: var(--wf-color-ink);
  color: var(--wf-color-paper) !important;
}
.wf-drawer {
  position: relative;
  display: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
}
.wf-drawer summary {
  cursor: pointer;
  list-style: none;
}
.wf-drawer summary::-webkit-details-marker {
  display: none;
}
.wf-drawer nav {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 0;
  display: grid;
  gap: 16px;
  width: 220px;
  padding: 20px;
  border: 1px solid #111;
  background: #fff;
}
.wf-drawer nav a {
  text-decoration: none;
}

/* ==================================================
   Preview Home｜ヒーローとビジュアル
   ================================================== */

.wf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: stretch;
  overflow: hidden;
  background: #ecece7;
}
.wf-hero__visual,
.wf-full-visual {
  display: grid;
  place-items: center;
  background: #e7e7e2;
  color: #555;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}
.wf-hero__visual {
  grid-column: 2;
  align-self: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.wf-hero__visual img,
.wf-hero__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wf-hero__content {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: min(100% - var(--wf-gutter), 760px);
  margin-right: 0;
  margin-left: auto;
  padding-top: 92px;
  padding-bottom: 92px;
}
.wf-eyebrow {
  margin: 0 0 18px;
  font-family: var(--wf-font-sans);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.12em;
}
.wf-home h1,
.wf-home h2,
.wf-home h3 {
  color: #161616 !important;
  font-weight: var(--wf-font-weight-heading);
  letter-spacing: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.wf-home h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(48px, 5.25vw, 76px);
  line-height: var(--wf-line-h1);
  text-wrap: balance;
}
.wf-home h2 {
  margin: 0;
  font-size: var(--wf-font-size-h2);
  line-height: var(--wf-line-h2);
}
.wf-home h3 {
  margin: 15px 0 8px;
  font-size: var(--wf-font-size-h3);
  line-height: var(--wf-line-h3);
}
.wf-hero__body {
  max-width: var(--wf-article-max);
  margin-top: 42px;
}
.wf-hero__body p {
  margin: 0 0 1em;
}
.wf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}
.wf-text-link {
  font-size: 14px;
  font-weight: 500;
}
.wf-full-visual {
  min-height: min(54vw, 760px);
}
.wf-full-visual:has(img) {
  min-height: 0;
}
/* 画像が入ったときは全幅3:2で表示する。min-height はプレースホルダー用。 */
.wf-full-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ==================================================
   Preview Home｜通常セクションとカード
   ================================================== */

.wf-section {
  width: 100%;
  padding-right: var(--wf-gutter);
  padding-left: var(--wf-gutter);
  padding-top: 72px;
  padding-bottom: 72px;
}
/* .wf-section が既に gutter 分の padding を持つため、ここで
   --wf-container（100%からgutter×2を引く値）を使うと gutter が
   二重に適用され、ヘッダー(x=120)と本文(x=240)がずれる。 */
.wf-section__inner {
  width: 100%;
  max-width: var(--wf-content-max);
  margin-right: auto;
  margin-left: auto;
}
.wf-section__inner > h2,
.wf-section__inner > .wf-eyebrow {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.wf-section__inner > p:not(.wf-eyebrow) {
  max-width: var(--wf-article-max);
  margin: 28px 0 0 !important;
}
.wf-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wf-grid-gap);
  max-width: 850px;
  margin: 34px 0 0;
}
.wf-columns p {
  margin: 0;
}
.wf-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.wf-works-grid,
.wf-stories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wf-grid-gap);
}
/* .wf-works-gridは.wf-section-heading（margin-bottom:36px）配下にあり
   見出しとの間隔が確保されるが、.wf-storiesは見出しがラップされていない
   単独のh2の直後にあるため間隔がゼロになっていた（本人指摘、
   2026-09-19）。.wf-section-headingと同じ36pxをここだけ個別に足す。 */
.wf-stories {
  margin-top: 36px;
}
.wf-home-updates__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
}
.wf-home-updates__column .wf-stories,
.wf-work-updates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
  justify-content: start;
  gap: var(--wf-grid-gap);
  margin-top: 36px;
}
.wf-work > a,
.wf-stories article > a,
.wf-work-updates article > a {
  display: block;
  text-decoration: none;
}
/* height: auto が無いと、WordPress が img に付ける height 属性が優先され、
   幅だけ縮んで高さが元のまま（例：700x875 の 875px）になる。
   aspect-ratio も効かなくなるため必須。 */
.wf-work img,
.wf-stories img,
.wf-work-updates img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.wf-stories img {
  aspect-ratio: 3 / 2;
}
.wf-work-updates img {
  aspect-ratio: 3 / 2;
}
/* 公開記事が少ないうちは4カラムグリッドに1〜2枚だけ浮くと寂しく見えるため、
   カード幅を保ったまま左詰めで縮小する（グリッドの空きセルを見せない）。 */
.wf-stories--sparse {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: start;
}
.wf-work img,
.wf-stories img,
.wf-work-updates img {
  filter: grayscale(100%) brightness(0.75);
  transition: filter 0.4s ease;
}
.wf-work a:hover img,
.wf-work a:focus-visible img,
.wf-stories article > a:hover img,
.wf-stories article > a:focus-visible img,
.wf-work-updates article > a:hover img,
.wf-work-updates article > a:focus-visible img {
  filter: grayscale(0%) brightness(1);
}
@media (prefers-reduced-motion: reduce) {
  .wf-work img,
  .wf-stories img,
  .wf-work-updates img {
    transition: none;
  }
}
.wf-placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid #c5c5be;
  background: #e7e7e2;
  color: #30302d !important;
  font-family: var(--wf-font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.wf-stories .wf-placeholder {
  aspect-ratio: 3 / 2;
}
.wf-work-updates .wf-placeholder {
  aspect-ratio: 3 / 2;
}
.wf-work p,
.wf-stories time,
.wf-work-updates time {
  color: #41413d !important;
  font-size: 12px;
}
.wf-stories h3,
.wf-work-updates h3 {
  font-size: 18px;
}

/* ==================================================
   Preview Home｜Membership、About、Newsletter
   ================================================== */

.wf-membership {
  background: #f2f2ee;
}
.wf-plans {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}
.wf-plans.is-comparison {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-plans article {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 「上半分だけ詰めて、下（特典リスト・ボタン）はそのままでよかった」
     という指摘（2026-09-19）。paddingを上だけ22pxに縮め、右・左・下は
     元の32pxを維持する。 */
  padding: 22px var(--wf-card-padding) var(--wf-card-padding);
  border: 1px solid #111;
  background-color: #fff;
}
/* プレミアムカード右上の斜めリボン（本人指定、2026-09-19）。position:
   relative/overflow:hiddenは上のベースルールへ移した（元は
   .has-background-imageだけにあった）。斜め帯は角の外側にはみ出す
   デザインのため、はみ出た分をoverflow:hiddenでカードの枠内に切り取る。 */
.wf-plan-ribbon {
  position: absolute;
  isolation: isolate;
  overflow: hidden;
  z-index: 2;
  top: 28px;
  right: -42px;
  width: 170px;
  padding: 6px 0;
  /* 白ベタ地は「プレミアム感」が弱く浮いて見えるという指摘（2026-09-19）。
     半透明のシャンパンゴールドへ変更し、カードの黒地に馴染ませる。
     プランボタンのゴールド案は「他の文字色と不整合」で撤回した経緯が
     あるが、あちらは本文と並ぶ地色そのもの、こちらは単発のバッジ装飾
     という役割の違いがあるため、ここでは適用してよいと判断。
     さらに「もっと立体感、きらきら」の指摘で、単色→帯状のメタリック
     グラデーションへ、box-shadowにinsetのハイライト/シャドウを足して
     リボンの折り目のような厚みを出した。
     続けて「きらきらの間隔が狭すぎる、もっと透過か薄暗くして目立ち
     すぎないように」の指摘で、地色の不透明度を約半分へ下げた
     （2026-09-19）。 */
  background: linear-gradient(
    135deg,
    rgba(184, 147, 90, 0.32) 0%,
    rgba(232, 201, 122, 0.4) 25%,
    rgba(203, 178, 115, 0.32) 50%,
    rgba(232, 201, 122, 0.4) 75%,
    rgba(184, 147, 90, 0.32) 100%
  );
  color: var(--wf-color-paper);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  transform: rotate(45deg);
  transform-origin: center;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
/* 光が斜めに流れるきらめきアニメーション。::beforeはz-index:-1で
   「PREMIUM」の文字より奥（リボン自身の地色より手前）に置く。
   「きらきらの間隔が狭すぎる」の指摘で、光が走ったあと静止する間隔を
   作った。続けて「光の流れる速度が早すぎるもっとゆっくり」の指摘で、
   静止時間（約5.5秒）はそのまま、光が走る時間だけ1.5秒→3秒へ延長
   （一周8.5秒、うち35%が流れる区間）。ハイライトの不透明度は0.75→0.4の
   ままで、目立ちすぎない範囲を維持。 */
.wf-plan-ribbon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 48%,
    rgba(255, 255, 255, 0.4) 52%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: wf-ribbon-shimmer 8.5s ease-in-out infinite;
}
@keyframes wf-ribbon-shimmer {
  0% {
    background-position: 150% 0;
  }
  35% {
    background-position: -150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-plan-ribbon::before {
    animation: none;
  }
}
/* 背景画像はarticle自身のbackgroundではなく::beforeに持たせる。
   h3・価格・チェックマーク・ボタンなど中身のテキストを動かさず、
   画像だけをtransform: scaleでズームさせるため（transformは
   background-sizeと違って滑らかにアニメーションできる）。
   isolation: isolateで新しいスタッキングコンテキストを作り、
   ::beforeのz-index:-1がページ全体ではなくこのカード内だけで
   完結するようにする（漏れるとカードの裏に全部隠れる事故になる）。 */
.wf-plans article.has-background-image {
  /* position/overflowはベースの.wf-plans articleへ移したため重複させない。 */
  isolation: isolate;
}
.wf-plans article.has-background-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to right, #fff 0%, #fff 52%, transparent 100%), var(--wf-plan-image);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.6s ease;
  will-change: transform;
}
/* 基点（transform-origin）は変えない——hover先が変わるたびに基点が
   ジャンプしてカクつく原因になったため（2026-09-19、撤回済み）。
   代わりに拡大率だけ左右で変える。基点は常に中心のまま倍率だけ
   補間されるので、ボタン間でマウスを動かしても連続的に見える。 */
.wf-plans article.has-background-image:has(.wf-button:hover)::before,
.wf-plans article.has-background-image:has(.wf-button:focus-visible)::before {
  transform: scale(1.04);
}
.wf-plans article.has-background-image:has(.wf-plan-buttons a:first-child:hover)::before,
.wf-plans article.has-background-image:has(.wf-plan-buttons a:first-child:focus-visible)::before {
  transform: scale(1.06);
}
.wf-plans article.has-background-image:has(.wf-plan-buttons a:last-child:hover)::before,
.wf-plans article.has-background-image:has(.wf-plan-buttons a:last-child:focus-visible)::before {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .wf-plans article.has-background-image::before {
    transition: none;
  }
}
/* 余白は通常カードと揃える。ここを広げると中身が下へずれ、
   2枚のカードで見出し・価格・ボタンの並ぶ線が合わなくなる。
   上位プランの区別は黒地で足りている。 */
.wf-plans article.is-featured {
  background-color: var(--wf-color-ink);
  color: var(--wf-color-paper);
}
.wf-plans article.is-featured.has-background-image::before {
  background-image: linear-gradient(to right, var(--wf-color-ink) 0%, var(--wf-color-ink) 52%, transparent 100%), var(--wf-plan-image);
}
/* プラン名はカードの主役なので、セクション見出し(最大30px)より大きく出す。
   .wf-home h3 と同一詳細度だと順序依存になるため article を挟んで勝たせる。 */
.wf-plans article h3 {
  margin: 12px 0 6px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
}
.wf-plans article.is-featured h3 {
  color: var(--wf-color-paper) !important;
}
/* プレミアムのボタンは黒背景に溶け込ませつつボタンの箱を示す。
   ゴールド案は他のカード内要素（見出し・価格・チェックマークは全部
   var(--wf-color-paper)の白）から浮いて見えるという指摘で撤回した
   （2026-09-19）。サイト全体が赤い注意書き以外は黒白グレーの階調だけで
   統一されているため、新色を足さず白のtranslucent版で揃える。 */
.wf-plans article.is-featured .wf-button {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--wf-color-paper) !important;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}
.wf-plans article.is-featured .wf-button:hover,
.wf-plans article.is-featured .wf-button:focus-visible {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .wf-plans article.is-featured .wf-button {
    transition: none;
  }
}
/* 通常プランのボタンも同じ考え方（カードの色に溶け込む・カード内の他要素と
   同じ文字色）に揃える。白カード内の見出し・価格・チェックマークは
   var(--wf-color-ink)相当の黒系なので、白版と対になる黒のtranslucentへ。 */
.wf-plans article:not(.is-featured) .wf-button {
  border-color: rgba(17, 17, 17, 0.35);
  background-color: rgba(17, 17, 17, 0.05);
  color: var(--wf-color-ink) !important;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}
.wf-plans article:not(.is-featured) .wf-button:hover,
.wf-plans article:not(.is-featured) .wf-button:focus-visible {
  background-color: rgba(17, 17, 17, 0.1);
  border-color: rgba(17, 17, 17, 0.9);
  box-shadow: 0 0 16px rgba(17, 17, 17, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .wf-plans article:not(.is-featured) .wf-button {
    transition: none;
  }
}
.wf-platform {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
/* 価格の数字はタイトなコンデンス見出しフォント（Bebas Neue）で確定
   （本人、2026-09-19。3案（セリフ／コンデンス／既存フォント太字化）を
   全て実機で見比べた上でコンデンスを選択、さらにフォントサイズを
   もう少し大きくの指定）。「/月」部分は本文と同じ和文サンス体へ明示的に
   戻す（.wf-priceから継承させたままだとBebas Neue化してしまうため）。 */
.wf-price {
  margin: 18px 0;
  font-family: "Bebas Neue", "Zen Kaku Gothic New", sans-serif;
  font-size: 46px;
  letter-spacing: 0.02em;
}
.wf-price span {
  font-family: var(--wf-font-ja);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
}
.wf-plans .wf-plan-features {
  list-style: none;
  padding-left: 0;
}
.wf-plans .wf-plan-features li {
  position: relative;
  padding-left: 1.4em;
}
/* font-size を縮めると ::before の行ボックスだけ小さくなり（24px→20.4px）、
   本文とベースラインがずれる。サイズは font-size ではなく transform で
   調整する（transform は行ボックスに影響しない）。 */
.wf-plans .wf-plan-features li::before {
  position: absolute;
  inset-inline-start: 0;
  content: "✓";
  color: currentColor;
  font-family: Arial, sans-serif;
  font-weight: 400;
  transform: scale(0.85);
  transform-origin: left center;
}
.wf-plan-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.wf-plan-buttons .wf-button {
  flex: 1 1 auto;
}
.wf-plans article > .wf-button,
.wf-plans article > .wf-plan-buttons {
  margin-top: auto;
}
.wf-reassurance {
  border-bottom: 1px solid #111;
}
.wf-reassurance strong {
  font-weight: 500;
}
.wf-about > div {
  max-width: var(--wf-article-max);
  margin-top: 28px;
}
.wf-story__body {
  max-width: var(--wf-article-max);
  margin-top: 28px;
}
.wf-story__body p {
  margin: 0 0 1.2em;
  line-height: 1.9;
}
.wf-story__body p:last-child {
  margin-bottom: 0;
  font-weight: 500;
}
.wf-notice {
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  background: #f2f2ee;
}
.wf-notice__body {
  max-width: var(--wf-article-max);
  margin-top: 24px;
}
.wf-notice__body p {
  margin: 0 0 1em;
  font-size: 14px;
  line-height: 1.8;
}
.wf-notice__body p:last-child {
  margin-bottom: 0;
  font-weight: 500;
}
.wf-newsletter {
  border-top: 1px solid #111;
}
.wf-newsletter p {
  max-width: var(--wf-article-max);
}
.wf-newsletter__body {
  margin-top: 16px;
}
.wf-newsletter__body p {
  margin: 0 0 1em;
}
/* ボタンが本文と詰まって見えるという指摘（2026-09-19）。原因は
   .wf-newsletter .wf-text-linkという古いクラス名向けのmargin-topが
   実際のマークアップ（.wf-button）と一致しておらず効いていなかったこと。
   .wf-hero__body + .wf-actions と同じ間隔(30px)に揃える。 */
.wf-newsletter .wf-button {
  margin-top: 30px;
}
.wf-newsletter .wf-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  text-decoration: none;
}

/* ==================================================
   Preview Home｜最終CTAとフッター
   ================================================== */

/* 子要素の margin:auto による中央寄せは、後から効く h2{margin:0} 等に
   打ち消されて左端へ張り付いていた（見出しは left=0、ボタンだけ中央という
   ちぐはぐな状態。2026-09-16）。他セクションと同じく padding で内側を作る。 */
.wf-final {
  display: grid;
  align-content: center;
  min-height: 440px;
  padding-top: 72px;
  padding-bottom: 72px;
  /* 他セクションと同じ gutter だと右へ寄りすぎるという指摘（2026-09-16）。
     「少し間が空いていればよい」とのことなので半分にする。 */
  padding-right: calc(var(--wf-gutter) / 2);
  padding-left: calc(var(--wf-gutter) / 2);
  background: #111;
  color: #fff !important;
}
.wf-final > * {
  width: 100%;
  max-width: var(--wf-content-max);
  margin-right: 0;
  margin-left: 0;
}
.wf-final .wf-eyebrow,
.wf-final h2 {
  color: #fff !important;
}
.wf-final h2 {
  max-width: 700px;
  font-size: clamp(34px, 5vw, 64px);
  line-break: strict;
  text-wrap: balance;
}
.wf-no-break {
  white-space: nowrap;
}
.wf-final .wf-button {
  justify-self: start;
  width: auto;
  margin-top: 22px;
  border-color: #fff;
  background: #fff;
  color: #111 !important;
}
.wf-final .wf-button:hover,
.wf-final .wf-button:focus-visible {
  background: #111;
  color: #fff !important;
}
.wf-footer-wrap {
  /* This is the full-bleed background layer. The footer itself owns the
     container width, so gutter and container never meet on this element. */
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  background: #111;
  color: #f5f5f2 !important;
}
.wf-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 30px;
  min-height: 128px;
  padding-top: 32px;
  padding-bottom: 32px;
  /* ブランド名と右端のリンクが黒帯の端に密着して窮屈という指摘
     （2026-09-16）。内側にわずかな余白を入れる。 */
  padding-right: 12px;
  padding-left: 12px;
}
.wf-footer a,
.wf-footer .wf-brand {
  color: #f5f5f2 !important;
}
.wf-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px 20px;
  font-size: 13px;
}
.wf-home a:focus-visible,
.wf-home summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ==================================================
   Preview Home｜モバイル
   ================================================== */

@media (max-width: 767px) {
  .wf-home {
    /* 20pxでは画面端に文字が寄りすぎて窮屈という指摘（2026-09-16）。 */
    --wf-gutter: 28px;
  }
  .wf-header {
    gap: 18px;
  }
  .wf-nav,
  .wf-header > .wf-join {
    display: none;
  }
  .wf-drawer {
    display: block;
  }
  .wf-hero {
    grid-template-columns: 1fr;
  }
  .wf-hero__visual {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .wf-hero__content {
    grid-column: 1;
    grid-row: 2;
    width: var(--wf-container);
    margin-right: auto;
    padding-top: 48px;
    padding-bottom: 52px;
  }
  .wf-home h1 {
    font-size: 39px;
    line-height: 0.98;
  }
  .wf-hero__body {
    margin-top: 30px;
  }
  /* 画像は3:2なので高さは約67vw。92vwのままだと下に空白の帯が出る。
     プレースホルダー時だけ高さを確保したいので :has で出し分ける。 */
  .wf-full-visual {
    min-height: 92vw;
  }
  .wf-full-visual:has(img) {
    min-height: 0;
  }
  .wf-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .wf-columns,
  .wf-plans.is-comparison {
    grid-template-columns: 1fr;
  }
  /* スマホは1カラムでカード幅が334px程度しかなく、デスクトップと同じ
     右フェードだと文字領域が110px前後まで潰れて読みにくい（本人指摘、
     2026-09-19）。右フェードで隠す代わりに、写真を全面カバー＋暗い
     スクリムを重ねて、その上に白文字を乗せる形にする。 */
  .wf-plans article.has-background-image::before,
  .wf-plans article.is-featured.has-background-image::before {
    background-image: linear-gradient(rgba(17, 17, 17, 0.55), rgba(17, 17, 17, 0.55)), var(--wf-plan-image);
    background-position: right center;
  }
  .wf-plans article.has-background-image {
    color: var(--wf-color-paper) !important;
  }
  /* h3は.wf-home h1/h2/h3の共通ルールがcolor:#161616 !important;を
     直接指定しており、article側のcolor（継承）では勝てない。
     同程度以上の詳細度＋!importantで明示的に上書きする。デスクトップでは
     やらない——非featuredカードは右フェードの左側（白地）にh3が乗るため、
     白文字にすると逆に見えなくなる。スマホだけ全面カバー＋暗いスクリムに
     なるのでここだけ白にする。 */
  .wf-plans article.has-background-image h3 {
    color: var(--wf-color-paper) !important;
  }
  /* ボタンの文字が読みにくいという指摘（2026-09-19）。通常プラン用の
     ボタンは「白カードに黒文字」前提の配色（rgba(17,17,17,*)＋黒文字）の
     ままで、スマホの暗いカバー画像の上では黒文字がほぼ見えなくなっていた。
     スマホでは画像が付いているカードのボタンを両方とも白系へ統一する。
     地色への依存を減らすため背景の不透明度もデスクトップよりやや上げる。 */
  .wf-plans article.has-background-image .wf-plan-buttons .wf-button,
  .wf-plans article.has-background-image > .wf-button {
    border-color: rgba(255, 255, 255, 0.45);
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--wf-color-paper) !important;
  }
  .wf-plans article.has-background-image .wf-plan-buttons .wf-button:hover,
  .wf-plans article.has-background-image > .wf-button:hover,
  .wf-plans article.has-background-image .wf-plan-buttons .wf-button:focus-visible,
  .wf-plans article.has-background-image > .wf-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.9);
  }
  /* カードの縦サイズを短くし、フォントもやや詰める（2026-09-19指摘）。
     その後「もう少し縦長に」で一段戻し（2026-09-19追記）、
     さらに「もっと縦長」でもう一段大きく戻した（2026-09-19再追記）。 */
  .wf-plans article {
    padding: 40px 28px;
  }
  .wf-plans article h3 {
    margin: 20px 0 10px;
    font-size: 26px;
  }
  .wf-plans .wf-plan-tagline {
    margin: 0 0 8px;
    font-size: 14px;
  }
  .wf-price {
    margin: 26px 0;
    font-size: 28px;
  }
  .wf-plans .wf-plan-features li {
    font-size: 15px;
    line-height: 1.7;
  }
  .wf-plan-buttons {
    gap: 10px;
  }
  .wf-plans .wf-button {
    min-height: 52px;
    padding: 14px 20px;
    font-size: 15px;
  }
  /* スマホだけカードを画面端まで全幅にする（2026-09-19指摘）。
     .wf-footer-wrapと同じ手法：100vw基準で中央からの半差分だけ
     左マージンをずらし、親（.wf-section__inner）のgutter/paddingに
     関係なく画面幅いっぱいへ広げる。 */
  .wf-plans {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
  }
  .wf-works-grid,
  .wf-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .wf-home-updates__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .wf-home-updates__column .wf-stories,
  .wf-work-updates {
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    gap: 28px 20px;
  }
  .wf-section-heading {
    flex-direction: column;
    align-items: start;
    margin-bottom: 28px;
  }
  .wf-button {
    min-height: 54px;
    padding-right: 24px;
    padding-left: 24px;
  }
  .wf-final {
    min-height: 360px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .wf-final h2 {
    max-width: 100%;
    font-size: clamp(32px, 9vw, 42px);
  }
  .wf-footer {
    display: grid;
  }
  .wf-footer nav {
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-hero__visual video {
    display: none;
  }
}