@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* =========================================================
   SAFETYSTEP
   Claude Design「SafetyStep Home v3」の実装スタイル。
   デザイントークンは下の :root にまとめてあります。
   ここから下がサイト固有のスタイルです。
   ========================================================= */

/* =========================================================
   Cocoon との共存設定

   このファイル（子テーマの style.css）は、Cocoon 本体の style.css の
   あとに読み込まれます。したがって同じ詳細度なら、こちらが後勝ちします。

   Cocoon 本体の style.css（256KB）を解析した結果、汎用要素への
   !important は body { background-image: none } のみで、
   実害のある競合はありません。以下は念のための土台合わせです。
   ========================================================= */
.ss-body {
  /* Cocoon は body に 18px（--cocoon-default-text-size）を指定するため、
     デザインの基準値 16px に戻す。個々の文字サイズは px 指定なので
     ここが変わってもレイアウトは崩れないが、基準を揃えておく。 */
  font-size: 16px;
  background-attachment: scroll;
}

/* Cocoon のコンテナ幅・余白は本デザインでは使わない */
.ss-body #container,
.ss-body #content,
.ss-body .wrap {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* =========================================================
   00. Design tokens
   ========================================================= */
:root {
  --ink: #161a1f;
  --paper: #f1f4f8;
  --accent: #008ae7;
  --accent2: #38a8ee;
  --navy: #0a1c33;
  --muted: #7e848e;
  --line: rgba(20, 24, 30, 0.1);
  --wrap: 1280px;
  --gutter: 40px;
  --font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Zen Old Mincho", Georgia, serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --section-pad: 130px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-jp);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8;
}

img,
svg { max-width: 100%; }

img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; padding: 0; }

ul, ol { list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.br-sp { display: none; }

/* =========================================================
   02. Layout helpers
   ========================================================= */
.ss-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.ss-section { padding: var(--section-pad) 0; }
.ss-section--paper { background: var(--paper); }
.ss-section--white { background: #fff; }
.ss-section--navy { background: var(--navy); color: #fff; }
.ss-section--tight { padding: 120px 0; }
.ss-section--compact { padding: 64px 0; }
.ss-section--pt-56 { padding-top: 56px; }
.ss-section--pb-0 { padding-bottom: 0; }

/* Section label : English overline + bold Japanese heading */
.ss-label__en {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--accent);
}
.ss-label__jp {
  margin-top: 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ss-label__jp::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}
.ss-label--center { text-align: center; }
.ss-label--center .ss-label__jp::before { display: none; }
.ss-label--light .ss-label__en { color: var(--accent2); }
.ss-label--light .ss-label__jp { color: #fff; }
.ss-label--light .ss-label__jp::before { background: var(--accent2); }

.ss-lead {
  margin: 0;
  max-width: 380px;
  font-size: 14px;
  line-height: 2;
  color: #4a4a46;
}

.ss-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.ss-section__note {
  margin: 24px auto 0;
  max-width: 680px;
  font-size: 15px;
  line-height: 2;
  color: #48504a;
}
.ss-section--navy .ss-section__note { color: rgba(255, 255, 255, 0.78); }
.ss-section__note--left { margin: 40px auto 0; max-width: 860px; text-align: left; }

/* 下層ページのFV直下に使う「見出し＋リード文」ブロックの見出し */
.ss-section__lead-title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-align: center;
}

/* Buttons */
.ss-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 44px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
/*
 * ボタンのホバーは「背景とテキストの反転」で統一する。
 * Cocoon 本体の style.css に `a:hover { color: #e53900; }` という
 * 汎用ルールがあり、ボタンの :hover 側で color を明示していないと
 * そちらが勝ってテキストが赤くなってしまう。必ず :hover 側にも
 * color を明示すること（今後ボタンを追加するときも同様に）。
 */
.ss-btn--fill { background: var(--accent); color: #fff; }
/*
 * ホバー時の枠線は box-shadow（inset）で描く。border だと要素に
 * サイズが無い（auto幅の）ボタンでは box-sizing:border-box でも
 * 太さの分だけ実際の見た目が大きくなってしまうため、レイアウトに
 * 影響しない box-shadow を使い、通常時とホバー時で面積を揃える。
 */
.ss-btn--fill:hover {
  background: #fff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ss-btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.ss-btn--outline:hover { background: var(--ink); color: #fff; }
.ss-btn__center { margin-top: 56px; text-align: center; }
.ss-btn__center--flush { margin-top: 0; }

.ss-textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
  cursor: pointer;
  transition: color 0.25s;
}
/* 下層ページの .ss-linkbtn と統一し、ホバー時はスライドではなく
   テキストがアクセントカラーに変わる動きにする。 */
.ss-textlink:hover { color: var(--accent); }
.ss-textlink--light { color: #fff; border-bottom-color: var(--accent2); }
.ss-textlink--light:hover { color: var(--accent2); }

/*
 * 「→」アイコン（CSSのみ、SVG/imgを使わない）。
 * .ss-btn / .ss-textlink / .ss-about__link / .ss-linkbtn a / .ss-news__item は
 * いずれも display:flex(またはinline-flex)+ gap 済みなので、クラスに ss-arrow を
 * 足すだけで末尾に矢印が付く（gapがそのまま矢印との余白になる）。
 * 色は background-color: currentColor のため、リンクのテキスト色（hover時も含む）に
 * 自動追従する。個別に色や別要素を用意する必要はない。
 */
/*
 * 元のアイコン（<line x1="4" y1="12" x2="19" y2="12"/><polyline points="13,6 19,12 13,18"/>、
 * 24x24, stroke-width 1.5, round cap/join）と全く同じ形をCSSのmask-imageとして描画する。
 * clip-pathで作った塗りつぶし三角形は「細い線+輪郭だけの矢じり」という元の見た目と
 * 違って太く見えたため、この方式に変更した。
 * mask-imageはSVGを画像として描画した結果のアルファ値だけを使うため、
 * data URI内のstroke色（#000）自体は表示に影響しない。実際の色は
 * background-color: currentColor 側で決まる。
 */
.ss-arrow::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,6 19,12 13,18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,6 19,12 13,18'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/*
 * .ss-btn 系はボタン自体の文字色（白/ink）がそのまま矢印にも欲しい色なので
 * currentColor 任せでよいが、以下はリンクの文字色とは別に矢印の色を固定していた
 * （旧SVG実装の配色を踏襲）。hover等で文字色が変わっても矢印の色は変えない。
 */
.ss-textlink.ss-arrow::after { color: var(--accent); }
.ss-textlink--light.ss-arrow::after { color: var(--accent2); }
.ss-about__link.ss-arrow::after { color: var(--accent); }
.ss-linkbtn a.ss-arrow::after { color: var(--accent); }
.ss-news__item.ss-arrow::after { color: var(--muted); }

/* Photo box */
.ss-photo {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.ss-photo--space-32 { margin-top: 32px; }
.ss-photo--ar-2x1 { aspect-ratio: 900 / 450; }
.ss-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ss-photo--right > img { object-position: right; }
.ss-photo > img.ss-newsarchive__photo-fallback {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  object-fit: contain;
  object-position: center;
}

/* =========================================================
   03. Header
   ========================================================= */
.ss-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}
.ss-header.is-scrolled { box-shadow: 0 2px 16px rgba(10, 28, 51, 0.07); }

.ss-header__inner {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* ナビゲーションの文字サイズを大きくした分、ヘッダーだけ横幅を広げて余裕を持たせる */
.ss-header .ss-wrap { max-width: 1360px; }

.ss-header__logo { display: block; flex-shrink: 0; }
.ss-header__logo img {
  display: block;
  height: 64px;
  width: 242px;
  object-fit: contain;
}

.ss-nav { display: flex; align-items: center; gap: 17px; }
.ss-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  padding: 4px 0;
}
.ss-nav__jp {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition: color 0.2s;
}
/* 日本語と英語のちょうど中間にラインを置く。
   上下の margin を揃えることで、フォントサイズが変わっても
   常に中央に来る（flex item は margin 相殺が起きないため確実）。 */
.ss-nav__line {
  display: block;
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.ss-nav__link:hover .ss-nav__line,
.ss-nav__link.is-current .ss-nav__line { transform: scaleX(1); }
.ss-nav__en {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-family: var(--font-mono);
  line-height: 1.4;
}
.ss-nav__link:hover .ss-nav__jp { color: var(--accent); }
.ss-nav__link.is-current .ss-nav__jp { color: var(--accent); }

.ss-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.25s, color 0.25s;
}
.ss-nav__cta:hover { background: #fff; color: var(--accent); }
.ss-nav__cta:hover svg { stroke: var(--accent); }

/* Instagram（アイコンは currentColor で描画しているため、
   文字色を変えるだけでホバー時の色も自動的に追従する） */
.ss-nav__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: color 0.2s;
}
.ss-nav__social:hover { color: var(--accent); }

/* Mobile drawer trigger */
.ss-burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
}

/* 二本線 ⇔ ×。JS は aria-expanded の付け替えだけを行い、
   見た目のモーフィングはこの属性セレクタ経由のCSSトランジションが担う。
   そのため「開く」「閉じる」「Escapeで閉じる」「PC幅に戻って自動で閉じる」の
   どのケースでもボタンの見た目は自動的に連動する。 */
/* 元のSVG（24x24、線はy=8とy=16）を基準に、ユーザー確認のうえ間隔を広げてある
   （top: 7px/15px → 5px/17px）。box中央(12px)は変えていないので、
   ×に変形したときの位置（top:11px）は調整不要。 */
.ss-burger__box { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.ss-burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease, top 0.3s ease;
}
.ss-burger__bar--1 { top: 6px; }
.ss-burger__bar--2 { top: 16px; }
#ss-burger[aria-expanded="true"] .ss-burger__bar--1 {
  top: 11px;
  transform: rotate(45deg);
}
#ss-burger[aria-expanded="true"] .ss-burger__bar--2 {
  top: 11px;
  transform: rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ss-burger__bar { transition: none; }
}

/*
 * ヘッダーは position:sticky なので、ドロワーを position:absolute にすると
 * ヘッダー自身が基準（containing block）になる。これにより開いたときに
 * 後続のコンテンツ（MV等）を押し下げず、その上に重なって表示される。
 * ヘッダーの z-index:50 はスタッキングコンテキストとして子孫にも及ぶため、
 * ドロワーも自動的に本文より手前に表示される。
 */
.ss-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 32px -12px rgba(10, 28, 51, 0.25);
  /* このルールが有効なのは burger 表示時（max-width:1080px）のみで、
     そのときヘッダーの高さは 72px（下の @media 参照）。 */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.ss-drawer.is-open { display: block; }
.ss-drawer__list { padding: 8px 0 24px; }
.ss-drawer__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.ss-drawer__link:hover { color: var(--accent); }
.ss-drawer__jp { font-size: 15px; font-weight: 700; }
.ss-drawer__en {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.ss-drawer__cta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 15px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.25s, color 0.25s;
}
.ss-drawer__cta:hover { background: #fff; color: var(--accent); }
.ss-drawer__cta:hover svg { stroke: var(--accent); }
.ss-drawer__social {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  padding: 8px;
}
.ss-drawer__social:hover { color: var(--accent); }

/* =========================================================
   04. Hero
   ========================================================= */
.ss-hero {
  position: relative;
  height: 680px;
  overflow: hidden;
  background: var(--navy);
}
.ss-hero__media { position: absolute; inset: 0; }
.ss-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 28, 51, 0.6) 0%, rgba(10, 28, 51, 0.18) 45%, rgba(10, 28, 51, 0.8) 100%);
}
.ss-hero__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 96px;
  color: #fff;
}
.ss-hero__overline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 22px;
}
.ss-hero__title {
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}
.ss-hero__text {
  margin-top: 30px;
  max-width: 560px;
  font-size: 16px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
}
.ss-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ss-hero__scroll span {
  font-size: 12px;
  letter-spacing: 0.25em;
  font-family: var(--font-mono);
}
.ss-hero__scroll svg { animation: ss-bob 2.4s ease-in-out infinite; }

