@charset "UTF-8";
/*
	Theme Name: PrimeX
	Template: swell
	Description: PrimeX株式会社 コーポレート＋BtoBメディア。白地に青紫、極太ゴシック。
	Version: 4.0.0
	Author: PrimeX
	License: GNU General Public License v2 or later
*/

/* =========================================================
   アートディレクション（v4）

   v3は紙と墨、明朝の縦組みだった。静かで硬かったが、
   先方から受け取った新しい案は逆の振り方をしている。そこに寄せる。
   構成は動かさない。色と書体だけを入れ替える。

   ・差し色を1つ持つ。青紫(#4B3BFF)。使うのは、見出しの後半・釦・
     ラベルの罫・ヒーローの円だけ。それ以外は白と墨で組む。
   ・全部ゴシック（M PLUS 1・可変フォント）。見出しはウェイト900、字間を詰める。
     明朝をやめたので、v3の「決める側の文書」らしさは落ちるが、
     そのぶん速度と勢いが出る。
   ・角丸ゼロ、影ゼロ。ただし円は例外で、ヒーローに大きく1つ置く。
   ・地は白(#fff)。段差は #f5f5f5 と墨(#1a1a1a)の3段だけ。
   ========================================================= */
:root,
.reach-site--primex {
  /* 書体。1書体で通す。400〜900が1本の可変フォントで来るので、
     見出しと本文の差を太さだけで作れる */
  --px-sans: "M PLUS 1", "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  /* v3の呼び出しが残っていても落ちないよう、旧名も同じものに向ける */
  --px-mincho: var(--px-sans);
  --px-gothic: var(--px-sans);

  /* 差し色。ここだけが色を持つ */
  --px-accent: #4B3BFF;
  /* 墨の上に小さな文字を置くときの差し色。#4B3BFF は墨の上で 2.5:1 しかない */
  --px-accent-2: #A79CFF;

  /* 地と文字 */
  --px-paper: #ffffff;
  --px-paper-2: #f5f5f5;
  --px-ink: #1a1a1a;
  --px-sub: #888888;
  --px-line: rgba(26, 26, 26, .1);

  /* 墨の帯（節ごと反転させるとき） */
  --px-band: #1a1a1a;
  --px-band-2: #232323;
  --px-band-ink: #ffffff;
  --px-band-sub: #8f8f8f;
  --px-band-line: rgba(255, 255, 255, .12);

  /* 本文の大きさは2段だけにする。近い寸法が並ぶと、ずれて見える */
  --px-text: 16px;
  --px-text-sm: 14px;
  --px-text-lg: 20px;

  --px-gut: clamp(20px, 5vw, 72px);

  --color_main: #4B3BFF;
  --color_main_dark: #3A2CE0;
  --color_main_thin: #ECEAFF;

  /* reach-core 側のトークン */
  --r-accent: #4B3BFF;
  --r-accent-dark: #3A2CE0;
  --r-accent-2: #888888;
  --r-accent-3: rgba(26, 26, 26, .1);
  --r-bg: #ffffff;
  --r-surface: #f5f5f5;
  --r-panel: #f5f5f5;
  --r-text: #1a1a1a;
  --r-muted: #888888;
  --r-border: rgba(26, 26, 26, .1);
  --r-rule: rgba(26, 26, 26, .1);
  --r-track: #ececec;
  --r-track-strong: #4B3BFF;
  --r-numeral: rgba(26, 26, 26, .08);
  --r-ink-block: #1a1a1a;
  --r-ink-block-text: #ffffff;
  --r-recommend: rgba(75, 59, 255, .06);
  --r-radius: 0;
  --r-max: 1320px;
}

.reach-site--primex {
  color: var(--px-ink);
  background: var(--px-paper);
  font-family: var(--px-gothic);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .04em;
  /* 詰め組みをやめる。参考デザインはここが効いている */
  font-feature-settings: "palt" 0;
}

/* ラベル（旧 .px-mono）。等幅はやめ、ゴシックの字間で見せる */
/* ラベル。差し色で、太く、字間を開ける。短い横罫を手前に持つ */
.px-mono {
  font-family: var(--px-sans);
  letter-spacing: .22em; text-transform: uppercase;
  font-size: 11px; font-weight: 700; color: var(--px-accent);
}

/* =========================================================
   地色
   ========================================================= */
.reach-site--primex .r-sec { background: var(--px-paper); padding: clamp(80px, 12vw, 168px) 0; }
.reach-site--primex .r-sec--tint { background: var(--px-paper-2); }
.reach-site--primex .r-sec--ink {
  background: var(--px-band); color: var(--px-band-ink);
  /* 墨の上でも差し色はそのまま使う。白地より明るく見えるので、
     面積の大きいところ（釦の地）は白に逃がす */
  --r-text: #ffffff; --r-muted: #8f8f8f; --r-rule: rgba(255,255,255,.12); --r-accent: #6B5CFF;
  --r-accent-2: #8f8f8f; --r-accent-3: rgba(255,255,255,.12);
  --r-numeral: rgba(255,255,255,.1); --r-panel: #232323; --r-track: rgba(255,255,255,.12);
  --r-track-strong: #6B5CFF; --r-border: rgba(255,255,255,.12);
  --r-ink-block: #ffffff; --r-ink-block-text: #1a1a1a;
  --px-paper: #1a1a1a; --px-paper-2: #232323; --px-line: rgba(255,255,255,.12); --px-sub: #8f8f8f;
  --px-accent: #6B5CFF;
}
.reach-site--primex .r-sec--ink .r-sec__title { color: var(--px-band-ink); }

/* 差し色の節。参考案では自社事業がここに当たる。
   面積が大きいので、中の文字と罫は白で通す */
