/* ==========================================================
   WordPress のテーマ側の幅制限・見出し装飾・余白を打ち消す（body.sk-page 限定）
   ----------------------------------------------------------
   親テーマ（Lightning 等）のCSSはこちらより後に読み込まれ、同じ詳細度ならテーマが勝つ。
   新しい要素で崩れたら、まずここに足す。:where() を使って詳細度を上げすぎない。
   body.sk-page は functions.php の body_class フィルターで付く。
   ========================================================== */

body.sk-page :is(
  #page, #wrapper, #container, #content, #primary, #main, #site-content,
  .site, .site-content, .site-main, .content-area, .main-content,
  .container, .container-fluid, .l-container, .l-content, .l-main, .inner, .wrap, .wrapper,
  .entry, .entry-content, .page-content, .post-content, .post, .page,
  .wp-site-blocks, .wp-block-post-content, .is-layout-constrained, .is-layout-flow,
  .has-global-padding, .alignwide, .alignfull
) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Gutenberg の constrained レイアウト：直下の子に content-size の max-width がかかる */
body.sk-page .is-layout-constrained > *,
body.sk-page .wp-block-post-content > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 本文の上下の余白や、テーマ側のパンくず・タイトルなど */
body.sk-page .entry-header,
body.sk-page .page-header,
body.sk-page .entry-title,
body.sk-page .breadcrumbs,
body.sk-page .wp-block-post-title {
  display: none !important;
}

/* Lightning 標準のヘッダー・パンくず・ハンバーガーメニュー（このデザインは独自のヘッダーを使う） */
body.sk-page #site-header,
body.sk-page #breadcrumb,
body.sk-page #vk-mobile-nav-menu-btn,
body.sk-page #vk-mobile-nav {
  display: none !important;
}
body.sk-page :is(.site-content, .entry-content, .page-content, .wp-block-post-content, main) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 横に少しはみ出しても横スクロールを出さない（overflow:hidden ではなく clip：position:sticky を壊さない） */
body.sk-page {
  overflow-x: clip;
}

/* テーマ（Lightning）が h2 / h3 に自動で付ける罫線・余白を消す
   ・h2：上に太線＋下に細線（border-top / border-bottom / padding）
   ・h3：下に細線（border-bottom / padding）
   :where() で除外しているので詳細度は上がらず、独自の罫線を持つ要素（.sk-keep-border を付ける）は
   自分のCSSがそのまま効く。 */
