@charset "UTF-8";
/**
 * YOOtheme Builder 用ユーティリティ 2026 — Light / Sage
 *
 * デザイン画像（白地＋セージグリーン）を Builder で組むためのクラス集。
 * Builder の要素の「CSSクラス」欄に `lt-title` のように1つ書くだけで効く。
 * 暗色版（theme/css/builder-2026.css の `u-*`）とはクラス名が別（`lt-*`）なので、
 * 同じサイトに同居しても衝突しない。
 *
 * 【考え方】YOOtheme の Grid / Slider は中の要素（画像・タイトル・メタ）に個別のクラスを
 * 付けられない。そこで Grid 本体に `lt-cards` などを1つ付けると、子孫の
 * .el-item / .el-image / .el-title / .el-meta / .el-content / .el-link をまとめて整える。
 *
 * 【二重指定＋!important の理由】`.lt-x.lt-x` と2回書くのは詳細度を上げるための内部都合。
 *   - Builder は要素ごとに #page\#12 のようなIDセレクタのCSSを出力する
 *   - UIkit の .uk-button 系は background / color を !important で指定している
 *   両方に勝つため。Builder 側には `lt-x` と1つ書けばよい。
 *
 * 色は画像から実測した値:
 *   緑 #5C6C50 / 地 #FCFBF8 / 薄い地 #F6F5F1 / 線 #E4E2DC
 *   緑地に白文字 5.7:1、地に緑文字 5.5:1、本文 #5A5A56 は地に対して 6.9:1
 */

:root {
  --lt-bg: #FCFBF8;
  --lt-alt: #F6F5F1;
  --lt-ink: #2A2A28;
  --lt-mid: #5A5A56;
  --lt-sub: #6E6E69;
  --lt-green: #5C6C50;
  --lt-green-dark: #4B5A41;
  --lt-green-soft: #E8ECE3;
  --lt-line: #E4E2DC;
  --lt-serif-jp: 'Noto Serif JP', 'Shippori Mincho', serif;
  --lt-serif-en: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --lt-sans: 'Noto Sans JP', system-ui, sans-serif;
  --lt-label: 'Jost', 'Noto Sans JP', system-ui, sans-serif;
  --lt-script: 'Mrs Saint Delafield', 'Allura', cursive;
}

/* ---------- セクション ---------- */

.lt-section.lt-section { background-color: var(--lt-bg) !important; color: var(--lt-mid); }
.lt-section--alt.lt-section--alt { background-color: var(--lt-alt) !important; color: var(--lt-mid); }

/* 背景写真つきのセクション（ヒーロー・CTA帯）。写真は Builder の「画像」で設定する。
 *
 * Builder は、写真を設定したセクションだけクラスを「外側のラッパー」に付け、
 * 実際の .uk-section（背景写真を持つ）はその子になる。写真なしなら .uk-section 自体に付く。
 * どちらでも効くよう :is() で両方を指している。
 * 左から白を重ねて文字を読ませ、右へ向かって写真を見せる。 */
:is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section),
:is(.lt-cta.lt-cta.uk-section, .lt-cta.lt-cta > .uk-section) {
  position: relative;
  color: var(--lt-ink);
}

:is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section)::before,
:is(.lt-cta.lt-cta.uk-section, .lt-cta.lt-cta > .uk-section)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(252, 251, 248, .94) 0%, rgba(252, 251, 248, .80) 34%, rgba(252, 251, 248, 0) 70%);
}

/* CTA帯は写真を主役にするので重なりを弱める */
:is(.lt-cta.lt-cta.uk-section, .lt-cta.lt-cta > .uk-section)::before {
  background: linear-gradient(90deg, rgba(252, 251, 248, .78) 0%, rgba(252, 251, 248, .55) 40%, rgba(252, 251, 248, 0) 80%);
}

/* 文字を重なりの手前に出す（::before が z-index:0 で全面を覆うため） */
:is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section) > *,
:is(.lt-cta.lt-cta.uk-section, .lt-cta.lt-cta > .uk-section) > * { position: relative; z-index: 1; }

/* 高さを持たせて、中身を縦中央に置く */
:is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section) {
  display: flex;
  align-items: center;
  min-height: clamp(520px, 64vh, 700px);
}

:is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section) > .uk-container { width: 100%; }

/* ---------- 見出しまわり ---------- */