.reach-site--primex .r-sec--accent {
  background: var(--px-accent); color: #fff;
  --r-text: #ffffff; --r-muted: rgba(255,255,255,.72); --r-rule: rgba(255,255,255,.28);
  --r-accent: #ffffff; --r-accent-2: rgba(255,255,255,.72); --r-accent-3: rgba(255,255,255,.28);
  --r-numeral: rgba(255,255,255,.18); --r-panel: rgba(255,255,255,.08);
  --r-border: rgba(255,255,255,.28); --r-track: rgba(255,255,255,.28);
  --r-track-strong: #ffffff; --r-ink-block: #ffffff; --r-ink-block-text: var(--px-accent);
  --px-paper: var(--px-accent); --px-paper-2: rgba(255,255,255,.08);
  --px-line: rgba(255,255,255,.28); --px-sub: rgba(255,255,255,.72);
  --px-ink: #ffffff; --px-accent-2: #ffffff;
}
.reach-site--primex .r-sec--accent .r-sec__title,
.reach-site--primex .r-sec--accent .r-sec__eyebrow { color: #fff; }
.reach-site--primex .r-sec--accent .r-sec__lead { color: rgba(255,255,255,.78); }
.reach-site--primex .r-sec--accent .r-btn--primary { background: #fff; color: var(--px-accent); }
.reach-site--primex .r-sec--accent .r-btn--ghost { color: #fff; }
.reach-site--primex .r-sec--accent a { color: #fff; }

/* 墨の節に敷く点の方眼。参考案のPositioningがこの見た目 */
.reach-site--primex .px-dotgrid { position: relative; overflow: hidden; }
.reach-site--primex .px-dotgrid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(107, 92, 255, .38) 1px, transparent 1px);
  background-size: 40px 40px;
}
.reach-site--primex .px-dotgrid > * { position: relative; z-index: 1; }

/* ロゴ帯も墨に。参考案ではFVの直下がそのまま暗くなる */

.reach-site--primex .r-sec--ink .r-sec__lead { color: var(--px-band-sub); }

/* =========================================================
   見出し：明朝。左に細いラベルの桁を持つ
   ========================================================= */
.reach-site--primex .r-sec__eyebrow {
  font-family: var(--px-sans);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--px-accent); font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
/* ラベルの手前に短い罫を置く。参考案がこの形で統一されている */
.reach-site--primex .r-sec__eyebrow::before {
  content: ""; display: block; width: 24px; height: 2px; background: currentColor; flex: none;
}
/* 墨の上では明るいほうの差し色にする。11px の細い字が沈むため */
.reach-site--primex .r-sec--ink .r-sec__eyebrow { color: var(--px-accent-2); }
.reach-site--primex .r-sec__title {
  font-family: var(--px-sans); font-weight: 900;
  font-size: clamp(28px, 4.2vw, 54px); line-height: 1.18; letter-spacing: -.025em;
  /* 節の見出しは1行に伸ばさず、読点で折る。
     20字を58pxで1行に組むと1200px以上になり、目が端まで走る。
     keep-all にしてあるので、折れるのは「、」「。」「「」」のところだけ。
     短い見出し（「支援事例。」など）はこの幅に収まるので1行のまま。 */
  max-width: 17em;
  word-break: keep-all; overflow-wrap: anywhere;
}
.reach-site--primex #answer .r-sec__title { font-size: clamp(28px, 4.6vw, 58px); letter-spacing: -.03em; }
.reach-site--primex .r-sec__lead {
  font-size: 15.5px; line-height: 2.1; max-width: 38em; color: var(--px-sub);
}

/* SWELL既定の見出し装飾を打ち消し、明朝に置き換える */
.reach-site--primex .post_content h2 {
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--px-ink) !important;
  color: var(--px-ink) !important; padding: 0 0 14px !important; margin: 3em 0 1.3em !important;
  font-family: var(--px-sans) !important;
  font-size: clamp(21px, 2.8vw, 30px) !important; font-weight: 800 !important;
  line-height: 1.45 !important; letter-spacing: -.02em !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.reach-site--primex .post_content h2::before, .reach-site--primex .post_content h2::after { display: none !important; }

/* =========================================================
   Creative Drive の記事に付いてくる見た目を、サイト側に寄せる

   向こうは本文のHTMLに style="" を直接書いてくる。中身は向こうの配色
   （紺 #10294a、黄色のマーカー #ffe680）と角丸8〜12px、影、Noto Sans JP。
   このサイトは角丸ゼロ・影ゼロ・差し色は青紫の1色なので、そのままだと
   記事のページだけ別のサイトに見える。

   インラインは !important でしか上書きできない。打ち消すのは
   「角丸・影・書体・マーカーの色」の4つだけにして、
   図版の中の色には触らない（触ると図が読めなくなる）。
   ========================================================= */
.reach-site--primex .post_content [style] {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.reach-site--primex .post_content [style*="Noto Sans"] { font-family: var(--px-sans) !important; }
/* 黄色のマーカーは、差し色を薄めたものに置き換える */
.reach-site--primex .post_content [style*="#ffe680"] {
  background: linear-gradient(transparent 55%, rgba(75, 59, 255, .16) 55%) !important;
}
.reach-site--primex .post_content h3 {
  background: none !important; border: 0 !important; padding: 0 !important; margin: 2.4em 0 .8em !important;
  font-family: var(--px-sans) !important;
  font-size: clamp(17.5px, 2vw, 21px) !important; font-weight: 800 !important; letter-spacing: -.01em !important;
}
.reach-site--primex .post_content h3::before, .reach-site--primex .post_content h3::after { display: none !important; }
.reach-site--primex .post_content { font-size: 16px; line-height: 2.05; }
.reach-site--primex .post_content p { max-width: 38em; }
.reach-site--primex .post_content table { border-collapse: collapse; font-size: 14.5px; }
.reach-site--primex .post_content table th, .reach-site--primex .post_content table td { border: 0; border-bottom: 1px solid var(--px-line); padding: 14px 12px; background: none; }
.reach-site--primex .post_content table thead th { border-bottom: 1px solid var(--px-ink); font-weight: 500; }

/* =========================================================
   釦：墨のかたまりと、伸びる罫
   ========================================================= */
.reach-site--primex .r-btn {
  border-radius: 0; border: 0;
  font-family: var(--px-sans); font-weight: 700; letter-spacing: .02em;
  padding: 20px 30px; font-size: 15px;
  display: inline-flex; align-items: center; gap: 18px;
  transition: gap .3s ease, opacity .2s ease, background .2s ease, color .2s ease;
}
.reach-site--primex .r-btn::after {
  content: ""; display: block; width: 28px; height: 1px; background: currentColor;
  transition: width .3s ease; flex: none;
}
.reach-site--primex .r-btn:hover::after { width: 44px; }
.reach-site--primex .r-btn--primary { background: var(--px-accent); color: #fff; }
.reach-site--primex .r-btn--primary:hover { background: var(--px-accent); opacity: .82; }
.reach-site--primex .r-btn--ghost { background: none; color: var(--px-ink); padding-left: 0; padding-right: 0; }
.reach-site--primex .r-btn--ghost:hover { background: none; opacity: .7; }
.reach-site--primex .r-sec--ink .r-btn--primary { background: #fff; color: var(--px-band); }
.reach-site--primex .r-sec--ink .r-btn--ghost { color: var(--px-band-ink); }

/* =========================================================
   ヒーロー：白地に横組みの極太ゴシックと、大きな円

   v3は縦組み明朝＋線画のXだった。書体をゴシックに替えると
   縦組みが成立しないので、参考案どおり横組みに組み直す。
   線画（inc/art.php）はここでは呼ばない。下層ページで使う余地を
   残すため、ファイルは消していない。
   ========================================================= */
.px-hero {
  position: relative; background: var(--px-paper); color: var(--px-ink);
  overflow: hidden;
  display: flex; align-items: center;
  min-height: min(100svh, 860px);
  padding: clamp(96px, 14vw, 150px) 0 clamp(56px, 8vw, 96px);
}
/* 差し色の円。参考案は塗りつぶしの円が1つ置いてあるだけだが、
   それだけだと置き場所の理由が読めない。円を芯にして、
   ・外を回る弧（判断が一周して戻ってくる）
   ・内を回る点（動き続けている実行）
   を添える。どちらもゆっくりで、見ていて気付く程度の速さにする。

   vw と vh の小さいほうに従わせて、横長の画面で縦にはみ出さないようにする。 */
.px-orb {
  --orb: clamp(300px, min(52vw, 78vh), 680px);
  position: absolute; right: -12%; top: 50%;
  width: var(--orb); aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none; z-index: 0;
  animation: px-orb-in 1.2s cubic-bezier(.22, .7, .25, 1) both;
}
.px-orb > * { position: absolute; border-radius: 50%; }

.px-orb__disc {
  inset: 0; background: var(--px-accent);
  animation: px-breathe 22s ease-in-out 1.2s infinite;
}
/* 四分の一だけ残した輪。円が回っていることは、欠けがないと見えない */
.px-orb__arc {
  inset: clamp(-44px, -3vw, -26px);
  border: 1.5px solid var(--px-accent);
  border-right-color: transparent; border-bottom-color: transparent;
  opacity: .32;
  animation: px-spin 28s linear infinite;
}
/* 円の内側を回る白い点。参考案の点と同じ大きさ */
.px-orb__sat {
  inset: 17%;
  animation: px-spin 38s linear infinite reverse;
}
.px-orb__sat::after {
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #fff; opacity: .62;
}

@keyframes px-orb-in {
  from { transform: translateY(-50%) scale(.84); opacity: 0; }
  to   { transform: translateY(-50%) scale(1);   opacity: 1; }
}
@keyframes px-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.028); }
}
@keyframes px-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .px-orb, .px-orb__disc, .px-orb__arc, .px-orb__sat { animation: none; }
  .px-orb { opacity: 1; transform: translateY(-50%); }
}

/* 添えの点。紙の上に差し色の輪 */
.px-hero__dot {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.px-hero__dot--ring { left: 4%; bottom: 12%; width: 44px; height: 44px; border: 2px solid var(--px-accent); opacity: .18; }

.px-hero__inner { position: relative; z-index: 2; }
.px-hero__body { position: relative; }

.px-hero__eyebrow {
  margin: 0 0 26px; display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; color: var(--px-accent); letter-spacing: .22em;
}
.px-hero__eyebrow::before {
  content: ""; display: block; width: 24px; height: 2px; background: currentColor; flex: none;
}

/* 見出し。このデザインの芯。字間を詰めて、塊で見せる */
.px-hero__title {
  font-family: var(--px-sans); font-weight: 900;
  font-size: clamp(2.3rem, 6.5vw, 5.6rem);
  line-height: 1.12; letter-spacing: -.03em;
  margin: 0 0 28px;
}
.px-hero__title .px-line { display: block; }
.px-hero__title .px-line--accent { color: var(--px-accent); }

.px-hero__sub {
  font-size: clamp(14px, 1.5vw, 16px); line-height: 2; margin: 0; max-width: 28em;
  color: var(--px-sub);
}
.px-hero__sub strong { font-weight: 700; color: var(--px-ink); }
.px-hero__meta { margin: 26px 0 0; font-size: 12px; color: var(--px-sub); line-height: 1.9; }
.px-hero .r-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 34px; }

/* 円の上に本文が重ならないよう、広い画面では本文を左半分に収める */
@media (min-width: 901px) {
  .px-hero__body { max-width: 62%; }
}
@media (max-width: 900px) {
  .px-hero { min-height: 0; padding: clamp(80px, 18vw, 110px) 0 56px; }
  /* 狭い画面では円を背景に退かせる。文字と重なると読めない。
     弧と点は、薄くした円の上では見えないので出さない */
  .px-orb { right: -34%; top: auto; bottom: -14%; transform: none; width: 92vw; opacity: .12; }
  .px-orb__arc, .px-orb__sat { display: none; }
  @keyframes px-orb-in { from { transform: scale(.84); opacity: 0; } to { transform: scale(1); opacity: .12; } }
  .px-hero__dot--ring { left: auto; right: 6%; top: 8%; bottom: auto; }
  .px-hero__title { font-size: clamp(2rem, 9vw, 3rem); }
  .px-hero__sub { max-width: none; }
}

/* =========================================================
   支援事例：番号・本文・数字の三列

   数字は事例ごとに1つだけ。先頭の事例だけ番号を差し色にして、
   目の入口を作る。狭い画面では数字を本文の下に回す。
   ========================================================= */
.px-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--px-line); }
.px-case {
  display: grid; grid-template-columns: minmax(100px, 150px) 1fr minmax(90px, 120px);
  gap: 0 clamp(16px, 3vw, 48px); align-items: center;
  background: var(--px-paper); padding: clamp(24px, 3.2vw, 40px) clamp(16px, 2.4vw, 32px);
}
.px-case__num {
  font-family: var(--px-sans); font-weight: 900; font-size: 28px; line-height: 1;
  letter-spacing: -.04em; margin: 0 0 6px; color: var(--r-numeral);
}
.px-case--lead .px-case__num { color: var(--px-accent); }
.px-case__cat { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--px-sub); }
.px-case__title { font-family: var(--px-sans); font-weight: 800; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; letter-spacing: -.01em; margin: 0 0 10px; }
.px-case__text { margin: 0; font-size: 14px; line-height: 1.95; color: var(--px-sub); max-width: 34em; }
.px-case__stat { text-align: right; }
.px-case__figure {
  font-family: var(--px-sans); font-weight: 900; font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1; letter-spacing: -.04em; color: var(--px-accent); margin: 0;
  font-variant-numeric: tabular-nums;
}
.px-case__statlabel { margin: 6px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--px-sub); }
@media (max-width: 860px) {
  .px-case { grid-template-columns: 1fr; gap: 14px; }
  .px-case__no { display: flex; align-items: baseline; gap: 12px; }
  .px-case__num { margin: 0; font-size: 22px; }
  .px-case__stat { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .px-case__statlabel { margin: 0; }
}

/* =========================================================
   仕様行（罫のリーダー）
   ========================================================= */
.px-specs { list-style: none; margin: 0; padding: 0; }
.px-spec { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--px-line); }
.px-spec__label { font-size: 15px; font-weight: 500; }
.px-spec__leader { border-bottom: 1px solid var(--px-line); transform: translateY(-4px); opacity: .6; }
.px-spec__value { font-size: 15px; color: var(--px-sub); word-break: auto-phrase; text-align: start; }

