/* pages.css — ページ別スタイル（Contact / Works / Service）
   style.css から分割。functions.php で style.css の後に読み込む。 */

/* ============================================
   21. Contact Form
   ============================================ */
.contact-lead { font-size: 1.0625rem; margin-bottom: 2rem; }

/* --- Snow Monkey Forms（問い合わせフォーム）--- */
.contact-form-wrap { margin-bottom: 3rem; }

/* 各項目（ラベル＋コントロール）*/
.contact-form-wrap .smf-item { margin-bottom: 1.5rem; }
.contact-form-wrap .smf-item__label,
.contact-form-wrap .smf-item > label {
  display: block; font-size: .9375rem; font-weight: 700;
  color: var(--color-text); margin-bottom: .5rem;
}
/* 必須バッジ */
.contact-form-wrap .smf-item__label__require,
.contact-form-wrap .smf-item .c-form__require {
  display: inline-block; background: var(--color-accent); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 1.4; padding: 1px .5rem;
  border-radius: var(--radius-full); margin-left: .5rem; vertical-align: middle;
}

/* 入力コントロール */
.contact-form-wrap .smf-text-control__control,
.contact-form-wrap .smf-email-control__control,
.contact-form-wrap .smf-tel-control__control,
.contact-form-wrap .smf-url-control__control,
.contact-form-wrap .smf-select-control__control,
.contact-form-wrap .smf-textarea-control__control {
  width: 100%; padding: .75rem 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-base); font-size: 1rem; color: var(--color-text);
  background: var(--color-bg); transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.6;
}
.contact-form-wrap .smf-text-control__control:focus,
.contact-form-wrap .smf-email-control__control:focus,
.contact-form-wrap .smf-tel-control__control:focus,
.contact-form-wrap .smf-url-control__control:focus,
.contact-form-wrap .smf-select-control__control:focus,
.contact-form-wrap .smf-textarea-control__control:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-primary);
}
/* MR SMF Extension 1.19.0 の色トークンを、このサイトの配色に差し替える。
   プラグインの「ボタンスタイル設定」は今はオフにしてあるが（角丸・影が
   デザイン方針に合わないため）、将来オンにしても管理画面の青ではなく
   濃紺になるように、値だけ先に上書きしておく。 */
:root {
  --smf-btn-bg:              var(--color-primary);
  --smf-btn-bg-hover:        var(--color-primary-mid);
  --smf-btn-bg-active:       var(--color-primary-dark);
  --smf-btn-text:            #fff;
  --smf-btn-focus-outline:   var(--color-primary);
  --smf-btn-sub-text:        var(--color-text);
  --smf-btn-sub-border:      var(--color-border);
  --smf-btn-sub-bg-hover:    var(--color-bg-alt);
  --smf-btn-sub-border-hover: var(--color-primary);
  --smf-btn-sub-text-hover:  var(--color-primary);
}

.contact-form-wrap .smf-textarea-control__control { resize: vertical; min-height: 160px; }
/* 2026-08-31: フォーム項目を13に増やした際の調整。
   セレクトだけ内容幅で他の入力欄と不揃いだったので、幅を持たせる。 */
/* 親が内容幅で shrink するため width:100% が効かない。実寸で揃える */
.contact-form-wrap .smf-select-control__control { width: 22rem; max-width: 100%; }
/* チェック・ラジオの1項目。実際のラッパーは .smf-checkbox-control /
   .smf-radio-control で、label 自身にはクラスが無い（SMF の出力）。
   既定では入力欄と文字の高さが揃わないので、flex で中央に揃える。
   あわせてタップ領域を44px以上にする。 */
.contact-form-wrap .smf-checkbox-control,
.contact-form-wrap .smf-radio-control {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
}
.contact-form-wrap .smf-checkbox-control__control,
.contact-form-wrap .smf-radio-control__control { margin: 0; flex: none; }
.contact-form-wrap .smf-checkbox-control__label,
.contact-form-wrap .smf-radio-control__label { line-height: 1.6; }

/* 送信・確認・戻るボタン */
.contact-form-wrap .smf-action { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.contact-form-wrap .smf-button-control__control,
.contact-form-wrap .smf-submit-button-control__control {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2.25rem; font-size: 1rem; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--color-primary); border: 0;
  border-radius: var(--radius-full); transition: background var(--transition), transform var(--transition);
}
.contact-form-wrap .smf-button-control__control:hover,
.contact-form-wrap .smf-submit-button-control__control:hover {
  background: var(--color-primary-dark); transform: translateY(-1px);
}
/* 「戻る」は控えめに */
.contact-form-wrap .smf-button-control--back .smf-button-control__control {
  background: var(--color-bg-alt); color: var(--color-text);
  border: 1px solid var(--color-border);
}
.contact-form-wrap .smf-button-control--back .smf-button-control__control:hover {
  background: var(--color-border);
}

/* バリデーション・完了メッセージ */
.contact-form-wrap .smf-invalid-required-message,
.contact-form-wrap .smf-invalid-validation-message { color: #DC2626; font-size: .8125rem; margin-top: .375rem; }
.contact-form-wrap .smf-system-error-message,
.contact-form-wrap .smf-error-messages {
  background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626;
  border-radius: var(--radius-md); padding: 1rem 1.5rem; margin-bottom: 1.5rem; font-size: .9375rem;
}
.contact-form-wrap .smf-complete-message {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center;
  font-size: 1.0625rem; line-height: 2;
}

/* その他の連絡先 */
.contact-info-box {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.5rem 2rem; margin-top: 3rem;
}
.contact-info-box h3 { font-size: 1rem; color: var(--color-primary); margin-bottom: 1rem; }
.contact-info-line {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: .625rem; font-size: .9375rem;
}
.contact-info-line:last-child { margin-bottom: 0; }
.contact-info-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-accent); }

/* ============================================
   22. Works Page
   ============================================ */
.works-stats {
  background: var(--color-primary);
  padding: 3rem 0;
}
.works-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 600px) { .works-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.works-stat-item { color: #fff; }
.works-stat-num {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .375rem;
}
.works-stat-num small { font-size: .55em; font-weight: 700; }
.works-stat-label { font-size: .8125rem; color: rgba(255,255,255,.65); letter-spacing: .05em; }

.works-intro { padding: 3rem 0 1.5rem; }
.works-intro p { font-size: 1.0625rem; color: var(--color-text-muted); line-height: 2; }

.works-filter-wrap {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: .875rem 0;
}
@media screen and (max-width: 782px) {
  .works-filter-wrap { top: calc(var(--header-height) + 46px); }
}
.works-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.works-filter-btn {
  font-family: var(--font-base);
  font-size: .8125rem;
  font-weight: 700;
  padding: .4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: var(--color-bg);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.works-filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.works-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.works-section { padding: 3rem 0 5rem; }

.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 600px) { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .works-grid { grid-template-columns: repeat(3, 1fr); } }

.works-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.works-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.works-card-thumb {
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: relative;
}
.works-card-icon { font-size: 3rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.works-card-type {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.2);
  padding: .2rem .75rem;
  border-radius: var(--radius-full);
  letter-spacing: .05em;
}
.works-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.works-card-title { font-size: 1rem; font-weight: 700; color: var(--color-primary); margin-bottom: .625rem; }
.works-card-desc { font-size: .8125rem; color: var(--color-text-muted); line-height: 1.8; margin-bottom: .875rem; }
.works-card-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.works-card-tag {
  font-size: .7rem; font-weight: 700;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  padding: 2px .625rem;
  border-radius: var(--radius-full);
}

.works-note {
  margin-top: 3rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ============================================
   23. Single Works（制作実績個別ページ）
   ============================================ */

/* ヒーロー */
.ws-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-primary);
  padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2.75rem, 4vw, 3.5rem);
  color: #fff;
}
.ws-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 600px; height: 600px; top: -340px; right: -120px;
  background: none;
}
.ws-hero::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image:
    none;
  background-size: 46px 46px;
  display: none;
}
.ws-hero .container { position: relative; z-index: 1; }
.ws-hero-inner { max-width: var(--content-width); }
/* 2026-08-31: 四角囲みは「押せるもの」だけの語彙にしたので、
   メタ情報（年・業種・制作ツール）からは枠と塗りを外した。
   もとは .ws-badge-cat の塗りが濃紺で、濃紺のヒーローに埋もれて
   業種だけ囲みが見えない状態になっていた。区切りは余白で取る。 */
