/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.0
*/

/* =========================================
   0. フォント（社名だけ“会社っぽい”明朝寄りに）
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&display=swap');

/* =========================================
   0. TOP：メイン画像（スライダー）と次コンテンツの“白い帯”対策
========================================= */
/* 0-1) スライダー直下の余白（スライダー側の margin-bottom）を潰す */
.home .vk_slider,
.home .vk-slider,
.home .swiper,
.home .swiper-container,
.home .metaslider,
.home .n2-section-smartslider,
.home .n2-ss-slider,
.home .wp-block-group.alignfull,
.home .wp-block-cover,
.home .wp-block-image,
.home figure.wp-block-image{
  margin-bottom: 0 !important;
}

/* 0-2) スライダー直後だけ余白を潰す（画像ブロックは除外） */
.home :where(
  .vk_slider,
  .vk-slider,
  .swiper,
  .swiper-container,
  .metaslider,
  .n2-section-smartslider,
  .n2-ss-slider
) + *{
  margin-top: 0 !important;
  padding-top: 0 !important;

  /* 念のため論理プロパティも */
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

/* 0-3) 先頭ブロック/最初のセクションの上余白を潰す（テーマのblock間余白対策） */
.home .siteContentBody > *:first-child,
.home .entry-content > *:first-child{
  margin-top: 0 !important;
}

/* 0-4) “次のセクション” が sec-reason の場合はここが本命になりがち */
.home .sec-reason{
  margin-top: 0 !important;
}

/* 0-5) スペーサーが挟まってる場合の保険（入ってたらこれが白帯の正体） */
.home .entry-content > .wp-block-spacer:first-child,
.home .siteContentBody > .wp-block-spacer:first-child,
.home .vk_slider + .wp-block-spacer,
.home .vk-slider + .wp-block-spacer,
.home .metaslider + .wp-block-spacer,
.home .n2-ss-slider + .wp-block-spacer{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   TOP：トップ画と次コンテンツの“微妙な隙間”をゼロにする（最終兵器）
========================================= */

/* (A) 画像のベースライン隙間対策：スライダー/カバー内の画像を block 化 */
.home :where(.vk_slider,.vk-slider,.metaslider,.n2-ss-slider,.swiper,.swiper-container,.wp-block-cover,.wp-block-image,figure.wp-block-image) img{
  display: block !important;
  vertical-align: bottom !important;
}

/* (B) トップ画像ブロック自体の下余白をゼロ */
.home :where(.vk_slider,.vk-slider,.metaslider,.n2-ss-slider,.swiper,.swiper-container,.wp-block-cover,.wp-block-image,figure.wp-block-image){
  margin-block-end: 0 !important;  /* margin-bottom */
  padding-block-end: 0 !important;
}

/* (C) トップのスライダー/カバー “直後だけ” 余白をゼロにする */
.home :where(
  .vk_slider,
  .vk-slider,
  .metaslider,
  .n2-ss-slider,
  .swiper,
  .swiper-container,
  .wp-block-cover
) + *{
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

/* (D) コンテンツ枠が持つ上 padding が原因のことが多いので、TOPだけ0にする */
.home :where(#content,.siteContent,.siteContentBody,.entry-content,.l-main,.l-content){
  padding-top: 0 !important;
}

/* (E) もし spacer が紛れ込んでたら消す（白帯の正体がこれのことが多い） */
.home .entry-content > .wp-block-spacer:first-child,
.home :where(.vk_slider,.vk-slider,.metaslider,.n2-ss-slider,.swiper,.swiper-container) + .wp-block-spacer{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   1. Lightning 用のカラー変数（ヘッダー・フッター）
========================================= */
:root{
  --vk-color-header-bg: #00142e;      /* #00142e */
  --vk-color-header-text: #ffffff;

  --vk-color-footer-bg: #00142e;
  --vk-color-footer-text: #ffffff;

  --vk-cta-bg: #ffffff;
  --vk-cta-text: #0E1724;

  /* 会社名の書体（“会社っぽく”） */
  --vk-company-font: "Noto Serif JP", "Yu Mincho", "YuMincho",
                     "Hiragino Mincho ProN", "Hiragino Mincho Pro",
                     "Noto Serif CJK JP", serif;

  /* ▼調整ポイント */
  --vk-header-pad-y: 0px;
  --vk-brand-gap: 24px;
  --vk-brand-to-nav-space: 16px;

  --vk-logo-h-pc: 90px;
  --vk-logo-h-sp: 48px;
}

/* container側に padding が残ってる可能性があるので直叩き */
#site-header .site-header-container,
#site-header-container,
.site-header .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== ロゴサイズ：PC ===== */
#site-header .site-header-logo img,
#site-header .custom-logo-link img,
#site-header img.custom-logo{
  height: var(--vk-logo-h-pc, 90px) !important;
  max-height: var(--vk-logo-h-pc, 90px) !important;
  width: auto !important;
  display: block !important;
}

/* ===== ロゴサイズ：SP ===== */
@media (max-width: 781px){
  #site-header .site-header-logo img,
  #site-header .custom-logo-link img,
  #site-header img.custom-logo{
    height: var(--vk-logo-h-sp, 48px) !important;
    max-height: var(--vk-logo-h-sp, 48px) !important;
  }
}


/* ロゴ周りの余白も潰す（h1やaのデフォルト対策） */
#site-header .site-header-logo,
#site-header .site-header-logo a,
#site-header .site-header-logo span{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* =========================================
   2. ヘッダー
========================================= */
/* ヘッダー全体の背景＆文字色（確実に勝つ） */
.site-header, .siteHeader, .l-header, #header {
  background-color: var(--vk-color-header-bg) !important;
  color: var(--vk-color-header-text) !important;
}

/* ヘッダー内リンク */
.site-header a, .siteHeader a, .l-header a, #header a {
  color: var(--vk-color-header-text) !important;
}

/* グローバルナビのリンク */
.site-header nav a, .siteHeader nav a, .l-header nav a, #header nav a {
  color: var(--vk-color-header-text) !important;
}

/* ホバー時（少し薄く） */
.site-header nav a:hover, .siteHeader nav a:hover, .l-header nav a:hover, #header nav a:hover {
  color: var(--vk-color-header-text);
  opacity: 0.7;
}

/* 境界線ではなく“空白”で自然に見せる（線は消す） */
.site-header, .siteHeader, .l-header, #header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ヘッダー全体の上下余白（自然に） */
.site-header .container,
.siteHeader .container,
.l-header .container,
#header .container{
  padding-top: var(--vk-header-pad-y);
  padding-bottom: var(--vk-header-pad-y);
}

/* モバイル：ハンバーガー（三本線） */
.site-header .navbar-toggle .icon-bar,
.siteHeader .navbar-toggle .icon-bar,
.l-header .navbar-toggle .icon-bar,
#header .navbar-toggle .icon-bar{
  background-color: var(--vk-color-header-text) !important;
}

/* =========================================
   Header（SP）：左（ロゴ/社名）＋右端（メニューボタン）
   - ロゴ社名が左寄せにならない問題を潰す（container を flex 化）
   - メニューボタンが「枠だけ」になる問題を潰す（icon-bar を直撃で復活）
   - 画面スクロールに追従する固定はしない（fixed にしない）
========================================= */

