/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:Lightningの子テーマ
Author:
*/

.googlemapStyle {
	aspect-ratio: 16 / 6;
	max-width: 1110px;
	width: 100%;
    height: auto;
	margin-top:10px;
	box-shadow: 1px 1px 5px rgba(20,20,20,0.3);
}

/* カラムに影を付けたい */
.columnShadow {
	box-shadow: 1px 1px 5px rgba(20,20,20,0.3);
}

/* Pの下のマージンを小さくしたい */

.pMarginS {
	margin-bottom: 50px;
}

/

* 🎯 メディアとテキストブロックのテキストを上端に揃える最終コード */

/* 1. テキストコンテナの親要素にFlexboxを強制適用し、上端揃え (前回設定) */
.wp-block-media-text__body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 垂直方向の上端揃えを指示 */
}

/* 2. テキスト本体の要素（wp-block-media-text__content）にFlexboxの配置を継承させる */
.wp-block-media-text__content {
    /* Flexアイテムとして、配置を上端に揃える */
    align-self: flex-start !important;
    
    /* 念のため、余分なマージンやパディングをリセット */
    margin-top: 0 !important; 
    padding-top: 0 !important;
    
    /* 以前の左右パディング調整CSSも統合 */
    padding-left: 10px !important;
    padding-right: 10px !important; 
}




/* 💥 グラデーションと透明の競合解消コード */
/* ヘッダー全体を構成する主要な要素群へ適用 */
.site-header-outer,
.navbar-fixed-top,
#nav_top,
.main-navigation,
#site-header-container {
    /* 1. ショートハンドでグラデーションを直接指定し、全ての背景プロパティを上書き */
    /* ここにグラデーションの指定のみを記述し、他の背景プロパティを無効化する #62CCE3, #4FB7CE */
    background: linear-gradient(120deg, #1F5B7A, #28759d) !important;
}

/* サイトキャッチフレーズとナビゲーションメニューの文字色を白に強制変更（再確認） */
.site-header-logo a,
.site-header-logo a span,
.main-navigation .menu > li > a {
    color: #ffffff !important;
}

/* ホバー時の背景色を透明に（ナビゲーションメニュー用） */
.main-navigation .menu > li > a:hover {
    background-color: transparent !important;
}

/* タイトル文字のサイズを調整 */
.page h1 {
  font-size: 18px !important;   /* 好きなサイズに変更可 */
 ?line-height: 1.4 !important; ?/* バランス調整 */
}

/* セミナー告知ページのタイトル帯の上下余白をそろえて“見た目中央”にする */
.page h1,
.page h1 a {
  padding-top: 6px !important;
  padding-bottom: 8px !important;
  line-height: 1.3 !important;
}

/* ヘッダー全体をブラウザ幅いっぱいに広げる */
.site-header-outer,
#site-header,
header.site-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}

/* ヘッダー内部の container（中央寄せ制限）を解除 */
#site-header-container,
.site-header-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* スマホ時（991px以下）だけタイトル文字を小さくする */
@media (max-width: 991px) {
  .site-header-logo a span {
    font-size: 13px !important;  /* お好みで14〜20px程度 */
    line-height: 1.3 !important;
  }
}

/* メインビジュアルをヘッダにくっ付ける */
.site-body {
    padding: 33px 0 4rem 0 !important;
}

/* 🌊 フッターの背景をヘッダーと同じグラデーションで塗りつぶす */

/* フッターの主要要素にグラデーションを強制適用 */
#footer, 
.site-footer, 
.site-footer-outer {
    /* 左から右へのグラデーションをショートハンドで適用 #62CCE3, #4FB7CE*/
    background: linear-gradient(120deg, #1F5B7A, #28759d) !important;
}

/* 📝 フッターの文字色も白に（グラデーションで見えにくくなるため） */
#footer a, 
#footer, 
.site-footer a, 
.site-footer {
    color: #ffffff !important;
}

/* ❌ フッター上部の1pxボーダーを削除する */

/* フッターの主要要素から上部ボーダーを強制的に削除 */
#footer, 
.site-footer, 
.site-footer-outer {
    border-top: none !important;
    border-top-width: 0 !important;
}

/* フッターの上に位置する可能性のある主要コンテンツエリアのボーダーも削除（念のため） */
#container,
.site-content {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
}

/* すべての画面幅でグラデ帯の高さを固定する（33pxに統一） */

/* ヘッダー外側 */
.site-header-outer,
header.site-header,
#site-header {
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ヘッダー内のコンテナ */
#site-header-container,
.site-header-container {
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 !important;
  margin: 0 !important;
}

:where(figure) {
    margin: 0 0 0;
}


.pMargine {
	margin-bottom: 3px;
}


/* 🔥 タイトル文字を上下ど真ん中に揃える（Lightning Pro 用） */
.site-header-container,
#site-header-container {
    display: flex !important;
    align-items: center !important;  /* ← これが上下中央の決め手 */
}