.ws-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }
/* 3つは役割が違うので、見た目も分ける。
     年     … 時間軸。数字。いちばん控えめ（細字・薄い・等幅数字）
     業種   … 分類軸。この実績が「何屋さんか」を示す主役級（太字・白）
     制作ツール … 技術の補足（細字・薄い）
   同じ太さで並べると平坦になり、見出しとも見分けがつかなくなる。 */
.ws-badge { padding: 0; border: 0; background: none; }
.ws-badge-year {
  font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}
.ws-badge-cat  { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.ws-badge-cms  { font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.7); }
.ws-hero-title {
  font-size: clamp(1.625rem, 4vw, 2.5rem); font-weight: 900;
  color: #fff; line-height: 1.3; margin: 0 0 .75rem;
}
.ws-hero-location { font-size: .9375rem; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .375rem; }
.ws-icon { font-size: 1.1em; }

/* レイアウト（2カラム） */
.ws-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 3rem 0 5rem;
}
@media (min-width: 900px) {
  .ws-layout { grid-template-columns: 1fr 300px; gap: 3.5rem; }
}

/* セクション見出し */
.ws-section-title {
  font-size: 1.125rem; font-weight: 700;
  color: var(--color-primary);
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--color-primary);
  margin: 0 0 1.5rem;
}

/* クライアント情報テーブル */
.ws-client-box { margin-bottom: 3rem; }
.ws-info-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ws-info-table th, .ws-info-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  text-align: left;
}
.ws-info-table th {
  width: 9rem; white-space: nowrap;
  font-weight: 700; color: var(--color-text-muted);
  background: var(--color-bg-alt);
}
.ws-url-link { color: var(--color-accent); text-decoration: none; word-break: break-all; }
.ws-url-link:hover { text-decoration: underline; }
.ws-ext-icon { font-size: .875em; opacity: .7; }

/* プロジェクト概要 */
.ws-overview { margin-bottom: 3rem; }
.ws-entry-content { font-size: 1rem; line-height: 2; color: var(--color-text); }
.ws-entry-content p { margin-bottom: 1.25rem; }

/* 制作ポイント */
.ws-points { margin-bottom: 3rem; }
.ws-points-grid { display: grid; gap: 1rem; }
@media (min-width: 600px) { .ws-points-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.ws-point-item {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}
.ws-point-num {
  display: block; font-size: 2rem; font-weight: 900;
  color: var(--color-primary); opacity: .25; line-height: 1;
  margin-bottom: .5rem;
}
.ws-point-text { font-size: .9375rem; line-height: 1.75; color: var(--color-text); margin: 0; }

/* スクリーンショット */
.ws-screenshots { margin-bottom: 3rem; }
.ws-screenshots-wrap {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .ws-screenshots-wrap { grid-template-columns: 2fr 1fr; align-items: start; }
}
.ws-screenshot {
  position: relative;
  border-radius: 0; overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: #fff;
}
/* ブラウザ風のフレーム上部バー（信号ドット付き） */
.ws-screenshot-label {
  display: flex; align-items: center; gap: .625rem;
  font-size: .75rem; font-weight: 700; color: var(--color-text-muted);
  letter-spacing: .05em; margin: 0;
  padding: .55rem .85rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.ws-screenshot-label::before {
  content: ''; flex-shrink: 0; width: 38px; height: 8px;
  background:
    radial-gradient(circle 4px at 4px 4px, #ff5f57 98%, transparent) 0 0/14px 8px no-repeat,
    radial-gradient(circle 4px at 4px 4px, #febc2e 98%, transparent) 12px 0/14px 8px no-repeat,
    radial-gradient(circle 4px at 4px 4px, #28c840 98%, transparent) 24px 0/14px 8px no-repeat;
}
/* 画像は一定の高さでキャップし、JS で上下スクロール制御 */
.ws-screenshot img {
  width: 100%; display: block;
  height: clamp(300px, 46vh, 460px);
  object-fit: cover; object-position: top center;
}
/* スクロール方向矢印（JS で .active を付与） */
.ws-scroll-arrow {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(3px);
  border-radius: 50%;
  font-size: 10px; line-height: 1; font-weight: 700;
  color: var(--color-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
  z-index: 2;
  user-select: none;
}
.ws-scroll-arrow--up   { top: 10px; }
.ws-scroll-arrow--down { bottom: 10px; }
.ws-scroll-arrow.active { opacity: 1; }
.ws-screenshot--sp { max-width: 300px; justify-self: center; }
@media (min-width: 700px) { .ws-screenshot--sp { max-width: none; justify-self: start; } }

/* 訪問ボタン */
.ws-visit-wrap { text-align: center; padding: 2.5rem 0; border-top: 1px solid var(--color-border); }
.ws-visit-btn { font-size: 1rem; padding: 1rem 2.5rem; }

/* サイドバー */
.ws-sidebar { display: flex; flex-direction: column; gap: 1.75rem; }
@media (min-width: 900px) { .ws-sidebar { position: sticky; top: calc(var(--header-height) + 48px); align-self: start; } }

.ws-side-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.ws-side-title {
  font-size: .9375rem; font-weight: 700;
  color: var(--color-primary);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 1rem;
}
.ws-side-list { list-style: none; margin: 0 0 1rem; padding: 0; }
/* 2026-08-31: 色が少し変わるだけで反応が分かりにくかったので、
   他の一覧行（お知らせ・柱一覧）と同じ手に揃えた。
   ＝下の罫線が濃紺で左から引き直される。 */
.ws-side-item { border-bottom: 1px solid var(--color-border); }
.ws-side-link {
  position: relative;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .625rem 0; text-decoration: none;
  transition: color var(--transition);
}
.ws-side-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--transition);
}
.ws-side-link:hover { color: var(--color-accent); }
.ws-side-link:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .ws-side-link::after { transition: none; }
}
.ws-side-year { font-size: .75rem; color: var(--color-text-muted); }
.ws-side-name { font-size: .875rem; font-weight: 700; color: var(--color-text); }
/* 2026-08-31: 枠と塗りを外した。あわせて旧デザインの青（rgba(26,111,181)）も
   残っていたので、現行パレットの muted に寄せた。 */
.ws-side-ind {
  font-size: .7rem; color: var(--color-text-muted);
  background: none; border: 0; padding: 0;
  align-self: start; margin-top: .15rem;
}
.ws-side-empty { font-size: .875rem; color: var(--color-text-muted); margin: 0 0 .5rem; }
.ws-side-more { font-size: .8125rem; color: var(--color-accent); text-decoration: none; font-weight: 700; }
.ws-side-more:hover { text-decoration: underline; }

.ws-side-cta {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}
.ws-side-cta-text { font-size: .9375rem; color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 1rem; }

/* 前後ナビ */
.ws-postnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--color-border);
}
.ws-postnav-prev { text-align: left; }
.ws-postnav-next { text-align: right; }
.ws-postnav-all { text-align: center; }
.ws-postnav-link { text-decoration: none; display: flex; flex-direction: column; gap: .25rem; }
.ws-postnav-link--prev { align-items: flex-start; }
.ws-postnav-link--next { align-items: flex-end; }
.ws-postnav-label { font-size: .8125rem; color: var(--color-text-muted); }
.ws-postnav-title { font-size: .9375rem; font-weight: 700; color: var(--color-primary); }
.ws-postnav-title:hover { color: var(--color-accent); }
.ws-postnav-all-link {
  display: inline-block; padding: .5rem 1.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  font-size: .875rem; font-weight: 700; color: var(--color-text-muted);
  text-decoration: none; transition: all var(--transition);
}
.ws-postnav-all-link:hover { border-color: var(--color-accent); color: var(--color-accent); }

@media (max-width: 599px) {
  .ws-info-table th { width: 7rem; font-size: .8125rem; }
  .ws-info-table td { font-size: .875rem; }
  .ws-postnav { grid-template-columns: 1fr 1fr; }
  .ws-postnav-all { display: none; }
}

/* ============================================
   24. Works Archive（制作実績一覧）
   ============================================ */
.works-archive-hero { background: var(--color-primary); }
.works-archive-lead {
  color: rgba(255,255,255,.85); font-size: 1rem; margin-top: .75rem; line-height: 1.7;
}

.works-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 3rem 0 2rem;
}
@media (max-width: 900px) { .works-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .works-archive-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.works-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.works-card:hover {
  border-color: var(--color-primary);
}

.works-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.works-card-thumb {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 200px;
  background: var(--color-bg-alt);
  flex-shrink: 0;
}
.works-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .4s ease;
  display: block;
}
.works-card:hover .works-card-thumb img { transform: scale(1.04); }