/* SP：ヘッダーの1行レイアウトを作る（左：ロゴ群 / 右：メニューボタン） */
@media (max-width: 781px){

  /* ヘッダー行（container）を flex にする：ここが無いと左寄せになりません */
  .siteHeader .container,
  .site-header .container,
  .l-header .container,
  #header .container{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  /* 左ブロック（ロゴ/社名） */
  .siteHeader .navbar-header,
  .site-header .navbar-header,
  .l-header .navbar-header,
  #header .navbar-header{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 1 1 auto !important;   /* ← 左側を伸ばす */
    min-width: 0 !important;     /* ← ellipsis を効かせる */
    width: auto !important;

    float: none !important;      /* Bootstrapのfloat潰し */
    text-align: left !important;
  }

  /* ロゴリンク自体の “float” を潰して左寄せ安定化 */
  .siteHeader .navbar-header :where(.navbar-brand, .custom-logo-link, .wp-block-site-logo a),
  .site-header .navbar-header :where(.navbar-brand, .custom-logo-link, .wp-block-site-logo a),
  #header .navbar-header :where(.navbar-brand, .custom-logo-link, .wp-block-site-logo a){
    float: none !important;
    margin: 0 !important;
  }

  /* 社名ブロック：左寄せ強制 */
  .siteHeader_brandText,
  .siteHeader_companyName,
  .siteHeader_companyTagline{
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* 右ブロック（メニューボタン）をヘッダー右端へ */
  .siteHeader .navbar-toggle,
  .site-header .navbar-toggle,
  .l-header .navbar-toggle,
  #header .navbar-toggle{
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-left: auto !important;

    /* 「ヘッダーの一部として右端」＝ fixed は使わない */
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    float: none !important;

    /* ボタンの見た目（枠だけにならないように） */
    background: transparent !important;
    border: 1px solid rgba(14,23,36,.22) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
  }

  /* 三本線が「枠だけ」になったのを復活（最重要） */
  .siteHeader .navbar-toggle .icon-bar,
  .site-header .navbar-toggle .icon-bar,
  .l-header .navbar-toggle .icon-bar,
  #header .navbar-toggle .icon-bar{
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background-color: var(--vk-color-header-text) !important;
    opacity: 1 !important;
  }
}


/* =========================================
   header：スクロール時（色は固定のまま、影だけ付ける）
========================================= */
/* body.vk-header-scrolled{
  --vk-color-header-bg: #0E1724 !important;
  --vk-color-header-text: #ffffff !important;

  --vk-cta-bg: #0E1724 !important;
  --vk-cta-text: #ffffff !important;
} */

/* 色変化を滑らかに */
.site-header, .siteHeader, .l-header, #header,
.site-header a, .siteHeader a, .l-header a, #header a,
.site-header nav a, .siteHeader nav a, .l-header nav a, #header nav a{
  transition: background-color .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* スクロール時は少し影を出して“浮き”を作る（任意） */
body.vk-header-scrolled .site-header,
body.vk-header-scrolled .siteHeader,
body.vk-header-scrolled .l-header,
body.vk-header-scrolled #header{
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}

/* =========================================
   2-1. ロゴの“すぐ隣”に「会社名＋紹介文（2行）」を自然に表示（横並び固定）
   - functions.php で .siteHeader_logoWrap / .siteHeader_brandText を出している前提
========================================= */

/* 1) ロゴ塊（ロゴ＋文字）を横並びで固定 */
.siteHeader_logoWrap,
.siteHeader .siteHeader_logoWrap,
.site-header .siteHeader_logoWrap,
.l-header .siteHeader_logoWrap,
#header .siteHeader_logoWrap,

/* 2) ロゴリンクの揺れも吸収（WP標準/Lightning/ブロック系） */
a.custom-logo-link,
.siteHeader a.custom-logo-link,
.site-header a.custom-logo-link,
.l-header a.custom-logo-link,
#header a.custom-logo-link,

a.navbar-brand,
.siteHeader a.navbar-brand,
.site-header a.navbar-brand,
.l-header a.navbar-brand,
#header a.navbar-brand,

.wp-block-site-logo a{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: var(--vk-brand-gap) !important;
  padding-right: var(--vk-brand-to-nav-space) !important;

  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

/* ロゴ画像 */
.custom-logo-link img,
img.custom-logo,
.navbar-brand img,
.wp-block-site-logo img{
  display: block !important;
  margin: 0 !important;
  height: auto !important;
}

/* 会社名＋紹介文 */
.siteHeader_brandText{
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important; /* ← 左寄せ */
  gap: 4px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.siteHeader_companyName{
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--vk-company-font) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.15 !important;
  color: var(--vk-color-header-text, #ffffff) !important;

  font-size: clamp(16px, 1.15vw, 20px) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-width: min(46vw, 560px) !important;
  text-align: left !important;
}

.siteHeader_companyTagline{
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
	
  color: var(--vk-color-header-text, #ffffff) !important;

  font-family: var(--vk-company-font) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  line-height: 1.2 !important;
  opacity: .78;

  font-size: 12px;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-width: min(46vw, 560px) !important;
  text-align: left !important;
}

/* ロゴ周りの親が space-between 等で引き離すケースを潰す */
.siteHeader_logo,
.site-header-logo,
.siteHeader_logoArea,
.site-header-logoArea,
.site-branding,
.headerLogo,
.siteHeader .navbar-header,
.site-header .navbar-header,
.l-header .navbar-header,
#header .navbar-header,
.siteHeader .navbar-brand,
.site-header .navbar-brand,
.l-header .navbar-brand,
#header .navbar-brand{
  justify-content: flex-start !important;
}

/* モバイル：ヘッダー最小調整（左寄せ維持） */
@media (max-width: 781px){
  :root{
    --vk-header-pad-y: 6px;
    --vk-brand-gap: 10px;
    --vk-brand-to-nav-space: 0px; /* SPは右余白を消して、トグル領域を確保 */
  }

  .siteHeader_companyName{
    font-size: 13px !important;
    max-width: 68vw !important;
  }
  .siteHeader_companyTagline{
    font-size: 11px !important;
    max-width: 68vw !important;
  }
}

/* =========================================
   2-2. お問い合わせリンクを強調（CTAボタン）
   事前にメニュー項目「お問い合わせ」に CSSクラス menu-cta を付与
========================================= */
.gMenu .menu-cta > a,
.gMenu_body .menu-cta > a,
.navbar-nav .menu-cta > a,
.menu .menu-cta > a,
.siteHeader .menu-cta > a,
.site-header .menu-cta > a,
.l-header .menu-cta > a,
#header .menu-cta > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--vk-cta-bg) !important;
  color: var(--vk-cta-text) !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;

  text-decoration: none !important;
  opacity: 1 !important;

  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;

  line-height: 1 !important;
  min-height: 38px;
}

.gMenu .menu-cta > a:hover,
.gMenu_body .menu-cta > a:hover,
.navbar-nav .menu-cta > a:hover,
.menu .menu-cta > a:hover,
.siteHeader .menu-cta > a:hover,
.site-header .menu-cta > a:hover,
.l-header .menu-cta > a:hover,
#header .menu-cta > a:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.gMenu .menu-cta > a:focus-visible,
.gMenu_body .menu-cta > a:focus-visible,
.navbar-nav .menu-cta > a:focus-visible,
.menu .menu-cta > a:focus-visible,
.siteHeader .menu-cta > a:focus-visible,
.site-header .menu-cta > a:focus-visible,
.l-header .menu-cta > a:focus-visible,
#header .menu-cta > a:focus-visible{
  outline: 3px solid rgba(255,255,255,.28);
  outline-offset: 2px;
}