/* タイトル文字本体の縦位置を調整 */
.site-header-logo a span {
    line-height: 1 !important;   /* 固定の line-height を解除 */
    display: inline-block !important;
    padding: 0 !important;
	padding-left: 10px !important;
}

/* PC幅だけ対象に（スマホは今のまま） */
@media (min-width: 992px){

  /* スクロール時ヘッダーのロゴ（タイトル）を上下センターに */
  body.header_scrolled .site-header-logo {
    /* 高さをバーと合わせる */
    height: 35px !important;
    min-height: 35px !important;

    /* 縦方向ど真ん中 */
    display: flex !important;
    align-items: center !important;

    /* ズレの原因になる余計な余白を消す */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 中のテキストもリセットして親のセンターに従わせる */
  body.header_scrolled .site-header-logo a,
  body.header_scrolled .site-header-logo a span {
    display: inline-block !important;
    height: 35px !important;
    line-height: 35px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* スクロール後グロナビのタイトル左に余白（PC） */
@media (min-width: 992px){
  body.header_scrolled .site-header-logo a span {
    padding-left: 10px !important;  /* ← 好きな値に変更してOK */
  }
}

/* ▼ スクロール後のグロナビを白文字に統一（Lightning Pro 完全対応） */
body.header_scrolled .global-nav-list > li > a,
body.header_scrolled .global-nav-list > li > a span,
body.header_scrolled .navbar-nav > li > a,
body.header_scrolled .navbar-nav > li > a span,
body.header_scrolled .navbar-fixed-top,
body.header_scrolled .navbar-fixed-top a {
    color: #ffffff !important;
}


.ttl_background3 {
  font-weight: bold;
  padding: 0.5em 1em;
  background-color: #1F5B7A;/*4fb7ce*/
  color: #fff;
  overflow: hidden;
  position: relative;
}
.ttl_background3::after {
  content: '';
  background-color: #fff;
  opacity: 0.3;
  transform: rotate(-65deg);
  position: absolute;
  bottom: -250px;
  right: -250px;
  width: 300px;
  height: 500px;
}

/*********** 上に戻るボタンカスタマイズ ***********/
.page_top_btn {

/*ボタンの大きさ*/
width: 60px;
height: 60px;

/*ボーダーの種類と色*/
border: solid #fff;

/*ボタンの背景色*/
/*background:#4fb7ce;*/
	background:#1F5B7A;

/*ボタンの丸み*/
border-radius: 50%;

/*ボタンの中の画像（デフォルトのもの）*/
 background-image: var(--ver_page_top_button_url);

/*ボタンの中の画像サイズと位置など*/
background-size:50%;
background-repeat: no-repeat;
background-position: center;
/*シャドウ効果なし*/
 box-shadow: 2px 2px 4px gray;
}


/* 📱 モバイルメニューアイコンを右端に固定する */
@media (max-width: 991px) {
    
    /* 1. ハンバーガーメニューアイコン（ボタン）を右端に配置 */
    .navbar-toggle,
    .vk-mobile-nav-menu-btn {
        /* アイコンを画面右側に固定配置 */
        position: fixed !important; 
        top: 5px !important;    /* 画面上端からの距離を調整 (20pxは例) */
        right: 15px !important;  /* 画面右端からの距離を調整 (15pxは例) */
        left: auto !important;   /* 左側の位置指定を解除 */
        z-index: 99999 !important; /* 他の要素より手前に表示 */
    }

    /* 2. PCヘッダーが残っている場合、ヘッダー内のモバイルトグルを非表示に（念のため） */
    .site-header-container .navbar-toggle {
        display: none !important; 
    }
}


/************ この上はうまく機能している ************/


/* 画面サイズごとに画像を切り替える */
/* まず全部非表示にする */
.mv-pc,
.mv-tab,
.mv-sp {
  display: none;
}

/* PC用（Lightningのlg以上：992px〜） */
@media (min-width: 992px) {
  .mv-pc {
    display: block;
  }
}

/* タブレット用（Lightningのmd：768〜991px） */
@media (min-width: 768px) and (max-width: 991px) {
  .mv-tab {
    display: block;
  }
}

/* スマホ用（〜767px） */
@media (max-width: 767px) {
  .mv-sp {
    display: block;
  }
}