@keyframes ss-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ss-hero__scroll svg { animation: none; }
}

/* =========================================================
   05. About
   ========================================================= */
.ss-about__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
/*
 * グリッドアイテムは min-width の初期値が auto（＝中身の min-content）。
 * 中に折り返せない長い行があると 1fr のトラックがその行の幅まで広がり、
 * 列ごと .ss-wrap をはみ出して横スクロールを起こす。0 を明示して、
 * トラック幅（＝親の幅）を必ず優先させる。
 */
.ss-about__body { min-width: 0; }
.ss-about__catch {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 2.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  /* 文中の <br /> で意図的に改行しているだけの箇所が、スマホ幅では
     さらに文節の途中で折り返されてしまうのを防ぐ。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ss-about__desc {
  margin-top: 28px;
  font-size: 15px;
  line-height: 2.1;
  color: #48504a;
}
.ss-about__links {
  margin-top: 44px;
  display: grid;
  border-top: 1px solid var(--line);
}
.ss-about__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left 0.25s, color 0.25s;
}
.ss-about__link:hover { padding-left: 12px; color: var(--accent); }
/*
 * 英字ラベル（font-mono・11px）と日本語ラベル（16px・bold）は行の高さ
 * （line-height）が違うため、align-items:center のままだと英字ラベルの
 * 下端が日本語より約5px上に浮いて見える。align-items は矢印アイコン
 * （::after、17px四方）を行の中央に保つために center のまま残し、
 * 2つのラベルだけ align-self:flex-end で下端をそろえる。
 *
 * 英字ラベルは行の右端（矢印の直前）ではなく、日本語ラベルの直後に
 * 置く。PC・SPとも同じ考え方で、幅を固定せず内容ぶんの幅
 * （width:auto）にすることで、英字ラベルが枠から浮いて離れて
 * 見えたり、逆に長い英字（PHILOSOPHYなど）が実機のフォント差で
 * 枠からはみ出したりしない。余った幅は margin-right:auto で吸収し、
 * 矢印は従来どおり行の右端に残す。
 */
.ss-about__jp { font-size: 16px; font-weight: 700; flex: 0 1 auto; min-width: 0; align-self: flex-end; }
.ss-about__en {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  width: auto;
  min-width: 0;
  margin-right: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  align-self: flex-end;
}
.ss-about__cta { margin-top: 40px; text-align: center; }

.ss-about__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.ss-about__photos .ss-photo:nth-child(1) { grid-row: span 2; aspect-ratio: 3 / 4; }
.ss-about__photos .ss-photo:nth-child(2),
.ss-about__photos .ss-photo:nth-child(3) { aspect-ratio: 4 / 3; }

/* Group strength (J STEP HOLDINGS) */
.ss-group {
  margin-top: 80px;
  background: var(--navy);
  color: #fff;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
.ss-group__watermark {
  position: absolute;
  top: -60px;
  right: -40px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 220px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  user-select: none;
  pointer-events: none;
}
.ss-group__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.ss-group__eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent2);
  font-family: var(--font-mono);
  margin-bottom: 18px;
}
.ss-group__title {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ss-group__title em { font-style: normal; color: var(--accent2); }
.ss-group__desc {
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.82);
}
.ss-group__stats {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ss-group__stat { padding-right: 36px; }
.ss-group__stat + .ss-group__stat {
  padding-left: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.ss-group__stat-en {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent2);
  font-family: var(--font-mono);
  margin-bottom: 12px;
}
.ss-group__stat-value { display: flex; align-items: baseline; gap: 6px; }
.ss-group__stat-num {
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ss-group__stat-unit { font-size: 16px; font-weight: 700; color: var(--accent2); }
.ss-group__stat-jp {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}
.ss-group__list { display: grid; gap: 14px; }
.ss-group__item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 26px;
}
.ss-group__item-mark { flex-shrink: 0; text-align: center; }
.ss-group__item-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 30px;
  color: var(--accent2);
  line-height: 1;
}
.ss-group__item-tag {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  border: 1px solid var(--accent2);
  padding: 3px 6px;
  letter-spacing: 0.1em;
}
.ss-group__item-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.ss-group__item-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   06. Service
   ========================================================= */
.ss-service__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.ss-service__card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px -22px rgba(8, 20, 36, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ss-service__photo { aspect-ratio: 16 / 11; }
.ss-service__mark {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.ss-service__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ss-service__en {
  font-size: 10px;
  letter-spacing: 0.2em;
  font-family: var(--font-mono);
  opacity: 0.92;
}
.ss-service__body {
  padding: 26px 26px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ss-service__title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--navy);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--accent);
  line-height: 1.4;
}
.ss-service__items { margin-top: 22px; display: grid; gap: 13px; }
.ss-service__items li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a4048;
  line-height: 1.5;
}
.ss-service__items li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* =========================================================
   07. Chosen (選ばれる理由)
   ========================================================= */
.ss-chosen__grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 32px;
}
.ss-chosen__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ss-chosen__item > * { width: 78%; }
.ss-chosen__photo {
  aspect-ratio: 380 / 218;
  filter: saturate(0.9);
}
/*
 * 見出し＋英字ラベルは常に自然な位置（写真のすぐ下）で寄り添わせる。
 * 日本語見出しが1行の項目と2行になる項目が同じ行内に混在しても本文の
 * 開始位置が揃うよう、両者をまとめた .ss-chosen__head の高さを
 * 「2行になった場合」の高さで固定する。1行で収まる項目は、その分の
 * 余白が英字ラベルの下（本文との間）に出るだけで、見出しと英字ラベルの
 * 間隔は常に一定（4px）を保つ。
 */
.ss-chosen__head {
  margin-top: 32px;
  min-height: 86px; /* 見出し2行分(63px) + 間隔(4px) + 英字ラベル1行分(19px) */
}
/* 英字ラベルが上・日本語見出しが下（ユーザー指定の並び順）。 */
.ss-chosen__title {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: 4px;
}
.ss-chosen__en {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--accent2);
  font-family: var(--font-mono);
}
/* 2026年8月19日、本文を圧縮した1文構成に差し替えて再表示。
   （2026年8月18日に一旦 display:none にしていたが、要望により復活） */
.ss-chosen__desc {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.68);
}
.ss-chosen__cta { margin-top: 64px; text-align: center; }

/* =========================================================
   08. Commitment (私たちの取り組み)
   ========================================================= */