.works-card-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: .875rem;
}

.works-card-body { padding: 1rem 1.125rem 1.25rem; }

/* 2026-08-31: 枠と塗りを外した。3種を色面で塗り分けていたため、
   カード1枚に囲みが3つ並び、押せるものと見分けがつかなくなっていた。
   制作ツールに使っていたアンバー（＝柱の赤煉瓦の別名）も廃止する
   （柱の差し色は柱の見分けにだけ使う）。種類はアイコンで示す。 */
.works-card-badges { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .625rem; }
.works-card-badges .ws-badge-year,
.works-card-badges .ws-badge-cat,
.works-card-badges .ws-badge-cms {
  background: none; border: 0; padding: 0; font-size: .75rem;
}
/* 年・制作ツールは補足なので細字のグレー。業種だけ濃紺の太字にして、
   タイトル（1rem・ほぼ黒）とも、補足とも見分けられるようにする */
.works-card-badges .ws-badge-year,
.works-card-badges .ws-badge-cms { font-weight: 500; color: var(--color-text-muted); }
.works-card-badges .ws-badge-year { font-variant-numeric: tabular-nums; }
.works-card-badges .ws-badge-cat {
  font-weight: 700; letter-spacing: .04em; color: var(--color-primary);
}

.works-card-title {
  font-size: 1rem; font-weight: 700; line-height: 1.45;
  color: var(--color-text);
  margin: 0;
  transition: color var(--transition);
}
.works-card:hover .works-card-title { color: var(--color-accent); }

/* ============================================
   25. Service 一覧（/service/）
   ============================================ */
.service-pillar { margin-bottom: 5rem; }

/* 柱ヘッダー */
.service-pillar-head {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  background: var(--color-pillar-web-tint);
  border-radius: var(--radius-lg); padding: 2.25rem 2.5rem; margin-bottom: 2rem;
  border: 1px solid var(--color-pillar-web-tint);
  position: relative; overflow: hidden;
}
.service-pillar-head::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--color-pillar-web);
  border-radius: 0;
}
.service-pillar-head__body { flex: 1; min-width: 220px; }
.service-pillar-head__svg { flex-shrink: 0; width: 180px; }
@media (max-width: 700px) { .service-pillar-head__svg { display: none; } }

.service-pillar-badge {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: .2em .8em; border-radius: 0; margin-bottom: .5rem;
  background: var(--color-pillar-web-tint); color: var(--color-pillar-web-dark);
}
.service-pillar-title {
  font-size: clamp(1.4rem,3vw,1.875rem); color: var(--color-primary); margin: 0 0 .5rem; font-weight: 900;
}
.service-pillar-desc { color: var(--color-text-muted); line-height: 1.85; margin: 0; }

/* DX柱 */
.service-pillar--dx .service-pillar-head {
  background: var(--color-pillar-dx-tint);
  border-color: var(--color-pillar-dx-tint);
}
.service-pillar--dx .service-pillar-head::after {
  background: var(--color-pillar-dx);
}
.service-pillar--dx .service-pillar-badge {
  background: var(--color-pillar-dx-tint); color: var(--color-pillar-dx-dark);
}

/* カードグリッド */
.service-list-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem;
}
.service-list-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1.75rem 1.5rem; text-decoration: none; color: inherit;
  transition: background-color var(--transition), border-color var(--transition);
}
.service-list-card:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-pillar-web);
}
.service-list-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 0;
  background: var(--color-pillar-web-tint);
  color: var(--color-pillar-web-dark);
  transition: background-color var(--transition), color var(--transition);
}
.service-list-svg { width: 30px; height: 30px; }
.service-list-card:hover .service-list-icon { background: var(--color-pillar-web); color: #fff; }
.service-list-name { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .5rem; }
.service-list-catch { font-size: .875rem; color: var(--color-text-muted); line-height: 1.75; flex-grow: 1; margin: 0 0 1rem; }
.service-list-more { font-size: .875rem; font-weight: 700; color: var(--color-pillar-web-dark); }

/* DX系カードの差し色（枠は罫線のみ。上端の色帯は使わない） */
.service-pillar--dx .service-list-card:hover { border-color: var(--color-pillar-dx); }
.service-pillar--dx .service-list-icon {
  background: var(--color-pillar-dx-tint);
  color: var(--color-pillar-dx-dark);
}
.service-pillar--dx .service-list-card:hover .service-list-icon { background: var(--color-pillar-dx); color: #fff; }
.service-pillar--dx .service-list-more { color: var(--color-pillar-dx-dark); }

/* ============================================
   26. Service 詳細（/service/{slug}/）
   ============================================ */
.service-hero-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: .75rem; border-radius: 0;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.service-hero-svg { width: 34px; height: 34px; }
.service-hero-catch { font-size: clamp(1.1rem,2.5vw,1.4rem); font-weight: 700; color: #fff; margin: 0 0 1rem; }
.service-hero-lead { color: rgba(255,255,255,.85); line-height: 1.9; margin: 0; }
.service-hero--dx { background: var(--color-primary); }

.service-container { max-width: var(--content-width); }
.svc-section { margin-bottom: 2.5rem; }
.svc-section-title {
  font-size: 1.4rem; color: var(--color-primary); margin: 0 0 1.125rem;
  padding-left: .875rem; border-left: 4px solid var(--color-accent);
}

/* お悩み */
.svc-problems { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 2rem; }
.svc-problem-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: .875rem; }
.svc-problem-item { display: flex; align-items: flex-start; gap: .625rem; line-height: 1.7; }
/* '✓' の文字を隠し、Material Symbols（check_circle）に差し替える。
   本文は DB の post_content 側にもあるため、DBを触らずCSSだけで統一している。
   font-size を 0 にするので、寸法は em ではなく rem で指定すること。 */
.svc-check {
  flex-shrink: 0;
  display: inline-block;
  width: 1.15rem; height: 1.15rem;
  margin-top: .15rem;
  font-size: 0;
  background-color: var(--color-accent);
  -webkit-mask: var(--icon-check-circle) center / contain no-repeat;
  mask: var(--icon-check-circle) center / contain no-repeat;
}

/* サービス内容 */
.svc-content-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.svc-content-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; }
.svc-content-title { font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .5rem; }
.svc-content-desc { font-size: .9rem; color: var(--color-text-muted); line-height: 1.8; margin: 0; }

/* 進め方の流れ */
.svc-flow-list { list-style: none; margin: 0; padding: 0; }
.svc-flow-item { display: flex; gap: 1.25rem; padding: 0 0 1.5rem; position: relative; }
.svc-flow-item:not(:last-child)::before {
  content: ''; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: var(--color-border);
}
.svc-flow-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 0;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.svc-flow-title { font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin: .25rem 0 .35rem; }
.svc-flow-desc { font-size: .9rem; color: var(--color-text-muted); line-height: 1.8; margin: 0; }

/* 料金 */
.svc-price-note { background: var(--color-bg-alt); border-left: 4px solid var(--color-accent); padding: 1.25rem 1.5rem; line-height: 1.8; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 0; }

/* 担当コンサルタント（DX） */
/* エディタ本文の最後のセクションは margin-bottom: 0 なので、
   テンプレ側で足すこのセクションに上余白を持たせる（.svc-cta の margin-top と揃える）*/
.svc-expert { margin-top: 3rem; }
.svc-expert-box { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; }
.svc-expert-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.svc-expert-name { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); }
.svc-expert-role { font-size: .85rem; color: var(--color-text-muted); }
.svc-expert-lead { line-height: 1.9; margin: 0 0 1rem; }
.svc-expert-records { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.svc-expert-records li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.6; }
.svc-expert-records li::before { content: ''; color: var(--color-accent); width: .9em; height: .9em; margin-top: .35rem; flex-shrink: 0; --mr-icon: var(--icon-chevron-right); }