/* =========================================
   3. フッター（背景：白 / 文字：#0E1724）
========================================= */
.site-footer, .siteFooter, .l-footer, #footer {
  background-color: var(--vk-color-footer-bg);
  color: var(--vk-color-footer-text);
}

.site-footer a, .siteFooter a, .l-footer a, #footer a {
  color: var(--vk-color-footer-text);
}

.siteFooter,
.siteFooter *,
.footerMenu,
.footerMenu *,
.copySection,
.copySection *,
.vk-pageFooter,
.vk-pageFooter *,
.site-footer-copyright,
.site-footer-copyright * {
  color: var(--vk-color-footer-text) !important;
}

.siteFooter a,
.footerMenu a,
.copySection a,
.vk-pageFooter a,
.site-footer-copyright a {
  color: var(--vk-color-footer-text) !important;
}
.siteFooter a:hover,
.footerMenu a:hover,
.copySection a:hover,
.vk-pageFooter a:hover,
.site-footer-copyright a:hover {
  color: var(--vk-color-footer-text) !important;
  opacity: 0.7;
}

footer, footer * { color: var(--vk-color-footer-text) !important; }
footer a { color: var(--vk-color-footer-text) !important; }
footer a:hover { color: var(--vk-color-footer-text) !important; opacity: 0.7; }

.site-footer, .siteFooter, .l-footer, #footer {
  border-top: 0 !important;
  padding-top: 14px;
}

/* =========================================
   4. コンテンツ部分の色設定
========================================= */
main, main p, main li, main dt, main dd { color: #000000; }
main h1, main h2, main h3, main h4, main h5, main h6,
main .widget-title, main .vk_heading_title { color: #0E1724; }

/* =========================================
   5. 特定ブロック用：背景パターン（全幅）
========================================= */
.bg-carpet, .bg-carpet-navy, .bg-carpet-white, .bg-geo-navy {
  position: relative;
  z-index: 0;
  overflow: visible;
  isolation: isolate;
  padding: 40px 20px;
  background: none !important;

  --carpet-pattern-url: url('https://highclass-tenshoku.com/wp-content/uploads/2025/12/oriental-tiles.png');
  --carpet-pattern-size: 200px 200px;
  --carpet-base-color: #071a33;
  --carpet-overlay: rgba(255,255,255,0);
  --carpet-text: #ffffff;
  --carpet-heading: #ffffff;

  color: var(--carpet-text);
}

.bg-geo-navy{
  --carpet-base-color: #1b2b4b;
  --carpet-pattern-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23182747' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --carpet-pattern-size: 48px 48px;
  --carpet-text: #ffffff;
  --carpet-heading: #ffffff;
}

.bg-carpet p, .bg-carpet li, .bg-carpet dt, .bg-carpet dd,
.bg-carpet-navy p, .bg-carpet-navy li, .bg-carpet-navy dt, .bg-carpet-navy dd,
.bg-carpet-white p, .bg-carpet-white li, .bg-carpet-white dt, .bg-carpet-white dd,
.bg-geo-navy p, .bg-geo-navy li, .bg-geo-navy dt, .bg-geo-navy dd{
  color: var(--carpet-text) !important;
}
.bg-carpet h1, .bg-carpet h2, .bg-carpet h3, .bg-carpet h4, .bg-carpet h5, .bg-carpet h6,
.bg-carpet-navy h1, .bg-carpet-navy h2, .bg-carpet-navy h3, .bg-carpet-navy h4, .bg-carpet-navy h5, .bg-carpet-navy h6,
.bg-carpet-white h1, .bg-carpet-white h2, .bg-carpet-white h3, .bg-carpet-white h4, .bg-carpet-white h5, .bg-carpet-white h6,
.bg-geo-navy h1, .bg-geo-navy h2, .bg-geo-navy h3, .bg-geo-navy h4, .bg-geo-navy h5, .bg-geo-navy h6{
  color: var(--carpet-heading) !important;
}

/* Carpet系：通常リンクは inherit（ボタン類は除外） */
:where(.bg-carpet, .bg-carpet-navy, .bg-carpet-white, .bg-geo-navy)
a:not(.wp-block-button__link):not(.wp-element-button):not(.hero-bottom-fixed__btn){
  color: inherit;
}

.bg-carpet::before, .bg-carpet-navy::before, .bg-carpet-white::before, .bg-geo-navy::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -2;
  background-color: var(--carpet-base-color);
  background-image: var(--carpet-pattern-url);
  background-repeat: repeat;
  background-size: var(--carpet-pattern-size);
  background-position: top center;
  background-attachment: scroll;
}

.bg-carpet::after, .bg-carpet-navy::after, .bg-carpet-white::after, .bg-geo-navy::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--carpet-overlay);
}

.overlay-none { --carpet-overlay: rgba(255,255,255,0); }

/* white */
.overlay-white-10 { --carpet-overlay: rgba(255,255,255,.10); }
.overlay-white-20 { --carpet-overlay: rgba(255,255,255,.20); }
.overlay-white-30 { --carpet-overlay: rgba(255,255,255,.30); }
.overlay-white-40 { --carpet-overlay: rgba(255,255,255,.40); }
.overlay-white-50 { --carpet-overlay: rgba(255,255,255,.50); }
.overlay-white-60 { --carpet-overlay: rgba(255,255,255,.60); }
.overlay-white-70 { --carpet-overlay: rgba(255,255,255,.70); }
.overlay-white-80 { --carpet-overlay: rgba(255,255,255,.80); }
.overlay-white-90 { --carpet-overlay: rgba(255,255,255,.90); }

/* gray */
.overlay-gray-10 { --carpet-overlay: rgba(0,0,0,.10); }
.overlay-gray-20 { --carpet-overlay: rgba(0,0,0,.20); }
.overlay-gray-30 { --carpet-overlay: rgba(0,0,0,.30); }
.overlay-gray-40 { --carpet-overlay: rgba(0,0,0,.40); }
.overlay-gray-50 { --carpet-overlay: rgba(0,0,0,.50); }
.overlay-gray-60 { --carpet-overlay: rgba(0,0,0,.60); }
.overlay-gray-70 { --carpet-overlay: rgba(0,0,0,.70); }
.overlay-gray-80 { --carpet-overlay: rgba(0,0,0,.80); }
.overlay-gray-90 { --carpet-overlay: rgba(0,0,0,.90); }

/* navy */
.overlay-navy-10 { --carpet-overlay: rgba(7,26,51,.10); }
.overlay-navy-20 { --carpet-overlay: rgba(7,26,51,.20); }
.overlay-navy-30 { --carpet-overlay: rgba(7,26,51,.30); }
.overlay-navy-40 { --carpet-overlay: rgba(7,26,51,.40); }
.overlay-navy-50 { --carpet-overlay: rgba(7,26,51,.50); }
.overlay-navy-60 { --carpet-overlay: rgba(7,26,51,.60); }
.overlay-navy-70 { --carpet-overlay: rgba(7,26,51,.70); }
.overlay-navy-80 { --carpet-overlay: rgba(7,26,51,.80); }
.overlay-navy-90 { --carpet-overlay: rgba(7,26,51,.90); }

/* blue */
.overlay-blue-10 { --carpet-overlay: rgba(0,86,179,.10); }
.overlay-blue-20 { --carpet-overlay: rgba(0,86,179,.20); }
.overlay-blue-30 { --carpet-overlay: rgba(0,86,179,.30); }
.overlay-blue-40 { --carpet-overlay: rgba(0,86,179,.40); }
.overlay-blue-50 { --carpet-overlay: rgba(0,86,179,.50); }
.overlay-blue-60 { --carpet-overlay: rgba(0,86,179,.60); }
.overlay-blue-70 { --carpet-overlay: rgba(0,86,179,.70); }
.overlay-blue-80 { --carpet-overlay: rgba(0,86,179,.80); }
.overlay-blue-90 { --carpet-overlay: rgba(0,86,179,.90); }