/* 「SERVICES」— セクション上の英字ラベル */
.lt-eyebrow.lt-eyebrow,
.lt-eyebrow.lt-eyebrow * {
  font-family: var(--lt-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
  color: var(--lt-green) !important;
}

/* 「私たちができること」— セクション見出し */
.lt-title.lt-title,
.lt-title.lt-title * {
  font-family: var(--lt-serif-jp) !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
  color: var(--lt-ink) !important;
}

/* 「更新しやすく、印象まで整う。」— ヒーローの大見出し */
.lt-hero-title.lt-hero-title,
.lt-hero-title.lt-hero-title * {
  font-family: var(--lt-serif-jp) !important;
  font-size: clamp(32px, 4.2vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: .05em !important;
  color: var(--lt-ink) !important;
}

/* 見出し下の説明文 */
.lt-lead.lt-lead { word-break: auto-phrase; text-wrap: pretty; }

.lt-lead.lt-lead,
.lt-lead.lt-lead * {
  font-family: var(--lt-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: .04em !important;
  color: var(--lt-mid) !important;
}

/* 「スライド」— 英字ラベル(lt-eyebrow)のすぐ下に置く日本語の小見出し */
.lt-sub.lt-sub,
.lt-sub.lt-sub * {
  font-family: var(--lt-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  line-height: 1.6 !important;
  color: var(--lt-mid) !important;
}

/* 「Good design for a better tomorrow」— 筆記体の飾り文字。右上に置いて少し傾ける */
.lt-script.lt-script,
.lt-script.lt-script * {
  font-family: var(--lt-script) !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--lt-sub) !important;
  transform: rotate(-8deg);
  transform-origin: left center;
}

/* 数字・金額（¥165,000〜 など）。英字のセリフ体で細く */
.lt-price.lt-price,
.lt-price.lt-price * {
  font-family: var(--lt-serif-en) !important;
  font-size: clamp(32px, 3.4vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  color: var(--lt-ink) !important;
}

/* ---------- ボタン ---------- */

/* 緑の丸いボタン（無料相談する →）。Button 要素に付ける。ヘッダーのボタンにも使える */
.lt-btn.lt-btn .uk-button,
a.lt-btn.lt-btn,
button.lt-btn.lt-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 30px !important;
  background: var(--lt-green) !important;
  border: 1px solid var(--lt-green) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--lt-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  color: #fff !important;
  transition: background-color .2s ease, border-color .2s ease;
}

.lt-btn.lt-btn .uk-button:hover,
a.lt-btn.lt-btn:hover,
button.lt-btn.lt-btn:hover {
  background: var(--lt-green-dark) !important;
  border-color: var(--lt-green-dark) !important;
  color: #fff !important;
}

/* 小さめ（ヘッダー用）。lt-btn と並べて `lt-btn lt-btn--sm` と書く */
.lt-btn--sm.lt-btn--sm .uk-button,
a.lt-btn--sm.lt-btn--sm { min-height: 38px; padding: 0 22px !important; font-size: 12px !important; }

/* 枠線だけ（料金プランを見る →）。`lt-btn lt-btn--ghost` と並べる */
.lt-btn--ghost.lt-btn--ghost .uk-button,
a.lt-btn--ghost.lt-btn--ghost {
  background: transparent !important;
  color: var(--lt-green) !important;
}

.lt-btn--ghost.lt-btn--ghost .uk-button:hover,
a.lt-btn--ghost.lt-btn--ghost:hover {
  background: var(--lt-green-soft) !important;
  color: var(--lt-green-dark) !important;
}

/* ボタンを横に並べる（無料相談する / 料金を見る）。Button 要素を2つ続けて置き、どちらにも付ける */
.lt-btn--inline.lt-btn--inline {
  display: inline-block !important;
  margin-right: 12px !important;
  vertical-align: top;
}

/* 「サービス一覧を見る →」— 小さな文字リンク。Button 要素に付ける */
.lt-link.lt-link .uk-button,
a.lt-link.lt-link {
  min-height: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--lt-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  text-transform: none !important;
  color: var(--lt-sub) !important;
  transition: color .2s ease;
}

.lt-link.lt-link .uk-button:hover,
a.lt-link.lt-link:hover { color: var(--lt-green) !important; }

/* ---------- 枠つきのカード（料金カードなど） ---------- */

/* 料金カードなど。次のどれに付けても枠と余白が付く:
 *   - Panel / Card 要素に直接付ける
 *   - 列（Column）に付ける → 列の中の .uk-panel が枠になる
 *     （列そのものに枠を付けると、列の左右の溝まで枠の中に入ってしまうため）
 * UIkit のカードは影つきなので、線に置き換える。 */
:is(.lt-card.lt-card.uk-card, .lt-card.lt-card.uk-panel, .lt-card.lt-card > .uk-panel) {
  padding: 32px !important;
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* ✓ のリスト（企画・構成 / デザイン制作 …）。List 要素に付ける */
.lt-checks.lt-checks,
.lt-checks.lt-checks ul { list-style: none !important; margin: 0; padding: 0; }

.lt-checks.lt-checks li {
  position: relative;
  padding: 5px 0 5px 28px;
  font-family: var(--lt-sans) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--lt-mid) !important;
}

/* 緑の丸に白い ✓。画像を使わず CSS だけで描く */
.lt-checks.lt-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lt-green);
}

.lt-checks.lt-checks li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- Grid 全体に1つ付けるだけで中身が揃うclass ---------- */

/*
 * Grid が出力する構造（Builder の設定で多少変わる）:
 *   .el-item > picture > img.el-image      （.uk-inline-clip で包まれることもある）
 *            > .el-meta  > .el-title  > .el-content  > a.el-link
 * どの並びに設定されていても、下の flex の order で見た目の順に揃える。
 */

/* 共通: 枠線なし・影なしにして、全グリッドで余計な装飾を消す */
.lt-cards.lt-cards .el-item,
.lt-works.lt-works .el-item,
.lt-stats.lt-stats .el-item,
.lt-flow.lt-flow .el-item {
  box-shadow: none !important;
  background: transparent !important;
}

.lt-cards.lt-cards picture,
.lt-cards.lt-cards .uk-inline-clip,
.lt-works.lt-works picture,
.lt-works.lt-works .uk-inline-clip,
.lt-stats.lt-stats picture,
.lt-stats.lt-stats .uk-inline-clip {
  display: block !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.lt-cards.lt-cards img.el-image,
.lt-works.lt-works img.el-image,
.lt-stats.lt-stats img.el-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: none !important;
}

/* 丸い矢印ボタン（→）。リンクの文字は隠し、矢印を CSS で描く */
.lt-cards.lt-cards .el-link,
.lt-works.lt-works .el-link {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid #BDBBB4 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-size: 0 !important;
  color: var(--lt-sub) !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.lt-cards.lt-cards .el-link *,
.lt-works.lt-works .el-link * { display: none !important; }

.lt-cards.lt-cards .el-link::after,
.lt-works.lt-works .el-link::after {
  content: '→';
  font-family: var(--lt-sans);
  font-size: 13px;
  line-height: 1;
}

.lt-cards.lt-cards .el-item:hover .el-link,
.lt-works.lt-works .el-item:hover .el-link {
  background: var(--lt-green) !important;
  border-color: var(--lt-green) !important;
  color: #fff !important;
}

/* -- lt-cards: 上に写真、下に 01 / 英字タイトル / 説明（サービスの3カード） -- */

.lt-cards.lt-cards .el-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  padding: 0 0 26px !important;
  background: #fff !important;
  border: 1px solid var(--lt-line);
  border-radius: 2px;
}

.lt-cards.lt-cards picture,
.lt-cards.lt-cards .uk-inline-clip { order: 0; aspect-ratio: 3 / 2; }

/* 写真以外の文字は左右に余白を取る */
.lt-cards.lt-cards .el-meta,
.lt-cards.lt-cards .el-title,
.lt-cards.lt-cards .el-content { padding-left: 22px; padding-right: 64px; }

.lt-cards.lt-cards .el-meta,
.lt-cards.lt-cards .el-meta * {
  order: 1;
  margin: 20px 0 6px !important;
  font-family: var(--lt-label) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  line-height: 1.4 !important;
  color: var(--lt-sub) !important;
}

.lt-cards.lt-cards .el-title,
.lt-cards.lt-cards .el-title * {
  order: 2;
  margin: 0 0 6px !important;
  font-family: var(--lt-serif-en) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  line-height: 1.35 !important;
  color: var(--lt-ink) !important;
}

.lt-cards.lt-cards .el-content,
.lt-cards.lt-cards .el-content * {
  order: 3;
  margin: 0 !important;
  font-family: var(--lt-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  color: var(--lt-mid) !important;
}

.lt-cards.lt-cards .el-content { word-break: auto-phrase; text-wrap: pretty; }

/* リンクのないカードは矢印の分の右余白が要らない */
.lt-cards.lt-cards .el-item:not(:has(.el-link)) .el-title,
.lt-cards.lt-cards .el-item:not(:has(.el-link)) .el-content { padding-right: 22px; }

/* -- lt-works: 2列の制作事例。写真に細い枠、下に1行の説明と丸い矢印 -- */

.lt-works.lt-works .el-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  padding: 0 0 4px !important;
}

.lt-works.lt-works picture,
.lt-works.lt-works .uk-inline-clip {
  order: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--lt-line);
  border-radius: 2px;
}