/* =========================================================
   症状：箱で囲まず、罫で数える
   ========================================================= */
.px-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.px-problem { position: relative; padding: 32px clamp(20px, 3vw, 40px) 34px 0; background: none; border-top: 1px solid var(--px-line); }
.px-ticks { display: none; }
.px-problem__no {
  font-family: var(--px-sans); font-size: 22px; line-height: 1;
  letter-spacing: .08em; color: var(--px-sub); font-weight: 600;
}
.px-problem__title { font-family: var(--px-sans); font-weight: 800; font-size: 20px; margin: 14px 0 14px; line-height: 1.6; letter-spacing: -.01em; }
.px-problem__body { font-size: var(--px-text-sm); line-height: 2.05; color: var(--px-sub); margin: 0; }

/* =========================================================
   サービス：地は紙のまま、見出しの段だけ墨で締める
   ========================================================= */
/* =========================================================
   サービスの3枚

   前は「墨の帯＋白い本文」で、帯だけが浮いて本文とつながって
   見えなかった。札まるごとに地の色を持たせる。

   参考案は1枚目だけ差し色にしているが、3つは並列のサービスなので、
   色が「ここが推し」という意味になってしまう。3枚とも同じ扱いにして、
   上の罫だけ差し色で引く。順番は角の番号が持つ。
   説明だけを伸縮させて、到達状態（GOAL）が3枚で下そろえになるようにする。
   ========================================================= */
