@charset "utf-8";
/* ============================================================
   採用：職場環境（recruitlp/culture）
   本番テーマ lastcompass220713 のCSSより後に読み込むこと。
   画像は ../../images/restyle/ に配置。
   自動生成: build_dist.py — プレビューの適用順をそのまま保持。
   ============================================================ */

/* ---------- lcRestyle ---------- */
/* ============================================================
   SKIN A — ネイビー×ゴールド（リデザイン確定テーマ準拠）
   構成・HTMLは一切変更せず、CSS上書きのみで実現
   ============================================================ */

/* ---- ベース ---- */
body:not(:has(.box-header-02.recruit)){
  font-family:"Noto Sans JP","Inter",-apple-system,sans-serif !important;
  color:#a9b8d0 !important;
  background:
    radial-gradient(1300px 640px at 50% -8%, rgba(96,158,196,.28), transparent 60%),
    radial-gradient(1000px 560px at 90% 30%, rgba(38,96,128,.22), transparent 55%),
    linear-gradient(180deg,#12283f 0%,#0d1e33 40%,#0a1526 100%) !important;
  background-attachment:fixed !important;
}
body:not(:has(.box-header-02.recruit)) main, body:not(:has(.box-header-02.recruit)) main section, .section-home, .articleSlide,
.box-slide-09, .top_seminarList, .top_trainingList{ background:transparent !important; }
html:not(:has(.box-header-02.recruit)){ background:#0a1526 !important; }
body:not(:has(.box-header-02.recruit)) main p, body:not(:has(.box-header-02.recruit)) main li{ color:#a9b8d0; }

/* ---- ヘッダー ---- */
.header-wrap{
  background:rgba(10,21,38,.72) !important;
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:none !important;
}
.box-header-02:not(.recruit) .header-nav a{ color:#cfd8e4 !important; font-family:"Open Sans","Noto Sans JP",sans-serif !important; transition:color .2s, box-shadow .2s; }
.box-header-02:not(.recruit) .header-nav a span{ color:#8a97ab !important; transition:color .2s; }

/* ナビホバー：テーマの「白背景＋紺文字」を廃止し、ゴールド文字＋金の下線に */
.box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li > a:hover{
  background:transparent !important;
  color:#d8b877 !important;
  box-shadow:inset 0 -2px 0 #d8b877;
}
/* 日本語サブラベルは::after(content:attr)で描画されている */
.box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li > a::after{ transition:color .2s; }
.box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li > a:hover::after{
  color:rgba(216,184,119,.65) !important;
}

/* ドロップダウン：白パネルをやめてダークガラス＋金の天板ラインに */
.box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li .nav-child{
  border-top:2px solid #d8b877;
  box-shadow:0 18px 40px rgba(5,12,25,.5);
}
.box-header-02 .header-wrap .header-inner .header-nav ul.nav-inner > li .nav-child > li{
  background:rgba(8,16,30,.96) !important;
}
.box-header-02 .header-nav ul.nav-inner .nav-child a{
  color:#cfd8e4 !important;
  padding:11px 18px !important;
  line-height:1.5 !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.box-header-02 .header-nav ul.nav-inner .nav-child a:hover{
  color:#d8b877 !important;
  background:rgba(216,184,119,.08) !important;
  box-shadow:none;
}
/* ドロップダウン項目の横に付く商品名（data-sub由来の::after）：
   テーマが濃紺文字にするためダークパネルで消える → シャンパンで表示 */
.box-header-02 .header-nav .nav-child a::after,
.box-header-02 .header-nav .lc_spNav_inner a::after{
  color:rgba(216,184,119,.68) !important;
}
.box-header-02 .header-nav .nav-child a:hover::after{
  color:#d8b877 !important;
}

/* 集客改善（ProMo）のメニュー項目を非表示（ヘッダーDD・フッター・SPナビ）
   ※本番ではWPメニュー管理から削除するのが正道。それまでのCSS対応 */
.header-nav li:has(> a[href*="/promo"]),
footer li:has(> a[href*="/promo"]),
.footer-wrap li:has(> a[href*="/promo"]),
.lc_spNav_inner li:has(> a[href*="/promo"]){
  display:none !important;
}
.header-logo, .header-logo a{ color:#fff !important; }
/* COMPASS PORT：丸型をやめ、金縁のシャープな矩形に */
.header-btn .btn-inner{
  background:transparent !important;
  border:1px solid rgba(216,184,119,.65) !important;
  border-radius:0 !important;
  color:#d8b877 !important;
  font-family:"Cinzel",serif !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  transition:background .2s, border-color .2s;
}
.header-btn .btn-inner span{ color:#d8b877 !important; transition:color .2s, text-shadow .2s; }
/* ホバー挙動は restyle-hbtn-*.css 側で定義する（金ワッシュ背景は金文字と同化するため廃止） */

/* ---- セクション見出し（EN大＋JP小） ---- */
h2.unit-title-08{
  font-family:"Cinzel",serif !important;
  color:#d8b877 !important;
  letter-spacing:.24em !important;
  font-weight:600 !important;
}
h2.unit-title-08 span{
  font-family:"Noto Serif JP",serif !important;
  color:#fff !important;
  letter-spacing:.18em !important;
}
/* このテーマはJPサブタイトルを ::after(content) で描画している */
h2.unit-title-08::after, p.unit-title-08::after{
  background:transparent !important;
  color:#a9b8d0 !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.22em !important;
  font-weight:500 !important;
}
.unit-title-08 span::after{ background:#B8945A !important; }
p.unit-title-08{
  font-family:"Cinzel",serif !important;
  color:#d8b877 !important;
  letter-spacing:.24em !important;
}
p.unit-title-08 span{ font-family:"Noto Serif JP",serif !important; color:#fff !important; }

/* ---- ヒーロー ---- */
.slide-txt .txt-main, .slide-txt h2{
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.06em !important;
  text-shadow:0 2px 24px rgba(5,12,25,.6);
}
.slide-txt .txt-sub{ letter-spacing:.14em !important; }

/* MISSIONスライドにも経営改善資料スライドと同じコンパス透かし（白の極薄） */
.slide-txt:not(.contactSlide)::before{
  content:"";
  position:absolute;
  left:50%; top:46%;
  transform:translate(-50%,-50%);
  width:560px; height:560px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='0.5'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='14'/%3E%3Cpath d='M24 1v8M24 39v8M1 24h8M39 24h8'/%3E%3Cpolygon points='24,7 26.6,24 24,41 21.4,24' fill='%23ffffff' stroke='none'/%3E%3Cpolygon points='7,24 24,21.4 41,24 24,26.6' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.08;
  pointer-events:none;
  z-index:-1;
}
@media screen and (max-width:768px){
  .slide-txt:not(.contactSlide)::before{ width:340px; height:340px; }
}

/* MISSIONラベル：大きな見出しをやめ、反対スライドのキッカー
   (LIMITED TIME DOCUMENTS)と同格の小さな金の英字ラベルに */
.slide-txt:not(.contactSlide) .txt-sub{
  font-family:"Cinzel",serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.46em !important;
  text-indent:.46em;
  color:rgba(216,184,119,.9) !important;
  margin-bottom:18px !important;
}
@media screen and (max-width:768px){
  .slide-txt:not(.contactSlide) .txt-sub{
    font-size:10px !important;
    letter-spacing:.24em !important;
    text-indent:.24em;
    margin-bottom:12px !important;
  }
}

/* MISSIONスライドのキャッチ
   PC：テーマ標準サイズ(35px)の1行のまま。
   モバイルのみ「成果に直結する／コンサルティングの提供」の2行に分割
   （テーマHTMLが1行のためCSSで置換。スローガン文言変更時はここも更新） */
@media screen and (max-width:768px){
  .slide-list .slide-txt:not(.contactSlide) .txt-main{
    font-size:0 !important;
    line-height:0 !important;
  }
  .slide-list .slide-txt:not(.contactSlide) .txt-main::before{
    content:"成果に直結する\Aコンサルティングの提供";
    white-space:pre;
    display:block;
    font-family:"Noto Serif JP",serif;
    font-size:2.1rem;
    font-weight:600;
    line-height:1.55;
    letter-spacing:.06em;
    color:#fff;
    text-shadow:0 2px 24px rgba(5,12,25,.6);
  }
}

/* ---- 海背景の連続アニメーション ----
   テーマは各スライドの .slide-bg に scaleZoom(4s,1回) を掛け直すため
   切替のたびにリセットされる。両スライドとも同じ画像(slide_bg_09.jpg)なので、
   背景を切り替わらない親(.box-mainvisual-02)の::beforeに1枚だけ敷き、
   無限ループ(往復)でゆっくり漂わせる。テキストのみがクロスフェードする。 */
.box-mainvisual-02{ position:relative; overflow:hidden; }
.box-mainvisual-02::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url(https://lastcompass.co.jp/wp-content/themes/lastcompass220713/images/top/slide_bg_09.jpg) center/cover no-repeat;
  animation:lcOceanDrift 14s ease-in-out infinite alternate;
  will-change:transform;
}
.box-mainvisual-02::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(10,21,38,.25), rgba(10,21,38,.55));
  pointer-events:none;
}
.box-mainvisual-02 .mainvisual-slide{ position:relative; z-index:1; }
.box-mainvisual-02 .mainvisual-slide .slide-list .slide-bg{
  opacity:0 !important;
  animation:none !important;
}
@keyframes lcOceanDrift{
  0%{ transform:scale(1.03) translate(0,0); }
  100%{ transform:scale(1.22) translate(-2.6%,1.8%); }
}
@media (prefers-reduced-motion:reduce){
  .box-mainvisual-02::before{ animation:none; }
}
/* 「経営改善資料」の色はヒーロー案(restyle-hero-*.css)側で定義する */

/* ヒーローCTA「期間限定資料を受け取る」：1行のシャープなゴールドボタンに */
.slide-list .contactSlide .txt-sub{ max-width:none !important; }
.slide-list .contactSlide .txt-sub a{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  white-space:nowrap !important;
  width:auto !important;
  background:linear-gradient(135deg,#ecd8a4,#d8b877 45%,#b8945a) !important;
  color:#16233b !important;
  font-family:"Noto Sans JP",sans-serif !important;
  font-size:1.7rem !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  padding:19px 54px 19px 58px !important;
  border-radius:2px !important;
  outline:1px solid rgba(255,255,255,.45);
  outline-offset:-5px;
  box-shadow:0 0 0 1px rgba(216,184,119,.5), 0 14px 36px rgba(184,148,90,.35);
  transition:transform .2s, box-shadow .2s;
}
.slide-list .contactSlide .txt-sub a::before{ display:none !important; } /* 旧グラフアイコンを撤去 */
.slide-list .contactSlide .txt-sub a::after{
  content:"→"; margin-left:16px; font-weight:700; transition:transform .2s;
}
.slide-list .contactSlide .txt-sub a:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(216,184,119,.7), 0 18px 44px rgba(184,148,90,.45);
}
.slide-list .contactSlide .txt-sub a:hover::after{ transform:translateX(4px); }

/* SPメニュー（ヒーロー境界）とSEMINAR見出しの間隔：モバイルで詰める */
@media screen and (max-width:768px){
  .top_seminarList, .top_trainingList{ padding-top:26px !important; }
  /* モバイルはSEMINAR/TRAINING帯の透過をやめ、下の紺色で塗りつぶす */
  .articleSlide, .top_seminarList, .top_trainingList{
    background:#0c1a2e !important;
  }
}

/* ---- スライダーの上下ぐらつき解消：slickのadaptiveHeightが
   スライドごとに高さをアニメーションさせるため、高さを最大スライドに固定 ---- */
.article_sliderList .slick-list{ height:auto !important; }

/* ---- セミナー・研修カード：サムネを一回り小さく、余白で整える ---- */
.article_sliderList .slick-slide{ padding:0 18px !important; box-sizing:border-box; }
.article-figure img, .linkImg img{
  border-radius:0 !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(5,12,25,.45);
  transition:transform .25s, box-shadow .25s;
}
.linkImg:hover img{ transform:translateY(-4px); box-shadow:0 0 0 2px rgba(216,184,119,.4), 0 16px 38px rgba(5,12,25,.55); }
.seminarDate{
  color:#B8945A !important; font-weight:700 !important;
  font-family:"Inter","Noto Sans JP",sans-serif !important;
  font-size:13px !important; letter-spacing:.08em !important;
  margin-top:14px !important;
}
.seminarTtl{
  color:#eaf1fb !important;
  font-size:14px !important;
  line-height:1.75 !important;
  font-weight:500 !important;
}

/* ---- READ MORE ボタン ---- */
.unit-readmore-01 a{
  font-family:"Cinzel",serif !important;
  color:#d8b877 !important;
  border:1px solid rgba(216,184,119,.5) !important;
  border-radius:0 !important;
  background:transparent !important;
  letter-spacing:.24em !important;
  display:block !important;
  max-width:280px !important;
  margin:0 auto !important;
  text-align:center !important;
  padding:13px 0 !important;
  transition:background .2s, border-color .2s;
}
.unit-readmore-01 a:hover{ background:rgba(216,184,119,.12) !important; border-color:#d8b877 !important; }

/* ---- サービスロゴ帯（SERVICEバンド） ---- */
.pc_subMenu{
  background:rgba(8,16,30,.74) !important;
  backdrop-filter:blur(12px) saturate(140%);
  border-top:1px solid rgba(216,184,119,.3);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* 見出し・タイルの意匠は restyle-svc-*.css（3案）側で定義する */
.topPc_slide .slick-slide{ padding:0 8px !important; box-sizing:border-box; }
/* 送りボタン（矢印）をゴールドに */
.pc_subMenu .slick-arrow{ color:#d8b877 !important; opacity:.85; transition:opacity .2s; }
.pc_subMenu .slick-arrow:hover{ opacity:1; }
.pc_subMenu .slick-arrow > *::before{ border-color:#d8b877 !important; }

/* ---- フッター ---- */
footer:not(.recruit) .footer-wrap, footer:not(.recruit){
  background:rgba(10,21,38,.65) !important;
  border-top:1px solid rgba(255,255,255,.1);
  color:#8a97ab !important;
}
footer:not(.recruit) a{ color:#a9b8d0 !important; }
footer:not(.recruit) a:hover{ color:#fff !important; }
.footer-copyright{ color:#6f829e !important; background:transparent !important; }

/* ---- 汎用ボタン・リンク（シャープ基調で統一） ---- */
a.btn, .box-link-01 a, input[type=submit]{
  background:linear-gradient(135deg,#ecd8a4,#d8b877 45%,#b8945a) !important;
  color:#16233b !important;
  border-radius:2px !important;
  border:0 !important;
  font-weight:700 !important;
}

/* ---- 固定CV（スマホ・PC共通の帯） ---- */
.unit-fix-07:not(.recruit) .fix-inner{
  background-color:#B8945A !important;
  color:#16233b !important;
  border-radius:0;
}
.unit-fix-07:not(.recruit) .fix-inner span{ color:#16233b !important; }

/* ============================================================
   HERO 案3 — シャンパングラデーション × コンパス透かし
   金を「白→シャンパンゴールド」の上品なグラデーションに抑え、
   背後にブランドシンボルのコンパスをうっすら透かす。ラグジュアリー路線。
   ============================================================ */
.contactSlide .txt-main{ color:#fff !important; letter-spacing:.08em !important; }
.contactSlide .txt-main span{
  background:linear-gradient(180deg,#ffffff 12%,#ECD8A4 58%,#B8945A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#ECD8A4 !important;
  text-shadow:none !important;
  filter:drop-shadow(0 4px 20px rgba(184,148,90,.35));
}
.contactSlide .txt-main::before{
  content:"LIMITED TIME DOCUMENTS";
  display:block;
  font-family:"Cinzel",serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.44em;
  text-indent:.44em;
  color:rgba(216,184,119,.9);
  margin-bottom:24px;
}
/* コンパスの透かし（ブランドシンボル） */
.slide-txt.contactSlide::before{
  content:"";
  position:absolute;
  left:50%; top:46%;
  transform:translate(-50%,-50%);
  width:560px; height:560px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d8b877' stroke-width='0.5'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='14'/%3E%3Cpath d='M24 1v8M24 39v8M1 24h8M39 24h8'/%3E%3Cpolygon points='24,7 26.6,24 24,41 21.4,24' fill='%23d8b877' stroke='none'/%3E%3Cpolygon points='7,24 24,21.4 41,24 24,26.6' fill='%23d8b877' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.13;
  pointer-events:none;
  z-index:-1;
}
@media screen and (max-width:768px){
  .slide-txt.contactSlide::before{ width:340px; height:340px; }
  /* キッカー英字：モバイルでは字間を絞って1行に収める */
  .contactSlide .txt-main::before{
    font-size:10px !important;
    letter-spacing:.22em !important;
    text-indent:.22em !important;
    margin-bottom:16px !important;
  }
}

/* ============================================================
   HERO 案3-C — アウトライン・ミニマル「文字を邪魔しない」
   CTAを金縁アウトライン＋薄いガラス風に格下げし、
   シャンパン文字のタイトルを完全な主役にする。ホバーで金に反転。
   COMPASS PORTと同じ"金縁フレーム"言語で統一感が出る。
   ============================================================ */
.slide-list .contactSlide .txt-main{ margin-bottom:46px !important; }
.slide-list .contactSlide .txt-main span{ font-size:5.4rem !important; }
.slide-list .contactSlide .txt-sub a{
  background:rgba(10,21,38,.28) !important;
  border:1px solid rgba(216,184,119,.75) !important;
  color:#ECD8A4 !important;
  outline:none !important;
  box-shadow:none !important;
  backdrop-filter:blur(5px);
  font-size:1.5rem !important;
  padding:16px 52px !important;
  letter-spacing:.22em !important;
  border-radius:0 !important;
  transition:background .25s, color .25s, transform .2s;
}
.slide-list .contactSlide .txt-sub a:hover{
  background:linear-gradient(135deg,#ecd8a4,#d8b877 45%,#b8945a) !important;
  color:#16233b !important;
  transform:translateY(-2px);
}
@media screen and (max-width:768px){
  .slide-list .contactSlide .txt-main span{ font-size:3.2rem !important; }
  .slide-list .contactSlide .txt-sub a{ font-size:1.3rem !important; padding:13px 34px !important; }
}

/* ============================================================
   3-C バランス案3 — 黄金比スケール
   タイトルをわずかに落とし(5rem)、CTA幅をタイトル幅の約62%に。
   「大きな文字 × 小さめの品のいいボタン」の古典的プロポーション。
   ============================================================ */
.contactSlide .txt-main::before{ margin-bottom:20px !important; }
/* 2行の横幅を常に一致させるロックアップ：
   「ラストコンパスの」8字×字間.1em ＝「経営改善資料」6字×字間.06em
   → 2行目のサイズは1行目の約1.36倍（実測補正済み）（em指定なので全画面幅で比率維持） */
.slide-list .contactSlide .txt-main{
  margin-bottom:28px !important;
  font-size:3.6rem !important;
  letter-spacing:.1em !important;
  line-height:1.35 !important;
}
.slide-list .contactSlide .txt-main span{
  font-size:1.362em !important;
  letter-spacing:.06em !important;
}
.slide-list .contactSlide .txt-sub a{
  width:264px !important;
  min-width:0 !important;
  justify-content:center !important;
  font-size:1.35rem !important;
  padding:13px 0 !important;
  letter-spacing:.12em !important;
}
@media screen and (max-width:768px){
  .slide-list .contactSlide .txt-main{
    margin-bottom:20px !important;
    font-size:2.17rem !important;
  }
  .slide-list .contactSlide .txt-main span{ font-size:1.362em !important; }
  .slide-list .contactSlide .txt-sub a{
    width:auto !important;
    font-size:1.25rem !important;
    padding:9px 18px !important;
    letter-spacing:.06em !important;
  }
}

/* ============================================================
   ゴールド削減 案2改 — 白主体＋白透かし（確定版）
   タイトルは純白、キッカーは青灰、コンパス透かしは白の極薄ライン。
   金が残るのはCTAの枠と文字だけ＝「金＝押す場所」が明確。
   ============================================================ */
.contactSlide .txt-main::before{ color:#93a5bd !important; }
.contactSlide .txt-main span{
  background:none !important;
  -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
  filter:none !important;
  text-shadow:0 2px 26px rgba(5,12,25,.65) !important;
}
/* コンパス透かし：白の極薄ライン */
.slide-txt.contactSlide::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='0.5'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='14'/%3E%3Cpath d='M24 1v8M24 39v8M1 24h8M39 24h8'/%3E%3Cpolygon points='24,7 26.6,24 24,41 21.4,24' fill='%23ffffff' stroke='none'/%3E%3Cpolygon points='7,24 24,21.4 41,24 24,26.6' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E") !important;
  opacity:.08 !important;
}

/* ============================================================
   ヘッダーボタン 案3 — 金グロー（確定版）
   ホバーで枠が満金になり、文字は白ではなく
   「明るいシャンパンゴールド」に増光して金のハローを放つ。
   背面にごく薄いダークガラスを敷いて発光を際立たせる。
   ============================================================ */
.header-btn .btn-inner:hover{
  background:rgba(8,16,30,.55) !important;
  border-color:#e2c88c !important;
  box-shadow:0 0 18px rgba(216,184,119,.55), inset 0 0 12px rgba(216,184,119,.15);
}
.header-btn .btn-inner:hover span{
  color:#f3e3b3 !important;
  text-shadow:0 0 10px rgba(216,184,119,.9), 0 0 22px rgba(216,184,119,.5);
}

/* ============================================================
   SERVICE帯 案3 — ゴールド額装・シャープ
   見出しはCinzelゴールド＋和文もシャンパンで揃える。
   タイルは金の細枠×角丸なしの「額装」。COMPASS PORTボタンや
   ヒーローCTAと同じ金縁言語で、ページ全体のシャープ基調に揃う。
   ============================================================ */
/* 見出しはSEMINAR等の他セクションと同一仕様（白のNoto明朝＋青灰サブ） */
.pc_subMenu .unit-title-08, .pc_subMenu .unit-title-08 span{
  font-family:"Noto Serif JP",serif !important;
  color:#fff !important;
  letter-spacing:.18em !important;
  font-weight:500 !important;
}
.pc_subMenu .unit-title-08::after{
  background:transparent !important;
  color:#a9b8d0 !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.24em !important;
  font-weight:500 !important;
}
.topPc_slide a{
  display:block;
  border:1px solid rgba(216,184,119,.5) !important;
  border-radius:3px !important;
  background:#fff !important;
  box-shadow:0 10px 26px rgba(5,12,25,.4) !important;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.topPc_slide a img{ border-radius:2px; display:block; }
.topPc_slide a:hover{
  transform:translateY(-3px);
  border-color:#d8b877 !important;
  box-shadow:0 0 18px rgba(216,184,119,.35), 0 14px 32px rgba(5,12,25,.55) !important;
}

/* ============================================================
   SPメニュー 案3・配色3 — シャンパンガラス
   タイルの中に金をごく薄く溶かし込み、枠と文字を明るいシャンパンに。
   3パターン中もっともリッチで、ヒーローの金グローと調和する。
   ============================================================ */
.sp_subMenu{ padding:10px 10px 12px; }
.sp_subMenu .menuList{
  border-top:0 !important;
  display:flex; flex-wrap:wrap;
  gap:6px;
}
.sp_subMenu .menuList li,
.sp_subMenu .menuList li:nth-child(n){
  background:linear-gradient(160deg, rgba(216,184,119,.16), rgba(8,16,30,.82) 55%) !important;
  width:calc((100% - 12px)/3) !important;
  border:1px solid rgba(236,216,164,.6) !important;
  border-radius:0;
  backdrop-filter:blur(8px);
}
.sp_subMenu .menuList li a{
  color:#fff !important;
  font-family:"Cinzel","Open Sans",serif !important;
  letter-spacing:.1em;
  font-size:1.25rem !important;
  padding:1.4em .3em !important;
  text-shadow:0 0 12px rgba(216,184,119,.3);
}
.sp_subMenu .menuList li a::after{
  color:rgba(236,216,164,.65) !important;
  font-family:"Noto Sans JP",sans-serif !important;
  letter-spacing:.02em;
  font-size:.95rem !important;
  text-shadow:none;
}
.sp_subMenu .menuList li a:active{ background:rgba(216,184,119,.28) !important; }

/* ============================================================
   フッターCVバー 案3 — フローティングゴールド
   画面下に浮かせた独立ボタン（左右に余白＋影）。
   バー型よりアプリ的で、コンテンツの視認を妨げない。
   ※本番反映時はリンク先(tel:)を資料ページURLへ変更が必要。採用LP(.recruit)のENTRYバーは対象外
   ============================================================ */
.unit-fix-07:not(.recruit){
  left:14px !important;
  right:14px !important;
  bottom:14px !important;
  width:auto !important;
}
/* 下層ページはバー内に複数リンク（セミナー/資料請求/電話）があるため、
   資料請求(fix-inquery)だけを残してCTA化する。TOPは電話のみ→そのまま置換 */
.unit-fix-07:has(.fix-inquery) .fix-inner:not(.fix-inquery){ display:none !important; }
.unit-fix-07:not(.recruit) .fix-inner .fix-main,
.unit-fix-07:not(.recruit) .fix-inner .fix-sub{ display:none !important; }
.unit-fix-07:not(.recruit) .fix-inner{
  background:linear-gradient(135deg,#ecd8a4,#d8b877 45%,#b8945a) !important;
  display:flex !important;
  align-items:center; justify-content:center; gap:9px;
  padding:15px 10px !important;
  border-radius:2px !important;
  box-shadow:0 5px 14px rgba(5,12,25,.28), inset 0 0 0 1px rgba(255,255,255,.35);
}
.unit-fix-07:not(.recruit) .fix-inner::before{
  content:"期間限定資料を確認する";
  font-family:"Noto Sans JP",sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.12em;
  color:#16233b;
  line-height:1;
}
.unit-fix-07:not(.recruit) .fix-inner::after{
  content:"→";
  font-weight:700;
  color:#16233b;
  line-height:1;
}

/* 携帯版ヒーローCTA サイズ案1 — コンパクト（最小・上品） */
@media screen and (max-width:768px){
  .slide-list .contactSlide .txt-sub a{
    font-size:1.15rem !important;
    padding:8px 14px !important;
    letter-spacing:.05em !important;
  }
}

/* ============================================================
   下層ページ共通の適応（A案ネイビー×ゴールド）
   トップ用スキンは header/footer/ボタン等の共通部を担うため、
   ここでは下層特有の「白背景前提の本文・見出し・パネル」を
   ダークテーマへ適応させる。
   ============================================================ */

/* ---- ページ見出し（h1.unit-title-08）：h2と同じ白明朝＋青灰サブに統一 ---- */
h1.unit-title-08, h1.unit-title-08 span{
  color:#fff !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.18em !important;
  font-weight:500 !important;
}
h1.unit-title-08::after{
  background:transparent !important;
  color:#a9b8d0 !important;
  font-family:"Noto Serif JP",serif !important;
  letter-spacing:.24em !important;
}

/* ---- 本文テキスト：紺文字前提のものを明色に ---- */
body:not(:has(.box-header-02.recruit)) main p, body:not(:has(.box-header-02.recruit)) main li, body:not(:has(.box-header-02.recruit)) main dd{ color:#c6d2e2; }
body:not(:has(.box-header-02.recruit)) main h3{ color:#fff; }
.read-more .container p, .mv-read-more .container p{
  color:#eaf1fb !important;
  text-shadow:0 1px 12px rgba(5,12,25,.4);
}

/* ---- 下層ヒーロー（box-mainvisual-01）：ネイビーのオーバーレイ ---- */
.box-mainvisual-01{ position:relative; }
.box-mainvisual-01::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,21,38,.82) 0%,
    rgba(10,21,38,.55) 32%,
    rgba(10,21,38,.72) 100%);
  pointer-events:none;
}
.box-mainvisual-01 > *{ position:relative; z-index:1; }
/* タイトルSVG（紺塗り画像）を白に反転して浮かび上がらせる
   ※影を強くすると細い文字が黒ずむため控えめに */
.box-mainvisual-01 .logo, .box-mainvisual-01 .mainvisual-logo{
  filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(5,12,25,.35));
  opacity:.97;
}
/* タイトルは背景写真の上下中央に配置
   ※.mainvisual-innerは高さ0のため、位置基準をヒーロー本体に変更する */
.box-mainvisual-01 .mainvisual-inner{ position:static !important; }
.box-mainvisual-01 .mainvisual-inner .logo{
  top:50% !important;
  z-index:1;
}

/* ---- コンセプト項目（unit-concept-01） ---- */
.unit-concept-01 .title{
  color:#d8b877 !important;
  font-family:"Noto Serif JP",serif !important;
}
.unit-concept-01 p{ color:#c6d2e2; }

/* ---- 会社概要パネル（box-about-01）
   中のワイドロゴ(紺)を活かすため白カードのまま、金の額装に ---- */
.box-about-01{
  background:linear-gradient(180deg,#ffffff,#f1f3f7) !important;
  border:1px solid rgba(216,184,119,.55);
  border-radius:0 !important;
  box-shadow:0 20px 50px rgba(5,12,25,.5);
}
.box-about-01 p, .box-about-01 dd, .box-about-01 li{ color:#48546a !important; }
.box-about-01 .section-style-01 .dl dl{ border-bottom:1px solid #dfe3e8 !important; }
.box-about-01 .section-style-01 .dl dl dt{ color:#1c2a3c !important; }

/* ---- ページ送り（wp-pagenavi）：ダーク背景で見えるように（全ページ共通） ---- */
.wp-pagenavi a, .wp-pagenavi span{
  background:transparent !important;
  border:1px solid rgba(216,184,119,.45) !important;
  color:#d8b877 !important;
}
.wp-pagenavi span.current{
  background:linear-gradient(135deg,#ecd8a4,#d8b877 45%,#b8945a) !important;
  color:#16233b !important;
  border-color:transparent !important;
  font-weight:700 !important;
}
.wp-pagenavi span.extend{
  border:0 !important;
  color:#8fa2ba !important;
  background:transparent !important;
}
.wp-pagenavi a:hover{
  background:rgba(216,184,119,.14) !important;
  border-color:#d8b877 !important;
}

/* ---- 下層フッター（box-footer-01：淡グレー前提）をダークに ---- */
.box-footer-01:not(.recruit){ background:#0f1c2e !important; }
/* 内側wrapにも同じ半透明が掛かり中央だけ濃くなるため無効化 */
.box-footer-01:not(.recruit) .footer-wrap{ background:transparent !important; }
.box-footer-01:not(.recruit) a, .box-footer-01:not(.recruit) p, .box-footer-01:not(.recruit) li, .box-footer-01:not(.recruit) address{ color:#a9b8d0 !important; }
.box-footer-01:not(.recruit) a:hover{ color:#d8b877 !important; }
/* フッターのメニュー横に付く商品名（data-sub由来の::after）をシャンパンで表示 */
.box-footer-01:not(.recruit) a::after, footer:not(.recruit) .footer-sitemap a::after, .box-footer-01:not(.recruit) .footer-wrap a::after{
  color:rgba(216,184,119,.6) !important;
}
.box-footer-01:not(.recruit) .footer-wrap .footer-info::before{ background:rgba(255,255,255,.14) !important; }
.box-footer-01:not(.recruit) .footer-copyright{ background:#0b1521 !important; color:#6f829e !important; }
/* フッター中央ロゴ（紺画像）を淡い白に反転（TOP含む全ページ共通） */
footer:not(.recruit) .unit-logo-03, .box-footer-01:not(.recruit) .unit-logo-03, .box-footer-01:not(.recruit) .footer-logo{
  filter:brightness(0) invert(.85);
  opacity:.9;
}

/* ---- 採用LP（body.recruitlp）は独自デザインを維持 ---- */
body:has(.box-header-02.recruit){ background:#fff !important; }

/* ============================================================
   職場環境ページ 写真スライダー ＝ 案5 アルバム風（確定）
   現行の問題：写真の高さが 144/148/152/181px と4種類あり下端がガタついていた。
     ・元画像の縦横比が微妙に違う（308x206 / 300x206 / 292x206 …）
     ・テーマが非アクティブなスライドに transform:scale(.8) を掛けている
   対策：スライドの縮小を無効化し、object-fit:cover で高さを190pxに統一。
        そのうえで白フチ＋影＋わずかな傾きを与え、アルバムに貼った風合いにする。
   ページ内の3つのスライダー（家族写真・社員旅行ほか）すべてに適用される。
   ※CSSのみで完結。WP本文の変更は不要。
   ============================================================ */

body.recruitlp.culture .box-slide-09 li.slick-slide{
  transform:none !important;
  padding:16px 12px !important;
  box-sizing:border-box !important;
}
body.recruitlp.culture .box-slide-09 li.slick-slide img,
body.recruitlp.culture .box-slide-09 li.slick-slide.slick-active img{
  width:100% !important;
  height:190px !important;
  object-fit:cover !important;
  display:block !important;
  background:#fff;
  border:7px solid #fff;
  border-bottom-width:22px;
  box-shadow:0 8px 20px rgba(16,32,56,.16);
  transition:transform .3s ease !important;
}
body.recruitlp.culture .box-slide-09 li.slick-slide:nth-child(odd) img{ transform:rotate(-1.4deg) !important; }
body.recruitlp.culture .box-slide-09 li.slick-slide:nth-child(even) img{ transform:rotate(1.6deg) !important; }
body.recruitlp.culture .box-slide-09 li.slick-slide.slick-active img{ transform:rotate(0deg) !important; }

/* ============================================================
   採用サイト（body.recruitlp / LP＋下層6ページ共通）
   — 書体だけを新WEBデザインのものに差し替える
   配色・レイアウト・字送りは変更しない。
   明朝／ゴシックの使い分けはオリジナル（テーマ）を厳守する：
     ・和文ゴシック  游ゴシック → Noto Sans JP（新デザインの本文書体）
     ・欧文ゴシック  Open Sans  → Open Sans のまま（新デザインの欧文も Open Sans）
     ・明朝の箇所    → Noto Serif JP のまま（ページごとに指定。末尾の下層ページ節も参照）
   ※同じクラス名でもページによって明朝／ゴシックが逆転するため、
     明朝の復元は body のページスラッグ（.business / .career 等）で必ず分ける。
   ============================================================ */

/* ---- 和文ゴシック：游ゴシック → Noto Sans JP ---- */
body.recruitlp,
body.recruitlp h1, body.recruitlp h2, body.recruitlp h3, body.recruitlp h4, body.recruitlp h5,
body.recruitlp p, body.recruitlp li, body.recruitlp a,
body.recruitlp dt, body.recruitlp dd, body.recruitlp th, body.recruitlp td,
body.recruitlp address, body.recruitlp label,
body.recruitlp input, body.recruitlp textarea, body.recruitlp select, body.recruitlp button{
  font-family:"Noto Sans JP",sans-serif !important;
}

/* ---- 欧文ゴシック：オリジナルで Open Sans だった箇所を維持
       （和文が混ざる要素も Open Sans に和文グリフが無いため Noto Sans JP に落ちる）---- */
/* ヘッダー一式（ロゴ・PCナビ・SPナビのアコーディオン見出し）／追従ENTRYボタン */
body.recruitlp .box-header-02.recruit,
body.recruitlp .box-header-02.recruit a,
body.recruitlp .box-header-02.recruit span,
body.recruitlp .box-header-02.recruit label,
body.recruitlp .unit-fix-07 .fix-inner,
body.recruitlp .unit-fix-07 .fix-main,
/* ヒーローの英字（CHANGE / YOUR LIFE AT / WORK.） */
body.recruitlp .box-ani-title-01 .title p.text,
/* セクション英字見出し（MESSAGE / BUSINESS / CAREER / CULTURE） */
body.recruitlp .recruit2021 h2.title,
/* フッターCTAの ENTRY ／ フッターサイトマップの英字項目 */
body.recruitlp footer.recruit .unit-btn-08 .entry p,
body.recruitlp footer.recruit .footer-recruit-nav li.parent,
/* 下層ページの英字ラベル（Knowledge / Career step / Life Support 等） */
body.recruitlp .unit-title-21 p.sub-title,
body.recruitlp .unit-title-22 p.ruby{
  font-family:"Open Sans","Noto Sans JP",sans-serif !important;
}

/* ---- 明朝：ヒーローの和文キャッチのみ（オリジナル踏襲） ---- */
body.recruitlp .box-ani-title-01 p.title-ja{
  font-family:"Noto Serif JP",serif !important;
}


/* ============================================================
   リンクボタン：文字から下線までの距離を統一
   原因：WP本文の <a> 内に入っている <br> の数がボタンごとに 3個／1個／0個と
        まちまちで、余った行ボックスの分だけ下線が下にずれていた。
        （3個 → 文字下端から下線まで41px、0〜1個 → 20px）
   対策：ボタン内の <br> を無効化し、テーマの padding(20px/17px)だけで
        間隔が決まるようにする。全ボタン 20px に揃う。
   ============================================================ */
body.recruitlp .unit-btn-07 a br{
  display:none !important;
}


/* ============================================================
   リンクボタンの矢印マーク ＝ 案3 ライン矢印（確定）
   円をやめ、細い横線＋矢頭のミニマル表現に。ホバーで右へスライド。
   ============================================================ */
body.recruitlp .unit-btn-07 .unit-circle-01{
  width:40px !important; height:23px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  transition:transform .25s ease !important;
}
/* 軸になる横線 */
body.recruitlp .unit-btn-07 .unit-circle-01::after{
  content:"" !important; position:absolute !important;
  top:50% !important; right:0 !important; left:auto !important; bottom:auto !important;
  width:100% !important; height:1px !important; margin:0 !important;
  border:0 !important;
  background:#16233B !important;
  transform:translateY(-50%) !important;
  transition:background-color .25s ease !important;
}
/* 矢頭 */
body.recruitlp .unit-btn-07 .unit-circle-01::before{
  content:"" !important; position:absolute !important;
  top:50% !important; right:0 !important; left:auto !important; bottom:auto !important;
  width:6px !important; height:6px !important; margin:0 !important;
  border:0 !important;
  border-top:1px solid #16233B !important;
  border-right:1px solid #16233B !important;
  transform:translateY(-50%) rotate(45deg) !important;
  transition:border-color .25s ease !important;
  z-index:1 !important;
}
body.recruitlp .unit-btn-07 a:hover .unit-circle-01{
  transform:translateX(5px) !important;
}
body.recruitlp .unit-btn-07 a:hover .unit-circle-01::after{
  background:#FF5215 !important;
}
body.recruitlp .unit-btn-07 a:hover .unit-circle-01::before{
  border-top-color:#FF5215 !important;
  border-right-color:#FF5215 !important;
}


/* ============================================================
   TOPヒーロー下の黒帯を解消
   原因：スライド内の <br> が 24px の行ボックスを作り、
         スライド背景（#01081A ＝ ほぼ黒）が画像の下に露出していた。
         さらに slick が初期化時の高さ（br込み）を .slick-list に
         インラインで固定するため、画像を縮めても帯が残っていた。
   対策：① スライド内の <br> を消す ② 固定高さを解除して画像に追従させる
   ============================================================ */
body.recruitlp .sec-recruit-01 .mainvisual .slick-slide br{
  display:none !important;
}
body.recruitlp .sec-recruit-01 .slick-list{
  height:auto !important;
}
/* 端数丸めで1px残っても黒が出ないよう、スライドの地色を透過に */
body.recruitlp .sec-recruit-01 .slick-slide{
  background:transparent !important;
}


/* ============================================================
   CULTUREカードの余白過多を解消
   原因：WP本文で #culture の画像ブロックが HTML コメントで無効化されており
        （src も未解決の [tempurl] のまま）、画像なしの1カラムになっていた。
        その状態を取り繕うため text-wrap に
        「display:flex / justify-content:center / padding:65px 165px 105px」
        という場当たりの中央寄せが当たっており、これがブレークポイントを
        持たないため PC では左右に巨大な余白、携帯では逆に食み出していた。
   対策：中央寄せを解除し、BUSINESS/CAREER と同じ2カラム挙動に戻す。
   ※画像の復元は本CSSでは不可（コメントアウトされた要素はDOMに存在しないため）。
     本番では WP本文の該当箇所を次のように直す：
       ・<p><!--</p> … <p>--></p> のコメント記号を削除
       ・src の [tempurl] を /wp-content/themes/lastcompass220713 に置換
         → images/recruit2024/business_img_03.jpg（PC）
            images/recruit2024/business_img_03_sp.jpg（SP）※どちらも設置済みを確認
     プレビューでは build_sub_preview.py の recruitlp ブロックが同等の復元を行う。
   ============================================================ */
body.recruitlp #culture{
  margin-top:70px !important;              /* 115px → CAREER と同じ間隔に */
}
body.recruitlp #culture .text-wrap{
  display:block !important;
  justify-content:normal !important;
  margin:0 15px 0 0 !important;            /* 携帯：BUSINESS と同値 */
  padding:30px 15px 120px !important;      /* 携帯：BUSINESS と同値 */
}
@media (min-width:768px){
  body.recruitlp #culture .text-wrap{
    margin:0 !important;                        /* 中央寄せ用の左右100pxマージンを解除 */
    padding:65px 15px 105px 165px !important;   /* PC：BUSINESS と同値 */
  }
  /* 画像スロットは 609×406。CULTUREの写真だけ原寸が 741×451 のため合わせる */
  body.recruitlp #culture .img-wrap img.pc-visible{
    width:609px !important;
    height:406px !important;
    object-fit:cover !important;
  }
}


/* ============================================================
   企業理念セクションのコンパス透かし（案3 青灰・確定）
   原因：透かし画像 bg_01.png のシルエットが #F7F5F5（ほぼ白）で、
        背景 #EDF1F2 とほぼ同色（RGB差 10/4/3）のため見えなかった。
   対策：CSSマスクでシルエットだけを抜き、色は background-color で与える。
        色 #7E8C9E（青灰）／濃度 10%。元の無彩色の印象は保ったまま視認できる。
   ※本番はCSSと画像が同一オリジンのためこのURL指定で動く。
     localhostプレビューではマスク画像がCORSで拒否されるため、
     build_sub_preview.py が同じ画像を data URI で上書きする。
   ============================================================ */
body.recruitlp.philosophy_message section.sec-philosophy-01 > .wrapper::before{
  background-image:none !important;
  background-color:#7E8C9E !important;
  -webkit-mask-image:url("https://lastcompass.co.jp/wp-content/themes/lastcompass220713/images/recruit2024/philosophy/bg_01.png") !important;
          mask-image:url("https://lastcompass.co.jp/wp-content/themes/lastcompass220713/images/recruit2024/philosophy/bg_01.png") !important;
  -webkit-mask-repeat:no-repeat !important;   mask-repeat:no-repeat !important;
  -webkit-mask-position:50% 50% !important;   mask-position:50% 50% !important;
  -webkit-mask-size:contain !important;       mask-size:contain !important;
  opacity:.10 !important;
}


/* ============================================================
   フッターENTRYバナー：中間幅で左余白が無くなる問題を解消（全ページ共通）
   原因：フッターのラッパー .wrapper.w-1230 が width:1230px 固定。
        テーマは margin:0 auto で中央寄せしているが、ビューポートが
        1230px を下回ると auto が効かず margin-left:0 / margin-right:負 となり、
        左余白ゼロ・右へはみ出し（横スクロール発生）になる。
        ・1440px：左右98px の余白あり（正常）
        ・1080px：左余白0・右へ165pxはみ出し ← ここが問題
        ・375px ：左右10px の余白あり（正常・SP用の別指定）
   対策：PC幅のみ、ラッパーを可変にして左右40pxのガターを持たせる。
        max-width は 1230+40*2=1310px とし、広い画面での見え方は従来どおり。
        SP（767px以下）はテーマの指定をそのまま使うため触らない。
   ============================================================ */
@media (min-width:768px){
  body.recruitlp footer.recruit .wrapper.w-1230{
    width:auto !important;
    max-width:1310px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:40px !important;
    padding-right:40px !important;
    box-sizing:border-box !important;
  }
  /* フッターナビも 1100px 固定のため可変にする（バナーとの段差65pxは維持） */
  body.recruitlp footer.recruit .footer-recruit-nav{
    width:auto !important;
    max-width:1100px !important;
  }
}


/* ============================================================
   本文ラッパーの固定幅で中身が右に寄る問題を解消（全ページ共通）
   フッターと同じ原因。.wrapper.w-XXXX が width:XXXXpx 固定のため、
   ビューポートがその幅を下回ると margin:0 auto が効かず
   「左マージン0・右マージンが負」となり、中身が右へ寄って右端が切れる。
     例）事業内容の図（business_img_01.png）は .wrapper.w-1285 の中で
         中央寄せされているが、1285px より狭いと左192px / 右27px になっていた。
   対策：PC幅のみ可変にし、max-width で元の最大幅を維持する。
        広い画面での見え方は従来どおり。SP（767px以下）は触らない。
   ============================================================ */
@media (min-width:768px){
  body.recruitlp .wrapper.w-1285,
  body.recruitlp .wrapper.w-1140,
  body.recruitlp .wrapper.w-1115,
  body.recruitlp .wrapper.w-1100,
  body.recruitlp .wrapper.w-950,
  body.recruitlp .wrapper.w-900{
    width:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:15px !important;
    padding-right:15px !important;
    box-sizing:border-box !important;
  }
  /* max-width は「元の幅＋左右padding」。広い画面での見え方は従来どおり */
  body.recruitlp .wrapper.w-1285{ max-width:1315px !important; }
  body.recruitlp .wrapper.w-1140{ max-width:1170px !important; }
  body.recruitlp .wrapper.w-1115{ max-width:1145px !important; }
  body.recruitlp .wrapper.w-1100{ max-width:1130px !important; }
  body.recruitlp .wrapper.w-950 { max-width:1130px !important; }  /* 職場環境ページ：他ページと同じ内容幅1100pxに広げる */
  body.recruitlp .wrapper.w-900 { max-width:930px  !important; }
}


/* ============================================================
   本文中のマーカー（span.emphasis）＝ 案4 下線マーカー（確定）
   現行は #29ABE2（明るい水色）のベタ塗り×白文字で、サイトの
   ネイビー系配色から浮いていた。塗りの箱をやめ、文字は本文色のまま
   下端にゴールドの帯を敷く「蛍光ペン風」に変更する。
   ============================================================ */
body.recruitlp span.emphasis{
  background:linear-gradient(transparent 62%, rgba(184,148,90,.85) 62%) !important;
  color:#1C222F !important;
  font-weight:700 !important;
  padding:0 2px !important;
}


/* ============================================================
   下層6ページ（philosophy_message / business / career /
   interview / culture / entry）でオリジナルが明朝の箇所を維持

   ※同じクラス名でもページによって明朝／ゴシックが逆転している。
     例：h2.title は business では明朝だが culture / entry / interview ではゴシック
         h2.unit-title-19 は philosophy_message では明朝だが entry ではゴシック
         p.name は philosophy_message では明朝だが interview ではゴシック
     そのため必ず body のページスラッグで分けること。
     interview / culture / entry には明朝の箇所は無い（オリジナル確認済み）。
   ============================================================ */

/* 企業理念・トップメッセージ */
body.recruitlp.philosophy_message .box-title-wrap-01,
body.recruitlp.philosophy_message .box-title-wrap-01 *,
body.recruitlp.philosophy_message .box-img-wrap-01,
body.recruitlp.philosophy_message .box-img-wrap-01 *,
body.recruitlp.philosophy_message h2.unit-title-19,
body.recruitlp.philosophy_message h2.unit-title-19 *,
/* 事業内容（ラストコンパスのMISSION 一式） */
body.recruitlp.business .box-white-wrap-02,
body.recruitlp.business .box-white-wrap-02 *,
/* 教育制度・キャリアステップ */
body.recruitlp.career h2.unit-title-20,
body.recruitlp.career h2.unit-title-20 *{
  font-family:"Noto Serif JP",serif !important;
}


/* ---- アイコンフォントは巻き込まない（最後に置いて必ず勝たせる） ---- */
body.recruitlp .fa,
body.recruitlp [class^="fa-"],
body.recruitlp [class*=" fa-"],
body.recruitlp i[class*="fa"]{
  font-family:FontAwesome !important;
}


/* ============================================================
   ページタイトル帯の文字配置 ＝ 案2 左下＋英字ラベルとシルバーの罫（確定）
   採用サイトの下層6ページ共通。テーマは .title-inner の padding-top:160px で
   文字を下端ぎりぎりまで押し下げていたため、それを解除して余白を整える。
   英字ラベルは body のページスラッグごとに自動で切り替わる。
   ============================================================ */
body.recruitlp .box-undertitle-02 .title-wrap{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}
body.recruitlp .box-undertitle-02 .title-inner{
  padding-top:0 !important;
  padding-bottom:30px !important;
}
body.recruitlp .box-undertitle-02 .title-inner::before{
  display:block;
  font-family:"Cinzel",serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.24em;
  color:#D3DAE3;                       /* シルバー */
  margin-bottom:6px;
  text-shadow:0 2px 14px rgba(5,12,25,.55);
}
body.recruitlp.philosophy_message .box-undertitle-02 .title-inner::before{ content:"PHILOSOPHY"; }
body.recruitlp.business          .box-undertitle-02 .title-inner::before{ content:"BUSINESS"; }
body.recruitlp.career            .box-undertitle-02 .title-inner::before{ content:"CAREER"; }
body.recruitlp.interview         .box-undertitle-02 .title-inner::before{ content:"INTERVIEW"; }
body.recruitlp.culture           .box-undertitle-02 .title-inner::before{ content:"CULTURE"; }
body.recruitlp.entry             .box-undertitle-02 .title-inner::before{ content:"ENTRY"; }
body.recruitlp .box-undertitle-02 .title-inner h1{
  position:relative !important;
  display:inline-block !important;
  padding-bottom:14px !important;
  text-shadow:0 2px 18px rgba(5,12,25,.45);
}
body.recruitlp .box-undertitle-02 .title-inner h1::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:52px; height:2px;
  background:linear-gradient(90deg,#E4E9EF,#B9C2CD);   /* シルバー */
}


/* ============================================================
   セクションの地色を他ページと統一（#EDF1F2 → #F2F2F2）
   採用ページだけ青みのあるグレー(#EDF1F2)を使っていたため、
   リクルート以外のページで使われている中性グレー(#F2F2F2)に揃える。
   ============================================================ */
body.recruitlp .bg-05,
body.recruitlp section[class*="bg-05"],
body.recruitlp footer.box-footer-01.recruit,
body.recruitlp .unit-label-01,
/* bg-05 が付いていないが同じ青灰を直接指定しているセクション */
body.recruitlp .sec-recruit-03-renew,
body.recruitlp .sec-philosophy-01,
body.recruitlp p.time{
  background-color:#F2F2F2 !important;
}


/* ============================================================
   職場環境ページ：内容の幅が他ページより狭い（w-950）ため広げる
   他の採用ページは内容幅1100〜1285px。ここだけ950pxで窮屈だった。
   カードの列も 302px 固定だったため可変にして幅いっぱいに広げる。
   ============================================================ */
@media (min-width:768px){
  body.recruitlp.culture .box-col-03{
    grid-template-columns:repeat(3,1fr) !important;
  }
}


/* ============================================================
   ヘッダーもスレート #1E3A5F に統一（透過は外す）
   テーマ／skin-a のヘッダーは rgba(10,21,38,.72) ＋ blur(14px) の
   ガラス調で、後ろにある写真の色を拾う。そのためタイトル帯の写真が
   明るいページ（事業内容）ではヘッダーがグレーに見え、写真が暗い
   ページでは紺に見える、という差が出ていた。
   透過とぼかしを外し、色もフッター等と同じスレート #1E3A5F に揃える。
   ============================================================ */
body.recruitlp .box-header-02.recruit .header-wrap{
  background:#16233B !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}

/* 採用TOPのヒーロー背景も skin-a 由来の #1C2A3C だけ残っていたため揃える
   （スライダー画像の下地。画像が縮んだ際にわずかに見える箇所） */
body.recruitlp .sec-recruit-01{
  background-color:#16233B !important;
}


/* ============================================================
   全体のネイビー ＝ #1E3A5F スレート（確定）
   #0F2E52 → #16233B と変えてきたが、#16233B は明度1.7%と暗く全体が重かったため、
   明度4.1%のスレート紺 #1E3A5F に変更。白文字とのコントラスト比は 11.5:1 で
   アクセシビリティ基準（4.5:1）を十分満たす。
   ※対象は「実際に #0F2E52 で描かれていた箇所」だけ。元から別色の見出し
     （MESSAGE見出しの黒 / ボタン文字 #231815 / キャリア見出し #1C222F 等）や
     インタビューの部署名ゴールドは変更しない。
   ============================================================ */
/* ---- 背景 ---- */
body.recruitlp .footer-bg,
body.recruitlp .box-bnr-01 a,
body.recruitlp .sec-recruit-02-renew,
body.recruitlp .box-img-wrap-01 .desc,
body.recruitlp .rcbiz-solveline{
  background-color:#16233B !important;
}

/* ---- 文字 ---- */
body.recruitlp .unit-title-22 h2.title,
body.recruitlp .box-card-02 .desc,
body.recruitlp dt,
body.recruitlp .box-ani-title-01 .title,
body.recruitlp .box-ani-title-01 .title p.text{
  color:#16233B !important;
}
/* 社員インタビューの部署名はゴールドのまま維持 */
body.recruitlp.interview .box-card-02 .desc::first-line{
  color:#8A6B34;
}

/* ---- リンクボタンのライン矢印 ---- */
body.recruitlp .unit-btn-07 .unit-circle-01::after{
  background:#16233B !important;
}
body.recruitlp .unit-btn-07 .unit-circle-01::before{
  border-top-color:#16233B !important;
  border-right-color:#16233B !important;
}

/* ---- 事業内容：ステップの番号丸とつなぎ線 ---- */
body.recruitlp.business .rcbiz-step::before{
  background:#16233B !important;
}
body.recruitlp.business .rcbiz-step::after{
  background:linear-gradient(180deg,#16233B,rgba(22,35,59,.15)) !important;
}

/* ---- キャリアステップ：3段目の色と進行ライン ---- */
body.recruitlp.career .rccar-cards li:nth-child(3){
  color:#16233B !important;
}
body.recruitlp.career .rccar::before{
  background:linear-gradient(90deg,#6C8AA2,#49749D,#16233B,#B8945A) !important;
}


/* ============================================================
   残っていた #0F2E52 の文字色もスレートに統一
   テーマ由来の以下が #0F2E52 のまま残っていた：
     ・ヘッダーの ENTRY ボタンの文字（白丸ボタンの中の文字）
     ・フッターのサイトマップ（英字項目 CULTURE 等 / 和文リンク / 外部リンク）
   ============================================================ */
/* ※テーマ側に詳細度の高い !important 指定があるため、詳細度を上げて上書きする */
/* ヘッダーの ENTRY ボタン（白い丸ボタンの中の文字） */
html body.recruitlp header.box-header-02.recruit nav.header-nav ul.nav-inner li.unit-btn-06 > a.ex_link,
/* フッターサイトマップ（英字の親項目・和文の子項目・外部リンク） */
html body.recruitlp footer.box-footer-01.recruit div.box-nav-wrapper-01 ul li.parent,
html body.recruitlp footer.box-footer-01.recruit div.box-nav-wrapper-01 ul li.child > a.ex_link,
html body.recruitlp footer.box-footer-01.recruit div.box-nav-wrapper-01 ul li.child > a.has-img.ex_link,
/* 採用TOPのカード見出し（BUSINESS / CAREER / CULTURE） */
html body.recruitlp div.recruit2021 div.box-card-01 div.inner > h2.title{
  color:#16233B !important;
}

/* 下層ページに残っていた分（項目名・ベン図の見出し・フォームのラベル等）
   ※いずれもテーマ側の !important に勝つ詳細度で指定する */
html body.recruitlp div.underlayer p.title,
html body.recruitlp div.underlayer h2.title,
html body.recruitlp div.underlayer h2.title::before,
html body.recruitlp div.underlayer h2.unit-title-19,
html body.recruitlp div.underlayer span.wpcf7-list-item-label,
html body.recruitlp div.underlayer label{
  color:#16233B !important;
}
html body.recruitlp div.underlayer h2.title::before,
html body.recruitlp div.underlayer span.wpcf7-list-item-label::after{
  background-color:#16233B !important;
}
html body.recruitlp div.underlayer span.wpcf7-list-item-label::before{
  border-color:#16233B !important;
}

/* ---------- inline ---------- */
html{background:#fff; color-scheme:light;} .grecaptcha-badge,[class*="grecaptcha"]{display:none !important;}


/* ============================================================
   ヘッダーロゴを本体サイトと統一
   本体: 164x34 / 内枠 width81.34% maxW1100（左位置が揃う）
   採用は 323x49・内枠76%で、ロゴが大きく右寄りだった。
   ============================================================ */
@media screen and (min-width:901px){
  .box-header-02 .header-inner{
    width:81.34% !important;
  }
  h1.header-logo.unit-logo-02,
  h1.header-logo.unit-logo-02 .logo-inner{
    width:164px !important;
    height:34px !important;
  }
  h1.header-logo.unit-logo-02 .logo-inner{
    background-size:contain !important;
    background-position:left center !important;
  }
}
@media screen and (max-width:900px){
  h1.header-logo.unit-logo-02{
    width:174px !important;
    height:50px !important;
    padding-left:0 !important;
    box-sizing:border-box !important;
  }
  h1.header-logo.unit-logo-02 .logo-inner{
    width:164px !important;
    height:50px !important;
    background-size:contain !important;
    background-position:left center !important;
    margin:0 !important;
  }
}


/* ---- ロゴの実描画サイズを本体と完全一致させる ----
   採用ロゴ画像は横長(647x98)のため、箱164pxでは実描画が細く(24.8px)
   本体(34px)と視覚サイズが揃っていなかった。実描画34pxになる箱に変更。 ---- */
@media screen and (min-width:901px){
  h1.header-logo.unit-logo-02,
  h1.header-logo.unit-logo-02 .logo-inner{
    width:225px !important;
    height:34px !important;
  }
}
@media screen and (max-width:900px){
  h1.header-logo.unit-logo-02{
    width:241px !important;
  }
  h1.header-logo.unit-logo-02 .logo-inner{
    width:231px !important;
  }
}


/* ---- ロゴを目視で中央に見えるよう少し上へ ---- */
@media screen and (min-width:901px){
  h1.header-logo.unit-logo-02 .logo-inner{
    transform:translateY(-7px) !important;
  }
}
@media screen and (max-width:900px){
  h1.header-logo.unit-logo-02 .logo-inner{
    transform:translateY(0) !important;
  }
}

/* ---- 修正: 紺グラデーションをキャンバス(html)に適用 ----
   bodyのボックスが1画面分しかなく、下スクロール時に下地の別色紺が
   見えていた問題の解消。ルート要素の背景はキャンバス全体に描画される。 */
html:not(:has(.box-header-02.recruit)){
  background:
    radial-gradient(1300px 640px at 50% -8%, rgba(96,158,196,.28), transparent 60%),
    radial-gradient(1000px 560px at 90% 30%, rgba(38,96,128,.22), transparent 55%),
    linear-gradient(180deg,#12283f 0%,#0d1e33 40%,#0a1526 100%) #0a1526 !important;
  background-attachment:fixed !important;
}
body:not(:has(.box-header-02.recruit)){ background:transparent !important; }

/* ---- 携帯版: 本体サイトのロゴと統一（実描画35px・左10px・上下中央） ---- */
@media screen and (max-width:900px){
  h1.header-logo.unit-logo-02 .logo-inner span{
    width:231px !important;
    height:50px !important;
    display:inline-block !important;
    vertical-align:top !important;
    background-size:contain !important;
    background-position:left center !important;
  }
}


/* 携帯: 下部CVボタンの幅をTOPの6ボタングリッド(左右10px)と統一 */
@media screen and (max-width:768px){
  .unit-fix-07:not(.recruit){ left:10px !important; right:10px !important; }
}