/* teal */
.overlay-teal-10 { --carpet-overlay: rgba(0,128,128,.10); }
.overlay-teal-20 { --carpet-overlay: rgba(0,128,128,.20); }
.overlay-teal-30 { --carpet-overlay: rgba(0,128,128,.30); }
.overlay-teal-40 { --carpet-overlay: rgba(0,128,128,.40); }
.overlay-teal-50 { --carpet-overlay: rgba(0,128,128,.50); }
.overlay-teal-60 { --carpet-overlay: rgba(0,128,128,.60); }
.overlay-teal-70 { --carpet-overlay: rgba(0,128,128,.70); }
.overlay-teal-80 { --carpet-overlay: rgba(0,128,128,.80); }
.overlay-teal-90 { --carpet-overlay: rgba(0,128,128,.90); }

/* green */
.overlay-green-10 { --carpet-overlay: rgba(0,140,92,.10); }
.overlay-green-20 { --carpet-overlay: rgba(0,140,92,.20); }
.overlay-green-30 { --carpet-overlay: rgba(0,140,92,.30); }
.overlay-green-40 { --carpet-overlay: rgba(0,140,92,.40); }
.overlay-green-50 { --carpet-overlay: rgba(0,140,92,.50); }
.overlay-green-60 { --carpet-overlay: rgba(0,140,92,.60); }
.overlay-green-70 { --carpet-overlay: rgba(0,140,92,.70); }
.overlay-green-80 { --carpet-overlay: rgba(0,140,92,.80); }
.overlay-green-90 { --carpet-overlay: rgba(0,140,92,.90); }

/* purple */
.overlay-purple-10 { --carpet-overlay: rgba(102,51,153,.10); }
.overlay-purple-20 { --carpet-overlay: rgba(102,51,153,.20); }
.overlay-purple-30 { --carpet-overlay: rgba(102,51,153,.30); }
.overlay-purple-40 { --carpet-overlay: rgba(102,51,153,.40); }
.overlay-purple-50 { --carpet-overlay: rgba(102,51,153,.50); }
.overlay-purple-60 { --carpet-overlay: rgba(102,51,153,.60); }
.overlay-purple-70 { --carpet-overlay: rgba(102,51,153,.70); }
.overlay-purple-80 { --carpet-overlay: rgba(102,51,153,.80); }
.overlay-purple-90 { --carpet-overlay: rgba(102,51,153,.90); }

/* warm */
.overlay-warm-10 { --carpet-overlay: rgba(255,244,229,.10); }
.overlay-warm-20 { --carpet-overlay: rgba(255,244,229,.20); }
.overlay-warm-30 { --carpet-overlay: rgba(255,244,229,.30); }
.overlay-warm-40 { --carpet-overlay: rgba(255,244,229,.40); }
.overlay-warm-50 { --carpet-overlay: rgba(255,244,229,.50); }
.overlay-warm-60 { --carpet-overlay: rgba(255,244,229,.60); }
.overlay-warm-70 { --carpet-overlay: rgba(255,244,229,.70); }
.overlay-warm-80 { --carpet-overlay: rgba(255,244,229,.80); }
.overlay-warm-90 { --carpet-overlay: rgba(255,244,229,.90); }

/* beige */
.overlay-beige-10 { --carpet-overlay: rgba(233,224,205,.10); }
.overlay-beige-20 { --carpet-overlay: rgba(233,224,205,.20); }
.overlay-beige-30 { --carpet-overlay: rgba(233,224,205,.30); }
.overlay-beige-40 { --carpet-overlay: rgba(233,224,205,.40); }
.overlay-beige-50 { --carpet-overlay: rgba(233,224,205,.50); }
.overlay-beige-60 { --carpet-overlay: rgba(233,224,205,.60); }
.overlay-beige-70 { --carpet-overlay: rgba(233,224,205,.70); }
.overlay-beige-80 { --carpet-overlay: rgba(233,224,205,.80); }
.overlay-beige-90 { --carpet-overlay: rgba(233,224,205,.90); }

/* red */
.overlay-red-10 { --carpet-overlay: rgba(200,40,40,.10); }
.overlay-red-20 { --carpet-overlay: rgba(200,40,40,.20); }
.overlay-red-30 { --carpet-overlay: rgba(200,40,40,.30); }
.overlay-red-40 { --carpet-overlay: rgba(200,40,40,.40); }
.overlay-red-50 { --carpet-overlay: rgba(200,40,40,.50); }
.overlay-red-60 { --carpet-overlay: rgba(200,40,40,.60); }
.overlay-red-70 { --carpet-overlay: rgba(200,40,40,.70); }
.overlay-red-80 { --carpet-overlay: rgba(200,40,40,.80); }
.overlay-red-90 { --carpet-overlay: rgba(200,40,40,.90); }

/* gold */
.overlay-gold-10 { --carpet-overlay: rgba(212,175,55,.10); }
.overlay-gold-20 { --carpet-overlay: rgba(212,175,55,.20); }
.overlay-gold-30 { --carpet-overlay: rgba(212,175,55,.30); }
.overlay-gold-40 { --carpet-overlay: rgba(212,175,55,.40); }
.overlay-gold-50 { --carpet-overlay: rgba(212,175,55,.50); }
.overlay-gold-60 { --carpet-overlay: rgba(212,175,55,.60); }
.overlay-gold-70 { --carpet-overlay: rgba(212,175,55,.70); }
.overlay-gold-80 { --carpet-overlay: rgba(212,175,55,.80); }
.overlay-gold-90 { --carpet-overlay: rgba(212,175,55,.90); }

.bg-carpet-white{
  --carpet-pattern-url: url('https://highclass-tenshoku.com/wp-content/uploads/2025/12/white-background.png');
  --carpet-pattern-size: 1200px 480px;
  --carpet-base-color: #ffffff;
  --carpet-text: #000000;
  --carpet-heading: #0E1724;
}

body { overflow-x: clip; }

/* =========================================
   HERO CTA（bg-geo-navy + hero-geo-cta）
========================================= */
.bg-geo-navy.hero-geo-cta{
  --hero-cta-bg: #C59C58;
  --hero-cta-bg-hover: #B48A12;
  --hero-cta-text: #ffffff;
}