.ss-commit__grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ss-commit__item { background: var(--paper); padding: 44px 32px; }
/* 英字ラベルが上・日本語見出しが下（ユーザー指定の並び順）。 */
.ss-commit__title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-top: 8px;
}
.ss-commit__en {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.ss-commit__desc {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #55534d;
}

/* =========================================================
   09. News
   ========================================================= */
.ss-news__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
}
.ss-news__more { margin-top: 36px; }
.ss-news__list { border-top: 1px solid var(--line); }
.ss-news__item {
  display: grid;
  grid-template-columns: 130px 96px 1fr 24px;
  gap: 24px;
  align-items: center;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.25s;
}
.ss-news__item:hover { background: rgba(0, 138, 231, 0.05); color: var(--ink); }
.ss-news__date {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.ss-news__cat {
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--ink);
  padding: 4px 0;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.ss-news__title { font-size: 15.5px; font-weight: 600; line-height: 1.6; }

/* ---- お知らせ一覧（/news/、index.php） ----
 * 施工事例一覧（.ss-worksarchive__*）と同じ3列カードパターンを流用し、
 * サイト内の一覧ページのトンマナを揃える。 */
.ss-newsarchive__grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
.ss-newsarchive__item { display: block; color: var(--ink); }
.ss-newsarchive__item:hover { color: var(--ink); }
.ss-newsarchive__photo { aspect-ratio: 4 / 3; }
.ss-newsarchive__photo > img { object-fit: contain; }
.ss-newsarchive__photo--wide > img { object-fit: cover; }
.ss-newsarchive__item:hover .ss-newsarchive__photo img { transform: scale(1.04); }
.ss-newsarchive__photo img { transition: transform 0.6s ease; }
.ss-newsarchive__body { padding-top: 18px; }
.ss-newsarchive__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-newsarchive__cat {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 11px;
  letter-spacing: 0.08em;
}
.ss-newsarchive__date { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.ss-newsarchive__title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
@media (max-width: 1080px) {
  .ss-newsarchive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ss-newsarchive__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================================
   10. Works
   ========================================================= */
.ss-works__head { margin-bottom: 56px; }
.ss-works__head .ss-lead { max-width: 420px; }
/* 3列×3段のモザイク（3件固定）。
   左＝2列×3段ぶち抜きの大きいタイル、右上＝1列×2段の縦長、右下＝1列×1段。
   1マス=200px。広い画面でタイルが大きくなりすぎないよう、グリッド自体に
   幅の上限を設けて中央寄せにしている（1280px幅で 左687×636 / 右上335×418 / 右下335×200）。
   大きさを変えたいときは grid-auto-rows と max-width の2つを調整する。 */
.ss-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 18px;
  max-width: 1040px;
  margin-inline: auto;
}
.ss-works__item {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.ss-works__item:hover { color: #fff; }
.ss-works__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 4; }
.ss-works__item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 3; }
.ss-works__item:nth-child(3) { grid-column: 3 / 4; grid-row: 3 / 4; }
.ss-works__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.ss-works__item:hover img { transform: scale(1.05); }
.ss-works__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 20, 36, 0.78) 0%, rgba(8, 20, 36, 0.12) 42%, rgba(8, 20, 36, 0) 70%);
}
.ss-works__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
}
.ss-works__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ss-works__cat {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 11px;
  letter-spacing: 0.08em;
}
.ss-works__area {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono);
}
.ss-works__title {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.ss-works__cta { margin-top: 64px; text-align: center; }

/* =========================================================
   11. Media

   2026年8月20日、カスタム投稿タイプ（最新3件のカード表示）から固定
   ページ1本に戻し、トップページ側はいったんバナー1枚のシンプルな
   導線にした。同日中に、3記事のカードを紹介する構成へ再変更。
   紹介する3本は inc/front-defaults.php の ss_media_picks() で固定
   指定している（CPTではなく固定ページなので「最新3件」の動的抽出は
   できない）。

   下層ページ「足場就活テクニック大全」一覧（/media/）用の
   .ss-medialist__* とはあえて別クラスにしている。あちらは記事を
   探しやすくするための一覧（2列・上限幅つき）、こちらはトップページの
   紹介カード（3列）で、役割も見せ方も異なるため。
   ========================================================= */
.ss-media__head { align-items: flex-end; }
.ss-media__desc {
  margin-top: 22px;
  max-width: 560px;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.75);
}
.ss-media__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ss-media__item { color: #fff; }
.ss-media__item:hover { color: #fff; }
.ss-media__photo { aspect-ratio: 3 / 2; border-radius: 2px; }
.ss-media__item img { transition: transform 0.6s ease; }
.ss-media__item:hover img { transform: scale(1.04); }
.ss-media__body {
  margin-top: 22px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ss-media__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 44px;
  line-height: 0.9;
  color: var(--accent2);
  flex-shrink: 0;
}
.ss-media__title {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.ss-media__sub {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

/* =========================================================
   12. Recruit
   ========================================================= */
.ss-recruit {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.ss-recruit__media { position: absolute; inset: 0; }
.ss-recruit__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-recruit__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 28, 51, 0.93) 0%, rgba(10, 28, 51, 0.55) 60%, rgba(10, 28, 51, 0.3) 100%);
}
.ss-recruit__body { position: relative; padding: 120px var(--gutter); }
.ss-recruit__en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1;
}
.ss-recruit__title {
  margin-top: 20px;
  font-size: clamp(30px, 4.5vw, 64px);
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ss-recruit__text {
  margin-top: 28px;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.85);
}
.ss-recruit__actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ss-recruit__actions .ss-btn { padding: 16px 26px; font-size: 14px; letter-spacing: 0.06em; gap: 12px; }

/* =========================================================
   13. Contact band + Footer
   ========================================================= */
.ss-footer { background: #081424; color: rgba(255, 255, 255, 0.75); }

.ss-contact { background: var(--accent); }
.ss-contact__inner {
  padding: 56px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.ss-contact__en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 40px);
  color: #fff;
  line-height: 1.2;
}
.ss-contact__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  margin-top: 6px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.4;
}
.ss-contact__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.ss-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 800;
  transition: opacity 0.25s, background-color 0.25s, color 0.25s;
}
/* この帯自体が var(--accent) 色のため、tel ボタンは反転先を var(--ink) にする
   （そのまま反転すると背景と同化して見えなくなるため）。 */
.ss-contact__btn--tel { background: #fff; color: var(--accent); }
.ss-contact__btn--tel:hover { background: var(--ink); color: #fff; }
.ss-contact__btn--tel:hover svg { stroke: #fff; }
.ss-contact__btn--form { border: 1px solid rgba(255, 255, 255, 0.7); color: #fff; }
.ss-contact__btn--form:hover { background: #fff; color: var(--accent); }
.ss-contact__btn--form:hover svg { stroke: var(--accent); }

.ss-footer__inner { padding: 72px var(--gutter) 40px; }
.ss-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
.ss-footer__logo img { display: block; height: 78px; width: auto; }
.ss-footer__address {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.95;
  font-family: var(--font-mono);
  font-style: normal;
  letter-spacing: 0.03em;
}
.ss-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 0;
  align-content: start;
  padding-top: 16px;
}
.ss-footer__nav a {
  display: block;
  font-size: 13.5px;
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s;
}
.ss-footer__nav a:hover { color: #fff; }
.ss-footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}

/* =========================================================
   14. Breadcrumb (Yoast SEO)

   Yoast の yoast_breadcrumb() が出力する markup は
   <p id="breadcrumbs"><span>…<a>…</a></span> › <span class="breadcrumb_last">…</span></p>
   という構造。区切り文字は Yoast 側の設定に従う。
   ========================================================= */
.ss-breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
}
.ss-breadcrumb #breadcrumbs {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--muted);
  overflow-wrap: break-word;
}
.ss-breadcrumb a {
  color: var(--muted);
  transition: color 0.2s;
}
.ss-breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.ss-breadcrumb .breadcrumb_last {
  color: var(--ink);
  font-weight: 600;
}

/* =========================================================
   15. 固定ページの本文（ブロックエディター）

   下層ページはブロックエディターで組みます。page.php は本文を
   カードで囲まず、幅も固定せずそのまま出力しています。

   ・`wp:html` で貼った <section class="ss-section …"> は全幅で表示
   ・段落・見出しなど通常のブロックは、ここでコンテンツ幅に収める

   判定は「クラス名が ss- で始まるかどうか」で行っています。
   デザインのセクション（ss-section / ss-hero / ss-recruit …）は
   自前で余白と幅を持っているため、こちらでは触りません。
   ========================================================= */
.ss-content { background: var(--paper); }

/* 通常ブロックをコンテンツ幅に収める */
.ss-content > p,
.ss-content > h1,
.ss-content > h2,
.ss-content > h3,
.ss-content > h4,
.ss-content > h5,
.ss-content > h6,
.ss-content > ul,
.ss-content > ol,
.ss-content > dl,
.ss-content > pre,
.ss-content > hr,
.ss-content > figure,
.ss-content > table,
.ss-content > blockquote,
.ss-content > .wp-block-group,
.ss-content > .wp-block-columns,
.ss-content > .wp-block-buttons,
.ss-content > .wp-block-image,
.ss-content > .wp-block-embed,
.ss-content > .wp-block-table,
.ss-content > .wp-block-quote,
.ss-content > .wp-block-separator {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* 本文まわりの体裁 */
.ss-content > p,
.ss-content > ul,
.ss-content > ol,
.ss-content > table,
.ss-content > blockquote {
  font-size: 15.5px;
  line-height: 2.1;
  margin-top: 1.6em;
  margin-bottom: 1.6em;
}
.ss-content > h2 {
  margin-top: 2.4em;
  margin-bottom: 0.8em;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.ss-content > h3 {
  margin-top: 2em;
  margin-bottom: 0.7em;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}
.ss-content > ul { padding-left: calc(var(--gutter) + 1.4em); }
.ss-content > ol { padding-left: calc(var(--gutter) + 1.4em); }
.ss-content > ul > li { list-style: disc; }
.ss-content > ol > li { list-style: decimal; }
/*
 * :not([class*="ss-"]) で除外しているのは、本文中の素のリンク（クラス無しの
 * <a href="…">）だけを対象にするため。.ss-btn / .ss-textlink / .ss-linkbtn a /
 * .ss-sitemap__link など、すでに自前で色を持つデザインパーツ（すべて ss- が
 * 付いたクラスを持つ）は対象から外れる。除外しないと、このセレクタは
 * （クラス1個+要素1個 = 詳細度0,1,1）が .ss-btn--fill 等（クラス1個 = 0,1,0）に
 * 詳細度で勝ってしまい、ボタンの文字色・下線が意図せず上書きされる
 * （実際に発生していた不具合: 塗りボタンが背景と同じ水色の文字になり、
 * 下線まで付いてしまっていた）。 */
.ss-content a:not([class*="ss-"]) { color: var(--accent); text-decoration: underline; }
.ss-content table { border-collapse: collapse; }
.ss-content th,
.ss-content td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; }

/* ss- で始まらない＝通常ブロックが先頭/末尾のときだけ、上下に余白を足す。
   全幅セクションが先頭なら余白ゼロでヘッダーに密着する。 */
.ss-content > :first-child:not([class^="ss-"]):not([class*=" ss-"]) { margin-top: 72px; }
.ss-content > :last-child:not([class^="ss-"]):not([class*=" ss-"]) { margin-bottom: 96px; }

/* =========================================================
   16. Generic pages (single / archive / 404)
   ========================================================= */
.ss-page { background: var(--paper); padding: 80px 0 120px; }
/* 個別記事ページ（お知らせ）は本文（.ss-entry）が白背景のカードのため、
   ページ全体もグレーではなく白に揃えて「本文だけ白浮き」を防ぐ。
   施工事例・一覧・404はグレー背景のまま。 */
body.single-post .ss-page { background: #fff; }
.ss-page__header { margin-bottom: 48px; }
.ss-page__title {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.ss-page__meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.ss-entry {
  background: #fff;
  padding: 56px;
  border: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 2.1;
}
.ss-entry > * + * { margin-top: 1.6em; }
.ss-entry h2 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding-left: 16px;
  border-left: 4px solid var(--accent);
  line-height: 1.5;
}
.ss-entry h3 { font-size: 20px; font-weight: 800; line-height: 1.5; }
.ss-entry a { color: var(--accent); text-decoration: underline; }
.ss-entry ul, .ss-entry ol { padding-left: 1.4em; }
.ss-entry ul li { list-style: disc; }
.ss-entry ol li { list-style: decimal; }
.ss-entry img { height: auto; }
.ss-entry blockquote {
  border-left: 3px solid var(--line);
  padding-left: 20px;
  color: #55534d;
}
.ss-entry table { width: 100%; border-collapse: collapse; }
.ss-entry th, .ss-entry td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; }

.ss-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.ss-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}
.ss-pagination .page-numbers.current,
.ss-pagination .page-numbers:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- 施工事例アーカイブ（/case/、archive-works.php） ---- */
.ss-worksarchive__grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
.ss-worksarchive__item { display: block; color: var(--ink); }
.ss-worksarchive__item:hover { color: var(--ink); }
.ss-worksarchive__photo { aspect-ratio: 4 / 3; }
.ss-worksarchive__item:hover .ss-worksarchive__photo img { transform: scale(1.04); }
.ss-worksarchive__photo img { transition: transform 0.6s ease; }
.ss-worksarchive__body { padding-top: 18px; }
.ss-worksarchive__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-worksarchive__cat {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 11px;
  letter-spacing: 0.08em;
}
.ss-worksarchive__area { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.ss-worksarchive__title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .ss-worksarchive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ss-worksarchive__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- 施工事例 個別ページ（single.php、works投稿タイプ） ---- */

/* アイキャッチ・ギャラリー写真は <button> で包んでクリック拡大できるようにしている。
   ボタンの既定装飾（背景・枠線・パディング）を消し、中の画像だけを見せる。 */
.ss-works-hero,
.ss-works-gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
}

.ss-works-hero {
  max-width: 640px;
  margin: 0 auto 16px;
}
.ss-works-hero img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.ss-works-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 32px;
}
.ss-works-gallery__item { width: calc(25% - 9px); }
.ss-works-gallery__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}

