--- START OF FILE style.css ---

/*
 Theme Name:   Lightning Child
 Theme URI:    https://example.com/lightning-child/
 Description:  Lightning Child Theme
 Author:       Yokosapo
 Author URI:   https://yokosapo.com
 Template:     lightning
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         
 Text Domain:  lightning-child
*/

/* ==========================================================
   1. ヘッダー全体の装飾・背景色
   ========================================================== */
/* キャッチフレーズ全体の最上部ラッパー */
.site-description-wrapper {
    background-color: #ffffe0;
    width: 100%;
}

/* トップページ上のサイトの説明 */
#site-description {
    font-size: 22px;
    padding: 5px 0;
}

.site-description-wrapper #site-description-image img {
    max-width: 100%;
    height: auto;
    max-height: 24px;
    display: inline-block;
}

/* ヘッダー全体およびメニューバーの背景色 */
.siteHeader,
.site-header .navbar {
    background-color: #ffffe0;
}

/* フッター背景色 */
footer.section.siteFooter {
    background-color: #ffffe0 !important;
}


/* ==========================================================
   2. テーマ標準・ExUnitの下線・アニメーション線の消去
   ========================================================== */
header .gMenu li a::after,
header .gMenu li a::before,
.site-header .navbar-nav li a::after,
.site-header .navbar-nav li a::before,
.gMenu_item a::after,
.gMenu_item a::before,
.gMenu li::after,
.gMenu li::before {
    display: none !important;
    content: none !important;
}