.bg-geo-navy.hero-geo-cta .wp-block-button > a.wp-block-button__link,
.bg-geo-navy.hero-geo-cta a.wp-block-button__link,
.bg-geo-navy.hero-geo-cta a.wp-element-button{
  background: var(--hero-cta-bg) !important;
  color: var(--hero-cta-text) !important;

  border: 1px solid rgba(197,156,88,.55) !important;
  border-radius: 999px !important;

  padding: 12px 22px !important;
  min-height: 44px;

  font-weight: 900 !important;
  letter-spacing: .06em;
  text-decoration: none !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bg-geo-navy.hero-geo-cta .wp-block-button > a.wp-block-button__link:hover,
.bg-geo-navy.hero-geo-cta a.wp-block-button__link:hover,
.bg-geo-navy.hero-geo-cta a.wp-element-button:hover{
  background: var(--hero-cta-bg-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.bg-geo-navy.hero-geo-cta .wp-block-button > a.wp-block-button__link :where(span,strong,em),
.bg-geo-navy.hero-geo-cta a.wp-block-button__link :where(span,strong,em),
.bg-geo-navy.hero-geo-cta a.wp-element-button :where(span,strong,em){
  color: inherit !important;
}

.bg-geo-navy.hero-geo-cta .wp-block-button > a.wp-block-button__link :where(svg, path, circle, rect, polygon),
.bg-geo-navy.hero-geo-cta a.wp-block-button__link :where(svg, path, circle, rect, polygon),
.bg-geo-navy.hero-geo-cta a.wp-element-button :where(svg, path, circle, rect, polygon){
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =========================================
   6. Reason section
========================================= */
.sec-reason{
  padding: clamp(48px, 6vw, 96px) 0;
  background: #f7f8fb;
}

.sec-reason .wp-block-columns{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 40px;
  align-items: flex-start;
}

@media (max-width: 900px){
  .sec-reason .wp-block-columns{ gap: 24px; }
}

.sec-reason .reason-kicker{
  letter-spacing: .12em;
  font-weight: 700;
  opacity: .65;
  text-transform: lowercase;
  margin: 0 0 10px;
}

.sec-reason .reason-list{
  display: grid;
  gap: 18px;
  counter-reset: reason;
}

.sec-reason .reason-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
}

.sec-reason .reason-card::before{
  counter-increment: reason;
  content: "0" counter(reason);
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 20px;
  font-weight: 800;
  opacity: .16;
}

.sec-reason .reason-card h3{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}

.sec-reason .reason-card p{
  margin: 0;
  opacity: .82;
  line-height: 1.8;
}

/* =========================================
   FAQ（段落＋グループ構成向け）【FAQブロック全部：完成版】
========================================= */
.sec-faq-max{
  padding: clamp(48px, 6vw, 96px) 0;
}

.sec-faq-max .faqSection{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(18px, 2.8vw, 34px);
  border-radius: 22px;

  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.16);

  --carpet-text: #0E1724;
  --carpet-heading: #0E1724;

  color: #0E1724;
}

.sec-faq-max .faqSection :where(p, li, dt, dd, h1, h2, h3, h4, h5, h6, span, strong, em){
  color: #0E1724;
}

.sec-faq-max .faqSection :where(.wp-block-group, .wp-block-paragraph){
  margin: 0 !important;
}

.sec-faq-max .faqSection a{
  color: #0E1724;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sec-faq-max .faqSection a:hover{ opacity: .75; }

.sec-faq-max .faqItem{
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: 10px 0;
}
.sec-faq-max .faqItem:last-child{ border-bottom: 0; }

.sec-faq-max .faqRow{
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-faq-max .faqRow::before{
  flex: 0 0 auto;
  display: inline-block;
  width: 28px;
  text-align: left;

  font-weight: 900;
  font-size: 26px;
  line-height: 1;

  position: relative;
  top: 1px;

  height: auto;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sec-faq-max .faqRow > :where(p, .wp-block-paragraph){
  margin: 0 !important;
  font-size: inherit;
  line-height: 1.75;
}

.sec-faq-max .faqRow--q{
  font-weight: 800;
  padding-bottom: 6px;
}
.sec-faq-max .faqRow--q::before{
  content: "Q";
  color: #0E1724;
}

.sec-faq-max .faqRow--a{
  font-weight: 600;
  opacity: .95;
}
.sec-faq-max .faqRow--a::before{
  content: "A";
  color: #B48A12;
}

@media (max-width: 768px){
  .sec-faq-max .faqSection{
    padding: 18px 14px;
    border-radius: 18px;
  }

  .sec-faq-max .faqItem{
    padding: 9px 0;
  }
}

/* =========================================
   Footer：中央寄せ（強制版）
========================================= */
:root{
  --vk-footer-max: 1100px;
  --vk-footer-pad-x: 20px;
}

.siteFooter, .site-footer, .l-footer, #footer, .vk-pageFooter{
  width: 100%;
}

.siteFooter > *,
.site-footer > *,
.l-footer > *,
#footer > *,
.vk-pageFooter > *{
  max-width: var(--vk-footer-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--vk-footer-pad-x) !important;
  padding-right: var(--vk-footer-pad-x) !important;
  box-sizing: border-box;
}

.siteFooter :where(.container, .siteFooter_inner, .footerMenu, .copySection, .vk-pageFooterInner),
.site-footer :where(.container, .siteFooter_inner, .footerMenu, .copySection, .vk-pageFooterInner),
#footer :where(.container, .siteFooter_inner, .footerMenu, .copySection, .vk-pageFooterInner),
.vk-pageFooter :where(.container, .siteFooter_inner, .footerMenu, .copySection, .vk-pageFooterInner){
  max-width: var(--vk-footer-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--vk-footer-pad-x) !important;
  padding-right: var(--vk-footer-pad-x) !important;
  box-sizing: border-box;
}

.siteFooter,
.site-footer,
.l-footer,
#footer,
.vk-pageFooter,
.siteFooter :where(p, div, small, span),
.site-footer :where(p, div, small, span),
#footer :where(p, div, small, span),
.vk-pageFooter :where(p, div, small, span){
  text-align: center !important;
}

.siteFooter :where(.footerMenu ul, .footerMenu .menu),
.site-footer :where(.footerMenu ul, .footerMenu .menu),
#footer :where(.footerMenu ul, .footerMenu .menu),
.vk-pageFooter :where(.footerMenu ul, .footerMenu .menu){
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;

  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.siteFooter :where(.footerMenu li),
.site-footer :where(.footerMenu li),
#footer :where(.footerMenu li),
.vk-pageFooter :where(.footerMenu li){
  float: none !important;
  display: inline-flex !important;
  margin: 0 !important;
}

.copySection,
.site-footer-copyright,
.vk-pageFooterInner{
  text-align: center !important;
}

.siteFooter :where(.widget, .footerWidgetArea, .footerWidget, .footerWidgetArea .widget),
.site-footer :where(.widget, .footerWidgetArea, .footerWidget, .footerWidgetArea .widget),
#footer :where(.widget, .footerWidgetArea, .footerWidget, .footerWidgetArea .widget){
  margin-left: auto !important;
  margin-right: auto !important;
}

.siteFooter :where(.row),
.site-footer :where(.row),
#footer :where(.row){
  justify-content: center !important;
}

/* =========================================
   Okura Heritage 風 UI（完全分離：部分適用のみ）
========================================= */
.ui-okura-heritage{
  --ok-navy: #0E1724;
  --ok-ivory: #FBFAF7;
  --ok-paper: #FBFAF7;
  --ok-gold: #B48A12;
  --ok-border: rgba(14,23,36,.14);
  --ok-shadow: 0 18px 50px rgba(14,23,36,.08);
  --ok-radius: 18px;
  --ok-max: 1100px;

  position: relative;
  isolation: isolate;
  background: transparent !important;
  color: var(--ok-navy);
}

.ui-okura-heritage::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background: var(--ok-ivory);
  z-index:-3;
}

.ui-okura-heritage > :where(.wp-block-group__inner-container, .wp-block-cover__inner-container){
  max-width: var(--ok-max);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.ui-okura-heritage{
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing:.02em;
  line-height:1.9;
}
.ui-okura-heritage :where(h1,h2,h3,h4,h5,h6,.vk_heading_title,.widget-title){
  font-family: var(--vk-company-font, "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif);
  letter-spacing:.06em;
  line-height:1.25;
  color: var(--ok-navy);
}

.ui-okura-heritage a{
  color: var(--ok-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.ui-okura-heritage a:hover{
  color: var(--ok-gold);
  opacity:.95;
}

.ui-okura-heritage .okura-section{ padding: clamp(52px, 6.5vw, 96px) 0; }
.ui-okura-heritage .okura-divider{ border-top: 1px solid var(--ok-border); margin: clamp(28px, 4vw, 44px) 0; }
.ui-okura-heritage .okura-card{
  background: var(--ok-paper);
  border: 1px solid rgba(14,23,36,.12);
  border-radius: var(--ok-radius);
  box-shadow: 0 14px 40px rgba(14,23,36,.06);
  overflow:hidden;
}

.ui-okura-heritage .wp-block-button__link{
  border-radius:999px !important;
  padding:12px 18px !important;
  letter-spacing:.08em;
  font-weight:700;
  border:1px solid rgba(180,138,18,.55) !important;
  background:transparent !important;
  color:var(--ok-navy) !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.ui-okura-heritage .wp-block-button__link:hover{
  background: rgba(180,138,18,.10) !important;
  border-color: rgba(180,138,18,.95) !important;
}

.ui-okura-heritage :where(input, select, textarea){
  border:1px solid rgba(14,23,36,.18);
  border-radius:12px;
  padding:12px 12px;
  background:#fff;
}
.ui-okura-heritage :where(input:focus, select:focus, textarea:focus){
  outline:3px solid rgba(180,138,18,.22);
  outline-offset:2px;
  border-color: rgba(180,138,18,.85);
}

/* =========================================
   HERO下部（固定HTML版）
========================================= */
.hero-bottom-bar{
  position: relative;
  isolation: isolate;
  background: transparent !important;

  margin: 0 !important;
  padding-top: var(--hero-bottom-pad-top, 25px) !important;
  padding-bottom: var(--hero-bottom-pad-bottom, 50px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-bottom-bar::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #fff;
  z-index: -1;
}

/* 中身 */
.hero-bottom-fixed{
  --accent: #B48A12;
  --accent-hover: #9a760f;
  --text: #0E1724;

  max-width: 1500px;
  margin: 0 auto !important;
  padding: 34px 24px !important;

  display: flex;
  align-items: stretch;
  justify-content: center;

  gap: 250px; /* PC */
}

.hero-bottom-fixed__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.hero-bottom-fixed__list > li{
  position: relative;
  padding-left: 34px;
  margin: 0;

  color: var(--text) !important;
  line-height: 1.75;
  font-weight: 700;

  --icon-center: 0.75em;
}

.hero-bottom-fixed__list > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: var(--icon-center);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
}

.hero-bottom-fixed__list > li::after{
  content: "";
  position: absolute;
  left: 9px;
  top: calc(var(--icon-center) - 1px);
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
} /* ← ★閉じカッコ必須 */

/* CTA */
.hero-bottom-fixed__cta{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* CTAボタン（a版 + wp-block-button版 両対応） */
.hero-bottom-fixed__cta :where(a.hero-bottom-fixed__btn, .wp-block-button__link, .wp-element-button){
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.06);

  border-radius: 0 !important;
  padding: 12px 22px;
  padding-right: 42px;
  text-decoration: none;
  font-weight: 800;

  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  min-height: 44px;
  white-space: nowrap;

  position: relative;
  margin: 0;
  line-height: 1;
}

.hero-bottom-fixed__cta :where(a.hero-bottom-fixed__btn, .wp-block-button__link, .wp-element-button)::after{
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 20px;
  line-height: 1;
  opacity: .95;
}

.hero-bottom-fixed__cta :where(a.hero-bottom-fixed__btn, .wp-block-button__link, .wp-element-button):hover{
  background: var(--accent-hover) !important;
  transform: translateY(-1px);
}

/* ✅ タブレット帯：gapを縮めて折り返し許可 */
@media (max-width: 1100px){
  .hero-bottom-fixed{
    gap: 32px !important;
    flex-wrap: wrap !important;
  }
}

/* ✅ スマホ：縦積み強制 */
@media (max-width: 781px){
  .hero-bottom-fixed{
    padding: 26px 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .hero-bottom-fixed__cta{
    justify-content: center !important;
    align-items: stretch !important;
  }

  a.hero-bottom-fixed__btn{
    width: 100% !important;
    box-sizing: border-box;
  }
}



/* ==================================================
   [sec-worries] こんなお悩みありませんか？（3カード）
================================================== */
.sec-worries{
  position: relative;
  isolation: isolate;

  /* 背景色は全幅疑似要素に任せる */
  background: transparent !important;

  padding: 56px 0;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ✅ コンテンツ幅に関係なく “見た目だけ” 全幅で背景を敷く */
.sec-worries::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #d9d9d9;
  z-index: -1;
}


.sec-worries__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.sec-worries :where(h2,.wp-block-heading){
  text-align:center;
  font-weight:800;
  margin: 0 0 26px !important;
}

.sec-worries .worry-cols{
  gap: 28px;
  align-items: stretch;
}

.sec-worries .worry-card{
  background:#fff;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.sec-worries .worry-thumb{
  width:100%;
  aspect-ratio: 1 / 1;
  background:#f1f1f1;
  box-sizing: border-box;
}

.sec-worries .worry-card :where(p,.wp-block-paragraph){
  margin: 14px 0 0 !important;
  text-align:center;
  font-weight:700;
  line-height:1.7;
  color:#0E1724;
  font-size:14px;
}

/* ==================================================
   2) PCは散りばめ（画像文字/文字画像）、SPは「文字→画像」に統一
   - あなたの現状：グループに reason-card ti-row-pc-reverse を付与している前提
   - ti-row-pc-reverse が付いた行だけ、SPで 1列目と2列目を入れ替える
================================================== */
@media (max-width: 781px){
  /* グループ直下に Columns がある場合 */
  .ti-row-pc-reverse > .wp-block-columns{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  /* inner-container を挟む場合 */
  .ti-row-pc-reverse > .wp-block-group__inner-container > .wp-block-columns{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }

  /* 1列目(画像)を後ろへ、2列目(文字)を先へ */
  .ti-row-pc-reverse > .wp-block-columns > .wp-block-column:first-child,
  .ti-row-pc-reverse > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child{
    order: 2 !important;
  }
  .ti-row-pc-reverse > .wp-block-columns > .wp-block-column:nth-child(2),
  .ti-row-pc-reverse > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:nth-child(2){
    order: 1 !important;
  }
}

/* ==================================================
   3) 3カラムをSPでも維持
   - あなたの現状：グループに sec-worries__inner keep-3col を付与している前提
   - keep-3col を起点に、中の Columns を「横並び固定」にする
================================================== */
@media (max-width: 781px){
  .keep-3col > .wp-block-columns,
  .keep-3col > .wp-block-group__inner-container > .wp-block-columns{
    display: flex !important;
    flex-direction: row !important;  /* SPで縦積みになるのを潰す */
    flex-wrap: nowrap !important;     /* 折り返し禁止 */
    gap: 10px !important;
  }

  .keep-3col > .wp-block-columns > .wp-block-column,
  .keep-3col > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column{
    flex: 0 0 calc(33.333% - 7px) !important;
    max-width: calc(33.333% - 7px) !important;
    min-width: 0 !important; /* はみ出し防止 */
  }

  .keep-3col :where(img, figure){
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ✅ flow-cta：色だけ（幅・余白はEditorに任せる） */
.flow-cta a.wp-block-button__link,
.flow-cta a.wp-element-button{
  background-color: #C59C58 !important;
  color: #fff !important;
  border-color: rgba(197,156,88,.55) !important;
}

.flow-cta a.wp-block-button__link:hover,
.flow-cta a.wp-element-button:hover{
  background-color: #B48A12 !important;
  color: #fff !important;
}


/* ✅ /inquiry（面談申込）ボタンを金ベタに固定 */
.home a.wp-block-button__link[href^="/inquiry"],
.home a.wp-element-button[href^="/inquiry"]{
  background: #C59C58 !important;
  background-color: #C59C58 !important;
  color: #fff !important;
  border-color: rgba(197,156,88,.55) !important;
}

.home a.wp-block-button__link[href^="/inquiry"]:hover,
.home a.wp-element-button[href^="/inquiry"]:hover{
  background: #B48A12 !important;
  background-color: #B48A12 !important;
  color: #fff !important;
}

/* 元のヘッダーを常時表示（sticky） */
#site-header, #header, .site-header, .siteHeader, .l-header{
  position: sticky;
  top: 0;
  z-index: 99999;
}

/* 管理バー表示時のズレ対策 */
body.admin-bar #site-header,
body.admin-bar #header,
body.admin-bar .site-header,
body.admin-bar .siteHeader,
body.admin-bar .l-header{
  top: 32px;
}
@media (max-width: 782px){
  body.admin-bar #site-header,
  body.admin-bar #header,
  body.admin-bar .site-header,
  body.admin-bar .siteHeader,
  body.admin-bar .l-header{
    top: 46px;
  }
}

/* ==================================================
   Lightning：ヘッダーが一瞬消える/ズレるのを完全に止める（最終版）
   → style.css の最下部に貼る
================================================== */

/* (A) スクロールバーの出たり消えたりで横ズレするのを防ぐ */
html{ scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable){
  html{ overflow-y: scroll; }
}

/* (B) ヘッダーは「常に」消えない・動かない（スクロール判定に依存しない） */
#site-header{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  z-index: 99999 !important;
}

/* 管理バー分のズレ補正（あなたの既存設定を “確実に勝たせる”） */
body.admin-bar #site-header{ top: 32px !important; }
@media (max-width: 782px){
  body.admin-bar #site-header{ top: 46px !important; }
}

/* (C) ついでに、ヘッダー配下で opacity/transform を使うアニメだけ無効化（ホバー色変化は残す） */
#site-header,
#site-header a,
#site-header nav a{
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

/* (D) PCでは #site-header-container を常に同じレイアウト（スクロールでflex化が切り替わらないように） */
@media (min-width: 992px){
  #site-header #site-header-container{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    row-gap: 0 !important;
  }

  #site-header .site-header-logo{
    display: flex !important;
    align-items: center !important;
  }

  #site-header .siteHeader_brandText{
    display: inline-flex !important;
  }

  #site-header #global-nav{
    margin-left: auto !important;
  }
}

/* (E) Lightningがスクロール時に付けるクラスでも「絶対に消えない」保険 */
body.header_scrolled #site-header,
body.header-scrolled #site-header,
body.vk-header-scrolled #site-header,
#site-header.site-header--scrolled{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  top: 0 !important;
}
body.admin-bar.header_scrolled #site-header,
body.admin-bar.header-scrolled #site-header,
body.admin-bar.vk-header-scrolled #site-header{
  top: 32px !important;
}
@media (max-width: 782px){
  body.admin-bar.header_scrolled #site-header,
  body.admin-bar.header-scrolled #site-header,
  body.admin-bar.vk-header-scrolled #site-header{
    top: 46px !important;
  }
}


#global-nav #menu-item-628 > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 999px;
  background: #C59C58;
  border: 2px solid #C59C58;
  color: #fff !important;
  line-height: 1;
  font-weight: 700;
}
#global-nav #menu-item-628 > a .global-nav-name{ color:#fff !important; }
#global-nav #menu-item-628 > a:hover{
  background:#B48A12;
  border-color:#B48A12;
}