.px-services {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.px-service {
  position: relative; overflow: hidden;
  background: var(--px-paper-2); color: var(--px-ink);
  border-top: 2px solid var(--px-accent);
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.4vw, 32px) clamp(24px, 2.4vw, 32px);
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.px-service:hover { transform: translateY(-3px); }

/* 角の番号。塗らずに輪郭だけ。読み上げからは外してある */
.px-service__no {
  position: absolute; right: -10px; bottom: -22px;
  font-family: var(--px-sans); font-weight: 900; font-size: 100px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(26, 26, 26, .07);
  pointer-events: none; user-select: none;
}

.px-service__label {
  position: relative; margin: 0 0 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--px-accent);
}

.px-service__title {
  position: relative; margin: 0 0 14px;
  font-family: var(--px-sans); font-weight: 800;
  font-size: clamp(17px, 1.8vw, 20px); line-height: 1.45; letter-spacing: -.01em;
}
/* 説明だけを伸ばす。ここでGOALの高さがそろう */
.px-service__body {
  position: relative; flex: 1; margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.95; color: var(--px-sub);
}

/* できることは札として並べる。罫で区切ると縦に伸びて札が不ぞろいになる */
.px-service__tags {
  position: relative; list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.px-service__tags li {
  font-size: 10.5px; font-weight: 700; line-height: 1.7;
  padding: 4px 9px; background: rgba(26, 26, 26, .07); color: var(--px-ink);
}

.px-service__goal {
  position: relative; margin-top: auto;
  border-top: 1px solid rgba(26, 26, 26, .12); padding-top: 14px;
}
.px-service__goallabel {
  margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--px-sub);
}
.px-service__goaltext { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.7; }
.px-service__list li:last-child { border-bottom: 0; }
.px-service__foot { padding: 0 26px 28px; }