/* FAQ（ネイティブ details/summary アコーディオン） */
.svc-faq-list { display: grid; gap: 1rem; }
.svc-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.svc-faq-q {
  display: flex; gap: .75rem; align-items: center; line-height: 1.6; margin: 0;
  padding: 1.25rem 1.5rem; font-weight: 700; color: var(--color-primary);
  cursor: pointer; list-style: none;
}
.svc-faq-q::-webkit-details-marker { display: none; }
.svc-faq-q::after {
  content: ''; margin-left: auto; width: 1.35rem; height: 1.35rem; flex-shrink: 0; color: var(--color-accent);
  transition: transform var(--transition);
  --mr-icon: var(--icon-expand-more);
}
.svc-faq-item[open] .svc-faq-q::after { --mr-icon: var(--icon-expand-less); }
.svc-faq-q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.svc-faq-a { display: flex; gap: .75rem; line-height: 1.8; margin: 0; padding: 0 1.5rem 1.25rem; color: var(--color-text-muted); }
.svc-faq-mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.svc-faq-q .svc-faq-mark { background: var(--color-primary); color: #fff; }
.svc-faq-a .svc-faq-mark { background: var(--color-bg-alt); color: var(--color-accent); }

/* CTA */
.svc-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-primary);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.5rem, 5vw, 3.5rem);
  text-align: center; color: #fff; margin-top: 3rem;
}
/* シアンのグロー */
.svc-cta::before {
  content: ''; position: absolute; z-index: -1;
  width: 540px; height: 540px; top: -260px; left: 50%; transform: translateX(-50%);
  background: none;
  pointer-events: none;
}
/* ドットグリッド */
.svc-cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image:
    none;
  background-size: 42px 42px;
  display: none;
  pointer-events: none;
}
.svc-cta-title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 900; letter-spacing: -.02em; color: #fff; margin: 0 0 .9rem; }
.svc-cta-text { color: rgba(255,255,255,.82); line-height: 1.9; margin: 0 auto 2.25rem; font-size: clamp(1rem, 2vw, 1.0625rem); }
.svc-cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* メインCTA: 白ベース＋強いシャドウ＋ホバーで浮き上がり、矢印付き */
.svc-cta-primary {
  background: #fff; color: var(--color-primary); border-color: #fff;
  padding: 1.05rem 2.75rem; font-size: 1.0625rem;
}
.svc-cta-primary::after { content: ''; width: 1.15em; height: 1.15em; margin-left: .1em; transition: transform var(--transition); --mr-icon: var(--icon-arrow-forward); }
.svc-cta-primary:hover {
  background: #fff; color: var(--color-accent); border-color: #fff;
}
.svc-cta-primary:hover::after { transform: translateX(4px); }
.svc-cta .btn-outline-navy { border-color: rgba(255,255,255,.45); color: #fff; }
.svc-cta .btn-outline-navy:hover { background: transparent; border-color: rgba(255,255,255,.7); }
/* 2026-08-31: 濃紺のCTA面では、ボタンの配色が白地ページと逆になる。
   ホバーの塗り（style.css 33節の ::before）もこの文脈に合わせないと、
   白いボタンに濃紺が満ちて濃紺の文字が読めなくなる（実際に起きていた）。 */
.svc-cta .svc-cta-primary::before  { background: var(--color-bg-alt); }
.svc-cta .btn-outline-navy::before { background: rgba(255,255,255,.14); }
/* CTA: アイブロウ・安心ポイント・補足 */
.svc-cta-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 800;
  letter-spacing: .28em; color: var(--color-cyan-light); margin-bottom: 1rem;
}
.svc-cta-points {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .7rem 1.75rem; justify-content: center;
}
.svc-cta-points li {
  display: flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.92); font-size: .95rem; font-weight: 500;
}
.svc-cta-points li::before {
  content: ''; flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--color-cyan-light);
  --mr-icon: var(--icon-check-circle);
}
.svc-cta-note { margin: 1.5rem 0 0; font-size: .85rem; color: rgba(255,255,255,.6); }

@media (max-width: 599px) {
  .service-list-grid { grid-template-columns: 1fr; }
  .svc-problem-list { grid-template-columns: 1fr; }
  .svc-content-grid { grid-template-columns: 1fr; }
  .svc-problems, .svc-expert-box { padding: 1.5rem; }
}

/* ============================================
   27. Service エディタコンテンツ拡張コンポーネント
   ============================================ */

/* エディタ本文ラッパー */
.svc-editor-content { margin-bottom: 0; }
.svc-editor-content > .svc-section:last-child { margin-bottom: 0; }

/* バッジ行（対応種別・ツール一覧等） */
/* 2026-08-31: 枠と塗りを外し、左の縦バーで「ラベル」であることを示す。
   四角囲みはボタン・ページネーション・カードだけの語彙にした。 */
.svc-badge-row {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0;
}
.svc-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0; border: 0; background: none;
  font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
  color: var(--color-primary);
}
.svc-badge::before {
  content: ""; flex: none; width: 2px; height: .9em; background: currentColor;
}
.svc-badge--tool    { color: var(--color-text-muted); font-weight: 600; }
.svc-badge--neutral { color: var(--color-primary); font-weight: 700; }

/* ハイライトリスト（選ばれる理由・強み一覧等） */
/* 2026-08-31: 囲みとホバーを外した。押せないのにカードの見た目で
   ホバーまで反応し、リンクだと誤解させていた（横断検査で7件+3件を検出）。
   区切りは上の罫線1本にして、番号が並ぶ読み物として見せる。 */