.lt-works.lt-works img.el-image { object-position: top center; }

/* 説明は title・meta のどちらに書いても同じ見た目の1行キャプションにする */
.lt-works.lt-works .el-title,
.lt-works.lt-works .el-title *,
.lt-works.lt-works .el-meta,
.lt-works.lt-works .el-meta * {
  margin: 0 !important;
  font-family: var(--lt-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  line-height: 1.7 !important;
  color: var(--lt-mid) !important;
}

.lt-works.lt-works .el-meta { order: 1; margin-top: 12px !important; padding-right: 44px; }
.lt-works.lt-works .el-title { order: 2; padding-right: 44px; }
.lt-works.lt-works .el-content { order: 3; }
.lt-works.lt-works .el-link { right: 0; bottom: 0; }

/* -- lt-stats: 159 PROJECTS / 写真 の3つ並び。数字・ラベル・小さな写真を横に並べる -- */

.lt-stats.lt-stats .el-item {
  display: grid !important;
  grid-template-columns: auto 1fr 64px;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  padding: 0 !important;
}

.lt-stats.lt-stats .el-title,
.lt-stats.lt-stats .el-title * {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0 !important;
  font-family: var(--lt-serif-en) !important;
  font-size: clamp(34px, 3.6vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--lt-ink) !important;
}

.lt-stats.lt-stats .el-meta,
.lt-stats.lt-stats .el-meta * {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 !important;
  font-family: var(--lt-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  line-height: 1.5 !important;
  color: var(--lt-ink) !important;
}

.lt-stats.lt-stats .el-content,
.lt-stats.lt-stats .el-content * {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 2px 0 0 !important;
  font-family: var(--lt-sans) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: var(--lt-sub) !important;
}

.lt-stats.lt-stats picture,
.lt-stats.lt-stats .uk-inline-clip {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 4px;
}

/* -- lt-flow: 制作の流れ。上に細い線と緑の点、その下に 01 / 見出し / 説明 -- */

.lt-flow.lt-flow .el-item {
  position: relative;
  padding: 24px 0 0 !important;
  border-top: 1px solid #BDBBB4;
}

/* 線の左端の点 */
.lt-flow.lt-flow .el-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lt-ink);
}

.lt-flow.lt-flow .el-item { display: flex !important; flex-direction: column; }

.lt-flow.lt-flow .el-meta,
.lt-flow.lt-flow .el-meta * {
  order: 0;
  margin: 0 0 8px !important;
  font-family: var(--lt-label) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  color: var(--lt-green) !important;
}

.lt-flow.lt-flow .el-title,
.lt-flow.lt-flow .el-title * {
  order: 1;
  margin: 0 0 8px !important;
  font-family: var(--lt-serif-jp) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: var(--lt-ink) !important;
}

.lt-flow.lt-flow .el-content,
.lt-flow.lt-flow .el-content * {
  order: 2;
  margin: 0 !important;
  font-family: var(--lt-sans) !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: var(--lt-mid) !important;
}

/* lt-flow の項目にリンクを付けたとき（サービス内容例 → 各節へ）。
 * 項目全体がリンクになる。見出しの横に ↓、ホバーで見出しを緑に。 */
.lt-flow.lt-flow a.el-link,
.lt-flow.lt-flow .el-item > a { text-decoration: none !important; cursor: pointer; }

.lt-flow.lt-flow .el-item > a .el-title::after {
  content: '↓';
  margin-left: .6em;
  font-family: var(--lt-sans);
  font-size: 12px;
  color: var(--lt-green);
  opacity: .6;
  transition: opacity .2s, transform .2s;
  display: inline-block;
}

