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


/*==============================================
  Contact Form 7
===============================================*/
/* Contact Form7スマホ・タブレット用カスタマイズ */
@media(max-width:850px){
  /* テーブルの見出しとフォーム */
  table.inquiry th,table.inquiry td {
     display:block;
     padding:1em 0!important;
     width:100%;
     border:0;
  }
  
  /* 送信ボタン */
  input.wpcf7-submit{
     margin-bottom:30px;
     width:100%;
  }
  }
  
  /* 日付タグ上のテキストをPCとスマホで変更 */
  @media(max-width:900px){
  .pcdate{
     display: none;
  }
  }
  @media(min-width:1000px){
  .spdate{
     display: none;
  }
  /* 日付タグの幅を調整 */
  .wpcf7-date.dateform{
     width: 25%;
  }
  }
  
  /* Contact Form7全体カスタマイズ */
  
  /* 自動入力されるPタグを無効にする */
  .inquiry p {
     display: inline;
  }
  
  /*テーブル下に余白.枠線・テキストの行間 */
  table.inquiry {
     margin-bottom: 30px;
     border:solid 1px #d7d7d7;
     line-height:1.2;
     vertical-align:middle;
  }
  
  /* テーブルの行 */
  .inquiry tr {
     border:0!important;
  }
  
  /* テーブルの見出し側 */
  .inquiry th{
     text-align:left;
     font-size:16px;
     color:#444;
     padding:1em 0.5em;
     width:0;
     background:#efefef;
     border:solid 1px #d7d7d7;
     white-space: nowrap;
  }
  
  /* 必須と任意タグ */
  .haveto,.any{
     font-size:13px;
     padding:5px;
     background:#0a965b;
     color:#fff;
     border-radius:2px;
     margin-right:5px;
     font-weight:normal;
  }
  
  /* 任意タグの背景カラー */
  .any{
     background:#93c9ff;
  }
  
  /* テーブルフォーム側 */
  .inquiry td{
     font-size:15px;
     border:solid 1px #d7d7d7;	
  }
  
  /* 入力エリア幅最大 */
  .wpcf7-form-control {
     width: 100%;
  }
  
  /* フォーム入力欄の余白・背景カラー・枠線消す指定 */
  .inquiry input,.inquiry select,.inquiry textarea {
     margin: 5px 0;
     background:#eff1f5;
     border: none;
     padding:0.7em;
  }
  .inquiry textarea {
     padding-bottom:10em;
  }
  
  /* チェックボックスとラジオボタンの位置調整 */
  .wpcf7-list-item-label,.wpcf7-checkbox,input[type=checkbox],input[type=radio]{
     vertical-align:middle;
  }
  .wpcf7-list-item-label{
     padding:0 5px 0 2px;
  }
  /*ラジオボタンを縦並び指定*/
  .verticallist{
     display:inline-grid;
  }
  
  /* 送信ボタンのデザイン */
  .wpcf7-submit{
     display: block;
     margin:10px auto;
     padding:1em 0;
     width:80%;
     background:#09b555;
     color:#fff;
     font-size:18px;
     font-weight:bold;	 
     border-radius:4px;
     border: none;
  }
  
  /* 送信ボタンマウスホバー時 */
  .wpcf7-submit:hover{
     opacity: 0.9;
     transition: 0.3s;
  }
  
  /* フォーム上部に表示されるエラーメッセージを非表示 */
  .screen-reader-response {
      display: none;
  }
  
  /* フォーム内エラーメッセージを赤色に指定 */
  .wpcf7-not-valid-tip {
      color: #e92323;
  }
  /*==============================================
    gnav アイコン　Font Awesome
  ===============================================*/
  /* global-nav-nameの前にアイコンを配置 */
  .global-nav-list > li > a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      text-decoration: none;
  }
  
  .global-nav-list > li > a .global-nav-name {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      font-weight: normal;
  }
  
  .global-nav-list > li > a .global-nav-name:before {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 24px;
      display: block;
      margin-bottom: 5px;
      color: #666;
  }
  
  /* 各メニューごとのアイコン設定 */
  /* トップページ */
  .global-nav-list > li:nth-child(1) > a .global-nav-name:before {
      content: "\f015"; /* house */
  }
  
  /* よつばについて */
  .global-nav-list > li:nth-child(2) > a .global-nav-name:before {
      content: "\f185"; /* sun */
  }
  
  /* よつばの生活 */
  .global-nav-list > li:nth-child(3) > a .global-nav-name:before {
      content: "\f004"; /* heart */
  }
  
  /* 入園について */
  .global-nav-list > li:nth-child(4) > a .global-nav-name:before {
      content: "\f19d"; /* graduation-cap */
  }
  
  /* 毎日のよつばっ子 */
  .global-nav-list > li:nth-child(5) > a .global-nav-name:before {
      content: "\f1ae"; /* child */
  }
  
  /* お問い合わせ */
  .global-nav-list > li:nth-child(6) > a .global-nav-name:before {
      content: "\f0e0"; /* envelope */
  }
  
  /* ホバー時のエフェクト */
  .global-nav-list > li > a:hover .global-nav-name:before {
      color: #0a965b;
  }
  
  /* パソコン版：メニュー設定に直接入力された <i> 要素を非表示にする */
  .global-nav-list .global-nav-name i {
    display: none;
  }
  
  /* スマホ版：.vk-mobile-nav-menu-outer 内の <i> 要素は表示する */
  @media (max-width: 767px) {
    .vk-mobile-nav-menu-outer .vk-menu-acc > li > a i {
      display: inline-block;
      font-size: 24px;
      margin-bottom: 5px;
      color: #666;
    }
  }
  
  /*==============================================
    gnav アイコン　メディア参照（オリジナルアイコン）
  ===============================================*/
  /*
   メニュー全体の基本スタイル 
  .global-nav-list > li > a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      text-decoration: none;
  }
  
  .global-nav-list > li > a .global-nav-name {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      font-weight: normal;
  }
  
   アイコン用の共通スタイル 
  .global-nav-list > li > a .global-nav-name:before {
      content: "";
      display: block;
      width: 32px;   アイコンの幅 
      height: 32px;  アイコンの高さ 
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 5px;
  }
  
   各メニューごとのアイコン画像設定 
   トップページ 
  .global-nav-list > li:nth-child(1) > a .global-nav-name:before {
      background-image: url('/wp-content/uploads/menu-icons/home.png');
  }
  
   よつばについて 
  .global-nav-list > li:nth-child(2) > a .global-nav-name:before {
      background-image: url('/wp-content/uploads/menu-icons/about.png');
  }
  
   よつばの生活 
  .global-nav-list > li:nth-child(3) > a .global-nav-name:before {
      background-image: url('/wp-content/uploads/menu-icons/life.png');
  }
  
   入園について 
  .global-nav-list > li:nth-child(4) > a .global-nav-name:before {
      background-image: url('/wp-content/uploads/menu-icons/admission.png');
  }
  
   毎日のよつばっ子 
  .global-nav-list > li:nth-child(5) > a .global-nav-name:before {
      background-image: url('/wp-content/uploads/menu-icons/blog.png');
  }
  
   お問い合わせ 
  .global-nav-list > li:nth-child(6) > a .global-nav-name:before {
      background-image: url('/wp-content/uploads/menu-icons/contact.png');
  }
  
   ホバー時のエフェクト（必要に応じて） 
  .global-nav-list > li > a:hover {
      opacity: 0.8;
  }
  */
  
  /*==============================================
    スライダーの基本スタイル
  ===============================================*/
  .swiper-container {
    width: 100%;
    height: calc(100vh - var(--header-height)); /* ヘッダーを差し引いた高さ */
    position: relative; /* 必要に応じて子要素を制御 */
    overflow: hidden; /* スクロールバーやはみ出し防止 */
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 0.3s ease-in-out; /* フェードインアニメーション */
  }
  
  /*==============================================
    スライドの基本スタイル
  ===============================================*/
  .swiper-slide {
    height: 100%; /* 親要素（スライダー全体）に合わせる */
    display: flex; /* 子要素を中央に配置 */
    justify-content: center;
    align-items: center;
  }
  
  /*==============================================
    画像のスタイル
  ===============================================*/
  .swiper-container .ltg-slide-item-img {
    width: 100%; /* 親要素に合わせた横幅 */
    height: 100%; /* 親要素に合わせた高さ */
    object-fit: cover; /* 親要素に対して画像を中央配置かつカバー */
    display: block; /* レイアウト崩れ防止 */
  }
  
  /*==============================================
    レスポンシブ対応（スマホ用）
  ===============================================*/
  @media screen and (max-width: 767px) {
    .swiper-container {
      height: calc(100vh - var(--header-height-sp)); /* スマホ用ヘッダー高さを差し引き */
    }
  
    .swiper-container .ltg-slide-item-img {
      width: 100%; /* 横幅を親要素にフィット */
      height: 100%; /* 高さを親要素にフィット */
      object-fit: cover; /* 画像が親要素を完全に埋める */
      display: block;
    }
  
    .swiper-slide {
      height: 100%; /* 親要素の高さに合わせる */
    }
  }
  
  /*==============================================
    テキストとボタンの表示設定
  ===============================================*/
  .mini-content {
    display: none; /* 初期状態で非表示 */
  }
  .swiper-slide-active .mini-content {
    display: block; /* アクティブなスライドのコンテンツのみ表示 */
  }
  
  /*==============================================
    ハンバーガーメニュー
  ===============================================*/
  /* メインメニューのアニメーション */
  .vk-mobile-nav {
      transition: none !important;
      background: transparent !important;
      top: 46px !important;
      opacity: 0;
      visibility: hidden;
      height: 100vh !important;
      overflow: hidden; /* 変更：overflowをautoからhiddenに */
      margin: 0 auto;
      border-bottom: none !important;
      position: relative; /* 追加：子要素の位置基準として */
      padding: 45px 10px; /* ハンバーガーメニューボタンの高さ分だけ上部にパディングを追加 */
  }
  
  .vk-mobile-nav.is-open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease-out !important;
  }
  
  /* 円形背景のアニメーション */
  .menu-bg {
      z-index: 1999;
      width: 50px;
      height: 50px;
      position: fixed;
      top: 36px;
      left: 15px;
      border-radius: 50%;
      transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
      visibility: hidden;
      transform: scale(0);
  }
  
  /* 内側の円 */
  .menu-bg.menu-bg-inner {
      background: rgba(240, 248, 244, 1);
      z-index: 1999;
      background-image: url("https://lightning.yotsuba.unimind.co.jp/wp-content/uploads/2025/04/change_sp_menu_bg-750-1344.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
  
  /* 開くアニメーション */
  .menu-bg.change-bg {
      visibility: visible;
      width: 100vw; /* 横幅を画面幅に */
      height: 100vh; /* 高さを画面の高さに */
      top: 0px;
      left: 0px;
      border-radius: 0; /* 円形から四角形に変更 */
      transform: scale(1); /* スケールを1に */
      transition: 
          width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* メニュー項目のアニメーション */
  @keyframes fadeIn {
      0% {
          opacity: 0;
          transform: translateY(8px);
      }
      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }
  
  /* サブメニューのスタイル */
  .sub-menu {
      display: none;
  }
  
  .acc-child-open {
      display: block;
  }
  
  /* メガメニュー非表示（モバイル時） */
  @media (max-width: 767px) {
      .mega-menu-wrapper {
          display: none !important;
      }
      
      /* モバイルナビの追加スタイル */
      .vk-mobile-nav-menu-btn {
          z-index: 2001 !important; /* 円形背景とメニューの上に表示 */
      }
      
      .vk-mobile-nav {
          z-index: 2000 !important;
      }
  }
  /*==============================================
    テキストに色を付ける（修正版）
  ===============================================*/
  .c-title-level2 {
    padding: 0.5em 10px;
     font-weight: 900;
     text-shadow: 
    1px 1px 1px #333,
    -1px -1px 1px #333,
    -1px 1px 1px #333,
    1px -1px 1px #333;
    letter-spacing: .15em !important;
  }
  .c-title-level2::first-letter {
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
      text-shadow: inherit;
  }
  .c-title-level2--white{
      color:#fff !important;
  }
  .c-title-level2--blue{
      color:#F4FAFE;
  }
  /* text-effectクラスを持つH2のスタイルをリセット */
  h2.text-effect {
      padding: 0 !important;  /* paddingを削除 */
      margin: 0 !important;   /* marginを削除 */
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      background: none !important;  /* 背景を削除 */
      box-shadow: none !important;
      border: none !important;
      line-height: 1 !important;
  }
  /* h2内の要素に対するスタイルは別に定義 */
  .text-effect .animate-letter {
      position: relative;
      display: inline-block;
      font-size: 2.5em;
      text-shadow: 
          1px 1px 1px #333,
          -1px -1px 1px #333,
          -1px 1px 1px #333,
          1px -1px 1px #333;
      z-index: 1;
  }
  
  .animate-letter::before {
      content: attr(data-letter);
      position: absolute;
      top: 0;
      left: 0;
      color: #0a965b;
      text-shadow: none;
      clip-path: polygon(0% 100%, 0% 100%, 0% 100%);
      z-index: 2;
      transform-origin: bottom left;
  }
  
  .animate-letter.animate::before {
      animation: fillLetter 1s cubic-bezier(0.37, 0, 0.63, 1) forwards;
  }
  
  @keyframes fillLetter {
      0% {
          clip-path: polygon(5% 95%, 5% 95%, 5% 95%);
      }
      75% {
          clip-path: polygon(50% 95%, 50% 95%, 50% 95%, 50% 95%);
      }
      100% {
          clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
      }
  }
  /*==============================================
    TOPページスライドショーボタンの通常状態
    背景緑、文字色を白にする
  ===============================================*/
  div[class*="mini-content-container-"] a.btn {
    color: #fff;
    text-shadow: 0 0 2px #3d3d3d;
    background-color: #0a965b;
    transition: .3s;
    border-color: #0a965b;
    box-shadow: 0 0 2px #3d3d3d;
  }
  div[class*="mini-content-container-"] .btn:hover {
    color: #fff;
    background-color: transparent; /* ホバー時は背景を透過に */
    border-color: #ffffff;         /* ホバー時の枠線色は白に */
  }
  /*==============================================
    ページヘッダーのタイトル非表示
  ===============================================*/
  /*.page-header-title {
    display: none; 
  }
  /*==============================================
    ヘッダー上部のインスタロゴ
  ===============================================*/
  /* Instagramアイコンのスタイル */
  /* Instagramリンクのスタイル */
  .header-instagram-link {
      display: inline-block;
      vertical-align: baseline;
      position: absolute;
      margin-top: 0.5rem;
      right: 427px;
      transition: opacity 0.3s;  /* スムーズな表示/非表示のアニメーション */
  }
  
  /* スクロール時の非表示設定 */
  body.scrolled .header-instagram-link {
      opacity: 0;
      visibility: hidden;
  }
  
  /* site-header-containerを基準点に設定 */
  #site-header-container {
      position: relative;
  }
  
  .header-instagram-link img {
      width: 40px;
      height: 40px;
      transition: transform 0.3s ease;
      display: block;
      margin: 0 auto;
  }
  
  .header-instagram-link a {
      text-decoration: none;
      display: block;
      text-align: center;
  }
  
  .instagram-text {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: #333;
      margin-top: 4px;
    margin-bottom: 0px;
      line-height: 1;
      text-align: center;
  }
  
  .header-instagram-link a:hover img {
      transform: scale(1.1);
  }
  
  /* レスポンシブ対応 */
  @media (max-width: 782px) {
      .header-instagram-link {
          float: none;
          margin: 5px auto;
          text-align: center;
      }
      
      .header-instagram-link img {
          width: 25px;
          height: 25px;
      }
  
      .instagram-text {
          font-size: 10px;
      }
  }
  /*==============================================
    フッターのスタイル
  ===============================================*/
  /*スマホ表示時のフッターボタン
    横並びレイアウト
  */
  @media screen and (max-width: 767px) {
    /* asideの中のボタングループを横並びに */
    aside.widget_vkexunit_cta {
      display: flex;
      gap: 10px;
    }
  
    /* footer_cta_btnクラスを持つvk_buttonを横並びに */
    aside.widget_vkexunit_cta .vk_button.footer_cta_btn {
      flex: 1;
      min-width: 0;
    }
  
    /* ボタン内のテキスト調整 */
    aside.widget_vkexunit_cta .vk_button.footer_cta_btn .vk_button_link_txt {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    /* アイコンサイズの調整 */
    aside.widget_vkexunit_cta .vk_button.footer_cta_btn .vk_button_link_before {
      font-size: 1.8rem !important;
    }
  }
  /*要素の間隔
  */
  @media screen and (max-width: 767px) {
    /* 最後の要素以外のマージン設定 */
    footer.site-footer .site-footer-content aside#nav_menu-2.widget,
    footer.site-footer .site-footer-content aside#wp_widget_vkexunit_profile-3.widget {
      margin-bottom: 15px!important;
    }
    /* 最後の要素に対する特別な指定 */
    footer.site-footer .site-footer-content aside#nav_menu-5.widget:last-child {
      margin-bottom: 15px!important;
    }
  }
  /*H4の装飾
  */
  /* フッターのナビゲーションメニュー内の見出しのみを対象とする */
  footer.site-footer .site-footer-content aside.widget_nav_menu h4.widget-title.site-footer-title {
    padding: 0.5em 5px;
    font-weight: 900;
    text-shadow: 
      1px 1px 1px #333,
      -1px -1px 1px #333,
      -1px 1px 1px #333,
      1px -1px 1px #333;
    letter-spacing: .35em !important;
  }
  
  /* 最初の文字のスタイル */
  footer.site-footer .site-footer-content aside.widget_nav_menu h4.widget-title.site-footer-title::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #0a965b;
    text-shadow: none;
  }
  
  /* さらに個別の色指定が必要な場合 */
  footer.site-footer .site-footer-content aside#nav_menu-2 h4.widget-title.site-footer-title,
  footer.site-footer .site-footer-content aside#nav_menu-5 h4.widget-title.site-footer-title {
    color: #F4FAFE;
  }
  /******************************************/
  /* よつばのインスタ専用 ボタンスタイル   */
  /******************************************/
  
  /* ボタン基本スタイル */
  .yotsuba-insta-btn,
  a.yotsuba-insta-btn,
  button.yotsuba-insta-btn {
    font-size: 1.6rem;          /* 基準となる文字サイズ */
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;         /* ボタン本体の余白 */
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;       /* ホバー時のアニメーション */
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #fff!important;
    border-radius: 0.5rem;
    white-space: nowrap;        /* テキストを折り返さない */
  }
  
  /* 枠線（ボーダー・シャドウ）用スタイル */
  .yotsuba-insta-btn-border-shadow {
    /* デフォルトの枠線ずらしを実現するため、下記のようにpaddingを再設定 */
    padding: calc(1.5rem - 12px) 3rem 1.5rem;
    background: #fff; /* 背景は白（下地） */
  }
  
  /* 疑似要素で枠線を描画 */
  .yotsuba-insta-btn-border-shadow:before {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 100%;
    height: 100%;
    content: "";
    transition: all 0.3s ease;
    border: 3px solid #0a965b;
    border-radius: 0.5rem!important;
  }
  
  
  /* ホバー時：paddingを少し減らし、枠線位置を動かす */
  .yotsuba-insta-btn-border-shadow:hover {
    padding: calc(1.5rem - 6px) 3rem;
  }
  
  .yotsuba-insta-btn-border-shadow:hover:before {
    top: 0;
    left: 0;
  }
  
  /* ボタンの色を指定 */
  .yotsuba-insta-btn-border-shadow--color {
    border-radius: 0;    /* デザイン上、角丸をなくす */
    background: #0a965b; /* 背景色を指定 */
  }
  
  /* 枠線の角丸も合わせて0に */
  .yotsuba-insta-btn-border-shadow--color:before {
    border-radius: 0;
  }
  
  /******************************************/
  /* モバイル固定ナビ*/
  /******************************************/
  /* モバイル固定ナビ内のリンクテキストの色を上書き */
  .mobile-fix-nav-menu a {
    color: #333 !important;
  }
  
  /* アイコンの色は別途指定（inlineスタイルと競合する場合は!importantも追加） */
  .mobile-fix-nav-menu .link-icon i {
    color: #0a965b !important;
  }
  
  /******************************************/
  /* フッター直前部の横並びP*/
  /******************************************/

.wp-block-group p.footer-upper-first-p,
.wp-block-group .footer-upper-first-p {
    margin-bottom: 0 !important;
}

/* カラムが1つの場合のレイアウト制御 */
.footer-upper-single {
    margin-left: 0; /* 左寄せにする */
}

/* PC表示（1200px以上）- 3カラムレイアウト */
@media (min-width: 1200px) {
    .footer-upper-single {
        max-width: calc(33.33% - 20px); /* 3カラムの1つ分の幅 */
    }
}

/* タブレット〜小型PC表示（992px〜1199px）- 2カラムレイアウト */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .footer-upper-single {
        max-width: calc(50% - 15px); /* 2カラムの1つ分の幅 */
    }
}

/* タブレット表示 - 2カラムレイアウト相当 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer-upper-single {
        max-width: calc(50% - 15px); /* 2カラムの1つ分の幅（ギャップ考慮） */
    }
}

/* モバイル表示（575.98px以下） */
 @media (max-width: 767px) {
    .footer-upper-single {
        max-width: 100%; /* フル幅 */
   }
}

body.blog #breadcrumb,
body.archive #breadcrumb {
  display: none;
}