/* =========================================
   ヘッダー：社名とメニューが被る / 間隔が広すぎる問題を修正
========================================= */
@media (min-width: 992px){

  /* ヘッダー全体：ロゴ＋ナビの間に適度な隙間を作る */
  #site-header-container{
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;  /* ←社名とメニューの距離。まだ被るなら 36px などに */
  }

  /* ナビは右寄せ固定（横幅いっぱいに広がらないように） */
  #global-nav{
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* メニューリスト：左に広がらず、右寄せで詰める */
  #global-nav .global-nav-list{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* ←これが重要（space-between を潰す） */
    width: auto !important;               /* ←横幅いっぱいを潰す */
    gap: 24px !important;                 /* ←項目間の間隔（広いなら 12px） */
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }

  /* 文字が小さく見える/違和感対策：行間を戻す（line-height:1 を潰す） */
  #global-nav .global-nav-list > li > a{
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 6px !important;     /* ←詰めたい時は 0 4px */
    line-height: 1.4 !important;
  }

  #global-nav .global-nav-name{
    line-height: 1.4 !important;
  }

  /* CTAボタン（無料キャリア相談）は高さを適正化 */
  #global-nav #menu-item-628 > a{
    padding: 10px 18px !important;
    border-radius: 999px !important;
  }
  #global-nav #menu-item-628{
    margin-left: 10px !important;
  }
}