.lt-flow.lt-flow .el-item > a:hover .el-title,
.lt-flow.lt-flow .el-item > a:hover .el-title *,
.lt-flow.lt-flow .el-item > a:focus-visible .el-title,
.lt-flow.lt-flow .el-item > a:focus-visible .el-title * { color: var(--lt-green) !important; }

.lt-flow.lt-flow .el-item > a:hover .el-title::after,
.lt-flow.lt-flow .el-item > a:focus-visible .el-title::after { opacity: 1; transform: translateY(2px); }

/* ---------- 写真を背景にした2カラムのセクション（料金など） ---------- */

/* Section に `lt-split` を付け、Image に写真（Cover）を設定する。
 * Row は 2-3 ／ 1-3 の2列。左（2/3）に文章、右（1/3）に `lt-card`（料金カード）。
 * 写真はセクション全体の背景になり、左から背景に近い色を重ねて文字を読ませ、右へ向かって写真を見せる。
 * Builder は、写真を設定したセクションだけクラスを「外側のラッパー」に付けるため、:is() で両方を指している。 */
.lt-split.lt-split { background-color: var(--lt-alt) !important; color: var(--lt-mid); }

:is(.lt-split.lt-split.uk-section, .lt-split.lt-split > .uk-section) {
  position: relative;
  /* 上下の余白は控えめに。Builder で付けた Padding の大きさにかかわらず詰める */
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

:is(.lt-split.lt-split.uk-section, .lt-split.lt-split > .uk-section)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(246, 245, 241, 1) 0%, rgba(246, 245, 241, .97) 36%, rgba(246, 245, 241, .7) 56%, rgba(246, 245, 241, 0) 80%);
}

:is(.lt-split.lt-split.uk-section, .lt-split.lt-split > .uk-section) > * { position: relative; z-index: 1; }

/* 文章の列（左）。右のカードとの間に余白を取る */
.lt-split.lt-split .uk-grid > :not(.lt-card) {
  padding: clamp(16px, 2vw, 24px) clamp(0px, 3vw, 40px) clamp(16px, 2vw, 24px) 0;
}

.lt-split.lt-split .lt-card.lt-card { align-self: center; }

/* 帯の中のカードは内側の余白も詰める（他の場所の lt-card は 32px のまま） */
.lt-split.lt-split .lt-card.lt-card > .uk-panel {
  padding: 20px 24px !important;
  /* 半透明にして、後ろの写真（枝）をうっすら見せる。文字が読めるよう少しぼかす */
  background: rgba(255, 255, 255, .68) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lt-split.lt-split .lt-card.lt-card .lt-checks li + li { margin-top: 0 !important; }

/* ---------- サービスページ用（CONTENTS / ヘッドレスCMS の紹介） ---------- */

/* lt-problem: 「こんなお悩みありませんか？」の3カード（Grid）。
 * アイコン → 太字のタイトル → 説明、すべて中央揃い。淡い緑地に枠なし。
 * アイコンは Builder の項目で選んだ UIkit アイコンがそのまま大きく緑になる。 */
.lt-problem.lt-problem .el-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 40px 24px 36px !important;
  background: #F3F5F0 !important;
  border-radius: 2px;
  box-shadow: none !important;
  text-align: center;
}

.lt-problem.lt-problem .el-image { display: block; margin: 0 0 8px; color: var(--lt-green) !important; }
.lt-problem.lt-problem .el-image svg { width: 56px; height: 56px; }
.lt-problem.lt-problem img.el-image { width: 72px; height: 72px; object-fit: contain; }

.lt-problem.lt-problem .el-title,
.lt-problem.lt-problem .el-title * {
  margin: 14px 0 0 !important;
  font-family: var(--lt-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  letter-spacing: .04em !important;
  color: var(--lt-ink) !important;
}

.lt-problem.lt-problem .el-content,
.lt-problem.lt-problem .el-content * {
  margin: 14px 0 0 !important;
  font-family: var(--lt-sans) !important;
  font-size: 12.5px !important;
  line-height: 1.95 !important;
  letter-spacing: .03em !important;
  color: var(--lt-mid) !important;
}

/* lt-feat: 機能の4カード（Grid）。上に写真、写真の下端に丸いアイコン、太字のタイトル、説明。
 * 丸いアイコンは CSS で描く（1〜4番目の項目に 🔗 ✎ ⛁ ⏱）。別のアイコンにしたいときはこの下の nth-child を差し替える。 */
.lt-feat.lt-feat .el-item {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  padding: 0 0 28px !important;
  background: #fff !important;
  border: 1px solid var(--lt-line);
  border-radius: 2px;
  box-shadow: none !important;
}

.lt-feat.lt-feat picture,
.lt-feat.lt-feat .uk-inline-clip { display: block !important; aspect-ratio: 3 / 2; overflow: hidden !important; }

.lt-feat.lt-feat img.el-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: none !important;
}

.lt-feat.lt-feat .el-title,
.lt-feat.lt-feat .el-title * {
  font-family: var(--lt-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: .04em !important;
  color: var(--lt-ink) !important;
}

.lt-feat.lt-feat .el-title {
  position: relative;
  margin: 0 !important;
  padding: 38px 22px 0;
}

.lt-feat.lt-feat .el-title::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: #fff center / 20px 20px no-repeat;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(42, 42, 40, .12);
}

.lt-feat.lt-feat .uk-grid > :nth-child(1) .el-title::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6C50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>"); }
.lt-feat.lt-feat .uk-grid > :nth-child(2) .el-title::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6C50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>"); }
.lt-feat.lt-feat .uk-grid > :nth-child(3) .el-title::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6C50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='9' ry='3'/><path d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/><path d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/></svg>"); }
.lt-feat.lt-feat .uk-grid > :nth-child(4) .el-title::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6C50' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>"); }

