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

/* 親テーマの追加CSS（コピーしてきた部分） */
#site-header-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.site-header-logo {
  text-align: center !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}
.global-nav.global-nav--layout--float-right {
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.global-nav ul {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 幅を統一（挨拶文・問い合わせフォーム・テーブル・本文） */
.narrow-block,
.wpcf7 form,
.page table,
.single .entry-body,
.blog .entry-body,
.archive .entry-body {
  max-width: var(--content-width);
  margin: 0 auto;
}



/* 全ページ共通のテーブルデザイン */
table {
  border-collapse: collapse;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 20px auto;
}
table th {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}
table td {
  background-color: #ffffff;
  padding: 10px;
  border: 1px solid #ddd;
}
.greeting-box {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
}

/* --- ここから新しく追加する部分 --- */

/* ブログ記事一覧：投稿と投稿の間に区切り線 */
.blog .post,
.archive .post {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

/* 子テーマ用のスタイル */
body {
    background-color: #BAA7CC; /* 藤色 */
}

/* ヘッダー背景色を常に藤色に固定 */
.site-header,
.site-header.scrolled,
#site-header-container {
  background-color: #BAA7CC !important;
}


/* VK Post List 内の記事カード全体を白背景 */
.vk_posts-mainSection > article {
  background: #ffffff !important;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 記事タイトルのリンクを黒にする（下線なし） */
.entry-title a {
  color: #000000 !important;  /* 黒 */
  text-decoration: none !important; /* 下線なし */
}

/* ホバー時は少し濃くする程度（お好みで） */
.entry-title a:hover {
  color: #222222 !important;  /* 少し濃い黒 */
}


/* 基準幅（必要なら 700px / 800px に変更OK） */
:root { --content-width: 600px; }

/* 一覧（VK Post List）の各記事カードを“600pxの箱”として中央寄せ */
.vk_posts-mainSection > article {
  width: var(--content-width);     /* ← これが肝。カード自体の幅を決める */
  max-width: 100%;                 /* 画面が狭い時は縮む（スマホ対応） */
  box-sizing: border-box;          /* padding含めて 600px 内に収める */
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 個別記事ページも同様に 600px の箱で中央寄せ */
.single article.type-post {
  width: var(--content-width);
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 記事内の画像は箱からはみ出さない（小さい画像はそのまま中央） */
.entry-body img,
.single article figure.wp-block-image img,
.vk_posts-mainSection article figure.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* コメントボタン（存在感を強める） */
.comment-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #BAA7CC;   /* 藤色の背景 */
  color: #ffffff;              /* 白文字 */
  border-radius: 6px;          /* 少し丸み */
  font-size: 15px;
  font-weight: bold;           /* 太字で目立たせる */
  text-decoration: none;
  margin-top: 12px;
  transition: background-color 0.3s ease;
}

/* ホバー時に少し濃い色に */
.comment-link:hover {
  background-color: #9b89ad;   /* 藤色を濃く */
  color: #ffffff;
}

/* 記事タイトルと本文の間に余白を追加 */
.entry-header {
  margin-bottom: 30px; /* お好みで数値を調整 */
}

/* コメント欄の背景を白に */
#comments {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-top: 30px; /* 上との余白も追加 */
}

/* サイドバーの各ウィジェットを白背景に */
aside.widget {
  background: #ffffff !important;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 最近の投稿ウィジェット内のサムネイルを非表示 */
.widget_recent_entries img,
.widget_recent_posts img,
.wp-block-latest-posts__featured-image,
.vk_post_imgOuter {
  display: none !important;
}


/* タイトル部分を調整 */
.widget_recent_entries li,
.wp-block-latest-posts li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.widget_recent_entries a,
.wp-block-latest-posts a {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

/* 固定ページの本文エリアもブログ記事と同じデザインにする */
.page .entry-body .wp-block-group {
  max-width: var(--content-width);
  margin: 0 auto 30px auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* 本文内の電話リンク（tel:） */
.page .entry-body a[href^="tel:"],
.single .entry-body a[href^="tel:"] {
  font-weight: normal !important;           /* 太字を解除 */
  text-decoration: underline !important;    /* 下線 */
  text-decoration-style: solid !important;  /* 実線 */
  border-bottom: none !important;           /* dotted対策 */
  color: inherit;                           /* 通常は本文色 */
}

/* ホバー時 */
.page .entry-body a[href^="tel:"]:hover,
.single .entry-body a[href^="tel:"]:hover {
  color: #007BFF !important;   /* 好きな色に変更可能 */
  opacity: 1;                  /* 薄くせずそのまま */
}

/* Googleマップ埋め込みのデザイン */
.map-embed {
  display: flex;
  justify-content: center;       /* 中央寄せ */
  margin: 20px auto;
  max-width: 100%;
}

.map-embed iframe {
  width: 100%;
  max-width: 600px;              /* 横幅の上限 */
  height: 400px;                 /* 高さ調整 */
  border: none;
  border-radius: 12px;           /* 角丸 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 影 */
}

/* SNSリンク全体 */
.social-links {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  gap: 15px;                 /* アイコン間の余白 */
  margin-top: 20px;
  background: transparent !important; /* ← ウィジェット背景を透過 */
  box-shadow: none !important;        /* ← 影も消す */
  border: none !important;
}

/* SNSアイコン共通デザイン */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;        /* ← 角を少し丸めた四角 */
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* Facebookアイコン */
.social-icon.facebook {
  background: #3b5998;
}
.social-icon.facebook:hover {
  background: #2d4373;
  transform: scale(1.1);
}

/* Instagramアイコン（グラデーション風） */
.social-icon.instagram {
  background: linear-gradient(45deg, #fdf497 0%, #fd5949 40%, #d6249f 70%, #285AEB 100%);
}
.social-icon.instagram:hover {
  opacity: 0.85;
  transform: scale(1.1);
}

/* YouTubeアイコン */
.social-icon.youtube {
  background: #FF0000; /* YouTubeの赤 */
}
.social-icon.youtube:hover {
  background: #cc0000; /* 濃い赤に変化 */
  transform: scale(1.1);
}


/* フッターウィジェットの背景を透明にする */
footer .widget,
.footer-widget,
.site-footer .widget {
  background: transparent !important;  /* 背景色を透明に */
  box-shadow: none !important;         /* 影を消す */
  border: none !important;             /* 枠線を消す（必要なら） */
  padding: 0 !important;               /* 余白を調整（お好みで） */
}

/* スマホ専用：詰めて表示 */
@media screen and (max-width: 599px) {
  #global-nav .global-nav-list {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 0 !important;
    overflow-x: hidden !important;
  }

  #global-nav .global-nav-list li {
    flex: 0 1 auto !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #global-nav .global-nav-list li a {
    font-size: 12px !important;
    padding: 0 1px !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    white-space: nowrap !important;
  }

  .vk-menu-btn,
  .vk-mobile-nav-menu-btn {
    display: none !important;
  }
}

/* タブレット（600〜1024px）：デスクトップ仕様＋ハンバーガー非表示 */
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .vk-menu-btn,
  .vk-mobile-nav-menu-btn {
    display: none !important;
  }

  #global-nav .global-nav-list {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 20px !important; /* ← デスクトップと同じ余裕 */
  }

  #global-nav .global-nav-list li a {
    font-size: 14px !important;   /* 読みやすい大きさ */
    padding: 6px 10px !important; /* 標準的な余白 */
    letter-spacing: 0 !important;
  }
}

.post-date {
  font-size: 14px;         /* 日付の文字サイズ調整 */
  color: #555;             /* 色（お好みで変更） */
  margin-bottom: 8px;      /* 下に余白 */
}

.post-date i {
  margin-right: 6px;       /* アイコンと日付の間に余白 */
  color: #555;             /* アイコンの色 */
}

/* 投稿カレンダー装飾 */

/* 投稿がある日付（リンク付き）を太字に */
#wp-calendar tbody td a {
  font-weight: bold;
  color: #000; /* 好みで変更可能 */
  text-decoration: none;
}

/* 日曜日（1列目）を赤 */
#wp-calendar tbody td:nth-child(1) {
  color: red;
}

/* 土曜日（7列目）を青 */
#wp-calendar tbody td:nth-child(7) {
  color: blue;
}

/* 投稿がある日が日曜日なら赤太字 */
#wp-calendar tbody td:nth-child(1) a {
  color: red;
  font-weight: bold;
}

/* 投稿がある日が土曜日なら青太字 */
#wp-calendar tbody td:nth-child(7) a {
  color: blue;
  font-weight: bold;
}