.ss-works-table {
  max-width: 640px;
  margin: 0 auto 32px;
  border: 1px solid var(--line);
  background: #fff;
}
.ss-works-table__row { display: grid; grid-template-columns: 140px 1fr; }
.ss-works-table__row + .ss-works-table__row { border-top: 1px solid var(--line); }
.ss-works-table__row dt {
  padding: 14px 16px;
  background: var(--paper);
  font-weight: 700;
  font-size: 14px;
}
.ss-works-table__row dd { padding: 14px 16px; font-size: 14.5px; }

@media (max-width: 720px) {
  .ss-works-gallery__item { width: calc(50% - 6px); }
  .ss-works-table__row { grid-template-columns: 110px 1fr; }
}

/* ---- 施工事例 画像ライトボックス ---- */
.ss-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 20, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.ss-lightbox.is-open { opacity: 1; visibility: visible; }
.ss-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.ss-lightbox__close,
.ss-lightbox__prev,
.ss-lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.ss-lightbox__close:hover,
.ss-lightbox__prev:hover,
.ss-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); }
.ss-lightbox__close { top: 24px; right: 24px; width: 40px; height: 40px; font-size: 22px; }
.ss-lightbox__prev,
.ss-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
}
.ss-lightbox__prev { left: 16px; }
.ss-lightbox__next { right: 16px; }

@media (max-width: 720px) {
  .ss-lightbox__prev,
  .ss-lightbox__next { width: 40px; height: 40px; font-size: 22px; }
}

.ss-404 { text-align: center; padding: 140px 0; }
.ss-404__code {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(64px, 12vw, 160px);
  color: var(--accent);
  line-height: 1;
}

/* =========================================================
   17. 下層ページ用パーツ

   ブロックエディターの「コードエディター」に wp:html で貼り付けて使う
   共通パーツです。トップページと同じデザイントークンを使うため、
   色やフォントを個別に指定する必要はありません。

   ・.ss-pagehero  … ページ冒頭のタイトル帯
   ・.ss-alt       … 画像と文章を左右交互に並べる本文ブロック
   ========================================================= */

/* ---- ページタイトル帯 ---- */
.ss-pagehero {
  background: var(--navy);
  color: #fff;
  padding: 88px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ss-pagehero__en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--accent2);
  line-height: 1;
  letter-spacing: 0.02em;
}
.ss-pagehero__title {
  margin-top: 14px;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #fff;
}
/* 背景写真を敷きたいときは <img class="ss-pagehero__bg"> を先頭に入れる */
.ss-pagehero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.ss-pagehero > .ss-wrap { position: relative; }

/* ---- 画像＋文章を交互に並べる ---- */
.ss-alt__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ss-alt__row + .ss-alt__row { margin-top: 96px; }
/* 既定の96pxより詰めたいときの上余白調整版 */
.ss-alt__row--space-72 { margin-top: 72px; }
.ss-alt__row--space-24 { margin-top: 24px; }

/* --reverse を付けると画像が右側になる */
.ss-alt__row--reverse .ss-alt__media { order: 2; }

.ss-alt__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e6e2d8;
}
.ss-alt__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ss-alt__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
}
.ss-alt__en {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.ss-alt__title {
  margin-top: 10px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--ink);
}
.ss-alt__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-top: 20px;
}
.ss-alt__text {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2.1;
  color: #48504a;
}
.ss-alt__text + .ss-alt__text { margin-top: 1.4em; }
/* リード文的に使う版（幅を絞って中央寄せ） */
.ss-alt__text--lead { max-width: 840px; margin: 24px auto 0; }
/* 署名行（右寄せ・太字） */
.ss-alt__text--signature { text-align: right; font-weight: 700; }

/* =========================================================
   18. Responsive
   ========================================================= */
@media (max-width: 1200px) {
  .ss-nav { gap: 12px; }
  .ss-header__logo img { width: 200px; height: 54px; }
}