/* =========================================================
   Why / 自社事業
   ========================================================= */
.px-why { display: grid; gap: 0 clamp(24px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); background: none; }
.px-why__item { background: none; padding: 30px 0 34px; border-top: 1px solid var(--px-line); }
.px-why__no { font-family: var(--px-sans); font-size: 22px; line-height: 1; letter-spacing: .08em; color: var(--px-sub); font-weight: 800; }
.px-why__item h3 { font-family: var(--px-sans); font-weight: 800; font-size: 19.5px; margin: 14px 0 12px; line-height: 1.6; letter-spacing: -.01em; }
.px-why__item p { font-size: 14.5px; line-height: 2.05; margin: 0; color: var(--px-sub); }

.px-ventures { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(24px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: none; }
.px-venture { background: none; padding: 30px 0 34px; border-top: 1px solid var(--px-line); }
.px-venture__cat { font-size: 10.5px; letter-spacing: .16em; color: var(--px-sub); text-transform: uppercase; }
.px-venture__name { font-family: var(--px-sans); font-weight: 800; font-size: 20px; margin: 12px 0 0; letter-spacing: -.01em; }
.px-venture__name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--px-line); }
.px-venture__name a:hover { border-bottom-color: currentColor; }
.px-venture__body { font-size: var(--px-text-sm); line-height: 2.05; color: var(--px-sub); margin: 14px 0 0; }

/* =========================================================
   下層ページ
   ========================================================= */
.px-pagehead {
  background: var(--px-paper); color: var(--px-ink);
  padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
  position: relative; overflow: hidden; border-bottom: 1px solid var(--px-line);
}
.px-pagehead::before { display: none; }
.px-pagehead > * { position: relative; }
.px-pagehead .r-breadcrumb a, .px-pagehead .r-breadcrumb span { color: var(--px-sub); }
.px-pagehead__eyebrow { color: var(--px-sub); margin: 18px 0 14px; }
.px-pagehead__title { font-family: var(--px-sans); font-weight: 800; font-size: clamp(28px, 4.2vw, 50px); line-height: 1.45; margin: 0; letter-spacing: -.01em; }
.px-pagehead__lead { margin: 22px 0 0; font-size: 16px; line-height: 2.1; color: var(--px-sub); max-width: 38em; }

.px-sectionnav { position: sticky; top: var(--swl-fix_headerH, 0px); z-index: 20; background: var(--px-paper); border-bottom: 1px solid var(--px-line); }
.px-sectionnav ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; }
.px-sectionnav a { display: block; white-space: nowrap; padding: 16px 18px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--px-sub); position: relative; }
.px-sectionnav a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: var(--px-ink); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.px-sectionnav a.is-current { color: var(--px-ink); } .px-sectionnav a.is-current::after { transform: scaleX(1); }

.px-block { padding: clamp(48px, 7vw, 96px) 0; }
.px-block + .px-block { border-top: 1px solid var(--px-line); }
.px-block--tint { background: var(--px-paper-2); border-top: 0; }
.px-block__grid { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .px-block__grid { grid-template-columns: 1fr; } }
.px-block__title { font-family: var(--px-sans); font-weight: 800; font-size: clamp(22px, 3vw, 32px); line-height: 1.5; margin: 0 0 18px; letter-spacing: -.01em; }
.px-block__text { font-size: 15.5px; line-height: 2.1; margin: 0 0 16px; color: var(--px-sub); }

.px-progress { position: fixed; inset-inline: 0; top: 0; height: 1px; background: var(--px-ink); transform: scaleX(0); transform-origin: left; z-index: 100; }

.reach-site--primex .post_content a:not(.r-btn) { color: var(--px-ink); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.reach-site--primex .post_content a:not(.r-btn):hover { opacity: .65; }
.reach-site--primex .reach-form, .reach-site--primex .reach-diagnosis { border-radius: 0; }
.reach-site--primex .reach-form input, .reach-site--primex .reach-form select, .reach-site--primex .reach-form textarea { border-radius: 0; }

/* 共通テンプレートのページ見出し */
.reach-site--primex .r-pagehead {
  background: var(--px-paper); color: var(--px-ink); border-bottom: 1px solid var(--px-line);
  position: relative; overflow: hidden;
  padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 6vw, 80px);
}
.reach-site--primex .r-pagehead::before { display: none; }
.reach-site--primex .r-pagehead > * { position: relative; }
.reach-site--primex .r-pagehead__title { font-family: var(--px-sans); font-weight: 800; font-size: clamp(27px, 4vw, 48px); line-height: 1.45; letter-spacing: -.01em; }
.reach-site--primex .r-pagehead__lead { color: var(--px-sub); }
.reach-site--primex .r-pagehead__eyebrow { font-family: var(--px-gothic); letter-spacing: .18em; text-transform: uppercase; color: var(--px-sub); }
.reach-site--primex .r-pagehead .r-breadcrumb a,
.reach-site--primex .r-pagehead .r-breadcrumb span { color: var(--px-sub); }

/* フッター：墨で締める */
.reach-site--primex .l-footer { background: var(--px-band); color: var(--px-band-ink); }
.reach-site--primex .r-footer { --r-text: #ffffff; --r-muted: #8f8f8f; --r-rule: rgba(255,255,255,.12); --r-accent: #6B5CFF; }
.reach-site--primex .r-footer .r-btn--primary { background: var(--px-band-ink); color: var(--px-band); }
.reach-site--primex .r-footer .r-btn--ghost { color: var(--px-band-ink); }
.reach-site--primex .r-footer__name { font-family: var(--px-sans); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: .08em; }

.px-hero__photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0; }