.svc-highlight-list { display: grid; gap: 1.75rem; }
.svc-highlight-item {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: none; border: 0;
  border-top: 1px solid var(--color-border);
  padding: 1.75rem 0 0;
}
.svc-highlight-num {
  flex-shrink: 0;
  font-size: 2.25rem; font-weight: 900; line-height: 1;
  color: var(--color-primary); opacity: .18;
  min-width: 2.5rem;
}
.svc-highlight-body { flex: 1; }
.svc-highlight-title { font-size: 1.0625rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .375rem; }
.svc-highlight-desc { font-size: .9rem; color: var(--color-text-muted); line-height: 1.85; margin: 0; }

/* ツールグリッド */
.svc-tool-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem;
}
.svc-tool-item {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: .875rem 1rem;
  text-align: center;
}
.svc-tool-name { font-size: .875rem; font-weight: 700; color: var(--color-primary); display: block; }
.svc-tool-desc { font-size: .75rem; color: var(--color-text-muted); display: block; margin-top: .2rem; }

/* 比較テーブル */
.svc-compare-wrap { overflow-x: auto; margin: 0; }
.svc-compare-table {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem;
}
.svc-compare-table th, .svc-compare-table td {
  padding: .875rem 1.25rem; text-align: center;
  border: 1px solid var(--color-border); vertical-align: middle;
}
.svc-compare-table thead th {
  background: var(--color-primary); color: #fff; font-weight: 700;
  border-color: var(--color-primary);
}
.svc-compare-table thead th:first-child { background: var(--color-bg-alt); color: var(--color-text-muted); }
.svc-compare-table tbody th {
  background: var(--color-bg-alt); text-align: left; font-weight: 700;
  color: var(--color-text);
}
.svc-compare-table .svc-compare-good { color: var(--color-accent); font-weight: 700; }
.svc-compare-table .svc-compare-mid  { color: var(--color-text-muted); }
.svc-compare-table .svc-compare-low  { color: var(--color-text-muted); opacity: .7; }
.svc-compare-table .svc-compare-self { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }

/* 事例リスト */
.svc-case-list { display: grid; gap: 1rem; }
.svc-case-item {
  display: grid; grid-template-columns: auto 1fr;
  gap: .75rem 1rem; align-items: start;
  background: var(--color-bg-alt); border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-accent);
}
.svc-case-before {
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  color: var(--color-text-muted); white-space: nowrap; padding-top: .125rem;
}
.svc-case-arrow { grid-column: 1; color: var(--color-accent); font-size: 1.25rem; justify-self: center; }
.svc-case-after  { font-size: .875rem; font-weight: 700; color: var(--color-primary); }
.svc-case-desc   { grid-column: 2; font-size: .875rem; color: var(--color-text-muted); line-height: 1.75; margin: 0; }

/* チェックリスト（カード内で使用） */
.svc-check-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
}
.svc-check-list li {
  display: flex; gap: .625rem; align-items: flex-start;
  font-size: .9rem; line-height: 1.7; color: var(--color-text);
}
.svc-check-list li::before {
  content: ''; flex-shrink: 0; margin-top: .2rem;
  width: 1.05em; height: 1.05em;
  color: var(--color-accent);
  --mr-icon: var(--icon-check-circle);
}

/* 詳細コンテンツカード（3カラム対応） */
.svc-content-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* 吹き出し型インフォボックス */
.svc-info-box {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-md); padding: 1.25rem 1.5rem;
  font-size: .9375rem; line-height: 1.85; color: var(--color-text);
  margin-top: 1rem;
}
.svc-info-box > p { margin: 0; }
.svc-info-box > p + p { margin-top: .625rem; }
.svc-info-box > ul { margin: .625rem 0 0; }
.svc-info-box strong { color: var(--color-primary); }

@media (max-width: 768px) {
  .svc-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-content-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .svc-highlight-num { font-size: 1.75rem; }
}
@media (max-width: 599px) {
  .svc-tool-grid { grid-template-columns: 1fr; }
  .svc-content-grid--3 { grid-template-columns: 1fr; }
  .svc-compare-table th, .svc-compare-table td { padding: .625rem .75rem; font-size: .8125rem; }
}

/* ============================================
   28. Service LP 追加コンポーネント（ページ独自構成用）
   ============================================ */

/* セクション導入文（見出し直下のリード） */
.svc-section-intro {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}

/* イントロの強調リード文 */
.svc-lead-text {
  font-size: 1.125rem;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.75rem;
}
.svc-lead-text strong { color: var(--color-primary); font-weight: 700; }

/* 実績数字バッジ行 */
.svc-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.svc-stat {
  flex: 1 1 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--color-primary) 4%, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.svc-stat-num {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  color: var(--color-primary);
  font-family: var(--font-en, sans-serif);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.svc-stat-unit {
  font-size: .9rem;
  font-weight: 700;
  margin-left: .15em;
  color: var(--color-cyan);
}
.svc-stat-label {
  font-size: .875rem;
  color: var(--color-text-muted);
  letter-spacing: .02em;
}

/* コンテンツカードのタグラベル */
.svc-content-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-cyan) 16%, transparent);
  padding: .25rem .7rem;
  border-radius: var(--radius-full);
  margin-bottom: .75rem;
}

@media (max-width: 599px) {
  .svc-stat-row { gap: .75rem; }
  .svc-stat { flex: 1 1 100%; padding: 1rem 1.25rem; }
  .svc-stat-num { font-size: 1.875rem; }
}

/* SVG アイコン（カード・セクション共通） */
.svc-card-icon {
  display: block; width: 2.5rem; height: 2.5rem;
  color: var(--color-primary); margin-bottom: .875rem; flex-shrink: 0;
}
.svc-card-icon--cyan    { color: var(--color-cyan); }
.svc-card-icon--amber   { color: var(--color-amber); }
.svc-card-icon--emerald { color: var(--color-emerald); }
.svc-card-icon--purple  { color: var(--color-purple); }
.svc-card-icon--orange  { color: var(--color-orange); }
.svc-tool-icon { display: block; width: 2rem; height: 2rem; margin: 0 auto .5rem; }

/* ビジュアルブロック（テキスト + SVG図解の2カラム） */
.svc-visual-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; align-items: center; margin: 0 0 2rem;
}
.svc-visual-block--rev .svc-visual-block__svg { order: -1; }
.svc-visual-block__svg { display: flex; justify-content: center; align-items: center; }
.svc-visual-block__svg svg { max-width: 100%; height: auto; }
@media (max-width: 699px) {
  .svc-visual-block { grid-template-columns: 1fr; }
  .svc-visual-block--rev .svc-visual-block__svg { order: 0; }
  .svc-card-icon { width: 2rem; height: 2rem; }
}

/* 対面/オンライン 2カラム */
.svc-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.svc-mode-card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
}
/* オンライン／対面の区別は見出しの文言で伝える。色分けはしない */
.svc-mode-card--online { border-top: 3px solid var(--color-primary); }
.svc-mode-card--offline { border-top: 3px solid var(--color-primary); }
.svc-mode-card__icon { width: 3rem; height: 3rem; margin-bottom: .25rem; }
.svc-mode-card__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-primary); margin: 0; }
.svc-mode-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.svc-mode-card__list li {
  font-size: .875rem; color: var(--color-text-muted); line-height: 1.7;
  padding-left: 1.1rem; position: relative;
}
.svc-mode-card__list li::before { content: ''; position: absolute; left: 0; top: .45em; width: .85em; height: .85em; color: var(--color-cyan); --mr-icon: var(--icon-chevron-right); }
@media (max-width: 599px) { .svc-mode-grid { grid-template-columns: 1fr; } }