@media (max-width: 1080px) {
  :root { --section-pad: 96px; --gutter: 28px; }

  .ss-header__inner { height: 72px; }
  .ss-nav { display: none; }
  .ss-burger { display: inline-flex; }

  .ss-hero { height: 560px; }
  .ss-hero__body { padding-bottom: 72px; }

  .ss-about__grid { grid-template-columns: 1fr; gap: 48px; }
  .ss-group { padding: 48px 32px; }
  .ss-group__grid { grid-template-columns: 1fr; gap: 40px; }
  .ss-group__watermark { font-size: 160px; }

  .ss-service__grid { grid-template-columns: repeat(2, 1fr); }
  .ss-chosen__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .ss-commit__grid { grid-template-columns: repeat(2, 1fr); }
  .ss-media__grid { grid-template-columns: repeat(2, 1fr); }
  .ss-photo { max-width: 600px; }
  .ss-news__grid { grid-template-columns: 1fr; gap: 40px; }
  /* 4列目（矢印用の24px）を持たない3列レイアウトになるため、矢印は
     グリッドに乗せず右端に絶対配置してPCと同じ「右端に来る」見た目にする。 */
  .ss-news__item { grid-template-columns: 110px 88px 1fr; position: relative; padding-right: 32px; }
  .ss-news__item.ss-arrow::after { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

  .ss-pagehero { padding: 64px 0; }
  .ss-alt__row { grid-template-columns: 1fr; gap: 32px; }
  .ss-alt__row + .ss-alt__row { margin-top: 64px; }
  /* 1カラムでは常に画像が先に来るよう order を戻す */
  .ss-alt__row--reverse { padding-top: 40px;}
  .ss-alt__row--reverse .ss-alt__media { order: 0; padding-top: 40px;}
  .ss-alt__media { max-width: 600px;}
  .ss-section__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ss-media__head { align-items: flex-start; }

  /* 左右の余白は .ss-wrap の padding（var(--gutter)）に任せるため、
     ここでは上下の padding だけを上書きする（左右を 0 にしていたのが
     SPで余白が消えていた原因）。 */
  .ss-recruit__body { padding-top: 96px; padding-bottom: 96px; }
  .ss-footer__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  :root { --section-pad: 72px; --gutter: 20px; }
  .br-sp { display: block; }

  .ss-header__logo img { width: 168px; height: 46px; }

  .ss-hero { height: 520px; }
  .ss-hero__text { font-size: 14.5px; line-height: 1.9; }

  .ss-about__photos { grid-template-columns: 1fr 1fr; }
  /* レイアウト（日本語の直後に英字ラベル）はPCと共通のベースルールが担当。
     ここではスマホ向けに間隔と文字サイズだけを詰める。 */
  .ss-about__link { gap: 16px; }
  .ss-about__en { font-size: 10px; }
  /*
   * ここが「私たちについて」がはみ出していた真因（英字ラベルの幅ではない）。
   *
   * 下の3つの見出し・リード文は、デザインどおりの位置で改行させるために
   * <br /> を入れ、word-break:keep-all（文節の途中では折り返さない）を
   * 指定している。ところがスマホ幅では、keep-all では切れない最長の文節
   * （例:「地域の現場を足元から支える会社です。」＝18文字・約360px）が
   * コンテンツ幅（375px端末で335px）に収まらない。この1行が親要素の
   * min-content になってグリッドの 1fr トラックを押し広げ、
   * 「私たちについて」の列だけが画面より30px広くなって、行の右端にある
   * 英字ラベルと矢印が画面外に切れていた。
   *
   * スマホでは <br /> の改行をやめて一文として流し、日本語として自然に
   * 折り返させる。文字サイズを変えずに、どの画面幅でも必ず収まる。
   * PC・タブレット（721px以上）は従来どおり <br /> の位置で改行する。
   */
  .ss-about__catch br,
  .ss-group__title br,
  .ss-recruit__title br { display: none; }
  .ss-about__catch,
  .ss-group__title,
  .ss-recruit__title {
    word-break: normal;
    white-space: normal;
  }
  .ss-group { padding: 36px 22px; }
  /* PCと同じ横並び（2カラム）のまま、375px幅でも収まるようフォントサイズと
     余白だけを詰める。数字(54px)が大きすぎて縦積みになっていたのを解消。 */
  .ss-group__stats { grid-template-columns: 1fr 1fr; }
  .ss-group__stat { padding-right: 10px; }
  .ss-group__stat + .ss-group__stat {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .ss-group__stat-en { font-size: 9px; letter-spacing: 0.12em; margin-bottom: 8px; }
  .ss-group__stat-num { font-size: 32px; }
  .ss-group__stat-unit { font-size: 12px; }
  /* 「足場専門のグループ企業」（11文字）が折り返さないよう、
     余白と字間を切り詰める。 */
  .ss-group__stat-jp { margin-top: 8px; font-size: 10.5px; letter-spacing: 0; }
  .ss-group__item { flex-direction: column; gap: 14px; }
  .ss-group__item-mark { display: flex; align-items: center; gap: 12px; }
  .ss-group__item-tag { margin-top: 0; }

  .ss-service__grid { grid-template-columns: 1fr; gap: 20px; }
  /* SPは1カラム縦積みになるため、写真とその前のアイテムの本文が近すぎて
     区切りが分かりにくかった。gapをやめて余白を広く取り、
     その中央に青い仕切り線（幅45%）を入れて境目を明確にする。 */
  .ss-chosen__grid { grid-template-columns: 1fr; gap: 0; }
  .ss-chosen__item > * { width: 100%; }
  .ss-chosen__item:not(:first-child) {
    position: relative;
    margin-top: 96px;
  }
  .ss-chosen__item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: -48px; /* margin-top(96px)の中央 */
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 1px;
    background: var(--accent2);
  }
  .ss-commit__grid { grid-template-columns: 1fr; }
  .ss-commit__item { padding: 32px 24px; }
  .ss-media__grid { grid-template-columns: 1fr; }

  .ss-news__item {
    grid-template-columns: max-content 100px 1fr;
    gap: 8px 16px;
    padding: 20px 28px 20px 4px;
    position: relative;
  }
  .ss-news__item.ss-arrow::after { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
  .ss-news__title { grid-column: 1 / -1; }

  .ss-works__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .ss-works__item:nth-child(n) { grid-column: auto; grid-row: auto; }

  /* 左右の余白は var(--gutter) 経由でベースの規則から自動で引き継がれるため、
     ここでは上下の padding だけを上書きする。 */
  .ss-recruit__body { padding-top: 72px; padding-bottom: 72px; }
  /* <br /> を無くして自然な折り返しに任せると、読点の無い「一緒に追求しませんか。」
     が幅に収まらず、単語の途中（ん／か）で強制改行されてしまっていた。
     フォントを詰めて、読点の後だけで折り返しが収まるようにする。 */
  .ss-recruit__title { font-size: 29px; }
  /* 2行目（一緒に追求しませんか。）が375px幅では入りきらず折り返していたため、
     フォントを詰めて1行に収める。 */
  .ss-contact__inner { padding-top: 40px; padding-bottom: 40px; }
  .ss-contact__actions { width: 100%; flex-direction: column; }
  .ss-contact__btn { justify-content: center; }
  .ss-footer__inner { padding-top: 56px; padding-bottom: 32px; }
  .ss-footer__nav { grid-template-columns: 1fr; }

  .ss-btn { padding: 16px 28px; font-size: 13.5px; }
  .ss-entry { padding: 28px 20px; }
}


/* =========================================================
   19. 下層ページ追加コンポーネント
   「私たちについて」「事業サービス」「選ばれる理由」
   「私たちの取り組み」「関連グループ会社」の5ページで使う
   共通パーツ。ブロックエディターの wp:html に貼り付けて使う。
   ========================================================= */

/* ---- 経営理念など、中央寄せの引用ふうテキスト ---- */
.ss-philosophy__subhead {
  margin-top: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.ss-philosophy {
  max-width: 860px;
  margin: 40px auto 0;
  text-align: left;
  font-size: 15.5px;
  line-height: 2.3;
  color: #48504a;
}
.ss-philosophy--flush { margin-top: 0; }
.ss-philosophy--full { max-width: none; }
.ss-philosophy--emphasis { font-weight: 700; font-size: 17px; color: var(--ink); }

/* ---- 行動指針：2x2の指針カード ---- */
.ss-guide__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ss-guide__item { background: #fff; padding: 40px 44px; }
.ss-guide__title {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--navy);
}
.ss-guide__desc { margin-top: 14px; font-size: 14.5px; line-height: 2; color: #55534d; }

/* ---- ドット付き2カラムリスト（許認可・保有資格など） ---- */
.ss-dotlist {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 40px;
}
.ss-dotlist--single { grid-template-columns: 1fr; }
/* .ss-splitrow内の小見出し（「保有資格」「技能講習」など） */
.ss-splitrow__label { font-size: 14px; font-weight: 700; color: var(--muted); }
.ss-dotlist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.8;
  color: #3a4048;
}
.ss-dotlist li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ---- 会社概要など：ラベル・値の行 ---- */
.ss-infolist { margin-top: 24px; border-top: 1px solid var(--line); }
.ss-infolist__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.ss-infolist__label { font-size: 14px; font-weight: 700; color: var(--muted); }
.ss-infolist__value { font-size: 15px; line-height: 1.9; color: var(--ink); }
.ss-infolist__value p + p { margin-top: 0.6em; }
.ss-infolist__office {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  padding-right: 80px;
}

@media screen {
  
}

/* ---- 沿革タイムライン（縦線+ドット。web-parts-100 #821 を参考にトークン化） ---- */
.ss-history { margin-top: 40px; list-style: none; padding: 0; position: relative; }
.ss-history::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}
.ss-history__row { position: relative; padding: 0 0 30px 34px; }
.ss-history__row:last-child { padding-bottom: 0; }
.ss-history__dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--accent);
}
.ss-history__date {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.03em;
}
.ss-history__text { font-size: 15px; line-height: 1.9; color: var(--ink); }

/* ---- 営業所・事業所一覧（住所・地図） ---- */
.ss-officelist { margin-top: 24px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ss-office {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: center;
  padding: 40px 80px;
}
.ss-office__label { font-size: 14px; font-weight: 800; color: var(--ink); }
.ss-office__text { font-size: 14.5px; line-height: 1.9; color: #48504a; }
.ss-office__text strong { display: block; font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.ss-office__map {
  position: relative;
  height: 240px;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--line) 23px, var(--line) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, var(--line) 23px, var(--line) 24px);
  border: 1px solid var(--line);
}

/* ---- 会社名見出し（関連グループ会社ページ） ---- */
.ss-company { margin-top: 96px; }
.ss-company:first-child { margin-top: 0; }
.ss-company__title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--navy);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--accent);
}

/* ---- 受注から施工までの流れ（各工程の写真＋丸番号バッジ＋▶の連結） ----
 * flexbox の折り返しを使い、「写真カード」と「▶」を交互にDOM順で並べる。
 * 4枚（21%）+矢印がちょうど1行に収まり、5枚目は幅が足りず自然に次の行へ
 * 折り返される計算にしているため、行の境目に特別な要素は不要。
 * CSS Grid の列固定だと折り返し先の行で列がズレて矢印の指す相手が変わって
 * しまう問題があったため、常に読み順どおりに前後がつながる flex-wrap を採用。 */