.lt-feat.lt-feat .el-content,
.lt-feat.lt-feat .el-content * {
  margin: 10px 0 0 !important;
  padding: 0 22px;
  font-family: var(--lt-sans) !important;
  font-size: 12.5px !important;
  line-height: 1.95 !important;
  letter-spacing: .02em !important;
  color: var(--lt-mid) !important;
}

/* lt-steps: 導入の流れ（Grid）。左に 01 の丸、右にタイトルと説明、丸と丸を点線でつなぐ。
 * 項目の「メタ」に 01 / 02 / 03 を入れる。写真は表示しない。 */
.lt-steps.lt-steps .el-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 56px 1fr;
  column-gap: 22px;
  align-items: center;
  padding: 0 0 30px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lt-steps.lt-steps .el-meta,
.lt-steps.lt-steps .el-meta * {
  font-family: var(--lt-serif-en) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  color: var(--lt-green-dark) !important;
}

.lt-steps.lt-steps .el-meta {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 !important;
  background: var(--lt-green-soft);
  border-radius: 50%;
}

.lt-steps.lt-steps .el-title,
.lt-steps.lt-steps .el-title * {
  font-family: var(--lt-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  letter-spacing: .04em !important;
  color: var(--lt-ink) !important;
}

.lt-steps.lt-steps .el-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 4px !important; }

.lt-steps.lt-steps .el-content,
.lt-steps.lt-steps .el-content * {
  font-family: var(--lt-sans) !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  letter-spacing: .03em !important;
  color: var(--lt-mid) !important;
}

.lt-steps.lt-steps .el-content { grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; }

.lt-steps.lt-steps .uk-grid > :not(:last-child) .el-item::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 62px;
  bottom: 6px;
  border-left: 1px dotted #A3AE99;
}

/* lt-shot: 管理画面のスクリーンショット（Image 要素）。細い枠と柔らかい影をつけて中央に置く */
.lt-shot.lt-shot { max-width: 1040px; margin-left: auto; margin-right: auto; }

.lt-shot.lt-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lt-line);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(42, 42, 40, .12);
}

/* lt-hero--flow: `lt-hero` に足す。左半分をほぼ白にして、手順（文字が多い）を読ませ、右に向かって写真を見せる */
:is(.lt-hero.lt-hero--flow.lt-hero--flow.uk-section, .lt-hero.lt-hero--flow.lt-hero--flow > .uk-section)::before {
  background: linear-gradient(90deg, rgba(252, 251, 248, .97) 0%, rgba(252, 251, 248, .94) 42%, rgba(252, 251, 248, .5) 62%, rgba(252, 251, 248, .12) 100%);
}

/* ---------- プロフィールページ ---------- */

/* lt-hero の大見出しをひとまわり小さくしたもの（長い一文の見出し用）。`lt-hero-title lt-hero-title--md` と並べる */
.lt-hero-title--md.lt-hero-title--md,
.lt-hero-title--md.lt-hero-title--md * { font-size: clamp(26px, 3.1vw, 40px) !important; line-height: 1.6 !important; }
/* 文節の切れ目で折り返し、行の長さをそろえる */
.lt-hero-title--md.lt-hero-title--md { word-break: auto-phrase; text-wrap: balance; }

/* 小見出し（制作・技術 / 写真撮影 など）。Headline に付ける */
.lt-subtitle.lt-subtitle,
.lt-subtitle.lt-subtitle * {
  font-family: var(--lt-serif-jp) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: .06em !important;
  color: var(--lt-ink) !important;
}

/* ヒーローの「↓」アイコンリンク */
.lt-scroll.lt-scroll,
.lt-scroll.lt-scroll a { color: var(--lt-green) !important; }

/* lt-values: 「大切にしていること」の3カード（Grid）。白地に細い線・大きな英字の番号・明朝のタイトル */
.lt-values.lt-values .el-item {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px 34px !important;
  background: #fff !important;
  border: 1px solid var(--lt-line) !important;
  border-radius: 2px;
  box-shadow: none !important;
}

.lt-values.lt-values .el-meta,
.lt-values.lt-values .el-meta * {
  order: 0;
  margin: 0 0 6px !important;
  font-family: var(--lt-serif-en) !important;
  font-size: 40px !important;
  font-style: italic;
  font-variant-numeric: lining-nums;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: var(--lt-green) !important;
}

.lt-values.lt-values .el-title,
.lt-values.lt-values .el-title * {
  order: 1;
  margin: 0 0 14px !important;
  font-family: var(--lt-serif-jp) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: .05em !important;
  color: var(--lt-ink) !important;
}

.lt-values.lt-values .el-content,
.lt-values.lt-values .el-content * {
  order: 2;
  font-family: var(--lt-sans) !important;
  font-size: 13px !important;
  line-height: 2 !important;
  letter-spacing: .04em !important;
  color: var(--lt-mid) !important;
}

/* lt-creds: 実績の数字（30年 / JP/EN / 全国）。大きな緑の数字と小さな説明を、細い縦線で区切って中央に並べる */
.lt-creds.lt-creds .el-item {
  padding: 8px 12px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
}

.lt-creds.lt-creds .uk-grid > * + * > .el-item { border-left: 1px solid var(--lt-line) !important; }

.lt-creds.lt-creds .el-title,
.lt-creds.lt-creds .el-title * { margin: 0 0 6px !important; line-height: 1.2 !important; }

.lt-creds.lt-creds .cred-num {
  font-family: var(--lt-serif-en) !important;
  font-size: clamp(30px, 5vw, 56px) !important;
  font-variant-numeric: lining-nums;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  color: var(--lt-green) !important;
}