/* 差し色セクション背景 */
.svc-section--amber  { background: color-mix(in srgb, var(--color-amber) 6%, #fff); border-radius: var(--radius-lg); padding: 2rem; }
.svc-section--emerald{ background: color-mix(in srgb, var(--color-emerald) 6%, #fff); border-radius: var(--radius-lg); padding: 2rem; }
.svc-section--purple { background: color-mix(in srgb, var(--color-purple) 6%, #fff); border-radius: var(--radius-lg); padding: 2rem; }
.svc-section--orange { background: color-mix(in srgb, var(--color-orange) 6%, #fff); border-radius: var(--radius-lg); padding: 2rem; }

/* リードサブ（ビジュアルブロック内の補足テキスト） */
.svc-lead-sub { font-size: 1rem; color: var(--color-text-muted); line-height: 1.85; margin: .75rem 0 1.25rem; }

/* 中間ミニCTA */
.svc-mini-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  background: color-mix(in srgb, var(--color-cyan) 10%, #fff);
  border: 2px solid var(--color-cyan); border-radius: var(--radius-lg); padding: 1.75rem 2rem;
  margin: 1.5rem 0;
}
/* エディタコンテンツ・セクション内の空<p>（wpautop由来）を潰す */
.svc-editor-content > p:empty,
.svc-section > p:empty { margin: 0; height: 0; overflow: hidden; }
.svc-mini-cta__text { font-size: 1.0625rem; font-weight: 600; color: var(--color-primary); margin: 0; flex: 1; }
@media (max-width: 599px) { .svc-mini-cta { flex-direction: column; text-align: center; } }

/* セクションアイキャッチSVG */
.svc-hero-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.25rem auto 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.svc-hero-svg svg { display: block; width: 100%; height: auto; }


/* ============================================
   30. Service 一覧（エディタ管理版 / svc2-*）
   2026-07-23: /service/ 一覧を post_content（ブロック
   エディタ）で全編編集できるよう再構成。旧 .service-*
   はトップ・詳細ページで継続使用のため残す。
   すべて .entry-content 配下前提で詳細度を確保する。
   ============================================ */
/* 柱ヘッダー（Web / DX） */
.entry-content .svc2-pillar-head {
  background: var(--color-pillar-web-tint);
  border: 1px solid var(--color-pillar-web-tint); border-left: 4px solid var(--color-pillar-web);
  border-radius: var(--radius-lg); padding: 2rem 2.25rem; margin: 0 0 1.75rem;
}
.entry-content .svc2-pillar-head--dx {
  background: var(--color-pillar-dx-tint);
  border-color: var(--color-pillar-dx-tint); border-left-color: var(--color-pillar-dx);
}
.entry-content .svc2-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-pillar-web-dark); margin: 0 0 .4rem;
}
.entry-content .svc2-pillar-head--dx .svc2-eyebrow { color: var(--color-pillar-dx-dark); }
.entry-content .svc2-pillar-title {
  font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--color-primary); font-weight: 900;
  margin: 0 0 .5rem; border: 0; padding: 0; background: none;
}
.entry-content .svc2-pillar-desc { color: var(--color-text-muted); line-height: 1.85; margin: 0; }

/* カードグリッド（コア Columns / Column に付与。コアCSS非依存で自立） */
.entry-content .svc2-cards {
  display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 3.5rem; align-items: stretch;
}
.entry-content .svc2-card {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.5rem;
  transition: background-color var(--transition), border-color var(--transition);
}
/* 2026-08-31: hover は「地の色＋枠線が柱の色になる」に統一した。
   もとは border-top-color だけが変わっており、上辺1本だけ色が変わって見えた。
   あわせてアイコンを2px上げ、番号を柱の色にする（浮き上がりは使わない）。 */
.entry-content .svc2-card:hover {
  background: var(--color-bg-alt); border-color: var(--color-pillar-web);
}
.entry-content .svc2-card--dx:hover { border-color: var(--color-pillar-dx); }
.entry-content .svc2-card__icon,
.entry-content .svc2-card__no { transition: transform var(--transition), color var(--transition); }
.entry-content .svc2-card:hover .svc2-card__icon { transform: translateY(-2px); }
.entry-content .svc2-card:hover .svc2-card__no { color: var(--color-pillar-web); }
.entry-content .svc2-card--dx:hover .svc2-card__no { color: var(--color-pillar-dx); }
@media (prefers-reduced-motion: reduce) {
  .entry-content .svc2-card__icon,
  .entry-content .svc2-card__no { transition: none; }
  .entry-content .svc2-card:hover .svc2-card__icon { transform: none; }
}

/* カードのプチヘッダー（アイコン＋通し番号）
   2026-08-31: 文字だけの並びでのっぺりして見えたため、柱の差し色のアイコンと、
   トップページの一覧と揃えた通し番号（01〜10）を頭に置いた。
   ショートコード [mr_icon] を使うので、アイコンの実体は inc/icons.php のまま。 */
.entry-content .svc2-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: 0 0 1.125rem; padding: 0 0 .875rem;
  border-bottom: 1px solid var(--color-border);
}
.entry-content .svc2-card__icon {
  display: block; width: 30px; height: 30px; flex: none;
  color: var(--color-pillar-web);
}
.entry-content .svc2-card--dx .svc2-card__icon { color: var(--color-pillar-dx); }
.entry-content .svc2-card__no {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.entry-content .svc2-card .svc2-name {
  font-size: 1.1rem; font-weight: 700; color: var(--color-primary);
  margin: 0 0 .5rem; border: 0; padding: 0;
}
.entry-content .svc2-card .svc2-catch {
  font-size: .9rem; color: var(--color-text-muted); line-height: 1.75; margin: 0 0 1rem; flex-grow: 1;
}
.entry-content .svc2-card .svc2-more-wrap { margin: 0; }
.entry-content .svc2-card .svc2-more {
  font-size: .875rem; font-weight: 700; color: var(--color-pillar-web-dark); text-decoration: none;
}
.entry-content .svc2-card--dx .svc2-more { color: var(--color-pillar-dx-dark); }
/* 2026-08-31: カード全体を押せるようにした（stretched link）。
   「詳しく見る」の a の ::after をカード全体に広げる。
   下線は疑似要素をやめて text-decoration に戻した（離れて太く見えたため）。 */
.entry-content .svc2-card { position: relative; }
.entry-content .svc2-card .svc2-more { position: static; }
.entry-content .svc2-card .svc2-more::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* 下線は「文字の幅」ではなく「要素の幅」に引かれるので、
   矢印まで含めて線が伸びて中途半端になる。カード全体が押せる以上、
   枠が柱の色になる・地が変わる・矢印が動く、で反応は十分伝わる。 */
.entry-content .svc2-card .svc2-more:hover { text-decoration: none; }
/* カードのどこにマウスがあっても矢印が動くようにする */
.entry-content .svc2-card:hover .svc2-more-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .entry-content .svc2-card:hover .svc2-more-arrow { transform: none; }
}
/* 「詳しく見る」の矢印（旧 '→'）。post_content 側は空の span だけを置いている */
.entry-content .svc2-more { display: inline-flex; align-items: center; gap: .4em; }
.entry-content .svc2-more-arrow {
  width: 1.1em; height: 1.1em; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-forward) center / contain no-repeat;
  mask: var(--icon-arrow-forward) center / contain no-repeat;
  transition: transform var(--transition);
}
.entry-content .svc2-more:hover .svc2-more-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .entry-content .svc2-more-arrow { transition: none; }
  .entry-content .svc2-more:hover .svc2-more-arrow { transform: none; }
}

/* CTA（既存 .svc-cta の意匠を流用しつつ、コアブロックで編集可能に） */
.entry-content .svc-cta-title { color: #fff; border: 0; padding: 0; background: none; }
.entry-content .svc-cta-points { list-style: none; margin: 0 0 2rem; padding: 0; }
.entry-content .svc-cta-points li { margin: 0; }
.entry-content .svc-cta .wp-block-buttons {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: .5rem;
}
.entry-content .svc-cta .wp-block-button__link {
  display: inline-block; text-decoration: none; border-radius: 0; font-weight: 700;
  padding: 1.05rem 2.75rem; font-size: 1.0625rem; transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition);
}
.entry-content .svc-cta .svc2-btn-primary .wp-block-button__link {
  background: #fff; color: var(--color-primary); border: 1px solid #fff;
}
.entry-content .svc-cta .svc2-btn-primary .wp-block-button__link:hover { color: var(--color-accent); }
.entry-content .svc-cta .svc2-btn-outline .wp-block-button__link {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45);
}
.entry-content .svc-cta .svc2-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }

/* ============================================
   31. Material Symbols アイコン（下層ページ）
   共通の .mr-svg は style.css セクション29で定義。
   ここでは配置ごとのサイズ・色だけを与える。
   ============================================ */

/* --- お問い合わせ --- */
.contact-info-box h3 { display: flex; align-items: center; gap: .5em; }
.contact-info-heading-icon { width: 1.2em; height: 1.2em; color: var(--color-accent); }

/* --- 制作実績 一覧（固定ページ） --- */
.works-stat-item { display: flex; flex-direction: column; align-items: center; }
.works-stat-icon { width: 1.75rem; height: 1.75rem; color: var(--color-cyan); margin-bottom: .5rem; }
.works-filter-btn { display: inline-flex; align-items: center; gap: .4em; }
.works-filter-icon { width: 1.05em; height: 1.05em; }
.works-card-svg { width: 3rem; height: 3rem; color: #fff; }

/* --- 制作実績 アーカイブ（CPT） --- */
.works-card-noimg-icon { width: 2.5rem; height: 2.5rem; opacity: .35; margin-bottom: .35rem; }
.ws-badge { display: inline-flex; align-items: center; gap: .35em; }
.ws-badge-icon { width: .95em; height: .95em; }

/* --- 制作実績 詳細 --- */
.ws-info-table th { white-space: nowrap; }
.ws-info-table th .mr-svg,
.ws-info-icon { width: 1.05em; height: 1.05em; margin-right: .45em; color: var(--color-accent); vertical-align: -.16em; }
.ws-url-link { display: inline-flex; align-items: center; gap: .35em; }
.ws-ext-icon { width: .95em; height: .95em; opacity: .7; }
.ws-side-title { display: flex; align-items: center; gap: .5em; }
.ws-side-title-icon { width: 1.15em; height: 1.15em; color: var(--color-accent); }
.ws-side-more { display: inline-flex; align-items: center; gap: .4em; }
.ws-postnav-all-link { display: inline-flex; align-items: center; gap: .4em; }
.ws-scroll-arrow { display: flex; align-items: center; justify-content: center; }
.ws-scroll-arrow-icon { width: 1.25em; height: 1.25em; }

/* --- サービス詳細 --- */
.service-hero-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: 1rem;
  border-radius: 0; background: rgba(255,255,255,.14); color: #fff;
}
.service-hero-svg { width: 34px; height: 34px; }

/* ============================================
   32. サービスLP ヒーロー（課題起点）
   2026-08-25 デザイン刷新で追加。旧 .service-hero* は未使用になった。
   このページは柱がひとつに定まるので、地に柱の薄地を使ってよい。
   ============================================ */
.svc-hero { padding: var(--space-8) 0 var(--space-16); }
.svc-hero--web { background: var(--color-pillar-web-tint); }
.svc-hero--dx  { background: var(--color-pillar-dx-tint); }

/* パンくずは薄地の上に載るので、濃紺系の文字色に戻す */
.svc-hero .breadcrumb { margin-bottom: var(--space-10); font-size: .8125rem; color: var(--color-text-muted); }
.svc-hero .breadcrumb a { color: var(--color-text-muted); }
.svc-hero .breadcrumb a:hover { color: var(--color-primary); }

.svc-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
@media (min-width: 900px) { .svc-hero__grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-16); } }

.svc-hero__pillar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .625rem;
  font-size: .875rem; font-weight: 900; letter-spacing: .04em;
  margin: 0 0 var(--space-4);
}
.svc-hero__bar  { display: block; width: 6px; height: 1.375rem; flex-shrink: 0; }
.svc-hero__icon { width: 1.375rem; height: 1.375rem; }
.svc-hero__sep  { font-weight: 500; opacity: .5; }
.svc-hero--web .svc-hero__pillar { color: var(--color-pillar-web); }
.svc-hero--web .svc-hero__bar    { background: var(--color-pillar-web); }
.svc-hero--dx  .svc-hero__pillar { color: var(--color-pillar-dx); }
.svc-hero--dx  .svc-hero__bar    { background: var(--color-pillar-dx); }

.svc-hero__title {
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  font-weight: 900; line-height: 1.38; letter-spacing: -.015em;
  color: var(--color-text); margin: 0;
}
.svc-hero__lead {
  font-size: 1rem; line-height: 2.1; color: var(--color-text);
  margin: var(--space-6) 0 var(--space-8); max-width: 34em;
}

/* 当てはまるものはありますか */
.svc-hero__checks-title { font-size: 1rem; font-weight: 900; margin: 0 0 .375rem; }
.svc-hero__checks-note  { font-size: .8125rem; color: var(--color-text-muted); line-height: 1.9; margin: 0 0 var(--space-4); }
.svc-hero__check-list { display: flex; flex-direction: column; gap: .5rem; }
.svc-hero__check-list li {
  display: flex; align-items: center; gap: .75rem;
  min-height: 56px; padding: .625rem 1.125rem;
  background: var(--color-bg);
  font-size: .9375rem; font-weight: 500; line-height: 1.6;
}
.svc-hero__check-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.svc-hero--web .svc-hero__check-list li { border: 1px solid #EFD9D5; }
.svc-hero--web .svc-hero__check-icon    { color: var(--color-pillar-web); }
.svc-hero--dx  .svc-hero__check-list li { border: 1px solid #C8E2E2; }
.svc-hero--dx  .svc-hero__check-icon    { color: var(--color-pillar-dx); }

/* ============================================
   33. 印刷物の制作事例ギャラリー（印刷物作成ページ）
   2026-08-31 追加。PDFから書き出した誌面画像を並べる。
   紙面そのものを見せる面なので、枠は最小限にして中身に集中させる。
   ============================================ */
.svc-print-case { margin-bottom: var(--space-12); }
.svc-print-case:last-child { margin-bottom: 0; }

.svc-print-case__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin-bottom: .5rem;
}
.svc-print-case__client {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt); padding: .25rem .75rem;
}
.svc-print-case__title {
  font-size: 1.25rem; font-weight: 900; color: var(--color-primary); margin: 0;
}
.svc-print-case__desc {
  color: var(--color-text-muted); line-height: 1.9; margin: 0 0 1.25rem;
}

/* 誌面のサムネイル。紙の比率がまちまちなので高さは成り行きに任せる */
.svc-print-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.svc-print-grid figure { margin: 0; }
.svc-print-grid img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--color-border);
}
.svc-print-grid figcaption {
  margin-top: .4rem; font-size: .75rem; color: var(--color-text-muted); line-height: 1.6;
}