.ss-flow {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  /* flex-start にして写真の上端をそろえる。center だと、タイトルが1行のカード
     （04・05）だけ2行のカードと高さ基準を合わせるために下へずれてしまう。 */
  align-items: flex-start;
  justify-content: center;
  row-gap: 40px;
}
.ss-flow__step {
  position: relative;
  flex: 0 0 21%;
  max-width: 21%;
  text-align: center;
}
.ss-flow__photo { aspect-ratio: 3 / 2; overflow: hidden; }
.ss-flow__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-flow__num {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 700;
  z-index: 1;
}
.ss-flow__title { margin-top: 16px; font-size: 15px; font-weight: 800; line-height: 1.6; color: var(--ink); }

/* カードの間の連結矢印。写真の高さ＝カード幅×2/3（aspect-ratio 3/2）なので、
   margin-top はカード幅に対する％で計算し、写真の縦中央に矢印の中心が来るよう
   矢印自身の高さの半分（16px）を差し引く。％はコンテナ幅基準で解決されるため、
   カード幅が21%のときは 21%×2/3÷2＝7%。 */
.ss-flow__arrow {
  flex: 0 0 28px;
  align-self: flex-start;
  margin-top: calc(7% - 16px);
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  transform: rotate(-90deg);
}

/* ---- よくあるご質問（アコーディオン、JS不要） ---- */
.ss-faq { margin-top: 56px; border-top: 1px solid var(--line); }
.ss-faq__item { border-bottom: 1px solid var(--line); }
.ss-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 26px 4px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
}
.ss-faq__item summary::-webkit-details-marker { display: none; }
.ss-faq__item summary::before {
  content: "Q";
  color: var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  flex-shrink: 0;
}
.ss-faq__item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.ss-faq__item[open] summary::after { transform: rotate(45deg); }
.ss-faq__answer {
  display: flex;
  gap: 16px;
  padding: 0 4px 26px;
  font-size: 14.5px;
  line-height: 1.95;
  color: #48504a;
}
.ss-faq__answer::before {
  content: "A";
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  flex-shrink: 0;
}

/* ---- 安全対策など、写真付きの小さな施策カード ---- */
.ss-measure__grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 40px; }
.ss-measure__item { display: flex; flex-direction: column; }
.ss-measure__photo { aspect-ratio: 8 / 5; }
.ss-measure__title { margin-top: 20px; font-size: 18px; font-weight: 800; color: var(--ink); }
.ss-measure__desc { margin-top: 10px; font-size: 14px; line-height: 1.9; color: #55534d; }

/* ---- 保険・教育内容など、写真なしのシンプルカード ---- */
.ss-simplecards { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ss-simplecards--4 { grid-template-columns: repeat(4, 1fr); }
.ss-simplecard { background: #fff; border: 1px solid var(--line); padding: 30px 26px; }
.ss-simplecard__title { font-size: 19px; font-weight: 800; color: var(--ink); }
.ss-simplecard__desc { margin-top: 12px; font-size: 13.5px; line-height: 1.85; color: #55534d; }

/* ---- 本文中の小さな補足リンク ---- */
.ss-linkbtn { margin-top: 24px; }
.ss-linkbtn a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
}
.ss-linkbtn a:hover { color: var(--accent); }

/* ---- セクション内の小見出し（h3相当） ---- */
.ss-subhead {
  margin-top: 88px;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--ink);
}
.ss-subhead:first-child { margin-top: 0; }
.ss-subhead::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--accent);
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-3px);
}

/* ---- 19. レスポンシブ ---- */
@media (max-width: 1080px) {
  .ss-guide__grid { grid-template-columns: 1fr; }
  .ss-infolist__office, .ss-office { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .ss-office { padding: 20px; }
  .ss-office__map { max-width: 320px; }
  .ss-flow__step { flex-basis: 42%; max-width: 42%; }
  /* カード幅が42%になるので、矢印のmargin-topも 42%×2/3÷2＝14% に合わせ直す */
  .ss-flow__arrow { margin-top: calc(14% - 16px); }
  .ss-measure__grid { grid-template-columns: 1fr; gap: 40px; }
  .ss-simplecards { grid-template-columns: repeat(2, 1fr); }
  .ss-simplecards--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .ss-dotlist { grid-template-columns: 1fr; }
  .ss-infolist__row { grid-template-columns: 1fr; gap: 6px; }
  .ss-flow { row-gap: 32px; }
  .ss-flow__step { flex-basis: 100%; max-width: 100%; }
  /* 1列表示になるので、右向き矢印を縦向き▼に戻す */
  .ss-flow__arrow {
    align-self: center;
    margin-top: 0;
    height: auto;
    font-size: 18px;
    transform: none;
  }
  .ss-simplecards,
  .ss-simplecards--4 { grid-template-columns: 1fr; }
  .ss-company { margin-top: 64px; }
  .ss-subhead { margin-top: 56px; }
}


/* =========================================================
   20. 追加下層ページ10本用パーツ
   Iqシステム／足場資材管理について／求人情報／関連リンク／
   お問い合わせ／サイト利用規約／個人情報保護方針／サイトマップ
   ========================================================= */

/* ---- シンプルカードの数字アイキャッチ（Iqシステムの「3つの革新性」等） ---- */
.ss-simplecard__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-family: var(--font-mono);
  margin-bottom: 10px;
}

/* ---- 写真ギャラリー（足場資材管理についての拠点別写真など） ---- */
.ss-gallery__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ss-gallery__grid .ss-photo { aspect-ratio: 4 / 3; }