/* ================================
   Message page polish (scoped)
================================ */
.message-page{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ガビガビ原因になりやすい重い効果をページ内だけ抑制（安全側） */
.message-page,
.message-page *{
  backdrop-filter: none !important;
}
.message-page{
  filter: none !important;
}

/* 写真：影を軽量化（重い大影だとスクロールがカクつくことがある） */
.message-page .message-media img{
  border-radius: 18px;
  display:block;
  width:100%;
  height:auto;
  box-shadow: 0 10px 24px rgba(14,23,36,.10);
}

/* 文章の行幅を安定化 */
.message-page .wp-block-media-text__content p{
  max-width: 42em;
}

/* 署名：トンマナ統一（明朝寄せ＋字間＋強弱） */
.message-page .message-sign p{ margin:0; }
.message-page .message-sign .has-small-font-size{
  opacity:.75;
  letter-spacing:.06em;
}
.message-page .message-sign .has-regular-font-size{
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.10em;
  font-weight:700;
  opacity:.92;
}

/* 経歴：箇条書き感を抑えたドット行 */
.message-page .message-career p{
  margin:0;
  position:relative;
  padding-left:18px;
}
.message-page .message-career p + p{ margin-top:10px; }
.message-page .message-career p::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;height:8px;
  border-radius:999px;
  background:#B48A12;
  transform: translateY(-50%);
}

/* SP */
@media (max-width: 781px){
  .message-page .wp-block-media-text__content p{
    max-width:none;
  }
}

/* =========================================
   LP微調整：REASON幅（PC） / H2（SP） / コンセプト本文（SP左寄せ）
   ※ 既存CSSはそのまま、最下部に追記
========================================= */