.lt-creds.lt-creds .el-content,
.lt-creds.lt-creds .el-content * {
  font-family: var(--lt-label) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  line-height: 1.8 !important;
  color: var(--lt-mid) !important;
}

/* lt-chips: 横並びのタグ（WordPress / レスポンシブデザイン …）。List に付ける */
.lt-chips.lt-chips,
.lt-chips.lt-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lt-chips.lt-chips li { margin: 0 !important; padding: 0 !important; }

.lt-chips.lt-chips .el-content {
  display: inline-block;
  margin: 0 !important;
  padding: 5px 16px !important;
  background: var(--lt-green-soft);
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--lt-sans) !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  line-height: 1.6 !important;
  color: var(--lt-green-dark) !important;
}

/* 本文の中に入れる HTML 部品（Origin Story） */
.story-highlight {
  margin: 4px 0;
  padding: 18px 22px;
  background: var(--lt-green-soft);
  border-left: 2px solid var(--lt-green);
  border-radius: 0 2px 2px 0;
}

.origin-card {
  margin-bottom: 20px;
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: 2px;
  font-family: var(--lt-sans);
}

.origin-card .origin-label {
  margin: 0 0 12px;
  font-family: var(--lt-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.6;
  color: var(--lt-green);
}

.origin-card .origin-text {
  margin: 0;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--lt-mid);
}

.origin-card .origin-text strong { font-family: var(--lt-serif-jp); font-weight: 500; color: var(--lt-ink); }

.origin-card .name-evolution { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }

.origin-card .name-chip {
  padding: 4px 14px;
  border: 1px solid var(--lt-line);
  border-radius: 999px;
  background: var(--lt-bg);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--lt-mid);
}

.origin-card .name-chip.current { background: var(--lt-green); border-color: var(--lt-green); color: #fff; }
.origin-card .name-arrow { font-size: 12px; color: var(--lt-green); opacity: .7; }

/* ---------- お問い合わせページ ---------- */

/* 背景写真が横長のバナー（お問い合わせ）用に、ヒーローを低くする。`lt-hero lt-hero--short` と並べる */
:is(.lt-hero--short.lt-hero--short.uk-section, .lt-hero--short.lt-hero--short > .uk-section) { min-height: clamp(280px, 30vw, 380px); }

/* lt-form: Contact Form 7 のフォームを入れる HTML 要素に付ける。
 * フォーム側のひな形は `.oto-form > .oto-row > (.oto-label + .oto-field)` の形にしてある。
 * 左にラベル（必須バッジ）、右に入力欄。幅が狭いときは縦に積む。 */
.lt-form.lt-form { margin-top: 28px; text-align: left; }
.lt-form.lt-form .oto-form { width: 100%; }
.lt-form.lt-form .oto-form p { margin: 0; }
.lt-form.lt-form .oto-form br { display: none; }

.lt-form.lt-form .oto-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 8px 28px;
  align-items: start;
  margin-bottom: 22px;
}

.lt-form.lt-form .oto-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  margin: 0;
  font-family: var(--lt-serif-jp);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--lt-ink);
}

.lt-form.lt-form .essential {
  position: static;
  flex: none;
  padding: 2px 10px;
  border-radius: 2px;
  background: var(--lt-green);
  font-family: var(--lt-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
  color: #fff;
}

.lt-form.lt-form .wpcf7-form-control-wrap { display: block; }

.lt-form.lt-form input.otoform,
.lt-form.lt-form textarea.otoform {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--lt-sans);
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--lt-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.lt-form.lt-form textarea.otoform { height: 220px; padding: 12px 14px; resize: vertical; }

.lt-form.lt-form input.otoform:focus,
.lt-form.lt-form textarea.otoform:focus {
  border-color: var(--lt-green);
  box-shadow: 0 0 0 3px var(--lt-green-soft);
  outline: 0;
}

.lt-form.lt-form .oto-consent { margin-top: 30px; text-align: center; }
.lt-form.lt-form .oto-consent .wpcf7-form-control-wrap { display: inline-block; }
.lt-form.lt-form .oto-consent .wpcf7-list-item { margin: 0; }
.lt-form.lt-form .oto-consent label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lt-sans);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--lt-ink);
  cursor: pointer;
}
.lt-form.lt-form .oto-consent input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--lt-green); }
.lt-form.lt-form .oto-consent a { color: var(--lt-green); text-decoration: underline; text-underline-offset: 3px; }
.lt-form.lt-form .oto-consent a:hover { color: var(--lt-green-dark); }

.lt-form.lt-form .oto-submit { margin-top: 24px; text-align: center; }

