@charset "utf-8";
/*
Theme Name: Lightning Child
Template: lightning
Author:アートフレア株式会社
Version: 1.2
*/
/* 標準データ最終更新日：2026/01/29  */


/*
 * WEBフォントの読み込み（@import url('https://fonts～'); ）はHeader.phpで行う
*/


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  General　全体的な設定
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* :root設定、bodyへの上書き、カラー変数設定など */


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Common 汎用パーツ系
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 繰り返しボタン・見出し、余白設計など 汎用パーツへの上書き */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Header ヘッダーまわり
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ヘッダー固定 */
body  {
	overflow-x: unset !important;
    display: flex;
    flex-direction: column;
}
.device-pc #site-header {
    position: sticky;
    top: 0;
}
.logged-in.device-pc #site-header {
    top: 32px;
}

/* グローバルナビ */
.global-nav-list>li>a {
	transition: .3s;
	border-bottom: 3px solid transparent;
}
.global-nav-list>li>a:hover,
.global-nav-list>li.current-menu-item>a {
    color: var(--vk-color-custom-1);
    border-bottom: 3px solid var(--vk-color-custom-1);
}

.site-header-logo img {
    max-height: 45px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Footer フッターまわり
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* フッターウィジェット、フッターロゴ、コピーライト */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Toppage トップページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Pageheader, Breadcrumb 下層ページヘッダー・パンくずリスト
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 下層ページのページヘッダー、パンクズ設定 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Page 下層ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ページごと、パーツごとにコメントアウトで注釈を入れてください。 */

/* 会社概要 */

/* 会社概要　＞　代表あいさつ */


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Archive　ブログ一覧ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Single　ブログ詳細ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  その他・追加機能
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  サンプルBPOサイト用 追加CSS
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");


:root {
  /* カラー */
  --vk-color-primary: #2a6d8a;
  --vk-color-primary-dark: #1e5068;
  --vk-color-primary-vivid: #3080a0;
  --vk-color-custom-1: #2a6d8a;
  --vk-color-custom-2: #f5f0eb;
  /* デザイン */
  --round: 20px;
  --shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  /* フォント */
  --vk-size-text: 16px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ヘッダー */
.site-header {
  background-color: transparent !important;
  box-shadow: none !important;
}
.device-pc #site-header {
  position: fixed;
  top: 30px;
}
#site-header-container {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: var(--round);
  padding: 0.5rem 2rem;
}
#site-header-container.container {
  max-width: calc(100% - 16%);
}
.global-nav-list > li .global-nav-name {
  font-size: 16px !important;
  color: var(--wp--preset--color--vk-color-primary);
  letter-spacing: 0.2em;
  font-weight: 900;
}
.global-nav-list > li .global-nav-description {
  font-size: 14px !important;
  padding-top: 5px;
  font-weight: 500;
  color: #333;
}
.global-nav-list > li > a {
  transition: 0.3s;
  border-bottom: 3px solid transparent;
}
.global-nav-list > li > a:hover,
.global-nav-list > li.current-menu-item > a {
  color: var(--vk-color-custom-1);
}




/* 汎用パーツ */
.column-out-left {
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
}
.gap-4 {
  gap: 4rem;
}
.img-round img {
  border-radius: var(--round);
}

/* ページヘッダー */
.page-header {
  border-radius: 0 0 var(--round) var(--round);
  margin-right: 5%;
  margin-left: 5%;
}
.page-header-inner {
  margin: 5em auto 1em !important;
}
.page-header-subtext {
  letter-spacing: 0.2em;
  font-weight: 900;
}

/* テキスト */
h2, h3, h4, h5, p, li, th, td {
  color: #555;
}






/* ヒーロー（スライダー + テキストオーバーレイ + マスク） */
.mainimg.vk_outer.alignfull {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mainimg.vk_outer > div {
  max-width: 100% !important;
  width: 100% !important;
}
.mainimg.vk_outer > div > .vk_outer_container {
  position: relative;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.mainimg .vk_slider {
  margin-left: 5vw;
  margin-right: 5vw;
}
.mainimg .wp-block-cover {
  min-height: 80vh !important;
  border-radius: 0 0 var(--round) var(--round);
  overflow: hidden;
}
.mainimg .wp-block-cover__image-background {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.mainimg .vk_slider_item_container {
  width: 100%;
}
/* スライダーの上にマスク */
.mainimg .vk_slider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0 0 var(--round) var(--round);
  z-index: 1;
  pointer-events: none;
}
/* テキストオーバーレイ */
.teaser-main {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}


/* タイポグラフィ（見出しサイズ） */
/* セクション見出し h2: max 30px */
h2.wp-block-heading {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem) !important;
}
/* サブ見出し h3: max 24px */
h3.wp-block-heading {
  font-size: clamp(1.125rem, 0.95rem + 0.875vw, 1.5rem) !important;
}
/* ヒーロー見出しは除外して元のサイズを維持 */
.teaser-main h2.wp-block-heading {
  font-size: clamp(1.875rem, 1.466rem + 2.05vw, 3rem) !important;
}