body.sk-page :is(h2, h3):where(:not(.sk-keep-border)) {
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* テーマ／WordPress標準のスタイルがリンク全体に付ける下線を消す
   カード全体が <a> のため、カード内の文字すべてに下線が入っていた。
   下線を残したいリンクには .sk-keep-underline を付ける。:where() は詳細度を上げない */
body.sk-page a:where(:not(.sk-keep-underline)),
body.sk-page a:where(:not(.sk-keep-underline)):is(:hover, :focus, :active) {
  text-decoration: none;
}

/* テーマ（Lightning）が h2 / h3 の ::after で付ける青い短い線を消す
   （h3:where(:not(.wp-block-post-title))::after … 幅30%・下に1pxのメインカラー線） */
body.sk-page :is(h2, h3):where(:not(.sk-own-after))::after {
  content: none;
}

/* テーマ（Lightning）が h4 に自動で付ける灰色の背景・余白・角丸を消す */
body.sk-page h4 {
  background: none;
  border-radius: 0;
  padding: 0;
}
/* 色を「親から引き継ぐ」リンク（common.css の `a { color: inherit }`）は、テーマの `a` に負けて青くなる。
   色を引き継ぐクラス付きリンクを作ったら、ここにそのクラスを足す（例：.common_header__logo, .page__card-link） */
body.sk-page a:not([class]),
body.sk-page :is(.common_header__logo) {
  color: inherit;
}

/* 見出し（.top__title）：色を指定していないので、テーマの h2 の色（#333）が当たる。親の色（--color-text／白い見出しは自分のクラス）に揃える。
   :where で詳細度を最小にして、.top__title--white など自分のクラスの色指定を邪魔しない */
:where(body.sk-page) .top__title {
  color: inherit;
}

/* ボタン（.top__btn）：リンク（<a>）はテーマのリンク色（暗い灰色／ホバーで青）に負けるので、通常時・ホバー時の文字色を明示する
   ・標準＝黒地に白文字（ホバーで白地に黒文字）／--white＝白地に黒文字（ホバーで透明地に白文字）／--line＝透明地に黒文字（ホバーで黒地に白文字） */
body.sk-page .top__btn {
  color: var(--color-white) !important;
}
body.sk-page .top__btn:is(:hover, :focus-visible) {
  color: var(--color-brand-dark) !important;
}
body.sk-page .top__btn--white,
body.sk-page .top__btn--line {
  color: var(--color-brand-dark) !important;
}
body.sk-page .top__btn--white:is(:hover, :focus-visible),
body.sk-page .top__btn--line:is(:hover, :focus-visible) {
  color: var(--color-white) !important;
}

/* WORKS 一覧（モーダル）のカード全体リンク：中の文字（名前など）が、ホバーでテーマの青を引き継がないよう文字色を明示 */
body.sk-page a.works__link,
body.sk-page a.works__link:is(:hover, :focus, :active) {
  color: var(--color-text);
}
/* 一覧のカテゴリボタン・ページ送り：通常時・ホバー時とも、自分で決めた色（テーマの a:hover の青を避ける）。選択中は白文字 */
body.sk-page a.works__cats-link,
body.sk-page a.works__pager-link {
  color: var(--color-text);
}
body.sk-page a.works__cats-link:is(:hover, :focus),
body.sk-page a.works__pager-link:is(:hover, :focus) {
  color: var(--color-brand);
}
body.sk-page a.works__cats-link[aria-current="true"] {
  color: var(--color-white);
}

/* 送信ボタン：テーマの `input[type=submit]`（青い背景・枠・余白）に負けないよう、詳細度を上げて上書きする */
body.sk-page input.contact__submit {
  padding: 0 56px 0 40px;
  border: 1px solid var(--color-brand-dark);
  border-radius: 999px;
  background-color: var(--color-brand-dark);
  color: inherit;
}
body.sk-page input.contact__submit:is(:hover, :focus-visible) {
  border-color: var(--color-brand-dark);
  background-color: var(--color-white);
  color: inherit;
}

/* ホバーで文字が青くなるのを防ぐ（テーマの `a:hover` ＝ 青）。
   ・色を指定していないリンクは、ホバーでも親の色のまま（:where で詳細度を下げ、自分のCSSの色指定を邪魔しない） */
:where(body.sk-page) a:is(:hover, :focus, :active) {
  color: inherit;
}
/* ・白文字のボタン類は、テーマに負けて暗い灰色／青になるので、通常時もホバー時も白を明示する */
body.sk-page :is(.common_side a, .common_fixed__btn, .common_pill, .top__mv-scroll, .top__recruit-link),
body.sk-page :is(.common_side a, .common_fixed__btn, .common_pill, .top__mv-scroll, .top__recruit-link):is(:hover, :focus, :active) {
  color: var(--color-white) !important;
}

/* ホバーで文字が青くなるのを防ぐ：色を自分で指定していて :hover の色を指定していないリンクは、通常時と同じ色を明示する
   body.sk-page :is(.xxx__tel):is(:hover, :focus, :active) { color: var(--color-brand); } */

/* プラグイン（VK All in One Expansion Unit）の「ページトップへ」ボタンを消す
   プラグイン側は .scrolled .page_top_btn { display:block } で出すため、ID指定で確実に上書きする */
body.sk-page #page_top {
  display: none !important;
}

/* テーマ（Lightning）が p / ul / ol / dl / blockquote / iframe に付ける下の余白を消す
   `.wp-block-table, blockquote, dl, iframe, ol, p, ul { margin-bottom: var(--vk-margin-element-bottom) }` への対策。
   詳細度は、テーマ（0,0,1）より高く、こちらのクラス指定（0,1,0）より低い（0,0,2）にしている。
   → こちらのCSSで margin を指定している要素はその値のまま、指定のない要素だけ余白が0になる */
html :where(body.sk-page) :is(p, ul, ol, dl, blockquote, iframe) {
  margin-bottom: 0;
}

/* テーマが ul / ol に付ける左余白（`:is(ul,ol):where(:not(.wp-block-post-template)) { padding-left: 1.5em }`）を、
   クラス付きの ul / ol（こちらで作ったレイアウト用リスト）だけ消す。カードや一覧が右に寄るのを防ぐ。
   詳細度は（0,0,2）で、テーマ（0,0,1）より高く、こちらのクラス指定（0,1,0）より低い。
   → 余白を自分で指定しているリストはその値のまま。クラスなしの本文中のリストには影響しない */
html :where(body.sk-page) :is(ul, ol):where([class]) {
  padding-left: 0;
}

/* 注意：上の「main の余白を消す」!important は、固定ヘッダー分の上余白まで消し、パンくずがヘッダーの下に隠れる。
   各ページのCSSで確保する：body.sk-page main.ページ名 { padding-top: 80px !important }（SP 60px） */