.lt-form.lt-form input.otosubmit {
  display: inline-block;
  width: min(100%, 320px);
  height: 54px;
  margin: 0 auto;
  padding: 0 30px;
  background: var(--lt-green);
  border: 1px solid var(--lt-green);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--lt-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.lt-form.lt-form input.otosubmit:hover { background: var(--lt-green-dark); border-color: var(--lt-green-dark); color: #fff; }

/* 入力エラー・送信結果のメッセージ */
.lt-form.lt-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; letter-spacing: .04em; color: #A5473B; }
.lt-form.lt-form .wpcf7-not-valid { border-color: #C98A80 !important; }
.lt-form.lt-form .wpcf7 form .wpcf7-response-output {
  margin: 28px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--lt-line);
  border-left: 3px solid var(--lt-green);
  background: var(--lt-green-soft);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--lt-ink);
}
.lt-form.lt-form .wpcf7 form.invalid .wpcf7-response-output,
.lt-form.lt-form .wpcf7 form.failed .wpcf7-response-output,
.lt-form.lt-form .wpcf7 form.spam .wpcf7-response-output { border-left-color: #A5473B; background: #F7EDEA; }
.lt-form.lt-form .wpcf7-spinner { display: none; }

@media (max-width: 639px) {
  .lt-form.lt-form .oto-row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 18px; }
  .lt-form.lt-form .oto-label { justify-content: flex-start; min-height: 0; }
}

/* ---------- プライバシーポリシーなど、文章中心のページ ---------- */

/* 条文の見出し（1. 取得する情報 …）。上に細い線を引いて区切る。Headline に `lt-subtitle lt-subtitle--article` */
.lt-subtitle--article.lt-subtitle--article { padding-top: 28px; border-top: 1px solid var(--lt-line); }

/* 本文。リストと強調、リンクを整える。Text に `lt-lead lt-prose` */
.lt-prose.lt-prose p { margin: 0 0 .8em; }
.lt-prose.lt-prose ul { margin: 0 0 .8em; padding-left: 1.4em; list-style: disc; }
.lt-prose.lt-prose li { margin: 0 0 .5em; padding-left: .2em; }
.lt-prose.lt-prose li::marker { color: var(--lt-green); }
.lt-prose.lt-prose strong { font-weight: 500; color: var(--lt-ink); }
.lt-prose.lt-prose a { color: var(--lt-green) !important; text-decoration: underline; text-underline-offset: 3px; }
.lt-prose.lt-prose a:hover { color: var(--lt-green-dark) !important; }
.lt-prose--end.lt-prose--end { margin-top: 40px; text-align: right; }

/* ---------- 記事ページ（投稿） ---------- */

/* 記事の部品（hero-lead・point-box・compare-table・checklist など）は、テーマの css/custom.css が
 * 古い配色の変数で作っている。変数を新しい配色に差し替えれば、記事の本文側がまとめて揃う。
 * `:root:root` にして、読み込み順にかかわらず上書きする。 */
:root:root {
  --ink: #2A2A28;
  --ink-mid: #5A5A56;
  --ink-light: #6E6E69;
  --cream: #FCFBF8;
  --warm-white: #F6F5F1;
  --accent: #5C6C50;
  --accent-light: #E8ECE3;
  --border: #E4E2DC;
}

/* 変数ではなく色が直接書かれている部品（custom.css・YOOtheme のテンプレート側） */
.pull-quote { background: var(--lt-green-soft); }
.pull-quote p { color: var(--lt-green); }
.pull-quote::before { color: var(--lt-green); }
.pyramid-bar.big { background: #CFD7C8; }
.pyramid-bar.mid { background: #DDE3D7; }
.cover-img { background: linear-gradient(135deg, #E8ECE3 0%, #DDE3D7 45%, #CFD7C8 100%); }
.map-pin::after { background: rgba(92, 108, 80, .3); }

/* 本文中のリンク */
.post-content a { color: var(--lt-green); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--lt-green-dark); }

/* 記事タイトルと、YOOtheme の既定の見出し色（青みのグレー）をインクの色にそろえる */
.single-post main :is(h1, h2, h3, h4, h5):not(.uk-h6) { color: var(--lt-ink); }
.single-post main h1 { font-weight: 400; letter-spacing: .04em; line-height: 1.55; }

/* 「CATEGORY」「TAGS」の小さな英字ラベル。他のページの lt-eyebrow と同じ */
.single-post main .uk-h6,
.single-post main .uk-h5:not(.el-title):not(.uk-text-center) {
  font-family: var(--lt-label) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: var(--lt-green) !important;
}

/* 記事末尾の「無料相談する」ボタンと枠 */
.single-post a.cta-button.cta-button {
  width: min(100%, 280px) !important;
  padding: 12px 34px !important;
  text-align: center;
  background: var(--lt-green) !important;
  border: 1px solid var(--lt-green) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  color: #fff !important;
  transition: background-color .2s ease, border-color .2s ease !important;
}

.single-post a.cta-button.cta-button:hover { background: var(--lt-green-dark) !important; border-color: var(--lt-green-dark) !important; color: #fff !important; }
.single-post main .uk-container-xsmall { border-color: var(--lt-line) !important; }

/* カテゴリ・タグ・関連記事のカードの枠と文字 */
.single-post main .el-item { border-color: var(--lt-line) !important; color: var(--lt-mid) !important; transition: border-color .2s ease; }
.single-post main .el-item:hover { border-color: var(--lt-green) !important; }
.single-post main .el-link { color: var(--lt-mid) !important; }
.single-post main .el-link:hover { color: var(--lt-green) !important; }
.single-post main .uk-button-text { color: var(--lt-ink) !important; }
.single-post main .uk-button-text:hover { color: var(--lt-green) !important; }

/* ---------- 記事一覧・カテゴリ・タグのページ ---------- */

/* 3つのページ（/articles/・カテゴリ・タグ）は、YOOtheme のテンプレートが別々に作っていて構造が少し違う。
 *   /articles/ : .el-item > a.uk-panel > ( 写真 / .el-meta=カテゴリ / .el-title / .el-content=日付 )
 *   カテゴリ・タグ: .el-item > ( a>写真 / .el-title / .el-meta=カテゴリ )
 * どちらも flex の order で「写真 → カテゴリ → タイトル → 日付」の順に揃え、カードの見た目を同じにする。
 * テンプレート側に直書きされた黒い枠や白黒表示は !important で打ち消す。 */
:is(body.blog, body.category, body.tag) main .el-item,
:is(body.blog, body.category, body.tag) main .el-item > a.uk-panel {
  display: flex !important;
  flex-direction: column;
  background: transparent !important;
  box-shadow: none !important;
}

:is(body.blog, body.category, body.tag) main .el-item > a { display: block; }
:is(body.blog, body.category, body.tag) main .el-item > a.uk-panel { flex: 1; }

/* 写真：色つきのまま、3:2 に切り抜く */
:is(body.blog, body.category, body.tag) main .el-item picture,
:is(body.blog, body.category, body.tag) main .el-item .uk-inline-clip {
  display: block !important;
  order: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
}

:is(body.blog, body.category, body.tag) main .el-item img.el-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: none !important;
}

/* カテゴリ名：淡い緑の小さなタグ（記事ページの cat-badge と同じ） */
:is(body.blog, body.category, body.tag) main .el-item .el-meta { order: 1; margin: 16px 0 8px !important; }

:is(body.blog, body.category, body.tag) main .el-item .el-meta :is(span, a) {
  display: inline-block;
  padding: 3px 12px;
  background: var(--lt-green-soft) !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-family: var(--lt-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.7;
  text-decoration: none;
  color: var(--lt-green) !important;
}

/* タイトル：明朝・細め */
:is(body.blog, body.category, body.tag) main .el-item .el-title { order: 2; margin: 0 0 8px !important; }

:is(body.blog, body.category, body.tag) main .el-item .el-title,
:is(body.blog, body.category, body.tag) main .el-item .el-title a {
  font-family: var(--lt-serif-jp) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
  letter-spacing: .04em !important;
  color: var(--lt-ink) !important;
  text-decoration: none;
  transition: color .2s ease;
}

:is(body.blog, body.category, body.tag) main .el-item a:hover .el-title,
:is(body.blog, body.category, body.tag) main .el-item .el-title a:hover { color: var(--lt-green) !important; }

/* 日付 */
:is(body.blog, body.category, body.tag) main .el-item .el-content {
  order: 3;
  margin: 0 !important;
  font-family: var(--lt-label);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--lt-sub) !important;
}

/* ページの見出し */
/* 見出しまわりの余白を詰める（記事一覧） */
body.blog main .uk-section:first-of-type { padding-top: 56px; padding-bottom: 0; }

body.blog main h1 {
  font-family: var(--lt-serif-en) !important;
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--lt-ink);
}

:is(body.category, body.tag) main h1 {
  margin: 28px 0 32px;
  font-family: var(--lt-serif-jp) !important;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--lt-ink);
}

:is(body.category, body.tag) main h1 { text-transform: none !important; }
:is(body.category, body.tag) main h1 b { font-weight: 500; color: var(--lt-green) !important; }

/* ページ送り：丸い番号。いまのページは緑 */
:is(body.blog, body.category, body.tag) main .uk-pagination { justify-content: center; gap: 6px; }
:is(body.blog, body.category, body.tag) main .uk-pagination > * { padding-left: 0; }

:is(body.blog, body.category, body.tag) main .uk-pagination > * > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--lt-label);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--lt-mid);
  transition: background-color .2s ease, color .2s ease;
}