/* 下層ページの本文 */
.reach-site--primex .post_content > p { font-size: 16px; line-height: 2.1; margin: 0 0 1.7em; max-width: 36em; }
.reach-site--primex .post_content > p:first-child { font-family: var(--px-sans); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.95; font-weight: 800; letter-spacing: -.01em; max-width: 30em; }
.reach-site--primex .post_content ul { margin: 0 0 2em; padding: 0; list-style: none; max-width: 42em; }
.reach-site--primex .post_content ul li {
  position: relative; padding: 18px 0 18px 30px; font-size: 15.5px; line-height: 2.05;
  border-bottom: 1px solid var(--px-line);
}
.reach-site--primex .post_content ul li:first-child { border-top: 1px solid var(--px-line); }
.reach-site--primex .post_content ul li::before {
  content: ""; position: absolute; left: 4px; top: 1.9em; width: 14px; height: 1px; background: var(--px-ink);
}
.reach-site--primex .post_content ul li strong { display: block; font-family: var(--px-sans); font-weight: 800; font-size: 17px; margin-bottom: 6px; letter-spacing: -.01em; }

/* =========================================================
   ヘッダーロゴ（ワードマーク）
   「株式会社」は入れない。正式名称はフッターと会社概要に置く。
   ========================================================= */
.reach-site--primex .c-headLogo.px-logo { align-items: center; display: flex; margin: 0; }
.reach-site--primex .c-headLogo__link.px-logo__link {
  display: inline-flex; align-items: center;
  text-decoration: none; color: var(--px-ink);
  transition: opacity .2s ease;
}
.reach-site--primex .c-headLogo__link.px-logo__link:hover { opacity: .65; }
/* 手書き風のワードマーク。単色なので、暗い地では色を反転させて使う */
.px-logo__img {
  display: block; width: auto; height: clamp(26px, 2.6vw, 34px);
}
.reach-site--primex .r-footer .px-logo__img,
.reach-site--primex .l-footer .px-logo__img,
.reach-site--primex .r-sec--ink .px-logo__img { filter: brightness(0) invert(1); }
.reach-site--primex .r-footer__name.px-logo { margin: 0 0 14px; }
.reach-site--primex .r-footer__name .px-logo__img { height: 30px; }

/* 旧テキスト版。どこかで呼ばれていても崩れないよう残す */
.px-logo__text {
  font-family: var(--px-sans);
  font-size: clamp(21px, 2.4vw, 26px); font-weight: 800; line-height: 1;
  letter-spacing: -.01em; font-feature-settings: normal; white-space: nowrap;
}
.px-logo__x { font-family: inherit; font-weight: inherit; }

.reach-site--primex .l-header.-transparent .c-headLogo__link.px-logo__link,
.reach-site--primex .p-spMenu .c-headLogo__link.px-logo__link { color: var(--px-ink); }

@media (max-width: 600px) { .px-logo__img { height: 24px; } .px-logo__text { font-size: 20px; } }

/* ヘッダーとナビ */
.reach-site--primex .l-header { background: var(--px-paper); border-bottom: 1px solid var(--px-line); }
.reach-site--primex .c-gnav > li > a { font-size: 14px; font-weight: 500; letter-spacing: .06em; }

/* ── 掲載原稿の構成に合わせて追加したもの ────────────── */

.px-prose { max-width: 40em; }
.px-prose p, p.px-prose { font-size: var(--px-text); line-height: 2.1; margin: 0 0 1.2em; }
.px-prose p:last-child { margin-bottom: 0; }
p.px-prose { margin-bottom: clamp(22px, 3vw, 32px); }
.px-prose strong { font-weight: 700; }
.r-sec--ink .px-prose p, .r-sec--ink p.px-prose { color: var(--px-band-sub); }
.r-sec--ink .px-prose strong { color: var(--px-band-ink); }

/* 節の中の小見出し。左の縦罫はやめ、明朝と余白で段差をつける */
.px-subhead {
  font-family: var(--px-sans); font-weight: 800;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.6; letter-spacing: .05em;
  margin: clamp(48px, 5vw, 72px) 0 20px; padding: 0 0 14px;
  border-bottom: 1px solid var(--px-line); border-left: 0;
}
.px-subhead:first-of-type { margin-top: clamp(28px, 3.5vw, 40px); }

.px-lead-after { font-family: var(--px-sans); font-weight: 800; margin: clamp(28px, 4vw, 44px) 0 0; font-size: var(--px-text-lg); line-height: 1.85; letter-spacing: -.01em; max-width: 34em; }
.px-lead-after strong { font-weight: 600; }

