/*
Theme Name: Lightning Child
Template: lightning
Version: 0.1
*/


:root{--header-h:95px}

/* =========================
  0) 共通：背景色＆基本色
========================= */
body{background-color:#792077!important;margin:0!important}
.site-footer{background-color:#3f113e!important}
body,p,a,h1,h2,h3,h4,h5,h6,.wp-block-rss__item-title a{color:#fff!important}
.wp-block-rss__item-publish-date{color:#fff!important}
.wp-block-heading{color:#fff!important}

/* =========================
  1) TOPスライダー（高さ・背景・矢印・文字）
========================= */
.wp-block-vk-blocks-slider.alignfull .wp-block-cover{min-height:800px!important}
@media (max-width:768px){.wp-block-vk-blocks-slider.alignfull .wp-block-cover{min-height:640px!important}}
@media (max-width:480px){.wp-block-vk-blocks-slider.alignfull .wp-block-cover{min-height:350px!important}}

.wp-block-vk-blocks-slider .wp-block-cover__image-background{object-fit:cover!important}
.wp-block-vk-blocks-slider .wp-block-cover__background,
.wp-block-vk-blocks-slider .wp-block-cover__gradient-background{opacity:0!important;background:none!important}

.wp-block-vk-blocks-slider .vk_slider_item_container.container{width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}

.wp-block-vk-blocks-slider .swiper-button-prev,
.wp-block-vk-blocks-slider .swiper-button-next{top:50%!important;transform:translateY(-50%)!important;margin-top:0!important}

/* スライダー：文字を中央固定（PC/スマホ共通） */
.wp-block-vk-blocks-slider .wp-block-cover__inner-container{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:10px!important;
  padding:0 16px!important;
}

/* スライダー文字：シンプル版（白枠/シャドウ撤去、サイズはbefore寄せ） */
.wp-block-vk-blocks-slider .wp-block-cover__inner-container p{
  color:#ff4fa1!important;
  font-weight:700!important;
  font-size:clamp(1.35rem, 2.3vw, 2.05rem)!important; /* ←PCのサイズ感をbefore寄せ */
  line-height:1.25!important;
  text-shadow:none!important;        /* ←シャドウ撤去 */
  background:transparent!important;  /* ←白枠撤去 */
  padding:0!important;              /* ←余白撤去 */
  border-radius:0!important;        /* ←角丸撤去 */
  display:block!important;
  width:min(1100px, 92vw)!important; /* ←なるべく1行に収めやすく */
  margin:0 auto!important;
  white-space:pre-line!important;   /* ←文章内の改行(Enter)を反映 */
  text-wrap:balance;
}

/* スマホ：文字を少し大きめ＆幅を広めにして変な改行を減らす */
@media (max-width:600px){
  .wp-block-vk-blocks-slider .wp-block-cover__inner-container p{
    font-size:clamp(1.25rem, 5.4vw, 1.65rem)!important;
    width:94vw!important;
    line-height:1.28!important;
  }
}

.vk_slider_item_container>p{margin:0!important;padding:0!important;height:0!important}

/* =========================
  2) Google Map フル幅（svaha-map-wrap）
========================= */
.svaha-map-wrap{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:0!important;margin-bottom:0!important;padding-bottom:0!important}
.svaha-map-wrap iframe{width:100vw!important;max-width:100vw!important;border:0!important;display:block!important;margin:0!important;padding:0!important}
.svaha-map-wrap+p{display:none!important}
@media (max-width:600px){.svaha-map-wrap iframe{height:380px!important}}

/* =========================
  3) メニュー画像グリッド（hover＋タイトル）
========================= */

/* --- nth-child撤去：menu-tileクラスでタイトル付与（先生の現状＝figureにクラスが付いている版） --- */
.wp-block-group.is-layout-grid figure.menu-tile{position:relative;overflow:hidden;cursor:pointer}
.wp-block-group.is-layout-grid figure.menu-tile img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .4s ease}
.wp-block-group.is-layout-grid figure.menu-tile:hover img{transform:scale(1.07);filter:brightness(60%)}

.wp-block-group.is-layout-grid figure.menu-tile::after{
  content:"";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#fff!important;font-size:1.0rem;font-weight:700;opacity:0;transition:opacity .3s ease;
  z-index:3;pointer-events:none;white-space:nowrap;text-shadow:0 0 5px rgba(0,0,0,.35)
}
.wp-block-group.is-layout-grid figure.menu-tile:hover::after{opacity:1}

@media (max-width:600px){
  .wp-block-group.is-layout-grid figure.menu-tile::after{
    opacity:1!important;background:rgba(0,0,0,.25);padding:2px 8px;border-radius:3px;font-size:.9rem
  }
}

/* 5枚分：順番に依存しない */
.wp-block-group.is-layout-grid figure.menu-tile-ito::after{content:"糸つなぎ＊糸かけ曼荼羅"}
.wp-block-group.is-layout-grid figure.menu-tile-baby::after{content:"ベビー＆キッズ"}
.wp-block-group.is-layout-grid figure.menu-tile-sango::after{content:"産後ケア"}
.wp-block-group.is-layout-grid figure.menu-tile-maternity::after{content:"マタニティケア"}
.wp-block-group.is-layout-grid figure.menu-tile-kodakara::after{content:"子宝ケア"}


/* =========================
  4) TOP上の余白殺し＆白背景の透明化
========================= */
.site-body,.site-body-container.container,.main-section,.entry,.entry-body,#main{margin-top:0!important;padding-top:0!important}
.site-body[style*="margin-top"]{margin-top:0!important}
#site-header,#site-header-container{margin-bottom:0!important;padding-bottom:0!important}
.wp-block-vk-blocks-slider,.vk_slider,.vk_slider_item{margin-top:0!important;padding-top:0!important}
.entry-body>.wp-block-vk-blocks-slider:first-child{margin-top:0!important}

.site-body-container.container,.entry-body,.main-section,.wp-block-group,.wp-block-group.is-layout-constrained,.wp-block-group.is-layout-grid{background:transparent!important}

/* =========================
  5) ブログ新着（RSS）：背景画像＋▶
========================= */
.wp-block-group-is-layout-constrained .wp-block-rss,
.wp-block-group.is-layout-constrained .wp-block-rss{
  background-image:url("/wp-content/uploads/2025/11/ameba_bg2.jpg");
  background-repeat:no-repeat;background-position:center bottom;background-size:cover;
  padding:20px 50px;border-radius:6px;position:relative;overflow:hidden
}

.wp-block-group.is-layout-constrained>.wp-block-group.is-layout-constrained>.wp-block-heading{
  font-weight:700!important;margin-bottom:25px!important;padding-bottom:.75em;border-bottom:1px solid #fff
}

.wp-block-rss__item{margin-bottom:22px;list-style:none;padding-left:26px;position:relative}
.wp-block-rss__item::before{content:"\25B6";color:#fff;font-size:.9rem;position:absolute;left:0}
.wp-block-rss__item-title a{color:#fff;font-weight:600;text-decoration:none;line-height:1.4}
.wp-block-rss__item-publish-date{display:block;font-size:.9rem;margin-top:3px;opacity:.9}

@media (max-width:768px){
  .wp-block-group-is-layout-constrained .wp-block-rss,
  .wp-block-group.is-layout-constrained .wp-block-rss{background:none!important;padding:20px!important}
  .wp-block-group.is-layout-constrained>.wp-block-group.is-layout-constrained>.wp-block-heading{font-size:1.6rem!important;margin-bottom:15px!important;padding-bottom:.6em}
  .wp-block-rss__item{padding-left:20px;margin-bottom:20px}
  .wp-block-rss__item::before{font-size:.8rem;top:.3em}
  .wp-block-rss__item-title a{font-size:1.1rem;line-height:1.4}
  .wp-block-rss__item-publish-date{font-size:.85rem}
}

/* =========================
  6) ヘッダー固定（いまは固定値。次フェーズで自動化予定）
========================= */
#site-header,body.header_scrolled #site-header,.header_scrolled #site-header{
  position:fixed!important;top:0;left:0;width:100%;z-index:9999!important;
  background-color:rgba(255,255,255,.8)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(212,212,212,.5);height:var(--header-h)
}
#site-header-container,body.header_scrolled #site-header-container,.header_scrolled #site-header-container{
  height:var(--header-h)!important;display:flex;align-items:center!important;position:relative;
  justify-content:flex-start;padding-right:90px!important
}
#site-header .site-header-logo{margin-right:auto}
#global-nav{margin-left:auto}
.wp-block-vk-blocks-slider{margin-top:calc(var(--header-h) * -1)!important}

#site-header .site-header-logo img{max-height:65px!important;width:auto!important;height:auto!important;margin:10px 0!important}

.global-nav-list>li>a{
  padding:20px 20px 14px 20px!important;font-size:17px!important;color:#333!important;text-align:center!important;
  position:relative;background:transparent!important;box-shadow:none!important;transform:none!important
}
.global-nav-list>li>a:hover{color:#7b1fa2!important;background:transparent!important;box-shadow:none!important;transform:none!important}

.global-nav .sub-menu a{background:#4e004e!important;color:#fff!important;padding:14px 18px!important;border-bottom:1px solid rgba(255,255,255,.3)}
.global-nav .sub-menu a:hover{background:#6a0a6a!important}

.global-nav-list>li.menu-item-has-children>a .global-nav-name::after{
  content:" ▼";
  font-size:10px;
  margin-left:4px;
  color:#555;
}

.global-nav-list>li.current-menu-item>a,.global-nav-list>li:hover>a{border-bottom:3px solid #d44bd4!important}
.global-nav-list>li>a .global-nav-name{display:block;border-bottom:none!important}


.global-nav-list>li>a .nav-desc,
.global-nav-list>li>a .menu-item-description{display:block;font-size:11px;color:#666;margin-top:3px;text-align:center}


@media (max-width:768px){
  #global-nav{display:none!important}
  #vk-mobile-nav-menu-btn{
    position:fixed;top:20px;right:16px;z-index:10001;font-size:0;width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.95);box-shadow:0 0 6px rgba(0,0,0,.2);padding:0;line-height:40px;text-align:center
  }
  #vk-mobile-nav-menu-btn::before{content:"☰";font-size:22px;color:#333}
  #vk-mobile-nav-menu-btn:hover::before{color:#7b1fa2}
}

/* =========================
  6-EX) スクロール時にロゴが消える/中央寄せになるのを強制停止
========================= */
body.header_scrolled #site-header .site-header-logo,
.header_scrolled #site-header .site-header-logo,
.site-header.site-header--scrolled .site-header-logo{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

body.header_scrolled #site-header-container,
.header_scrolled #site-header-container,
.site-header.site-header--scrolled #site-header-container,
.site-header.site-header--scrolled .site-header-container{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

body.header_scrolled #site-header .site-header-logo,
.header_scrolled #site-header .site-header-logo,
.site-header.site-header--scrolled .site-header-logo{
  margin-right:auto!important;
}

body.header_scrolled #site-header .global-nav,
.header_scrolled #site-header .global-nav,
.site-header.site-header--scrolled .global-nav{
  margin-left:auto!important;
}

/* 念のため：スクロール時にロゴ画像サイズが変えられても戻す */
body.header_scrolled #site-header .site-header-logo img,
.header_scrolled #site-header .site-header-logo img,
.site-header.site-header--scrolled .site-header-logo img{
  max-height:65px!important;
  width:auto!important;
  height:auto!important;
}


/* CSSで「ヘッダー右上」に固定配置する*/
.svaha-search-btn{
  position:fixed;
  right:20px;
  top:calc(var(--header-h) / 2);
  transform:translateY(-50%);
  z-index:10002;
  text-decoration:none;
  font-size:20px;
  line-height:1;
  color:#333;
}
.svaha-search-btn:hover{color:#7b1fa2}
@media (max-width:768px){.svaha-search-btn{display:none!important}}


/* =========================
  7) フッター装飾（下線・矢印・ロゴ※暫定）
========================= */
.site-footer .site-footer-title,.site-footer .widget-title{
  color:#fff!important;font-weight:700;letter-spacing:.02em;padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.25)
}

#nav_menu-6 .menu{margin:0;padding:0;list-style:none}
#nav_menu-6 .menu>li>a{
  display:block;padding:10px 0 10px 18px;border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff!important;text-decoration:none;position:relative
}
#nav_menu-6 .menu>li>a::before{content:"›";position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:.9}

#nav_menu-6 .menu li ul{margin:0;padding:0 0 0 14px;list-style:none}
#nav_menu-6 .menu li ul a{
  display:block;padding:9px 0 9px 18px;border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff!important;text-decoration:none;position:relative;font-size:.95em;opacity:.95
}
#nav_menu-6 .menu li ul a::before{content:"›";position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:.85}
#nav_menu-6 a:hover{opacity:1;text-decoration:none}

.site-footer-copyright{
  text-align:center;position:relative;border-top:1px solid rgba(255,255,255,.18);
  margin-top:24px;padding-top:28px
}

.svaha-footer-logo{display:block;text-align:center;margin:0 auto 14px}
.svaha-footer-logo img{width:160px;height:auto;max-width:70vw;opacity:.95}


/* =========================
  8) ヘッダー微調整（PC/スマホの見た目を安定化）
========================= */

/* --- PC A) HOMEだけ高さが揃わない件：2段目の“空席”を作る --- */
.global-nav-list>li.menu-item-home>a .global-nav-name::after{
  content:"";
  display:block;
  height:11px; /* 説明文の行の高さ分 */
  margin-top:3px;
}

/* 説明文の見た目を“統一” (Lightningのclassは global-nav-description) */
.global-nav-list .global-nav-description{
  display:block;
  font-size:11px;
  color:#666;
  margin-top:3px;
  text-align:center;
  line-height:1;
}

/* --- PC B) hoverで“モコっ”と動く件：下線を常時確保して動かさない --- */
.global-nav-list>li>a{
  border-bottom:3px solid transparent!important; /* 常に3px分は確保 */
  box-sizing:border-box!important;
}
.global-nav-list>li.current-menu-item>a,
.global-nav-list>li:hover>a{
  border-bottom-color:#d44bd4!important; /* 色だけ変える */
}


/* --- PC C) 検索アイコンが離れすぎ：ヘッダー内で右詰め・余白を詰める（スクロール時も固定） --- */
#site-header-container,
body.header_scrolled #site-header-container,
.header_scrolled #site-header-container,
.site-header.site-header--scrolled #site-header-container,
.site-header.site-header--scrolled .site-header-container{
  padding-right:56px!important; /* スクロール時も56で固定 */
}

.svaha-search-btn{
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:10002;
  text-decoration:none;
  font-size:20px;
  line-height:1;
  color:#333;
}
.svaha-search-btn:hover{color:#7b1fa2}


/* =========================
  スマホ：左=メニュー / 中央=ロゴ / 右=検索 に戻す
========================= */
@media (max-width:768px){

  /* ヘッダーを3カラムにして“配置を固定” */
  #site-header-container{
    display:grid!important;
    grid-template-columns:48px 1fr 48px!important;
    align-items:center!important;
    padding:0 8px!important;
  }

  /* グローバルナビはスマホでは非表示（今と同じ） */
  #global-nav{display:none!important}

  /* ロゴを中央固定 */
  #site-header .site-header-logo{
    grid-column:2!important;
    justify-self:center!important;
    margin:0!important;
  }
  #site-header .site-header-logo img{
    max-height:44px!important;
    margin:0!important;
  }

  /* 左：モバイルメニューボタン（“丸背景”などを撤去して素直に） */
  #vk-mobile-nav-menu-btn{
    grid-column:1!important;
    justify-self:start!important;
    position:static!important;
    width:48px!important;
    height:48px!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding:0!important;
    line-height:48px!important;
    text-align:center!important;
  }
  /* もしデフォルトのアイコンが出ない環境向けの保険 */
  #vk-mobile-nav-menu-btn::before{
    content:"☰";
    font-size:24px;
    color:#333;
  }

  /* 右：検索（スマホでも表示する） */
  .svaha-search-btn{
    grid-column:3!important;
    justify-self:end!important;
    position:static!important;
    top:auto!important;
    right:auto!important;
    transform:none!important;
    width:48px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}


/* =========================
  9) スマホ調整：メニュー/検索/ヘッダー挙動
========================= */
@media (max-width:768px){

  /* (A) モバイルメニューボタンが“消える”系の保険（id違いにも対応） */
  #vk-mobile-nav-menu-btn,
  .vk-mobile-nav-menu-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:48px!important;
    height:48px!important;
    z-index:10003!important;
  }

  /* “アイコンが透明/薄い”事故の保険（擬似要素が効く場合） */
  #vk-mobile-nav-menu-btn::before,
  .vk-mobile-nav-menu-btn::before{
    content:"☰"!important;
    font-size:24px!important;
    color:#333!important;
    line-height:1!important;
  }

  /* (B) スマホは固定ヘッダーをやめる（スクロール追従しない） */
  #site-header,
  body.header_scrolled #site-header,
  .header_scrolled #site-header{
    position:static!important;
  }

  /* 固定をやめるなら、スライダーの“持ち上げ”もやめる */
  .wp-block-vk-blocks-slider{
    margin-top:0!important;
  }

  /* (C) スマホヘッダー色：before寄せ（薄紫）にするならON */
  #site-header{
    background-color:rgba(231,219,233,.92)!important; /* ←色味はここ */
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}


/* =========================
  10) 自前モバイルメニュー（左=☰ / 中央=ロゴ / 右=🔍）
========================= */
.svaha-mobile-menu-btn{display:none}

@media (max-width:768px){
  .svaha-mobile-menu-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:48px!important;
    height:48px!important;
    background:transparent!important;
    border:0!important;
    font-size:24px!important;
    color:#333!important;
    padding:0!important;
  }

  /* ヘッダー3カラム（先生の狙い通り） */
  #site-header-container{
    display:grid!important;
    grid-template-columns:48px 1fr 48px!important;
    align-items:center!important;
    padding:0 8px!important;
  }

  .svaha-mobile-menu-btn{grid-column:1!important;justify-self:start!important}
  #site-header .site-header-logo{grid-column:2!important;justify-self:center!important;margin:0!important}
  .svaha-search-btn{grid-column:3!important;justify-self:end!important;position:static!important;transform:none!important}

  /* ドロワー */
  .svaha-mobile-drawer{position:fixed;inset:0;z-index:10050}
  .svaha-mobile-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
  .svaha-mobile-drawer__panel{position:absolute;left:0;top:0;height:100%;width:min(86vw,320px);background:#fff;overflow:auto;padding:14px 14px 24px}
  .svaha-mobile-drawer__close{position:sticky;top:0;margin-left:auto;display:block;font-size:26px;border:0;background:transparent;line-height:1}

  .svaha-mobile-nav-list{list-style:none;margin:12px 0 0;padding:0}
  .svaha-mobile-nav-list a{display:block;padding:12px 10px;color:#333;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.08)}
  .svaha-mobile-nav-list .sub-menu{list-style:none;margin:0;padding:0 0 0 12px}
  .svaha-mobile-nav-list .sub-menu a{font-size:.95em}

  /* ドロワー開いてる間は背景スクロール止める */
  html.svaha-drawer-open,html.svaha-drawer-open body{overflow:hidden}
}

@media (max-width:768px){
  #vk-mobile-nav-menu-btn{display:none!important;}
}

/* ★ドロワー内は “白背景×黒文字” を強制（aの全域!important対策） */
.svaha-mobile-drawer__panel,
.svaha-mobile-drawer__panel a,
.svaha-mobile-drawer__close{
  color:#333!important;
}

@media (max-width:600px){
  .wp-block-vk-blocks-slider .swiper-button-prev,
  .wp-block-vk-blocks-slider .swiper-button-next{display:none!important;}
}

/* ドロワーが「真っ暗」になる事故の最終保険 */
.svaha-mobile-drawer{z-index:10050!important;}
.svaha-mobile-drawer__backdrop{z-index:0!important;}
.svaha-mobile-drawer__panel{
  z-index:1!important;
  background:#fff!important;
  color:#333!important;
}
.svaha-mobile-drawer__panel a{color:#333!important;}

/* =========================
  11) 固定ページ本文（コンセプト/メニュー紹介/ブログ）読みやすさ
========================= */
.entry-body > h3.wp-block-heading.has-text-align-center{
  line-height:1.25!important;
  margin:56px auto 18px!important;
  letter-spacing:.04em;
}

/* XL/XXLの“盛り”はPCだけ適用（スマホの赤枠がデカくなる元凶を止める） */
@media (min-width:769px){
  .entry-body h3.wp-block-heading.has-text-align-center.vk_block-margin-xl--margin-top,
  .entry-body h3.wp-block-heading.has-text-align-center.vk_block-margin-xxl--margin-top{
    margin-top:120px!important;
  }
}

/* スマホ：赤枠の空きを“適度”にする（TOPだけに限定して事故を防ぐ） */
@media (max-width:600px){
  body.home .entry-body > p.has-text-align-center + h3.wp-block-heading.has-text-align-center{
    margin-top:60px!important;   /* ←赤枠①：コンセプト文→メニュー紹介 の空き */
  }
  body.home .entry-body > .wp-block-group.is-layout-grid{
    margin-bottom:16px!important; /* ←赤枠②：メニュー画像の下の空き */
  }
  body.home .entry-body > .wp-block-group.is-layout-grid + h3.wp-block-heading.has-text-align-center{
    margin-top:16px!important;   /* ←赤枠②：メニュー画像→ブログ新着 の空き */
  }
}

.entry-body > p.has-text-align-center{
  width:min(1100px, calc(100% - 32px))!important; /* ←広げる（PCで1行に寄せる） */
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:16px!important;
  padding-right:16px!important;
  line-height:1.9!important;
  font-size:clamp(1.0rem, 1.05vw, 1.1rem)!important;
  text-wrap:pretty;
}

/* RSSブロックも幅を整える */
.wp-block-group-is-layout-constrained .wp-block-rss,
.wp-block-group.is-layout-constrained .wp-block-rss{
  width:min(1100px, calc(100% - 32px))!important; /* ←本文に合わせる */
  margin-left:auto!important;
  margin-right:auto!important;
}

@media (max-width:600px){
  .entry-body > h3.wp-block-heading.has-text-align-center{margin-top:40px!important}
  .entry-body > p.has-text-align-center{
    width:calc(100% - 24px)!important;
    padding-left:12px!important;
    padding-right:12px!important;
    font-size:1.02rem!important;
  }
}