:is(body.blog, body.category, body.tag) main .uk-pagination > * > a:hover { background: var(--lt-green-soft); color: var(--lt-green-dark); }
:is(body.blog, body.category, body.tag) main .uk-pagination > .uk-active > * { background: var(--lt-green); color: #fff; }

@media (max-width: 639px) {
  :is(body.blog, body.category, body.tag) main .el-item .el-title,
  :is(body.blog, body.category, body.tag) main .el-item .el-title a { font-size: 13px !important; line-height: 1.7 !important; }
}

/* ---------- 制作事例（個別ページ） ---------- */

/* 使用システム・業種・URL の一覧で、値が空の行は項目名だけが残るので隠す
 * （サイトを閉じている事例などは URL 欄を空にして、リンクを出さない運用にできる） */
body.single-sites main li.el-item:not(:has(.el-meta)) { display: none; }

/* ---------- responsive ---------- */

@media (max-width: 959px) {
  /* 写真の上に白を重ねる向きを、横から上下に変える（左右に余白が取れないため） */
  :is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section)::before,
  :is(.lt-cta.lt-cta.uk-section, .lt-cta.lt-cta > .uk-section)::before {
    background: linear-gradient(180deg, rgba(252, 251, 248, .92) 0%, rgba(252, 251, 248, .74) 55%, rgba(252, 251, 248, .1) 100%);
  }

  :is(.lt-hero.lt-hero.uk-section, .lt-hero.lt-hero > .uk-section) { min-height: 0; }

  :is(.lt-hero.lt-hero--flow.lt-hero--flow.uk-section, .lt-hero.lt-hero--flow.lt-hero--flow > .uk-section)::before {
    background: linear-gradient(180deg, rgba(252, 251, 248, .95) 0%, rgba(252, 251, 248, .88) 55%, rgba(252, 251, 248, .8) 100%);
  }

  /* 縦に積まれたときは、重なりを横から上下に変える（左右に余白が取れないため）。カードの下に余白を付ける */
  :is(.lt-split.lt-split.uk-section, .lt-split.lt-split > .uk-section)::before {
    background: linear-gradient(180deg, rgba(246, 245, 241, .97) 0%, rgba(246, 245, 241, .9) 55%, rgba(246, 245, 241, .6) 100%);
  }

  .lt-split.lt-split .uk-grid > :not(.lt-card) { padding-right: 0; }
  .lt-split.lt-split .lt-card.lt-card { padding-bottom: 16px; }
  .lt-script.lt-script { transform: rotate(-6deg); }
}

@media (max-width: 639px) {
  .lt-creds.lt-creds .el-item { padding: 8px 4px !important; }
  .lt-creds.lt-creds .el-content,
  .lt-creds.lt-creds .el-content * { font-size: 11px !important; letter-spacing: .02em !important; word-break: normal; }

  .lt-cards.lt-cards .el-meta,
  .lt-cards.lt-cards .el-title,
  .lt-cards.lt-cards .el-content { padding-left: 18px; padding-right: 56px; }

  .lt-stats.lt-stats .el-item { grid-template-columns: auto 1fr 52px; }
  .lt-stats.lt-stats picture,
  .lt-stats.lt-stats .uk-inline-clip { width: 52px; height: 52px; }
}