/* ---- 会社名+外部リンクのシンプルなリスト（関連リンクページ） ---- */
.ss-linklist { margin-top: 24px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ss-linklist__item {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 20px 26px;
}
.ss-linklist__name { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.ss-linklist__url {
  font-size: 13px;
  color: var(--accent);
  font-family: var(--font-mono);
  word-break: break-all;
}
.ss-linklist__url:hover { text-decoration: underline; }

/* ---- 問い合わせ・応募フォーム（実装時はフォームプラグインのショートコードに置き換える） ---- */
.ss-formnote {
  margin-top: 24px;
  padding: 16px 22px;
  background: var(--paper);
  border: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
}
.ss-formfields { margin-top: 32px; border-top: 1px solid var(--line); }
.ss-formfields__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.ss-formfields__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
/*
 * バッジ以外のテキストを囲む要素（「簡単な自己PRなど<br /><small>…」
 * のように2行に分けるラベルで使う。1行で済むラベルには不要）。
 *
 * このspanを付けずにテキストを直接 .ss-formfields__label（flexコンテナ）
 * の子として置くと、バッジ以外の内容が「匿名flexアイテム」になる。
 * 匿名アイテムの flex-basis は本来 <br /> を考慮した最大1行分の幅に
 * なるはずだが、環境によっては <br /> を無視して2行分の内容を
 * 1行に並べたときの幅で計算されることがあり、結果としてラベルが
 * 折り返さずに右の入力欄へはみ出してしまう不具合が実際に発生した。
 *
 * 対策として、テキスト部分を実要素（span）にして flex-basis を 0 に
 * 固定し、flex-grow:1 で「残り幅ぜんぶ」を確実に確保する。中身の
 * 幅を見て伸縮するのではなく、幅を先に決めてから中身を流し込む形に
 * することで、<br /> の解釈があいまいな状況を避けられる。
 */
.ss-formfields__label-text { flex: 1 1 0%; min-width: 0; }
.ss-formfields__badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
}
.ss-formfields__badge--req { background: var(--accent); color: #fff; }
.ss-formfields__badge--opt { background: var(--line); color: var(--muted); }
/*
 * 入力欄は常に白背景にする（濃紺セクションでの利用は想定していない）。
 * 採用エントリーフォームのように .ss-section--paper（薄いグレー背景）に
 * 置かれると、以前は入力欄の背景も var(--paper) で同色だったため、
 * 枠線（var(--line) は不透明度0.1と非常に薄い）だけが頼りで
 * 「入力できる欄がある」こと自体が視認しづらかった。
 * 白背景＋やや濃いめの枠線にして、どのセクション上でも入力欄として
 * はっきり認識できるようにする。
 */
.ss-formfields__value input[type="text"],
.ss-formfields__value input[type="email"],
.ss-formfields__value input[type="tel"],
.ss-formfields__value textarea,
.ss-formfields__value select {
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(20, 24, 30, 0.22);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.ss-formfields__value textarea { max-width: 100%; resize: vertical; }
.ss-formfields__hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
/* フォーム冒頭の案内文（センター寄せ・広め）。margin-topだけページごとに異なるため、
   個々のページでは残りの margin-top のみを指定する運用にする。 */
.ss-formfields__hint--center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
  text-align: center;
}
.ss-formfields__hint--mt-0 { margin-top: 0; }
.ss-formfields__hint--mt-28 { margin-top: 28px; }
.ss-formfields__sub { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.ss-formfields__radios { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ss-formfields__radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---- 求人カード（求人情報ページ） ---- */
.ss-jobcard { background: #fff; border: 1px solid var(--line); padding: 44px 48px; margin-top: 40px; }
.ss-jobcard:first-child { margin-top: 0; }
.ss-jobcard__title {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--navy);
  padding-bottom: 18px;
  border-bottom: 2px solid var(--accent);
}
.ss-jobcard .ss-infolist { border-top: 1px solid var(--line); }
.ss-jobcard .ss-infolist__row:last-child { border-bottom: none; }

/* ---- 規約・方針などの長文テキスト（サイト利用規約／個人情報保護方針） ---- */
.ss-legal { max-width: 840px; margin: 32px auto 0; }
.ss-legal--boxed { border: 1px solid var(--line); padding: 40px 44px; }
.ss-legal > p { font-size: 15px; line-height: 2.1; color: #48504a; }
.ss-legal > p + p { margin-top: 1.6em; }
.ss-legal h2 {
  margin-top: 2.6em;
  margin-bottom: 0.8em;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--ink);
  padding-left: 16px;
  border-left: 4px solid var(--accent);
  line-height: 1.5;
}
.ss-legal > p:first-child,
.ss-legal h2:first-child { margin-top: 0; }
.ss-legal h3 {
  margin-top: 2em;
  margin-bottom: 0.7em;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.ss-legal ul { margin-top: 0.6em; padding-left: 1.6em; }
.ss-legal ul li { list-style: disc; font-size: 15px; line-height: 2; color: #48504a; }

/* ---- 本文中の写真（足場就活テクニック大全の記事など） ---- */
.ss-legal__photo { margin: 32px auto; max-width: 600px; }
.ss-legal__photo img { width: 100%; height: auto; display: block; }
.ss-legal__photo figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

/*
 * ---- 記事ナビ（前の記事／一覧へ戻る／次の記事。足場就活テクニック大全の記事） ----
 * 現行サイト（safetystep.jp）の各記事末尾にある「前のページへ／一覧へ／
 * 次のページへ」を踏襲。先頭記事には「前」、末尾記事には「次」のリンクが
 * ないので、両端が欠けても中央の「一覧へ戻る」の位置がずれないよう、
 * 3等分のグリッドにして両端は空でも列を確保する。
 */
.ss-articlenav {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.ss-articlenav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.ss-articlenav__link:hover { color: var(--accent); }
.ss-articlenav__link--prev { justify-self: start; }
.ss-articlenav__link--next { justify-self: end; }
.ss-articlenav__link--list {
  grid-column: 2;
  justify-self: center;
  padding: 10px 20px;
  border: 1px solid var(--line);
}
/* 「前へ」の矢印は .ss-arrow（右向き）を左右反転して使う */
.ss-articlenav__link--prev::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,6 19,12 13,18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,6 19,12 13,18'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: scaleX(-1);
}
/* 「次へ」の矢印は同じアイコンをそのまま（右向き）使う */
.ss-articlenav__link--next::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,6 19,12 13,18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,6 19,12 13,18'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/*
 * ---- 記事一覧のサムネイルグリッド（足場就活テクニック大全 一覧ページ） ----
 * 10件（3列だと最終行が1件だけ浮く）なので、PCも含めて常に2列固定にする。
 * ただし .ss-wrap（1280px）いっぱいに2列で広げると、1カラムが560px超になり
 * サムネイルが間延びして大きく見えすぎる。グリッド自体に上限幅を設けて
 * 中央寄せにし、広い画面ほど左右に余白が付くようにして、写真のサイズは
 * ほどよいところで頭打ちにする。
 */
.ss-medialist__grid {
  margin: 40px auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 40px;
}
.ss-medialist__item { color: var(--ink); }
.ss-medialist__item:hover { color: var(--ink); }
.ss-medialist__photo { aspect-ratio: 4 / 3; }
.ss-medialist__item img { transition: transform 0.6s ease; }
.ss-medialist__item:hover img { transform: scale(1.04); }
.ss-medialist__body { margin-top: 18px; display: flex; gap: 14px; align-items: flex-start; }
.ss-medialist__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  line-height: 0.9;
  color: var(--accent);
  flex-shrink: 0;
}
.ss-medialist__title { font-size: 15.5px; font-weight: 800; line-height: 1.6; letter-spacing: 0.01em; }
.ss-medialist__desc { margin-top: 8px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* ---- サイトマップ ---- */
.ss-sitemap { margin-top: 24px; border-top: 1px solid var(--line); }
.ss-sitemap__row {
  display: block;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.ss-sitemap__link {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ss-sitemap__link:hover { color: var(--accent); }
.ss-sitemap__desc { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.ss-sitemap__simple { margin-top: 16px; }
.ss-sitemap__simple .ss-sitemap__row { padding: 16px 4px; }

/* ---- 20. レスポンシブ ---- */
@media (max-width: 1080px) {
  .ss-gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .ss-formfields__row { grid-template-columns: 1fr; gap: 12px; }
  .ss-medialist__grid { gap: 40px 32px; }
}
@media (max-width: 720px) {
  .ss-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ss-linklist__item { padding: 16px 18px; }
  .ss-jobcard { padding: 28px 22px; }
  .ss-medialist__grid { grid-template-columns: 1fr; gap: 40px; }
  /* 3列グリッドのままだと「前へ」「次へ」のテキストが窮屈になるため、
     スマホでは縦積みにして、一覧へ戻るを中央・上に置く。 */
  .ss-articlenav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
  }
  .ss-articlenav__link--list { grid-column: 1; order: -1; }
  .ss-articlenav__link--prev,
  .ss-articlenav__link--next { justify-self: center; }
}


/* =========================================================
   21. Contact Form 7（お問い合わせ・採用エントリー）

   入力画面と確認画面を同一URLで切り替えるフォーム。
   マークアップは CF7 の管理画面「フォーム」タブに入れています
   （元データは forms/contact-form.html / forms/recruit-form.html）。
   動きは assets/js/cf7-confirm.js、サーバー側は inc/cf7.php。

   見た目は上の「問い合わせ・応募フォーム」（.ss-formfields）を
   そのまま使い回しています。ここでは CF7 が出力する独自の
   ラッパー要素をその枠に収めるための調整を書いています。
   ========================================================= */

/* ---- CF7 の入れ子ラッパーを .ss-formfields の枠に収める ---- */
.ss-cf7 .wpcf7-form-control-wrap { display: block; }
.ss-cf7 .ss-formfields__value input[type="number"] {
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(20, 24, 30, 0.22);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.ss-cf7 .ss-formfields__value input:focus,
.ss-cf7 .ss-formfields__value textarea:focus,
.ss-cf7 .ss-formfields__value select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.ss-cf7 .ss-formfields__value input::placeholder,
.ss-cf7 .ss-formfields__value textarea::placeholder { color: #b3b8c0; }

/* 郵便番号など、幅を詰めたい入力欄 */
.ss-cf7 .ss-formfields__zip input[type="text"] { max-width: 180px; }

/* 「年齢 ＋ 歳」のように単位を右に置く行 */
.ss-cf7 .ss-formfields__value--inline { display: flex; align-items: center; gap: 10px; }
.ss-cf7 .ss-formfields__value--inline .wpcf7-form-control-wrap { display: inline-block; }
.ss-cf7 .ss-formfields__value--inline input[type="number"] { width: 110px; }
.ss-formfields__unit { font-size: 14px; color: var(--ink); }

/* ---- ラジオボタン（求人区分） ---- */
.ss-cf7 .ss-formfields__value .wpcf7-radio,
.ss-cf7 .ss-formfields__value .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.ss-cf7 .wpcf7-list-item { display: inline-flex; margin: 0; }
.ss-cf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.ss-cf7 .wpcf7-list-item input { accent-color: var(--accent); }
/*
 * ラジオ・チェックボックスはブラウザ既定のフォーカスリング（多くの環境で
 * 青色）が出ると、テキスト欄のフォーカス枠（var(--accent) の水色）と
 * 色が食い違って浮いて見える。未入力のまま確認ボタンを押したときに
 * cf7-confirm.js がエラー箇所へ自動でフォーカスを移す仕様のため、
 * この状態は実際によく発生する。テキスト欄と同じアクセントカラーの
 * 輪郭に揃える。
 */
.ss-cf7 .wpcf7-list-item input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- エラー表示 ---- */
.ss-formfields__row.is-error .ss-formfields__label { color: #c0392b; }
/*
 * 入力欄の赤枠は行単位ではなく項目単位で付ける。
 * 「住所」の行のように1行に郵便番号と住所が同居する場合、行単位だと
 * 正しく入力できている方まで赤くなってしまうため。
 * aria-invalid は cf7-confirm.js と CF7 本体の両方が付けるので、
 * サーバー側で弾かれたときも同じ見た目になる。
 */
/*
 * .ss-formfields__value を頭に足して、上の
 * 「.ss-cf7 .ss-formfields__value input[type="number"]」（年齢欄）が
 * 持つ枠線指定と同じ強さのセレクタにする。付けないと年齢欄だけ
 * 詳細度で負けて、エラー時も枠線が赤くならなかった。
 */
.ss-cf7 .ss-formfields__value input[aria-invalid="true"],
.ss-cf7 .ss-formfields__value textarea[aria-invalid="true"],
.ss-cf7 .ss-formfields__value select[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fdf3f2;
}
.ss-cf7 .ss-formfields__value input[type="radio"][aria-invalid="true"],
.ss-cf7 .ss-formfields__value input[type="checkbox"][aria-invalid="true"] { background: none; }
.ss-formfields__error {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  color: #c0392b;
}
.ss-formalert {
  margin: 0 0 24px;
  padding: 14px 20px;
  border-left: 3px solid #c0392b;
  background: #fdf3f2;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.8;
  color: #c0392b;
}

/* CF7 自身のメッセージ。独自のエラー表示と二重にならないよう控えめに。 */
.ss-cf7 + .wpcf7-response-output,
.wpcf7-form > .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 20px;
  border: 0;
  border-left: 3px solid #c0392b;
  background: #fdf3f2;
  font-size: 13.5px;
  line-height: 1.8;
  color: #c0392b;
}
.ss-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #c0392b;
}

/* ---- 入力画面 / 確認画面の切り替え ---- */
.ss-cf7 [hidden] { display: none !important; }
.ss-cf7__lead {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--ink);
}

/* 確認画面：入力欄ではなく、確定した文字だけを見せる */
.ss-formfields--confirm .ss-formfields__row { align-items: baseline; }
.ss-formconfirm__value {
  display: block;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ss-formconfirm__value.is-empty { color: var(--muted); }

/* ---- ボタン ---- */
/*
 * .ss-btn は元々 <a> / <button> 用。CF7 の送信ボタンは
 * <input type="submit"> なので、ブラウザ既定の枠線とフォントを打ち消す。
 */
.ss-cf7 input[type="submit"].ss-btn,
.ss-cf7 button.ss-btn {
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  text-align: center;
}
/*
 * 「入力内容を修正する」と「送信する」は横に並ぶので、高さを1pxでも
 * ずらせない。.ss-btn--outline の border は要素の高さを2px増やして
 * しまうため、ここでは border ではなく box-shadow で枠線を描く
 * （このファイル上部の .ss-btn--fill:hover と同じ考え方）。
 */
.ss-cf7 button.ss-btn--outline {
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.ss-cf7 button.ss-btn--outline:hover {
  background: var(--ink);
  color: #fff;
}
.ss-formactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}
.ss-formactions .ss-btn { min-width: 240px; justify-content: center; }

/* Turnstile（ボタン行の上に中央寄せで置く） */
.ss-formturnstile {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.ss-formturnstile + .ss-formactions { margin-top: 20px; }
/* JS無効時はボタン行と一緒に隠す */
.ss-cf7:not(.is-ready) .ss-formturnstile { display: none; }

@media (max-width: 1080px) {
  .ss-formturnstile { margin-top: 36px; }
}

/* 送信中はボタンを押せなくする（CF7 が form に .submitting を付ける） */
.ss-cf7 .wpcf7-spinner { display: none; }
.wpcf7-form.submitting .ss-formactions .ss-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Cocoon の input[type="submit"]（幅100%・灰色背景・padding 11px）を打ち消す */
.ss-cf7 input[type="submit"].ss-btn { width: auto; padding: 18px 44px; }
.ss-cf7 input[type="submit"].ss-btn--fill { background: var(--accent); color: #fff; }
.ss-cf7 input[type="submit"].ss-btn--fill:hover { background: #fff; color: var(--accent); }
@media (max-width: 720px) {
  .ss-cf7 .ss-formactions input[type="submit"].ss-btn { width: 100%; }
}

/* ---- JavaScript が無効なときの案内 ---- */
/*
 * 確認画面は JS で切り替えるため、JS が無効だと送信できない。
 * cf7-confirm.js が動くと .is-ready が付くので、それまでは
 * 確認ボタンを隠し、代わりに案内を出す。
 */
.ss-cf7:not(.is-ready) .ss-formactions { display: none; }
.ss-cf7__nojs {
  margin-top: 48px;
  padding: 16px 22px;
  background: var(--paper);
  border: 1px dashed var(--line);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
  text-align: center;
}
.ss-cf7.is-ready .ss-cf7__nojs { display: none; }

/* ---- 完了ページ ---- */
.ss-thanks { max-width: 720px; margin: 0 auto; text-align: center; }
.ss-thanks__title {
  margin: 0 0 28px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.ss-thanks__text {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--ink);
}
.ss-thanks__note {
  margin: 32px 0 0;
  padding: 20px 24px;
  background: var(--paper);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
  text-align: left;
}

/* ---- 21. レスポンシブ ---- */
@media (max-width: 1080px) {
  .ss-formactions { margin-top: 36px; }
}
@media (max-width: 720px) {
  .ss-cf7 .ss-formfields__value .wpcf7-radio,
  .ss-cf7 .ss-formfields__value .wpcf7-checkbox {
    flex-direction: column;
    gap: 12px;
  }
  .ss-formactions { flex-direction: column-reverse; gap: 12px; }
  .ss-formactions .ss-btn { width: 100%; min-width: 0; }
  .ss-thanks__title { font-size: 21px; }
}

/* =========================================================
   22. 下層ページ 個別スタイル（ページごとに追記）
   17〜20 は複数ページで共有するパーツの置き場。ここは特定の1ページだけで
   使うスタイルの置き場で、ページごとに見出しコメントを立てて追記していく。
   ========================================================= */

/* ---- 私たちについて（/about/） ---- */
.ss-aboutpage-greeting__subhead {
  margin-top: 40px;
}

/* ---- 事業サービス（/service/） ---- */
/* 「工事」セクションは .ss-alt__row（gap:64px）の直下に .ss-measure__grid
   （gap:48px 40px）が続く唯一の箇所。gapが違うと同じ幅の列でも画像の実寸が
   微妙にずれて見えるため、この節だけ両者のgapを揃える。 */
#construction .ss-measure__grid { gap: 48px 64px; }

/* ---- Iqシステム（/service/iq/） ---- */
/* 冒頭のヒーロー。現行サイト（safetystep.jp/services/iq/）の
   .iqicon / .ashiba / .topimg と同じ配置比率
   （ロゴ: 左上、足場CG: 幅42%を右端からはみ出させる）を再現。 */
.ss-iqhero { position: relative; }
.ss-iqhero__photo img { width: 100%; height: auto; display: block; }
.ss-iqhero__badge {
  position: absolute;
  top: 0;
  left: 6%;
  width: 12%;
  min-width: 90px;
  max-width: 150px;
  z-index: 2;
}
.ss-iqhero__badge img { width: 100%; height: auto; display: block; }
.ss-iqhero__scaffold {
  position: absolute;
  top: 12%;
  right: 0;
  width: 40%;
  pointer-events: none;
}
.ss-iqhero__scaffold img { width: 100%; height: auto; display: block; }
.ss-iqhero__title {
  margin-top: 40px;
  padding-bottom: 40px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.7;
  text-align: center;
}
@media (max-width: 720px) {
  .ss-iqhero__badge { width: 22%; min-width: 64px; }
  .ss-iqhero__scaffold { width: 55%; top: 8%; }
  .ss-iqhero__title { font-size: 18px; margin-top: 28px; padding-bottom: 28px; }
}

/* ---- 私たちの取り組み（/commitment/） ----
 * Figmaワイヤーの「画像1枚＋縦積みの複数ブロック」構成
 * （資格取得セクション、品質管理セクションの2項目）を再現するためのレイアウト。
 * .ss-alt__media を左に固定し、右側に .ss-splitrow__item を必要な数だけ縦に積む。 */
.ss-splitrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.ss-splitrow--space-24 { margin-top: 24px; }
.ss-splitrow--space-72 { margin-top: 72px; }
.ss-splitrow .ss-alt__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.ss-splitrow__list { display: flex; flex-direction: column; justify-content: center; }
.ss-splitrow__item + .ss-splitrow__item {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) {
  .ss-splitrow { grid-template-columns: 1fr; gap: 24px; }
  .ss-splitrow .ss-alt__media { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* 「安全対策の徹底」の5項目は、他ページの主要見出し用 alt-row（h2/h3・28px）を
   そのまま流用すると、1個ずつは軽い内容なのに画像が大きすぎ、かつ h4 が
   h3（.ss-subhead、22px）より大きくなって見出し階層が逆転してしまっていた。
   このミニリストだけ画像を控えめなサイズにし、見出しも h3 より一段小さくする。
   列比率（grid-template-columns）は変えず、画像側だけ max-width で縮める方式。
   理由: --reverse は order で見た目だけ左右を入れ替える実装のため、列幅（fr）を
   非対称にすると reverse 側で画像と文章の列が入れ替わって逆に画像が広がってしまう。 */
.ss-alt__row--compact { gap: 40px; }
.ss-alt__row--compact + .ss-alt__row--compact { margin-top: 56px; }
.ss-alt__row--compact .ss-alt__media { width: 100%; max-width: 420px; }
.ss-alt__row--compact:not(.ss-alt__row--reverse) .ss-alt__media { justify-self: start; }
.ss-alt__row--compact.ss-alt__row--reverse .ss-alt__media { justify-self: end; }
.ss-alt__row--compact .ss-alt__title {
  font-size: 18px;
  margin-top: 0;
}
.ss-alt__row--compact .ss-alt__title::after { margin-top: 14px; }
.ss-alt__row--compact .ss-alt__text { margin-top: 14px; }
@media (max-width: 720px) {
  .ss-alt__row--compact .ss-alt__media,
  .ss-alt__row--compact:not(.ss-alt__row--reverse) .ss-alt__media,
  .ss-alt__row--compact.ss-alt__row--reverse .ss-alt__media {
    width: 85%;
    max-width: none;
    justify-self: center;
  }
}

/* ---- 表風グリッドの罫線 ---- */
/*
 * 以下の4つは元々「親に線の色を塗り、gap: 1px の隙間から見せる」方式で罫線を
 * 描いていたが、Windows の表示倍率 125%/150% やブラウザのズームなど、倍率が
 * 整数でない環境では隙間が0ピクセルに丸められ、一部の線が消えていた。
 * border はブラウザが最低1ピクセルで描くため、border で描き直す。
 * 親が上・左、各項目が右・下を受け持つので、列数が変わっても格子になる。
 */
.ss-officelist,
.ss-linklist,
.ss-guide__grid,
.ss-commit__grid {
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.ss-office,
.ss-linklist__item,
.ss-guide__item,
.ss-commit__item {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}


/************************************
** 追加カスタマイズ用の自由記述欄
** （SAFETYSTEP のスタイルより後に適用されます）
************************************/
/*必要ならばここにコードを書く*/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}