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

/* =========================================================
   1) 共通：小さな見た目調整（色・フォントなど）
========================================================= */

/* カテゴリラベル（一覧など） */
.category-info .postListText_singleTermLabel_inner {
  background-color: #8F7AB8 !important;
  color: #fff !important;
}

/* GridCardのアイコン色 */
.wp-block-vk-blocks-gridcard .fa-square-check {
  color: #8F7AB8;
}

/* ヘッダーロゴ */
.site-header-logo span {
  font-family: "游明朝", serif;
  color: #444444;
}

/* 詳細ページ サイドバー「最近の投稿」カテゴリラベル */
.widget_vkexunit_post_list .postList_terms a,
.widget_vkexunit_post_list .postList_meta_items a {
  background-color: #8F7AB8 !important;
  color: #fff !important;
  border: none !important;
}

/* 見出し（英字サブ） */
.section-sub-en {
  color: #cd9650 !important;
}


/* =========================================================
   2) グローバルナビ：下線を hover 時のみ表示
   - Lightningは li::before の width を使って下線制御しているため
     current（現在地）用の上書きを追加している
========================================================= */

/* liの疑似要素を置くため */
.global-nav > li {
  position: relative;
}

/* 下線（通常は非表示：transformで制御） */
.global-nav > li::before {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #b38b5f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

/* hover時だけ左→右へ */
.global-nav > li:hover::before {
  transform: scaleX(1);
}

/* current（通常時）は下線を出さない（Lightningの current 指定に勝つ） */
#global-nav .global-nav-list > li[class*="current"]:where(:not(.menu-item-anchor))::before {
  width: 0 !important;
}

/* current でも hover のときは下線を出す */
#global-nav .global-nav-list > li[class*="current"]:where(:not(.menu-item-anchor)):hover::before {
  width: 100% !important;
}


/* =========================================================
   3) SPのみ：テキスト左寄せ（ユーティリティ）
========================================================= */

@media (max-width: 767px) {
  .sp-left {
    text-align: left !important;
  }
}


/* =========================================================
   4) スマホ下部固定CTA（LINE + TEL）
   - SPのみ表示 / PCは非表示
   - スクロール後に .is-visible を付けて表示（JS側で制御）
========================================================= */

/* 初期状態（非表示） */
.mobile-fix-nav--cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}

/* 表示状態（JSで .is-visible を付与） */
.mobile-fix-nav--cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===============================
   SPのみ
=============================== */
@media screen and (max-width: 767px) {

  /* 固定表示 */
  .mobile-fix-nav--cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 9999;
    padding: 8px 10px;
  }

  /* CTA表示時のみ余白確保 */
  body.cta-visible {
    padding-bottom: 90px;
  }

  /* 内部レイアウト */
  .mobile-fix-nav__inner {
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .mobile-fix-nav__btn {
    flex: 1;
    max-width: 48%;
    display: block;
  }

  .mobile-fix-nav__btn img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ===============================
   PCでは非表示
=============================== */
@media screen and (min-width: 768px) {
  .mobile-fix-nav--cta {
    display: none;
  }
}

/* =========================================================
   5) ページ上部へ戻るボタン
========================================================= */

.page_top_btn {
  background-color: #cd9650;  /* 通常色 */
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
  z-index: 99999;
  transition: background-color .3s ease, opacity .3s ease;
}

/* ホバー時：少し濃く */
.page_top_btn:hover {
  background-color: #b57f3e;  /* #cd9650 より少し濃い色 */
}

/* =========================================================
   6) セルの余白
========================================================= */

.clinic-table td,
.clinic-table th {
  padding: 16px 20px;
  vertical-align: middle;
}