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

/* PCサイズ（960px以上）だけに適用 */
@media screen and (min-width: 960px) {
  /* 1. コンテナのFlex構造を完全にリセット */
  #site-header-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    max-width: 100% !important; /* 幅制限を解除 */
  }

  /* 2. ロゴ周りの余計な「伸び（flex-grow）」を消す */
  .site-header--layout--nav-float .site-header-logo {
    flex: none !important; /* 左に押し出す力を消す */
    display: block !important;
    margin: 0 auto !important;
    width: fit-content;
    padding: 15px 0; /* 上下の余白調整 */
  }

  /* 3. ナビゲーションを親の幅いっぱいに広げる */
  .global-nav--layout--float-right {
    flex: none !important; /* ロゴと同じく、flexの自動計算を無効化 */
    width: 100% !important;
    display: block !important;
  }

  .global-nav-list {
    display: flex !important;
    justify-content: center !important;  /* 均等(space-between)より中央(center)が綺麗に見えることが多い */
    gap: 5px; /* メニュー間の距離を調整 */
    width: 100%;
    list-style: none;
    padding: 0;
  }
}


/* スクロール時にロゴ画像を非表示とする */
.header_scrolled .site-header-logo {
    display: none;
}

/* モバイルではヘッダーメニューを非表示とする */
@media (max-width: 991.98px) {
  body:not(.header_scrolled) .global-nav--layout--float-right {
    display: none;
  }
}

/* サイトヘッダーの変更 */
.site-header{
  /* 新仕様 */
  position: relative;
  overflow: visible; /* 内部のぼかしをはみ出させない */
  background: rgba(255, 255, 255, 0.4); /* 全体の透明度 */
    
  /* 下側に光る境界線 */
  border-bottom: 1px solid rgba(50, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(50, 255, 255, 0.1);
}
/* .site-header で使う */
/* 背後が空でも、この擬似要素が「ボケる対象」になる */
.site-header::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 100%;
    height: 100%;
    /* 未来的な色の粒を配置 */
    background: radial-gradient(circle at 20% 30%, rgba(51, 255, 0, 0.15), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(50, 255, 255, 0.15), transparent 40%);
    
    /* ヘッダー内部でボケを完結させる */
    filter: blur(20px);
    z-index: -1;
}

/* 子メニュー全体の枠組み（すりガラス風） */
.global-nav-list li ul {
  background: rgba(255, 255, 255, 0.7) !important; /* 背景を少し透けさせる */
  -webkit-backdrop-filter: blur(15px); /* Safari用の背景ぼかし */
  backdrop-filter: blur(15px); /* 背景のぼかし効果 */
  border: 3px solid rgba(50, 255, 255, 0.4) !important; /* 水色に光る境界線 */
  box-shadow: 0 8px 25px rgba(50, 255, 255, 0.2) !important; /* 浮かび上がるような影 */
  border-radius: 8px; /* 角を少し丸くして柔らかい印象に */
  padding: 10px 0 !important; /* 上下の余白 */
  margin-top: 5px !important; /* 親メニューとの間に少し隙間を作る */
}
/* 子メニューの各リンク（文字）の設定 */
.global-nav-list li ul li a {
  color: #005a5a !important; /* ページヘッダーと同じ深緑系の色で統一 */
  font-weight: bold; /* 文字を少し太く */
  padding: 12px 20px !important; /* クリックしやすいように余白を確保 */
  transition: all 0.3s ease; /* マウスを乗せたときに「ふんわり」変化させる */
  background: transparent !important; /* デフォルトの背景を透明に */
  border-bottom: 1px solid rgba(50, 255, 255, 0.2) !important; /* 項目間にうっすら線を入れる */
}
/* 最後の項目の下線は消す */
.global-nav-list li ul li:last-child a {
  border-bottom: none !important;
}
/* 子メニューにマウスを乗せたときのギミック */
.global-nav-list li ul li a:hover {
  background: rgba(50, 255, 255, 0.2) !important; /* うっすら水色に光る */
  color: #000 !important; /* 文字を黒にして目立たせる */
  padding-left: 25px !important; /* 少しだけ右にスライドする動き */
}

/* ページヘッダーの変更 */
.page-header{
  position: relative;
  color: #005a5a;
  font-weight: bold;
  letter-spacing: 0.05em; /* 文字間を少し開ける */
  background: rgba(240, 240, 240, 0.2);
    
  /* 境界線を光らせる */
  border: 1px solid rgba(50, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(50, 255, 255, 0.2);
  border-radius: 12px;
    
  /* Safari対応のボケ（背後に要素がある場合も想定） */
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);

	min-height: 3rem;

/* メニューの文字の色を変える */
.global-nav-name{
	color: black;
}

/* reCAPTCHAの保護マークを消す */
.grecaptcha-badge {
	visibility: hidden;
}

/* Dサイト */
/* フォントサイズ */
:root {
  --vk-size-text: 18px;
}
.main-section>.vk_posts>.vk_post-col-lg-12 .vk_post_excerpt {
  font-size: calc(var(--vk-size-text) * 0.9);
}
p {
  font-size: calc(var(--vk-size-text) * 1.1); /* 一回り大きく */
}
@media (max-width: 768px) {
  p {
    font-size: calc(var(--vk-size-text) * 1.0); /* スマホでは標準サイズ */
  }
}

/* リンクテキストの色 */
p a {
  color: #00f; /* 通常のリンクの色を青に設定 */
}
p a:hover {
  color: #0f0; /* リンクにホバーしたときの色を緑に設定 */
}
p a:active {
  color: #f00; /* リンクがアクティブなときの色を赤に設定 */
}
p a:visited {
  color: #00bfff; /* 訪問済みのリンクの色を紫に設定 */
}