/* 支援・提携実績の社名 */
.px-clients { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.px-client {
  background: none; border: 0;
  padding: 10px 0; font-size: clamp(14px, 1.7vw, 17px);
  font-weight: 500; letter-spacing: .08em; color: var(--px-sub);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .px-clients { gap: 8px; }
  .px-client { padding: 8px 0; font-size: 13.5px; }
}

/* 向いている企業。箱をやめ、罫で区切った一覧にする */
.px-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(24px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: stretch; }
.px-checks li {
  position: relative; padding: 20px 0 20px 34px; background: none;
  border: 0; border-top: 1px solid var(--px-line);
  font-size: var(--px-text); line-height: 1.9;
}
.px-checks li::before {
  content: ""; position: absolute; left: 0; top: 1.75em;
  width: 18px; height: 1px; background: var(--px-ink); border: 0; transform: none;
}

@media (max-width: 600px) { :root { --px-text-lg: 17px; } }

/* 墨の節に置いた一覧。地が反転しているので、罫と文字も反転側に合わせる */
.reach-site--primex .r-sec--ink .px-why__item,
.reach-site--primex .r-sec--ink .px-venture,
.reach-site--primex .r-sec--ink .px-problem,
.reach-site--primex .r-sec--ink .px-checks li { border-top-color: var(--px-band-line); color: var(--px-band-ink); }
.reach-site--primex .r-sec--ink .px-why__item h3,
.reach-site--primex .r-sec--ink .px-problem__title { color: var(--px-band-ink); }
.reach-site--primex .r-sec--ink .px-why__item p,
.reach-site--primex .r-sec--ink .px-problem__body { color: var(--px-band-sub); }
.reach-site--primex .r-sec--ink .px-why__no,
.reach-site--primex .r-sec--ink .px-problem__no,
.reach-site--primex .r-sec--ink .px-venture__cat { color: var(--px-band-sub); }
.reach-site--primex .r-sec--ink .px-checks li::before { background: var(--px-band-ink); }
/* サービスのカードだけは地を保つ（中が段構成で、反転すると読みが崩れる） */
.reach-site--primex .r-sec--ink .px-services { background: var(--px-band-line); }
.reach-site--primex .r-sec--ink .px-service {
  background: var(--px-band-2); color: var(--px-band-ink);
  --px-line: rgba(255,255,255,.12); --px-sub: #8f8f8f;
}
.reach-site--primex .r-sec--ink .px-service__head { background: var(--px-band-ink); color: var(--px-band); }

.px-service__body > p { margin: 0; }
.px-service__body > p + .px-service__list,
.px-service__body > p + .px-specs { margin-top: 0; }

/* 支援・提携実績：社名を横に流す */
.px-marquee {
  display: flex; gap: 10px; overflow: hidden; margin: 0 0 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.px-marquee .px-clients { flex: none; flex-wrap: nowrap; margin: 0; animation: px-marquee 42s linear infinite; }
.px-marquee:hover .px-clients,
.px-marquee:focus-within .px-clients { animation-play-state: paused; }
@keyframes px-marquee { to { transform: translateX(calc(-100% - 10px)); } }
@media (prefers-reduced-motion: reduce) {
  .px-marquee { overflow-x: auto; }
  .px-marquee .px-clients { animation: none; }
  .px-marquee .px-clients[aria-hidden="true"] { display: none; }
}

/* 事例の数値。明朝の大きな級数で見せる */
.px-figure { font-family: var(--px-sans); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1; letter-spacing: .02em; color: var(--px-ink); }
.r-sec--ink .px-figure { color: var(--px-band-ink); }
.px-spec:has(.px-figure) { align-items: center; }
.px-spec:last-child { border-bottom: 0; }

/* FV直下の社名 */
.px-logostrip {
  padding: clamp(34px, 4vw, 48px) 0;
  background: var(--px-band); border-top: 0;
  --px-sub: var(--px-band-sub); --px-ink: var(--px-band-ink);
}
.px-logostrip .px-client { color: rgba(255,255,255,.62); }
.px-logostrip .px-logostrip__label { color: rgba(255,255,255,.4); }
.px-logostrip .px-marquee { margin: 0; }
/* 2周ぶんの ul を並べているので、周と周のあいだにも同じ間隔が要る。
   ここが抜けていると「コロワイド 関西電力」のように2社がくっつく */
.px-logostrip .px-marquee { gap: clamp(28px, 4vw, 56px); }
.px-logostrip .px-clients { gap: clamp(28px, 4vw, 56px); }
.px-logostrip__label {
  width: min(var(--r-max), calc(100% - 40px)); margin: 0 auto 12px;
  font-size: 11.5px; letter-spacing: .16em; color: var(--px-sub);
}

/* 見出しの中で行を分ける。旧デザインの青い2行目は、濃度差に置き換えた */
.px-line { display: block; }
.px-line--accent { color: var(--px-sub); }
/* 白抜き文字。無彩色なので、細い輪郭だけ残す */
.px-outline {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  text-stroke: 1px currentColor;
}
.r-sec--ink .px-outline { -webkit-text-stroke-color: var(--px-band-ink); }

/* 記事カード。見出しは明朝にして、節の見出しと同じ系統にそろえる */
.reach-site--primex .r-card__title { font-family: var(--px-sans); font-weight: 800; letter-spacing: -.01em; line-height: 1.65; }
.reach-site--primex .r-card { border-radius: 0; }
.reach-site--primex .r-card__cat { letter-spacing: .12em; font-size: 11px; color: var(--px-sub); }
.reach-site--primex .r-empty__title,
.reach-site--primex .reach-diagnosis__title { font-family: var(--px-sans); font-weight: 800; letter-spacing: -.01em; }
.reach-site--primex .r-faq summary { font-family: var(--px-gothic); font-weight: 500; }

/* =========================================================
   フォーム・リンク・図版の受け取り
   共通部品は白を前提にしている箇所があるので、紙の色に置き換える
   ========================================================= */
.reach-site--primex .r-formwrap,
.reach-site--primex .reach-form { background: var(--px-paper-2); border-color: var(--px-line); }
.reach-site--primex .reach-form input[type="text"],
.reach-site--primex .reach-form input[type="email"],
.reach-site--primex .reach-form input[type="url"],
.reach-site--primex .reach-form select,
.reach-site--primex .reach-form textarea { background: var(--px-paper); border-color: var(--px-line); }
.reach-site--primex .reach-form__title,
.reach-site--primex .r-formwrap h2 { font-family: var(--px-sans); font-weight: 800; letter-spacing: -.01em; }

/* 本文の外にあるリンク（仕様行の値など）。既定の青を消す */
.reach-site--primex .px-spec__value a,
.reach-site--primex .r-note a,
.reach-site--primex .reach-form a { color: var(--px-ink); text-decoration: underline; text-underline-offset: .2em; }
.reach-site--primex .px-spec__value a:hover,
.reach-site--primex .r-note a:hover,
.reach-site--primex .reach-form a:hover { opacity: .65; }

/* 図版（reach-viz）。白地の箱をやめ、紙と罫にそろえる */
.reach-site--primex .rv { border-radius: 0; }
.reach-site--primex .rv__title,
.reach-site--primex .rv-step__title { font-family: var(--px-sans); font-weight: 800; letter-spacing: -.01em; }

/* 釦の並び。狭い画面で中央寄せになると、伸びる罫の起点が定まらない。
   常に左そろえにして、主釦だけ幅いっぱいに置く */
.reach-site--primex .r-cta { align-items: flex-start; }
@media (max-width: 600px) {
  .reach-site--primex .r-cta { flex-direction: column; align-items: stretch; gap: 18px; }
  .reach-site--primex .r-cta .r-btn { justify-content: space-between; }
  .reach-site--primex .r-cta .r-btn--ghost { justify-content: flex-start; gap: 14px; }
}

/* 追従する下部の釦。枠線と角丸をやめ、紙と墨で分ける */
.reach-site--primex .r-stickycta { background: var(--px-paper); border-top: 1px solid var(--px-line); }
.reach-site--primex .r-stickycta .r-btn { padding: 16px 20px; font-size: 13.5px; gap: 12px; }
.reach-site--primex .r-stickycta .r-btn::after { width: 18px; }
.reach-site--primex .r-stickycta .r-btn--ghost { border: 1px solid var(--px-line); padding: 16px 20px; }

/* 記事ページ。タイトルと日付も明朝にそろえる */
.reach-site--primex .c-postTitle__ttl,
.reach-site--primex .p-articleThumb__caption,
.reach-site--primex .l-articleBottom__title,
.reach-site--primex .c-secTitle {
  font-family: var(--px-sans); font-weight: 800; letter-spacing: -.01em; line-height: 1.5;
}
.reach-site--primex .c-postTitle__date .__y,
.reach-site--primex .c-postTitle__date .__md { font-family: var(--px-sans); font-weight: 800; }
.reach-site--primex .r-byline { background: var(--px-paper-2); border: 0; border-top: 1px solid var(--px-line); border-bottom: 1px solid var(--px-line); }
.reach-site--primex .r-summary { background: var(--px-paper-2); border-left: 0; border-top: 1px solid var(--px-line); }
.reach-site--primex .r-summary h2 { font-family: var(--px-sans) !important; }
.reach-site--primex .p-articleThumb__img,
.reach-site--primex .p-articleThumb img,
.reach-site--primex .post_content img { border-radius: 0; }

/* 一覧（SWELLの記事リスト・関連記事・ウィジェット）の見出しも明朝に寄せる */
.reach-site--primex .p-postList__title,
.reach-site--primex .p-postListWide__title,
.reach-site--primex .p-postListBig__title,
.reach-site--primex .w-postListTitle,
.reach-site--primex .c-widget__title {
  font-family: var(--px-sans); font-weight: 800; letter-spacing: -.01em; line-height: 1.65;
}
.reach-site--primex .p-postList__meta,
.reach-site--primex .p-postList__excerpt { letter-spacing: .04em; }
.reach-site--primex .c-postThumb__cat,
.reach-site--primex .p-postList__thumb img { border-radius: 0; }

/* 狭い画面での横はみ出し対策。
   共通CSSは 900px 以下で本文脇の釦を横並び（grid-auto-flow:column）にする。
   v3の釦は左右30pxの余白と伸びる罫を持つぶん幅があり、2つ並ぶと
   グリッドの列が max-content まで広がって、ページごと横にはみ出す。
   縦に積み、幅いっぱいに置く。 */
@media (max-width: 900px) {
  .reach-site--primex .r-article { grid-template-columns: minmax(0, 1fr); }
  .reach-site--primex .r-article > * { min-width: 0; }
  .reach-site--primex .r-article__cta { grid-auto-flow: row; }
  .reach-site--primex .r-article__cta .r-btn { width: 100%; justify-content: space-between; }
}
/* 目次は横スクロールで逃がす（共通CSSのまま）が、
   その箱が親を押し広げないように止める */
.reach-site--primex .r-toc { min-width: 0; max-width: 100%; }

/* 仕様行。狭い画面では点線リーダーが機能しない（ラベルと値が
   同じ行に収まらない）ので、リーダーを外して上下に積む。 */
@media (max-width: 600px) {
  .px-spec { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
  .px-spec__leader { display: none; }
  /* 数値（.px-figure）はこの縮小の対象外。明朝の大きな級数のまま見せる */
  .px-spec__label:not(.px-figure) { font-size: 12.5px; letter-spacing: .1em; color: var(--px-sub); font-weight: 500; }
  .px-spec__value { font-size: 15px; color: var(--px-ink); }
  .px-spec:has(.px-figure) { gap: 8px; }
}

/* 署名。本文の段落と同じ大きさだと、ただの1行に見える。
   右にそろえ、上に罫を引いて文章の終わりを示す。 */
.reach-site--primex .post_content > p.px-sign {
  font-family: var(--px-sans); font-weight: 800;
  font-size: clamp(16px, 1.6vw, 18px); letter-spacing: .08em;
  margin: clamp(48px, 6vw, 80px) 0 0; padding-top: 22px;
  border-top: 1px solid var(--px-line);
  max-width: none; text-align: right;
}

/* 執筆者のプロフィール。名前は節の見出しと同じ明朝で受ける */
.reach-site--primex .r-author__name {
  font-family: var(--px-sans); font-weight: 800;
  font-size: 19px; letter-spacing: .06em;
}
.reach-site--primex .r-author__avatar img { border: 1px solid var(--px-line); }