/* 横長の紙面（車体・テーブルクロス等）は2列ぶんを使う */
.svc-print-grid figure.is-wide { grid-column: span 2; }

@media (max-width: 600px) {
  .svc-print-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-print-grid figure.is-wide { grid-column: span 2; }
}

/* ============================================
   34. 外部ブランドのロゴ（WordPress / ジンドゥー）
   2026-08-31 追加。サービスを説明する文脈での使用。
   ・WordPress … 商標ポリシー上、サービス説明ページでの掲載は可。
     自社ロゴ・ブランディングへの組み込みは不可
   ・ジンドゥー … 背景はネイビーかオフホワイト推奨、
     ロゴ周囲に文字高と同等の保護領域、デジタル最小16px、変形・色変更は不可
   いずれも配布された画像をそのまま使い、比率と色を変えない。
   ============================================ */
.svc-brandmark {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--color-bg-alt);
  padding: 1.5rem 1.75rem;
  margin: 0 0 var(--space-8);
}
/* 保護領域はこの余白で確保する。height だけ指定し、幅は成り行き（変形させない） */
.svc-brandmark__logo { flex-shrink: 0; margin: .5rem 1rem .5rem 0; }
.svc-brandmark__logo img { display: block; height: 52px; width: auto; }
.svc-brandmark__text { margin: 0; flex: 1 1 20rem; font-size: .9rem; line-height: 1.9; color: var(--color-text-muted); }

/* 複数のロゴを並べる帯（ホームページ制作ページ） */
.svc-brandmark--row { gap: 2.5rem 3rem; }
.svc-brandmark--row .svc-brandmark__item { display: flex; flex-direction: column; gap: .75rem; flex: 1 1 16rem; }
/* 縦積みの flex アイテムなので、align-self を指定しないと横いっぱいに引き伸ばされる（比率が崩れる） */
.svc-brandmark--row .svc-brandmark__item img {
  height: 52px; width: auto; align-self: flex-start; margin-bottom: .25rem;
}
.svc-brandmark--row .svc-brandmark__item p { margin: 0; font-size: .875rem; line-height: 1.85; color: var(--color-text-muted); }

@media (max-width: 600px) {
  .svc-brandmark { padding: 1.25rem; }
  .svc-brandmark__logo img { height: 42px; }
}
/* 商標の注記。本文より一段落として扱う（強制改行を使わないため要素で分ける） */
.svc-brandmark__note {
  display: block; margin-top: .5rem;
  font-size: .8rem; line-height: 1.8; color: var(--color-text-muted); opacity: .85;
}

/* ジンドゥーのロゴは枠付きのデザインなので、同じ高さだと WordPress のロゴより重く見える。
   比率は変えずに表示高さだけ少し下げて、視覚的な大きさを揃える（最小16pxの規定は満たす） */
.svc-brandmark img[alt^="ジンドゥー"] { height: 44px; }
.svc-brandmark--row img[alt^="ジンドゥー"] { height: 44px; }

/* ロゴ帯の中のリンクは、本文と同じ見た目だとリンクだと分からない。下線で区別する */
.svc-brandmark a { text-decoration: underline; text-underline-offset: .2em; }
/* ジンドゥーカフェのロゴは2行組みなので、1行のジンドゥーロゴと同じ高さだと下段が読めない */
.svc-brandmark img[alt^="ジンドゥーカフェ"] { height: 56px; }

/* ============================================
   35. 会社案内（プロフィール・ロゴマーク・掲載実績）
   2026-08-31 追加。ブロックエディタ本文の中で使う。
   ============================================ */
.company-profile {
  display: grid; grid-template-columns: 220px 1fr; gap: 2rem;
  align-items: start; margin: 0 0 var(--space-8);
}
.company-profile__photo { margin: 0; }
.company-profile__photo img { display: block; width: 100%; height: auto; }
.company-profile__body p { margin: 0 0 1rem; }
.company-profile__body p:last-child { margin-bottom: 0; }
.company-profile__name { font-weight: 700; color: var(--color-primary); }

.company-logo {
  display: grid; grid-template-columns: 160px 1fr; gap: 2rem;
  align-items: center; margin: 0 0 var(--space-8);
}
.company-logo__image { margin: 0; }
.company-logo__image img { display: block; width: 100%; height: auto; }
.company-logo__text { margin: 0; }

/* 掲載実績。46本あるので、シリーズごとに畳んで一覧性を保つ */
.company-media__lead { margin: 0 0 .75rem; }
.company-media__note { margin: 0 0 1.5rem; font-size: .85rem; color: var(--color-text-muted); }

.company-acc { border-top: 1px solid var(--color-border); }
.company-acc:last-of-type { border-bottom: 1px solid var(--color-border); }
.company-acc__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem .25rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--color-primary); line-height: 1.7;
}
.company-acc__head::-webkit-details-marker { display: none; }
.company-acc__head::before {
  content: '＋'; flex-shrink: 0; order: 2;
  font-weight: 400; color: var(--color-text-muted);
}
.company-acc[open] > .company-acc__head::before { content: '−'; }
.company-acc__head:hover { background: var(--color-bg-alt); }
.company-acc__title { flex: 1 1 auto; }
.company-acc__count {
  flex-shrink: 0; order: 1;
  font-size: .8rem; font-weight: 400; color: var(--color-text-muted);
  white-space: nowrap;
}
.company-acc__list {
  margin: 0; padding: 0 .25rem 1.25rem 1.5rem;
  display: grid; gap: .625rem;
}
.company-acc__list li { font-size: .9rem; line-height: 1.8; }
.company-acc__date { font-size: .8rem; color: var(--color-text-muted); }

@media (max-width: 600px) {
  .company-profile { grid-template-columns: 1fr; gap: 1.25rem; }
  .company-profile__photo { max-width: 200px; }
  .company-logo { grid-template-columns: 1fr; gap: 1.25rem; }
  .company-logo__image { max-width: 140px; }
}

/* ============================================
   36. 技術メモ（旧 Magicalog からの移設記事）
   2026-08-31 追加。一覧は .news-list / .news-row を共用する。
   ============================================ */

/* 一覧の導入文。更新が終わっていることを最初に伝える。
   page-hero は濃紺地なので、本文用の文字色ではなく白系で置く */
.page-hero-lead {
  margin-top: 1rem; max-width: 46em;
  color: rgba(255, 255, 255, .76); line-height: 1.9;
}
.page-hero-lead strong { color: #fff; font-weight: 700; }

/* 「この記事は古い」ことわり。
   本文より先に目に入る必要があるが、記事そのものより強く見えてはいけない。
   囲みではなく左の縦罫だけで区切る（押せるものと紛れないため） */
.tips-notice {
  display: flex; align-items: flex-start; gap: .75rem;
  margin: 0 0 2rem; padding: 1rem 1.25rem;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-text-muted);
}
.tips-notice__icon {
  flex: none; width: 20px; height: 20px; margin-top: .2em;
  fill: var(--color-text-muted);
}
.tips-notice__text {
  margin: 0; font-size: .9375rem; line-height: 1.8;
  color: var(--color-text-muted);
}
.tips-notice__text strong { color: var(--color-text); font-weight: 700; }

/* 記事末尾の相談導線。技術メモは検索から直接来る人が多いので、
   ここが会社を知る最初の接点になる */
.tips-cta {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
}
.tips-cta__text { margin: 0; color: var(--color-text-muted); }

@media (max-width: 600px) {
  .tips-cta { display: block; }
  .tips-cta .btn { margin-top: 1.25rem; width: 100%; }
}