header .gMenu li,
.site-header .navbar-nav li {
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   3. グローバルナビゲーション【第1階層：メインメニュー】
   ========================================================== */
/* PCサイズ（画面幅 1200px 以上）の基本スタイル */
@media (min-width: 1200px) {
    header .gMenu > li > a,
    .site-header .navbar-nav > li > a,
    .gMenu_item > a {
        padding: 8px 10px !important; /* 余白を少しコンパクトに調整 */
        font-size: 18px !important;   /* 文字サイズを22pxから18pxへ縮小 */
        border-radius: 12px !important;
        margin: 0 4px !important;     /* 左右マージンを少し調整 */
        font-weight: bold !important;
    }
    
    header .gMenu > li > a *,
    .site-header .navbar-nav > li > a *,
    .gMenu_item > a * {
        font-size: 18px !important;   /* 文字サイズを18pxに統一 */
    }
}

/* 単体メニュー項目（子要素を持たない項目）のホバー時：緑色＋白文字 */
header .gMenu > li:not(.menu-item-has-children) > a:hover,
.site-header .navbar-nav > li:not(.menu-item-has-children) > a:hover {
    background-color: #5B9A5B !important;
    color: #ffffff !important;
}

/* サブメニューを持つ親項目のホバー＆カレント時 */
header .gMenu > li.menu-item-has-children > a:hover,
.site-header .navbar-nav > li.menu-item-has-children > a:hover,
header .gMenu > li.menu-item-has-children.current-menu-item > a,
.site-header .navbar-nav > li.menu-item-has-children.current-menu-item > a {
    background-color: #f4ebd0 !important;
    color: #3a3a34 !important;
}

/* 現在表示中のページ（カレント項目）のスタイル */
header .gMenu > li.current-menu-item > a,
.site-header .navbar-nav > li.current-menu-item > a,
.gMenu_item.current-menu-item > a {
    background-color: #f4ebd0 !important;
    color: #2b542b !important;
    font-weight: bold;
}

/* ヘッダー内のロゴとメニューのコンテナをフレックスボックスにして下揃えにする */
.siteHeader .container,
.site-header .navbar .container,
.siteHeader .navbar > .container {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}

/* --- ロゴの縮小（潰れ）を防止する設定 --- */
.siteHeader .navbar-header,
.siteHeader_logo,
.navbar-brand,
.site-header .brand {
    flex-shrink: 0 !important; /* フレックスコンテナ内でロゴエリアが縮むのを防ぎます */
}

/* --- メニューが並びきらない時に折り返して2段にする設定 --- */
header .gMenu,
.site-header .navbar-nav {
    flex-wrap: wrap !important;           /* 収まらない場合は自動で折り返し */
    justify-content: flex-end !important; /* メニュー全体を右寄せに維持 */
}

header .gMenu > li,
.site-header .navbar-nav > li {
    margin-top: 4px !important;    /* 2段に折り返した際の上下の重なりを防ぐ隙間 */
    margin-bottom: 4px !important;
}


/* ==========================================================
   4. グローバルナビゲーション【第2階層：サブメニュー】
   ========================================================== */
/* サブメニュー全体（通常時もホバー時も絶対に白背景を維持してキーカラー（暗）を遮断） */
header .gMenu li ul.sub-menu,
.site-header .navbar-nav li ul.sub-menu,
.gMenu .sub-menu,
header .gMenu li ul.sub-menu:hover,
.site-header .navbar-nav li ul.sub-menu:hover {
    background-color: #ffffe0 !important;
    border: 1px solid #dcd6b8 !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* サブメニューの各リスト項目（li自体が緑になるのを防ぐ） */
header .gMenu li ul.sub-menu li,
.site-header .navbar-nav li ul.sub-menu li,
.gMenu .sub-menu li,
header .gMenu li ul.sub-menu li:hover,
.site-header .navbar-nav li ul.sub-menu li:hover {
    background-color: transparent !important;
}

/* サブメニューの各リンク（通常時：白背景に黒文字） */
header .gMenu li ul.sub-menu li a,
.site-header .navbar-nav li ul.sub-menu li a,
.gMenu .sub-menu li a {
    background-color: #ffffe0 !important; /* 透明ではなく明確に白にする */
    color: #222222 !important;            /* 文字色は濃い黒 */
    border-radius: 0 !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: none !important;
    border-bottom: none !important;
    font-weight: normal !important;
}

/* サブメニューの各リンク（ホバー時のみ緑背景＋白文字） */
header .gMenu li ul.sub-menu li a:hover,
.site-header .navbar-nav li ul.sub-menu li a:hover,
.gMenu .sub-menu li a:hover {
    background-color: #5B9A5B !important;
    color: #ffffff !important;
}


/* ==========================================================
   5. ヘッダーロゴのサイズ死守（ご指定のサイズを完全適用）
   ========================================================== */
.siteHeader .brand img,
.navbar-brand img,
.site-header .brand img {
    max-height: 150px !important;
    height: auto;     /* 指定された高さを死守 */
    width: auto;      /* 指定された横幅を死守 */
    object-fit: cover;             /* 規定サイズに強制フィット */
    flex-shrink: 1;    /* 画像自体の縮小も完全に防ぎます */
}


/* ==========================================================
   6. スクロール時の固定ヘッダー・メニュー部分の背景色調整
   ========================================================== */
@media (min-width: 992px) {
    /* スクロール時に出現するヘッダーやメニューエリアの背景色を明示的に指定 */
    .header_scrolled .gMenu_outer {
        background-color: #ffffe0 !important; 
        }
}


/* ==========================================================
   7. ヒーロー３枚写真の調整
   ========================================================== */

/* 右側エリアの枠線からはみ出すことを許可する */
.wp-block-columns {
    overflow: visible !important;
}
.wp-block-column {
    overflow: visible !important;
}

/* 
  【重要】白フチ加工（ポラロイド風）を
  画像そのものではなく、画像を包むブロック全体に適用します
*/
.hero-photo-left, 
.hero-photo-center, 
.hero-photo-right {
    position: relative;
    transition: transform 0.3s ease;
}

/* 3つの画像共通：サイズを拡大し、白フチのなかにぴったり収める */
.hero-photo-left img, 
.hero-photo-center img, 
.hero-photo-right img {
    width: 135% !important;     /* カラム枠の1.35倍の大きさに強制拡大 */
    max-width: none !important; /* 横幅制限を解除 */
    height: auto !important;
    display: block;
        /* ポラロイド風の加工をここに集約 */
    background-color: #ffffff;    /* 白フチのベース色 */
    padding: 12px !important;     /* 白フチの太さ（均等に12px） */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* やわらかい影 */
    box-sizing: border-box !important;
}

/* 左の写真：少し右上がりに傾ける */
.hero-photo-left {
    transform: rotate(-5deg);
    z-index: 1;
    margin-left: -35%; /* 文字側に寄せる */
}

/* 中央の写真：少し右下がりに傾けて一番上に配置 */
.hero-photo-center {
    transform: rotate(3deg);
    z-index: 3;
    margin-left: -30%; /* 左の写真に少し重ねる */
     
}

/* 右の写真：少し右上がりに傾ける */
.hero-photo-right {
    transform: rotate(-4deg);
    z-index: 2;
    margin-left: -25%; /* 中央の写真に少し重ねる */
}

/* スマホ対応：重なりを解除して縦並び、または適正サイズに */
@media (max-width: 767px) {
    .hero-photo-left, 
    .hero-photo-center, 
    .hero-photo-right {
        background-color: transparent;
        padding: 0;
        box-shadow: none;
    }
    .hero-photo-left img, 
    .hero-photo-center img, 
    .hero-photo-right img {
        width: 100% !important;
        border: 8px solid #ffffff; /* スマホ時はシンプルな白フチに切り替え */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        box-sizing: border-box;
    }
    .hero-photo-left, .hero-photo-center, .hero-photo-right {
        transform: none;
        margin: 0 0 20px 0 !important;
        z-index: 1;
    }
}


/* ==========================================================
   8. アコーディオン装飾 ＆ よくある質問の隙間対策
   ========================================================== */


/* 1. アコーディオンの外枠（一番外側のブロック） */
.wp-block-accordion-item {
  background-color: #ffffff !important;
  border: 1.5px solid #829464 !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

/* 2. トグルボタン（タイトル部分）※テーマのデフォルト下線を強制消去 */
.wp-block-accordion-item .wp-block-accordion-heading {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.wp-block-accordion-heading__toggle {
  width: 100% !important;
  padding: 16px 20px !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* 3. 質問テキスト */
.wp-block-accordion-heading__toggle-title {
  font-size: 24px !important;
  color: #8B4513 !important;
  text-align: left;
}

/* 4. プラスアイコン */
.wp-block-accordion-heading__toggle-icon {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid #829464 !important;
  border-radius: 50% !important;
  color: #829464 !important;
  background-color: #f4f6f0 !important;
  font-size: 16px !important;
  flex-shrink: 0;
}

/* 5. 閉じているときのパネル（中身）を完全に隠す */
.wp-block-accordion-item:not(.is-open) .wp-block-accordion-panel,
.wp-block-accordion-item:not([open]) .wp-block-accordion-panel {
  display: none !important;
}

/* 6. 開いているときのパネルの表示と上線・余白 */
.wp-block-accordion-item.is-open .wp-block-accordion-panel,
.wp-block-accordion-item[open] .wp-block-accordion-panel {
  display: block !important;
  padding: 16px 20px 20px 20px !important;
  border-top: 1px dashed #829464 !important;
}

.wp-block-accordion-panel p {
  margin: 0 !important;
}


/* よくあるご質問のタイトルエリアと、その下の要素（アコーディオン）の間隔を狭める */
/* 原因だった margin-bottom と row-gap を上書きします */
.wp-block-columns {
  margin-bottom: 0px !important;
}

/* カラム内の行の隙間をスッキリさせる */
.wp-block-columns.is-layout-flex {
  row-gap: 0px !important;
}


/* ==========================================================
   9. タブレット画面幅時の調整（まず文字を小さくし、それでも狭ければ2段にする）
   ========================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* まずメニューの文字サイズを小さめに調整して1行への収まりを良くする */
  header .gMenu > li > a,
  .site-header .navbar-nav > li > a,
  .gMenu_item > a {
      padding: 6px 8px !important;
      font-size: 15px !important;
      border-radius: 8px !important;
      margin: 0 2px !important;
      font-weight: bold !important;
  }
  
  header .gMenu > li > a *,
  .site-header .navbar-nav > li > a *,
  .gMenu_item > a * {
      font-size: 15px !important;
  }

  /* ロゴとメニュー領域を縦並び（2段構造）にして、横幅不足による崩れを完全に防ぐ */
  .siteHeader .siteHeadContainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 2. ロゴ部分を上段に、幅100%で配置 */
  .siteHeader .navbar-header {
    width: 50% !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 15px !important; /* ロゴとメニューの間の余白 */
  }

  /* 3. メニュー部分を下段に、幅100%で配置 */
  .siteHeader #gMenu_outer {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* メニューを中央揃えにする場合 */
  }
}