/* 1) REASON：PCだけ reason-card の横幅を狭める */
@media (min-width: 992px){
  .bg-geo-navy.overlay-blue-30 .reason-card{
    max-width: 920px !important;   /* ← 860〜980px で好みに調整 */
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

/* モバイルのみ：ハイクラス転職のコンセプト(H2)だけ小さくする */
/* =========================================
  モバイルのみ：例外で小さくしたいH2だけを狙う
  - ハイクラス転職のコンセプト
  - こんなお悩みはありませんか？
========================================= */
@media (max-width: 781px){

  /* コンセプト見出しだけ小さく */
  #post-13 .hero-geo-cta > h2.wp-block-heading.has-huge-font-size{
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.25 !important;
  }

  /* こんなお悩み見出しだけ小さく（sec-worries直下のH2） */
  #post-13 .sec-worries > h2.wp-block-heading.has-huge-font-size{
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.25 !important;
  }

  #post-13 .bg-geo-navy.overlay-blue-30 > h2.wp-block-heading.has-huge-font-size{
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.25 !important;
  }
	
}

/* 3) コンセプト：モバイルだけ「今の仕事が順調〜」の段落（2つ目のp）を左寄せ */
@media (max-width: 781px){
  .hero-geo-cta > p.has-text-align-center:nth-of-type(2){
    text-align: left !important;
    padding-left: 4px;
    padding-right: 4px;
    max-width: 42em;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.9;
  }
}

/* ================================
   SPだけ：例外で小さくしたいH2
   - ハイクラス転職のコンセプト
   - こんなお悩みはありませんか？
================================ */
@media (max-width: 781px){

  /* “has-huge-font-size” が参照する変数を、セクション内だけ上書き */
  #post-13 .hero-geo-cta{
    --wp--preset--font-size--huge: clamp(20px, 5.2vw, 26px);
  }
  #post-13 .sec-worries{
    --wp--preset--font-size--huge: clamp(20px, 5.2vw, 26px);
  }

  /* 念のため、直下限定にせず拾う（内側コンテナがあってもOK） */
  #post-13 .hero-geo-cta h2.wp-block-heading.has-huge-font-size,
  #post-13 .sec-worries h2.wp-block-heading.has-huge-font-size{
    font-size: var(--wp--preset--font-size--huge) !important;
    line-height: 1.25 !important;
  }
}

/* =========================================================
   代表挨拶（page-id-61）背景 最終FIX
   - 既存の “白ベタ” レイヤーや “transparent” を無効化
   - body に Okura風の薄格子背景を確実に出す（ヘッダー〜フッターの隙間も含む）
========================================================= */

/* 0) 過去の「html::before 背景」系が残ってたら止める（競合防止） */
html:has(body.page-id-61)::before{
  content: none !important;
}

/* 1) body に載っている ui-okura-heritage の “白ベタ塗り” を止める（これが背景を潰す） */
body.page-id-61.ui-okura-heritage::before{
  content: none !important;
  background: none !important;
}

/* 2) body 自体に Okura風「薄い格子 + ほんのり金」を敷く（これが本体） */
body.page-id-61{
  background-color: #fbf8f0 !important;
  background-image:
    radial-gradient(900px 420px at 14% 0%, rgba(180,138,18,.10), transparent 65%),
    radial-gradient(820px 420px at 86% 8%, rgba(180,138,18,.08), transparent 70%),
    linear-gradient(rgba(180,138,18,.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,138,18,.040) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(14,23,36,.014) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-45deg, rgba(14,23,36,.010) 0 1px, transparent 1px 28px) !important;

  background-size:
    auto,
    auto,
    56px 56px,
    56px 56px,
    260px 260px,
    260px 260px !important;

  background-position: center !important;
}

/* 3) テーマ側の “白い面” を透明にして、body背景を見せる */
body.page-id-61 :where(
  #page, .site, #content, .site-content, .content-area, main,
  .site-body, .site-body-container, .main-section,
  .entry, .entry-body, .page-header,
  .site-footer
){
  background: transparent !important;
  box-shadow: none !important;
}

/* 4) 代表挨拶ブロック内の「カード/白箱」っぽいのも無効化（背景を活かす） */
body.page-id-61 .ui-okura-heritage.message-page :where(.okura-card, .okura-section, .message-hero, .message-career){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   代表挨拶（page-id-61）
   コンテンツ領域だけ背景が出ない問題のFIX
   → ui-okura-heritage の“背景レイヤー”を無効化して透明にする
========================================================= */

/* 1) ui-okura-heritage が持っている背景用の擬似要素を止める（これが犯人） */
body.page-id-61 .ui-okura-heritage.message-page::before,
body.page-id-61 .ui-okura-heritage.message-page::after,
body.page-id-61 .ui-okura-heritage::before{
  content: none !important;
  background: none !important;
}

/* 2) コンテンツ側の各ラッパーを透明化（ここが白いと格子が見えない） */
body.page-id-61 .ui-okura-heritage.message-page,
body.page-id-61 .ui-okura-heritage.message-page .okura-section,
body.page-id-61 .ui-okura-heritage.message-page .wp-block-group{
  background: transparent !important;
  box-shadow: none !important;
}

/* 3) 写真：もっと丸く（白い囲いは無しのまま） */
body.page-id-61 .message-media .wp-block-media-text__media{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.page-id-61 .message-media .wp-block-media-text__media img{
  border-radius: 34px !important; /* ←もっと丸く */
}

/* =========================================
   代表挨拶：SPだけ縦並びのまま
   画像を本文幅に揃えて少し小さくする
========================================= */
@media (max-width: 781px){

  /* 代表挨拶：heroだけ（経歴は触らない） */
  body.page-id-61 .ui-okura-heritage.message-page .message-hero .wp-block-media-text__media{
    margin-bottom: 64px !important; /* ←画像と文章の間の隙間 */
  }

  body.page-id-61 .ui-okura-heritage.message-page .message-hero .message-media .wp-block-media-text__media img{
    width: 100% !important;          /* ←小さく */
    height: auto;
    display: block;
    margin-left: auto !important;   /* ←中央寄せ */
    margin-right: auto !important;  /* ←中央寄せ */
  }

}

@media (max-width: 781px){
  .ui-okura-heritage.message-page > :where(.wp-block-group__inner-container, .wp-block-cover__inner-container){
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 781px){
  body.page-id-61 .message-page .message-hero .wp-block-media-text__content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================
   SP：トップ画像 → REASON の間の空白対策
   （REASONセクションの上paddingをSPだけ小さく）
========================================= */
@media (max-width: 781px){
  body.home .bg-geo-navy.overlay-blue-30{
    padding-top: 80px !important; /* 0〜24pxで好み */
  }
  body.home .bg-geo-navy.overlay-blue-30 > h2.wp-block-heading{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 991.98px){

  /* ヘッダーの中で配置するための基準 */
  #site-header-container{
    position: relative;
  }

  /* ボタン本体：追従（fixed）をやめてヘッダー内に置く */
  #vk-mobile-nav-menu-btn{
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    z-index: 99999 !important;

    /* 背景なし */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    /* 押しやすいタップ領域 */
    width: 48px !important;
    height: 48px !important;

    /* “MENU”文字は消す */
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
  }

  /* 三本線（白）を疑似要素で描画：背景は無し */
  #vk-mobile-nav-menu-btn::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;     /* ←アイコン横幅（大きくしたいなら 32〜34） */
    height: 2.5px;     /* ←線の太さ（3〜4） */
    background: #fff;
    border-radius: 999px;
    transform: translate(-50%, -50%);

    /* 上下の線をbox-shadowで作る */
    box-shadow: 0 -8px 0 #fff, 0 8px 0 #fff; /* ←線間隔（8〜10） */
  }

  /* （任意）開いた時に×にしたい場合：JS側で menu-open クラスが付くなら */
  #vk-mobile-nav-menu-btn.menu-open::before{
    box-shadow: none;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #vk-mobile-nav-menu-btn.menu-open::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 999px;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}