@charset "UTF-8";
@charset "UTF-8";
/* ==========================================================================
   合同会社ルクシア デザインCSS v3（SIRIUS2「ユーザー指定スタイル」用）
   ・今の「ユーザー指定スタイル」の中身を全部消して、このファイルを丸ごと貼ってください
   ・@import は必ず一番上に置いてください
   ・白を基調にした広い余白／英字見出し＋細い線＋日本語の小見出し
   ・配色：紺（文字・土台）／ワインレッド（アクセント）／ゴールド（差し色）
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* --------------------------------------------------------------------------
   0. 色・文字の設定（ここを変えるとサイト全体が変わります）
   -------------------------------------------------------------------------- */
:root {
  --lx-navy: #0F1B2D;
  --lx-navy-2: #1B2A44;
  --lx-navy-3: #2A3F63;
  --lx-wine: #7A1F2E;
  --lx-wine-2: #962B3C;
  --lx-gold: #C2A56B;
  --lx-gold-deep: #8A6F3A;
  --lx-gray: #F1EFEA;        /* 薄いグレーの面 */
  --lx-line: #E2DDD3;
  --lx-ink: #2B2B2B;
  --lx-mute: #5E5A52;
  --lx-on-dark: #E9E5DC;
  --lx-en: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --lx-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --lx-ease: cubic-bezier(.22, .61, .36, 1);
  --lx-w: 1080px;
  --lx-gutter: 24px;
  --lx-pad: clamp(72px, 9vw, 128px);
  --lx-shadow: 0 6px 24px rgba(15, 27, 45, .08);
}

/* --------------------------------------------------------------------------
   1. SIRIUS2 の色設定を上書き
   -------------------------------------------------------------------------- */
:root,
html body {
  --clr-main: var(--lx-navy) !important;
  --clr-accent: var(--lx-wine) !important;
  --clr-gradation-start: var(--lx-navy) !important;
  --clr-gradation-end: var(--lx-navy-3) !important;
  --clr-base: var(--lx-gray) !important;
  --clr-border: var(--lx-line) !important;
  --clr-body-txt: var(--lx-ink) !important;
  --clr-a-txt: var(--lx-navy-2) !important;
  --clr-topmenu-bg: #FFFFFF !important;
  --clr-footer-bg: var(--lx-navy) !important;
  --clr-footer-txt: var(--lx-on-dark) !important;
  --clr-pagetop-bg: var(--lx-wine) !important;
  --clr-siteNavi-txt: var(--lx-mute) !important;
  --clr-menu-icon: var(--lx-navy) !important;
}

/* --------------------------------------------------------------------------
   2. 全体
   -------------------------------------------------------------------------- */
body {
  font-family: var(--lx-ja);
  letter-spacing: .05em;
  color: var(--lx-ink);
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
h1, h2, h3, h4 { font-family: var(--lx-ja); }
h2:not([class*="topic"])::after { background: var(--lx-wine); height: 1px; }
h4:not([class*="topic"]) { border-left-color: var(--lx-wine); }

/* --------------------------------------------------------------------------
   3. ヘッダー（上に横並びのメニュー）
   ・メニューの一番最後（お問い合わせ）が、ワインレッドのボタンになります
   -------------------------------------------------------------------------- */
#header { background: #fff; box-shadow: 0 1px 0 var(--lx-line); }
body:has(.lx-sec) #contents::before { content: none !important; }
#logo, #logo a { font-family: var(--lx-en); font-weight: 600; letter-spacing: .14em; color: var(--lx-navy); }
.topmenu_ul > li > a, .topmenu_ul > li > span > a { font-family: var(--lx-ja); font-weight: 500; letter-spacing: .08em; color: var(--lx-navy) !important; transition: color .3s var(--lx-ease); }
.topmenu_ul > li > a:hover, .topmenu_ul > li > span > a:hover { color: var(--lx-wine) !important; }
.topmenu_ul a em { font-style: normal; font-size: .72em; color: var(--lx-mute); letter-spacing: .1em; }
@media (min-width: 1025px) {
  #header .container { align-items: center; }
  #header-menu, #topmenu { justify-content: flex-end; }
  #topmenu .topmenu_ul { justify-content: flex-end; align-items: center; gap: 4px; width: auto; padding-right: clamp(16px, 3vw, 48px); }
  .topmenu_ul > li.haschild > span > a, .topmenu_ul > li.haschild > a { padding-right: 36px !important; }
  .topmenu_ul > li:last-child::after { content: none !important; }
  #topmenu .topmenu_ul > li { flex: 0 0 auto; width: auto; }
  .topmenu_ul > li > a, .topmenu_ul > li > span > a { width: auto !important; padding-inline: clamp(12px, 1.3vw, 20px) !important; font-size: 1.45rem; }
  .topmenu_ul > li:last-child > a, .topmenu_ul > li:last-child > span > a { display: inline-grid !important; place-items: center; height: 44px; margin-left: 8px; padding-inline: 28px !important; background: var(--lx-wine); color: #fff !important; border-radius: 999px; }
  .topmenu_ul > li:last-child > a:hover, .topmenu_ul > li:last-child > span > a:hover { background: var(--lx-wine-2); color: #fff !important; }
}
/* ロゴが未設定のときだけ、左上に仮のロゴを表示（SIRIUS2でロゴを設定すると自動で消えます） */
#logo-wrap:not(:has(#logo, img))::before {
  content: "";
  order: -1;
  flex: 0 0 auto;
  align-self: center;
  width: 200px;
  height: 50px;
  margin: 0 auto 0 clamp(16px, 3vw, 48px);
  background: url("img/logo.png") left center / contain no-repeat;
}
@media (max-width: 1024px) { #logo-wrap:not(:has(#logo, img))::before { width: 150px; height: 40px; margin-left: 16px; } }
#fix-spmenu-list { background-color: rgba(15, 27, 45, .96); }
#siteNavi { background: #fff; }
#siteNavi ul { font-size: 1.2rem; letter-spacing: .08em; }
#footer { letter-spacing: .06em; }
#copy { font-family: var(--lx-en); letter-spacing: .12em; border-top-color: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   4. lx- パーツを置いたブロックの余白を消す（ブロックの見出し欄は空に）
   -------------------------------------------------------------------------- */
#main section:has(.lx-sec) { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
#main .txt-body:has(> .lx-sec) { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 auto !important; }
#main section:has(.lx-sec) > h2:empty { display: none !important; }
#contents:has(.lx-hero, .lx-ptl),
#main:has(.lx-hero, .lx-ptl) { padding-top: 0 !important; margin-top: 0 !important; }
#contents:has(.lx-sec:last-child) { padding-bottom: 0 !important; }

/* ==========================================================================
   5. 共通パーツ
   ========================================================================== */
.lx-sec {
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);   /* JSで画面の端にぴったり合わせます */
  padding: var(--lx-pad) 0;
  background: #fff;
  color: var(--lx-ink);
  box-sizing: border-box;
}
.lx-sec *, .lx-sec *::before, .lx-sec *::after { box-sizing: border-box; }
.lx-sec--gray { background: var(--lx-gray); }
.lx-sec--navy { background: var(--lx-navy); color: var(--lx-on-dark); }
.lx-sec--tight { padding-top: 0; }
/* 左から伸びるグレーの面（右側は白く空ける） */
.lx-sec--panel { background: linear-gradient(90deg, var(--lx-gray) 0, var(--lx-gray) 88%, #fff 88%); }
.lx-sec--panel-r { background: linear-gradient(90deg, #fff 0, #fff 12%, var(--lx-gray) 12%); }
.lx-in { position: relative; width: min(100% - var(--lx-gutter) * 2, var(--lx-w)); margin-inline: auto; }
.lx-in--narrow { width: min(100% - var(--lx-gutter) * 2, 800px); }

/* SIRIUS2 の本文スタイルをリセット（詳細度を低くして、各パーツの指定が必ず勝つように） */
:where(#wrap .lx-sec) p { margin: 0; padding: 0; text-indent: 0; }
:where(#wrap .lx-sec) div, :where(#wrap .lx-sec) li { text-indent: 0; }
:where(#wrap .lx-sec) a { color: inherit; text-decoration: none; }
:where(#wrap .lx-sec) img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; box-shadow: none; }
:where(#wrap .lx-sec) :is(h2, h3) { margin: 0; padding: 0; border: 0; background: none; -webkit-text-fill-color: currentColor; overflow: visible; }
:where(#wrap .lx-sec) :is(h2, h3)::before, :where(#wrap .lx-sec) :is(h2, h3)::after { content: none; }
:where(#wrap .lx-sec) :is(ul, ol) { list-style: none; margin: 0; padding: 0; overflow: visible; }
:where(#wrap .lx-sec) li { margin: 0; padding: 0; }
:where(#wrap .lx-sec) li::before { content: none; }
/* エディタが自動で入れる改行・空の段落で崩れないように */
.lx-sec br { display: none; }
.lx-sec :is(p, h2, h3, dd) br { display: revert; }
.lx-sec p:empty, .lx-sec :is(ul, ol) > p, .lx-fnav :is(ul, ol) > p, .lx-fnav > p:empty { display: none !important; }
.lx-sec :is(.lx-cards, .lx-checks, .lx-chain, .lx-steps, .lx-menu, .lx-strs, .lx-vals, .lx-tags, .lx-kinds) > :not(li) { display: none !important; }
/* エディタが入れる空の段落（<p><br></p>）を、JSが無いページでもCSSで消す
   ・レイアウト用の枠の直下にある「class の無い段落」はすべて消します
   ・本文（lx-body）の中は、改行だけの段落だけを消します
   ・本文に段落を足すときは <p class="lx-p">…</p> の形で入れてください */
.lx-sec :is(.lx-in, .lx-ptl-in, .lx-hd, .lx-lede, .lx-lede-row, .lx-point, .lx-point-body, .lx-cta-in, .lx-cta-txt,
  .lx-split, .lx-split-txt, .lx-hero-in, .lx-hero-txt, .lx-btns, .lx-card-in, .lx-msg, .lx-msg-side, .lx-mv, .lx-mv > div,
  .lx-box, .lx-answer, .lx-strength-end, .lx-intro-txt, .lx-str-body, .lx-diagram) > p:not([class]):not(:has(img, a, strong, b, em, span)),
.lx-sec :is(.lx-menu, .lx-strs, .lx-steps, .lx-vals, .lx-cards, .lx-chain) > li > p:not([class]):not(:has(img, a)),
.lx-sec .lx-body > p:not([class]):has(> br:only-child),
.lx-sec > p:not([class]):not(:has(img)) { display: none !important; }
/* エディタが画像を <p> で包んだときも崩れないように */
.lx-sec p:has(> img:only-child) { margin: 0; }
@media (max-width: 767px) { .lx-sec .lx-pc-br { display: none !important; } }

/* 写真の枠（写真がないときはグラデーション） */
.lx-ph { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--lx-navy-3), var(--lx-navy) 60%, #3A3A3A); }
#wrap .lx-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s var(--lx-ease); }

/* ---- 見出し（英字＋細い線＋日本語） ---- */
.lx-hd { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: clamp(36px, 4vw, 52px); }
#wrap .lx-hd-en {
  position: relative;
  padding-bottom: 18px;
  font-family: var(--lx-en);
  font-size: clamp(3rem, 3.4vw, 4.2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--lx-navy);
}
.lx-hd-en::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 120px; height: 1px; background: var(--lx-wine); transform: translateX(-50%); }
#wrap .lx-hd-ja { font-size: 1.2rem; letter-spacing: .3em; color: var(--lx-mute); }
.lx-hd--left { align-items: flex-start; text-align: left; }
.lx-hd--left .lx-hd-en::after { left: 0; transform: none; }
.lx-sec--navy .lx-hd-en { color: #fff !important; }
.lx-sec--navy .lx-hd-en::after { background: var(--lx-gold); }
.lx-sec--navy .lx-hd-ja { color: var(--lx-gold) !important; }

/* キャッチ（各セクションの日本語の見出し） */
#wrap .lx-catch {
  font-size: clamp(2.2rem, 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .08em;
  color: var(--lx-navy);
  text-align: center;
  text-wrap: balance;
}
.lx-catch--left { text-align: left !important; text-wrap: pretty; }
.lx-sec--navy .lx-catch { color: #fff !important; }
#wrap .lx-catch--rule { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--lx-wine); }
#wrap .lx-catch--dash { padding-bottom: 28px; margin-bottom: 28px; background: linear-gradient(var(--lx-wine), var(--lx-wine)) center bottom / 56px 1px no-repeat; }

/* 本文 */
.lx-body { display: flex; flex-direction: column; gap: 1.4em; }
#wrap .lx-body p { font-size: 1.6rem; line-height: 2.1; color: var(--lx-ink); }
#wrap .lx-body p.lx-em { font-weight: 700; color: var(--lx-navy); }
.lx-sec--navy .lx-body p { color: var(--lx-on-dark) !important; }
.lx-sec--navy .lx-body p.lx-em { color: #fff !important; }
.lx-center { text-align: center; }
.lx-center .lx-body { align-items: center; }
#wrap .lx-lead { font-size: 1.6rem; line-height: 2.1; text-align: center; color: var(--lx-ink); }

/* ---- ボタン ---- */
.lx-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.lx-btns--center { justify-content: center; }
.lx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: min(100%, 260px);
  min-height: 60px;
  padding: 0 24px 0 28px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background-color .3s var(--lx-ease), color .3s var(--lx-ease), transform .3s var(--lx-ease), box-shadow .3s var(--lx-ease);
}
.lx-btn::after { content: "\2192"; font-family: var(--lx-en); transition: transform .3s var(--lx-ease); }
.lx-btn:hover::after { transform: translateX(4px); }
#wrap .lx-sec .lx-btn--navy, #wrap .lx-btn--navy { background: var(--lx-navy); color: #fff; }
#wrap .lx-sec .lx-btn--navy:hover { background: var(--lx-navy-3); color: #fff; }
#wrap .lx-sec .lx-btn--wine, #wrap .lx-btn--wine { background: var(--lx-wine); color: #fff; }
#wrap .lx-sec .lx-btn--wine:hover { background: var(--lx-wine-2); color: #fff; }
/* 白い箱＋赤い丸の矢印 */
#wrap .lx-sec .lx-btn--white, #wrap .lx-btn--white { background: #fff; color: var(--lx-navy); box-shadow: var(--lx-shadow); border-radius: 4px; }
#wrap .lx-sec .lx-btn--white:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 27, 45, .14); }
.lx-btn--white::after, .lx-btn--line::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lx-wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7l4 4-4 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#wrap .lx-sec .lx-btn--line, #wrap .lx-btn--line { background: transparent; color: var(--lx-navy); border: 1px solid var(--lx-navy); }
#wrap .lx-sec .lx-btn--line:hover { background: var(--lx-navy); color: #fff; }
.lx-sec--navy .lx-btn--line { color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; }
.lx-btn:focus-visible, .lx-sec a:focus-visible { outline: 2px solid var(--lx-gold); outline-offset: 3px; }
/* 「詳しく見る」 */
.lx-more { display: inline-flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; color: var(--lx-navy); }
.lx-more::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lx-wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7l4 4-4 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform .3s var(--lx-ease);
}
.lx-more:hover::after { transform: translateX(4px); }

/* 大きな薄い英字（背景の飾り） */
.lx-water {
  position: absolute;
  z-index: 0;
  font-family: var(--lx-en);
  font-weight: 600;
  font-size: clamp(7rem, 11vw, 16rem);
  line-height: .9;
  letter-spacing: .02em;
  color: rgba(15, 27, 45, .045);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.lx-sec > .lx-in { z-index: 1; }

/* ==========================================================================
   6. トップページ
   ========================================================================== */

/* ---- メインビジュアル ---- */
.lx-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); overflow: hidden; background: linear-gradient(90deg, #fff 0, #fff 58%, var(--lx-gray) 58%); }
.lx-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.lx-hero-txt { display: flex; flex-direction: column; gap: 28px; }
#wrap .lx-hero-words { display: flex; flex-direction: column; gap: 2px; font-size: clamp(3.8rem, 5vw, 6.4rem); font-weight: 700; line-height: 1.32; letter-spacing: .12em; color: var(--lx-navy); }
#wrap .lx-hero-words span { display: block; }
#wrap .lx-hero-words span:last-child { color: var(--lx-wine); }
#wrap .lx-hero-sub { font-size: 1.5rem; line-height: 2.1; color: var(--lx-mute); }
#wrap #main .lx-sec .lx-hero-em, #wrap .lx-hero-em { font-size: clamp(1.6rem, 1.4vw, 1.8rem); font-weight: 700; line-height: 1.9; color: var(--lx-navy); padding-left: 16px; border-left: 3px solid var(--lx-wine); }
.lx-hero-txt .lx-btns { margin-top: 8px; }
.lx-hero-vis { position: relative; }
#wrap .lx-hero-vis > img, #wrap .lx-hero-vis > p > img { width: 100%; max-width: 560px; margin-inline: auto; animation: lx-float 7s ease-in-out infinite; }
/* 循環図：THINK / MAKE / DELIVER / MOVE がゆっくり回る（文字は常に正立） */
.lx-cycle { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1; }
.lx-cycle-orbit { position: absolute; inset: 0; animation: lx-spin 48s linear infinite; }
#wrap .lx-cycle img { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.lx-cycle p { margin: 0 !important; }
.lx-cycle-node { position: absolute; width: 21.94%; aspect-ratio: 1; animation: lx-spin-rev 48s linear infinite; }
.lx-cycle-node--t { left: 39.03%; top: 6.77%; }
.lx-cycle-node--r { left: 71.29%; top: 39.03%; }
.lx-cycle-node--b { left: 39.03%; top: 71.29%; }
.lx-cycle-node--l { left: 6.77%; top: 39.03%; }
#wrap .lx-cycle-node img { filter: drop-shadow(0 8px 16px rgba(15, 27, 45, .18)); }
#wrap .lx-cycle img.lx-cycle-center { position: absolute; left: 50%; top: 50%; width: 51.6%; transform: translate(-50%, -50%); pointer-events: none; }
.lx-cycle:hover .lx-cycle-orbit, .lx-cycle:hover .lx-cycle-node { animation-play-state: paused; }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@keyframes lx-spin-rev { to { transform: rotate(-360deg); } }
@media (max-width: 899px) { .lx-cycle { max-width: 340px; } }
@keyframes lx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* 読み込み時に1語ずつ表示 */
.lx-ready .lx-hero-words span { animation: lx-rise .9s var(--lx-ease) both; }
.lx-ready .lx-hero-words span:nth-of-type(2) { animation-delay: .15s; }
.lx-ready .lx-hero-words span:nth-of-type(3) { animation-delay: .3s; }
.lx-ready .lx-hero-words span:nth-of-type(4) { animation-delay: .45s; }
@keyframes lx-rise { from { opacity: .001; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .lx-hero { background: #fff; }
  .lx-hero-in { grid-template-columns: 1fr; }
  .lx-hero-vis { order: -1; }
  #wrap .lx-hero-vis > img, #wrap .lx-hero-vis > p > img { max-width: 340px; }
}

/* ---- イントロ（ワンストップ図） ---- */
.lx-intro-txt { margin-bottom: clamp(48px, 6vw, 80px); }
.lx-diagram { position: relative; padding: clamp(40px, 5vw, 72px) 0; }
.lx-diagram .lx-water { left: 0; top: 50%; transform: translateY(-50%); }
#wrap .lx-diagram img { position: relative; z-index: 1; width: 100%; max-width: 960px; margin-inline: auto; }
.lx-diagram-scroll { overflow-x: auto; }
.lx-sp-only { display: none !important; }
@media (max-width: 767px) {
  .lx-pc-only { display: none !important; }
  .lx-sp-only { display: block !important; }
  #wrap .lx-diagram .lx-sp-only img, #wrap .lx-diagram img.lx-sp-only { width: 100%; max-width: 420px; }
}

/* ---- 事業カード（枠付き＋赤い丸） ---- */
#wrap ul.lx-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
#wrap ul.lx-cards > li { flex: 0 1 calc((100% - 48px) / 3); display: flex; }
.lx-card { position: relative; width: 100%; padding: 12px; background: #fff; border-radius: 10px; box-shadow: var(--lx-shadow); }
.lx-card-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 48px 24px 28px;
  border: 2px solid var(--lx-navy);
  border-radius: 8px;
  text-align: center;
}
.lx-card-in::before { content: ""; position: absolute; top: -14px; left: 50%; width: 26px; height: 26px; border-radius: 50%; background: var(--lx-wine); transform: translateX(-50%); }
#wrap .lx-card-no { font-family: var(--lx-en); font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; color: var(--lx-wine); }
#wrap .lx-card-en { font-family: var(--lx-en); font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; color: var(--lx-navy); }
#wrap .lx-card-ic { width: 64px; height: 64px; }
#wrap .lx-card-ttl { font-size: 1.9rem; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--lx-navy); }
#wrap .lx-card-catch { font-size: 1.4rem; font-weight: 700; line-height: 1.8; color: var(--lx-wine); }
#wrap .lx-card-txt { width: 100%; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--lx-line); font-size: 1.4rem; line-height: 2; text-align: left; color: var(--lx-ink); }
.lx-card-in .lx-more { margin-top: auto; padding-top: 8px; }
@media (max-width: 1024px) { #wrap ul.lx-cards > li { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 599px) { #wrap ul.lx-cards > li { flex-basis: 100%; } }

/* ---- 課題チェックリスト ---- */
#wrap ul.lx-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; max-width: 960px; margin: 0 auto; }
#wrap ul.lx-checks > li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 20px 14px 60px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(15, 27, 45, .05);
  font-size: 1.5rem;
  line-height: 1.7;
}
#wrap ul.lx-checks > li::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lx-wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
  transform: translateY(-50%);
}
.lx-sec--gray ul.lx-checks > li, .lx-sec--panel ul.lx-checks > li { background: #fff; }
.lx-sec:not(.lx-sec--gray):not(.lx-sec--panel) ul.lx-checks > li { background: var(--lx-gray); box-shadow: none; }
@media (max-width: 767px) { #wrap ul.lx-checks { grid-template-columns: 1fr; } }
.lx-answer { max-width: 800px; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; }
.lx-answer .lx-catch { font-size: clamp(2rem, 2.1vw, 2.6rem); }

/* ---- 強み（つながる6つの工程） ---- */
.lx-strength { overflow: hidden; }
.lx-strength::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(194, 165, 107, .18) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(120deg, #000 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 55%);
}
#wrap ul.lx-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 32px; }
#wrap ul.lx-kinds > li { padding: 6px 18px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: 1.4rem; color: var(--lx-on-dark); }
#wrap ol.lx-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: clamp(48px, 5vw, 64px) 0 0; }
.lx-chain > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.lx-chain > li::after { content: ""; position: absolute; top: 44px; left: calc(50% + 52px); right: calc(-50% + 52px); height: 1px; background: repeating-linear-gradient(90deg, var(--lx-gold) 0 4px, transparent 4px 9px); }
.lx-chain > li:last-of-type::after { content: none; }
.lx-chain-ic { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #fff; }
#wrap .lx-chain-ic img { width: 44px; height: 44px; }
#wrap .lx-chain-en { font-family: var(--lx-en); font-size: 1.3rem; font-weight: 600; letter-spacing: .1em; color: var(--lx-gold); }
#wrap .lx-chain-ja { font-size: 1.4rem; color: #fff; }
.lx-chain > li:last-of-type .lx-chain-ic { background: var(--lx-wine); }
@media (max-width: 899px) {
  #wrap ol.lx-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .lx-chain > li:nth-of-type(3)::after { content: none; }
}
@media (max-width: 499px) {
  #wrap ol.lx-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-chain > li:nth-of-type(3)::after { content: ""; }
  .lx-chain > li:nth-of-type(2n)::after { content: none; }
}
.lx-strength-end { margin-top: clamp(48px, 5vw, 64px); text-align: center; }
#wrap .lx-strength-end .lx-catch { color: #fff; }

/* ---- ご相談から実行まで（5ステップ） ---- */
#wrap ol.lx-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: lx-step; }
#wrap .lx-sec .lx-steps > li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 20px 24px; background: #fff; border-top: 3px solid var(--lx-navy); box-shadow: var(--lx-shadow); }
.lx-steps > li:last-of-type { border-top-color: var(--lx-wine); }
#wrap .lx-step-no { font-family: var(--lx-en); font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--lx-wine); }
#wrap .lx-step-ttl { font-size: 1.7rem; font-weight: 700; line-height: 1.5; color: var(--lx-navy); }
#wrap .lx-step-txt { font-size: 1.35rem; line-height: 1.9; color: var(--lx-mute); }
.lx-steps > li:not(:last-of-type)::after { content: ""; position: absolute; top: 44px; right: -13px; z-index: 1; width: 10px; height: 10px; border-top: 2px solid var(--lx-wine); border-right: 2px solid var(--lx-wine); transform: rotate(45deg); }
@media (max-width: 1024px) {
  #wrap ol.lx-steps { grid-template-columns: 1fr; gap: 20px; max-width: 640px; margin-inline: auto; }
  #wrap .lx-sec .lx-steps > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
  .lx-step-no { grid-row: span 2; }
  .lx-steps > li:not(:last-of-type)::after { top: auto; bottom: -15px; right: auto; left: 50%; transform: rotate(135deg); }
}

/* ---- 写真＋文章（会社） ---- */
.lx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 88px); }
.lx-split--rev .lx-split-img { order: 2; }
.lx-split-img { aspect-ratio: 3 / 2; border-radius: 6px; box-shadow: var(--lx-shadow); }
.lx-split-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lx-split-txt .lx-hd { margin-bottom: 0; }
@media (max-width: 899px) { .lx-split { grid-template-columns: 1fr; } .lx-split--rev .lx-split-img { order: 0; } }

/* ---- 採用（大きな写真） ---- */
.lx-wide-img { aspect-ratio: 16 / 7; border-radius: 6px; margin-bottom: clamp(36px, 4vw, 56px); }
@media (max-width: 599px) { .lx-wide-img { aspect-ratio: 4 / 3; } }

/* ---- お問い合わせの帯（全ページ共通） ---- */
.lx-cta { padding: 0; background: linear-gradient(180deg, #fff 0, #fff 64px, var(--lx-wine) 64px); color: #fff; }
.lx-cta-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 48px; padding: 0 0 clamp(56px, 6vw, 80px); }
.lx-cta-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: calc(64px + clamp(48px, 5vw, 72px)); }
#wrap .lx-cta-label { font-family: var(--lx-en); font-size: 1.4rem; font-weight: 600; letter-spacing: .2em; color: var(--lx-gold); }
#wrap .lx-cta-ttl { font-size: clamp(2.2rem, 2.4vw, 3rem); font-weight: 700; line-height: 1.6; letter-spacing: .06em; color: #fff; }
#wrap .lx-cta-txt p.lx-cta-p { font-size: 1.5rem; line-height: 2; color: rgba(255, 255, 255, .88); }
#wrap .lx-cta-txt p.lx-cta-em { font-size: 1.5rem; font-weight: 700; line-height: 1.9; color: #fff; }
.lx-cta-img { aspect-ratio: 4 / 3; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
/* お問い合わせの写真は全ページ共通なので、CSSからも読み込む（遅延読み込みが動かなくても必ず表示） */
.lx-sec .lx-cta-img.lx-ph { background: url("img/photo-contact.jpg") center / cover no-repeat, var(--lx-wine-2); }
@media (max-width: 899px) {
  .lx-cta { background: var(--lx-wine); }
  .lx-cta-in { grid-template-columns: 1fr; gap: 32px; }
  .lx-cta-txt { padding-top: 64px; }
  .lx-cta-img { display: none; }
}

/* ==========================================================================
   7. 下層ページ
   ========================================================================== */

/* ---- ページタイトル（紺の帯＋白いアイコン） ---- */
.lx-ptl { display: flex; align-items: center; justify-content: center; min-height: clamp(240px, 26vw, 360px); padding: 56px 0; overflow: hidden; background: var(--lx-navy); color: #fff; text-align: center; }
.lx-ptl::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(194, 165, 107, .2) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 85% 50%, #000 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 85% 50%, #000 0%, transparent 60%);
}
.lx-ptl-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#wrap .lx-ptl-ic { width: 72px; height: 72px; margin-bottom: 6px; }
#wrap .lx-ptl-en { position: relative; padding-bottom: 18px; font-family: var(--lx-en); font-size: clamp(2.6rem, 3.4vw, 4.2rem); font-weight: 600; line-height: 1.25; letter-spacing: .14em; color: #fff; }
.lx-ptl-en::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 1px; background: var(--lx-gold); transform: translateX(-50%); }
#wrap .lx-ptl-ja { font-size: 1.4rem; font-weight: 500; letter-spacing: .2em; color: var(--lx-on-dark); }

/* ---- 導入（大きなキャッチ＋本文） ---- */
.lx-lede { display: flex; flex-direction: column; gap: 32px; }
.lx-lede .lx-catch { text-align: left; font-size: clamp(2.4rem, 2.8vw, 3.4rem); }
.lx-lede-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.lx-lede-img { aspect-ratio: 4 / 3; border-radius: 6px; box-shadow: var(--lx-shadow); }
@media (max-width: 899px) { .lx-lede-row { grid-template-columns: 1fr; } .lx-lede-img { order: -1; } }

/* ---- サービス一覧（番号付き） ---- */
#wrap ul.lx-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#wrap .lx-sec .lx-menu > li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 28px 32px; background: #fff; border-radius: 6px; box-shadow: var(--lx-shadow); }
.lx-menu > li::before { content: ""; position: absolute; left: 0; top: 28px; width: 3px; height: 28px; background: var(--lx-wine); }
#wrap .lx-menu-no { font-family: var(--lx-en); font-size: 1.2rem; font-weight: 600; letter-spacing: .14em; color: var(--lx-wine); }
#wrap .lx-menu-ttl { font-size: 1.8rem; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--lx-navy); }
#wrap .lx-menu-txt { font-size: 1.45rem; line-height: 1.95; color: var(--lx-ink); }
@media (max-width: 767px) { #wrap ul.lx-menu { grid-template-columns: 1fr; } #wrap .lx-sec .lx-menu > li { padding: 24px 22px 24px 26px; } }

/* ---- ポイント（紺の囲み） ---- */
.lx-point { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px 48px; padding: clamp(36px, 4vw, 56px); background: var(--lx-navy); border-radius: 8px; color: var(--lx-on-dark); }
#wrap .lx-point-label { font-family: var(--lx-en); font-size: 1.4rem; font-weight: 600; letter-spacing: .2em; color: var(--lx-gold); }
.lx-point-body { display: flex; flex-direction: column; gap: 20px; }
#wrap .lx-point .lx-catch { text-align: left; color: #fff; font-size: clamp(2rem, 2.1vw, 2.6rem); }
#wrap .lx-point .lx-body p { color: var(--lx-on-dark); }
@media (max-width: 767px) { .lx-point { grid-template-columns: 1fr; } }

/* ---- 強みページ（5つ） ---- */
#wrap ol.lx-strs { display: flex; flex-direction: column; gap: 24px; }
#wrap .lx-sec .lx-strs > li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px 48px; padding: clamp(32px, 4vw, 52px); background: #fff; border-radius: 8px; box-shadow: var(--lx-shadow); }
#wrap .lx-str-no { font-family: var(--lx-en); font-size: clamp(5.2rem, 6vw, 7.2rem); font-weight: 600; line-height: 1; color: var(--lx-wine); }
.lx-str-no::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 18px; background: var(--lx-gold); }
.lx-str-body { display: flex; flex-direction: column; gap: 20px; }
#wrap .lx-str-ttl { font-size: clamp(2.2rem, 2.3vw, 2.8rem); font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--lx-navy); }
@media (max-width: 767px) { #wrap .lx-sec .lx-strs > li { grid-template-columns: 1fr; } }

/* ---- 代表挨拶 ---- */
.lx-msg { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.lx-msg-side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 28px; }
.lx-msg-side .lx-hd { margin-bottom: 0; }
.lx-msg-img { aspect-ratio: 9 / 11; border-radius: 6px; }
#wrap #main .lx-sec .lx-sign, #wrap .lx-sign { margin-top: 24px; text-align: right; font-size: 1.5rem; line-height: 1.9; color: var(--lx-navy); }
#wrap .lx-sign b { display: block; font-size: 2rem; letter-spacing: .14em; }
@media (max-width: 899px) { .lx-msg { grid-template-columns: 1fr; } .lx-msg-side { position: static; } .lx-msg-img { max-width: 320px; } }

/* ---- MISSION / VISION ---- */
.lx-mv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: rgba(255, 255, 255, .14); }
.lx-mv > div { display: flex; flex-direction: column; gap: 20px; padding: clamp(32px, 4vw, 56px); background: var(--lx-navy); }
#wrap .lx-mv-label { font-family: var(--lx-en); font-size: 1.4rem; font-weight: 600; letter-spacing: .24em; color: var(--lx-gold); }
#wrap .lx-mv-ttl { font-size: clamp(2.4rem, 2.6vw, 3.2rem); font-weight: 700; line-height: 1.6; letter-spacing: .08em; color: #fff; }
@media (max-width: 899px) { .lx-mv { grid-template-columns: 1fr; } }

/* ---- 価値観カード（企業理念 VALUES／採用の大切にすること） ---- */
#wrap ul.lx-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
#wrap .lx-sec .lx-vals > li { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; background: #fff; border-radius: 8px; box-shadow: var(--lx-shadow); }
#wrap .lx-val-en { font-family: var(--lx-en); font-size: 1.3rem; font-weight: 600; letter-spacing: .16em; color: var(--lx-wine); }
#wrap .lx-val-ttl { font-size: 1.9rem; font-weight: 700; line-height: 1.5; color: var(--lx-navy); }
#wrap .lx-val-txt { font-size: 1.45rem; line-height: 1.95; color: var(--lx-ink); }

/* ---- 表（会社概要） ---- */
#wrap dl.lx-dl { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--lx-line); }
.lx-dl-row { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 6px 32px; padding: 22px 8px; border-bottom: 1px solid var(--lx-line); }
#wrap .lx-dl-row dt { margin: 0; font-weight: 700; color: var(--lx-navy); }
#wrap .lx-dl-row dd { margin: 0; line-height: 1.9; }
@media (max-width: 599px) { .lx-dl-row { grid-template-columns: 1fr; padding: 18px 0; } }

/* ---- 相談例・相談内容のタグ ---- */
#wrap ul.lx-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#wrap ul.lx-tags > li { padding: 10px 22px; background: #fff; border: 1px solid var(--lx-line); border-radius: 999px; font-size: 1.45rem; line-height: 1.6; color: var(--lx-navy); }
.lx-sec:not(.lx-sec--gray) ul.lx-tags > li { background: var(--lx-gray); border-color: transparent; }
#wrap ul.lx-tags--quote > li { font-weight: 500; }

/* ---- 囲み（募集について など） ---- */
.lx-box { max-width: 880px; margin: 0 auto; padding: clamp(32px, 4vw, 56px); background: #fff; border-top: 3px solid var(--lx-wine); border-radius: 0 0 8px 8px; box-shadow: var(--lx-shadow); text-align: center; }
.lx-box .lx-body { align-items: center; }

/* ---- 文章ページ（プライバシーポリシー） ---- */
.lx-doc { max-width: 880px; margin: 0 auto; }
#wrap .lx-doc h3.lx-topic { margin: 48px 0 16px; padding-left: 14px; border-left: 3px solid var(--lx-wine); font-size: 1.9rem; color: var(--lx-navy); }
#wrap .lx-doc h3.lx-topic:first-child { margin-top: 0; }
#wrap .lx-doc p, #wrap .lx-doc li { font-size: 1.5rem; line-height: 2.1; }
#wrap .lx-doc ul { margin: 8px 0 0 1.4em; list-style: disc; }

/* ==========================================================================
   7.5 SIRIUS2 が自動で出す「関連ページ」「一覧」をデザインに合わせる
   ・サムネイルの背景を紺にして、白いアイコンが見えるようにします
   ========================================================================== */
#entrylist, .categorylist { padding-block: clamp(56px, 6vw, 88px); }
.entrylist-title, .categorylist > .title { text-align: center; margin-bottom: 36px; background: none; }
.entrylist-title h3, .categorylist > .title span { font-family: var(--lx-en) !important; font-size: clamp(2.4rem, 2.6vw, 3.2rem) !important; font-weight: 600; letter-spacing: .04em; color: var(--lx-navy) !important; -webkit-text-fill-color: var(--lx-navy) !important; }
.entrylist-title h3::before, .entrylist-title h3::after { content: none !important; }
:is(#entrylist, .categorylist) .article-thumb { background: var(--lx-navy); border-radius: 6px; overflow: hidden; }
:is(#entrylist, .categorylist) .article-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
:is(#entrylist, .categorylist) .article-thumb img:is([src*="icon-"], [data-src*="icon-"]) { object-fit: contain; padding: 14% 0; }
:is(#entrylist, .categorylist) .article-thumb img:is([src*="dummy"], [data-src*="dummy"]) { opacity: 0; }
:is(#entrylist, .categorylist) .article-title a { color: var(--lx-navy); font-weight: 700; }
:is(#entrylist, .categorylist) .article-desc { color: var(--lx-mute); font-size: 1.3rem; }
:is(#entrylist, .categorylist) .article-more a { color: var(--lx-wine); }
.entrylist-title h3, .categorylist > .title { text-align: center !important; }
@media (max-width: 767px) { :is(#entrylist, .categorylist) .article-thumb img { aspect-ratio: 16 / 7; } }

/* ==========================================================================
   8. SIRIUS2 のフォーム
   ========================================================================== */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { border-radius: 4px; border-color: var(--lx-line); }
.form input[type="text"]:focus, .form input[type="email"]:focus, .form input[type="tel"]:focus, .form select:focus, .form textarea:focus { border-color: var(--lx-wine); outline: 1px solid var(--lx-wine); }
.form input[type="submit"] { background-color: var(--lx-wine); border-radius: 4px; box-shadow: none; padding-inline: 56px; letter-spacing: .16em; transition: background-color .3s var(--lx-ease); }
.form input[type="submit"]:hover { background-color: var(--lx-wine-2); }

/* ==========================================================================
   9. フッターのサイトマップ（フッターの自由記述欄に貼る場合）
   ========================================================================== */
.lx-fnav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 32px 64px;
  align-items: start;
  padding: 56px max(24px, calc((100% - 1080px) / 2)) 48px;
  text-align: left;
  color: var(--lx-on-dark);
  background: var(--lx-navy);
  box-shadow: 0 0 0 100vmax var(--lx-navy);   /* 背景だけを画面の端まで伸ばす */
  clip-path: inset(0 -100vmax);
}
/* フッター以外の自由記述欄（サイドメニュー欄など）に貼った場合も、枠や余白を消して紺の帯にする */
:is(.freespace, .space-box, .menubox, .space-body):has(.lx-fnav) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#menu:has(.lx-fnav) { padding: 0 !important; margin: 0 !important; }
#menu:has(.lx-fnav) + #footer, #menu:has(.lx-fnav) ~ #footer { margin-top: 0 !important; }
#wrap .lx-fnav p { margin: 0; text-indent: 0; }
#wrap .lx-fnav img { display: block; max-width: none; }
.lx-fnav p:not([class]) { display: none !important; }
#wrap .lx-fnav a { color: #fff; text-decoration: none; transition: color .3s var(--lx-ease); }
#wrap .lx-fnav a:hover { color: var(--lx-gold); }
#wrap .lx-fnav img { width: 220px; height: auto; }
#wrap .lx-fnav-addr { margin-top: 16px; font-size: 1.3rem; line-height: 2; color: var(--lx-on-dark); }
#wrap .lx-fnav ul { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
#wrap .lx-fnav ul + ul { padding-left: 48px; border-left: 1px solid rgba(255, 255, 255, .16); }
#wrap .lx-fnav li { position: relative; padding-left: 20px; font-family: var(--lx-en); font-size: 1.4rem; font-weight: 500; }
#wrap .lx-fnav li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border: 2px solid var(--lx-wine); border-radius: 50%; }
#wrap .lx-fnav li small { display: block; font-family: var(--lx-ja); font-size: 1.1rem; font-weight: 400; color: var(--lx-on-dark); opacity: .7; }
@media (max-width: 767px) {
  .lx-fnav { grid-template-columns: 1fr 1fr; }
  .lx-fnav > :first-child { grid-column: 1 / -1; }
  #wrap .lx-fnav ul + ul { padding-left: 16px; }
}

/* ==========================================================================
   10. スクロールでふわっと表示（JSを入れたときだけ）
   ========================================================================== */
.lx-js .lx-fade { opacity: .001; transform: translateY(24px); transition: opacity 1s var(--lx-ease), transform 1s var(--lx-ease); }
.lx-js .lx-fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lx-js .lx-fade { opacity: 1; transform: none; transition: none; }
  #wrap .lx-hero-vis img, .lx-ready .lx-hero-words span, .lx-cycle-orbit, .lx-cycle-node { animation: none; }
}
@media (max-width: 767px) {
  :root { --lx-pad: 64px; }
  .lx-btn { min-width: 100%; }
  .lx-sec--panel, .lx-sec--panel-r { background: var(--lx-gray); }
}

/* ==========================================================================
   ここから下：もともとの「ユーザー指定スタイル」（残しています）
   ========================================================================== */
.skew-btn-black { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 36px; background-color: #222222; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); overflow: hidden; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.skew-btn-black span { position: relative; z-index: 2; }
.skew-btn-black::before { content: ""; position: absolute; top: 0; left: -80%; z-index: 1; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: skewX(-20deg); transition: left 0.55s ease; }
.skew-btn-black:hover { background-color: #000000; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); }
.skew-btn-black:hover::before { left: 120%; }
.skew-btn-yellow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 36px; background-color: #FFEF6C; color: #222222; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); overflow: hidden; transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.skew-btn-yellow span { position: relative; z-index: 2; }
.skew-btn-yellow::before { content: ""; position: absolute; top: 0; left: -80%; z-index: 1; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.55s ease; }
.skew-btn-yellow:hover { background-color: #FFE94A; color: #222222; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(255, 239, 108, 0.35); }
.skew-btn-yellow:hover::before { left: 120%; }
.recruit-card, .recruit-card * { box-sizing: border-box; }
.recruit-card { position: relative; display: block; width: 100%; max-width: 1000px; height: 500px; margin: 0 auto; overflow: hidden; background: #000; color: #fff; text-decoration: none; }
.recruit-card__image { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1); transition: transform 0.75s ease; }
.recruit-card:hover .recruit-card__image { transform: scale(1.08); }
.recruit-card__overlay { position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); pointer-events: none; }
.recruit-card__content { position: absolute; top: 50%; left: 50%; z-index: 3; display: block; width: 90%; max-width: 760px; text-align: center; color: #fff; transform: translate(-50%, -50%); }
.recruit-card__title { display: block; margin: 0 0 16px 0; padding: 0; font-size: 42px; line-height: 1.15; font-weight: 700; letter-spacing: 0.04em; color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.65); }
.recruit-card__text { display: block; margin: 0; padding: 0; font-size: 15px; line-height: 1.8; font-weight: 700; color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.75); }
@media screen and (max-width: 768px) { .recruit-card { height: 320px; } .recruit-card__title { font-size: 32px; margin-bottom: 12px; } .recruit-card__text { font-size: 13px; line-height: 1.7; } }

/* 余白の調整用 */
.lx-mb-l { margin-bottom: 48px !important; }
.lx-mb-m { margin-bottom: 32px !important; }
.lx-my-m { margin-block: 28px !important; }
.lx-mx-auto { margin-inline: auto !important; }
.lx-gap-intro { margin: 24px auto 56px !important; }
.lx-sec--formhd { padding-bottom: 24px; }