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

/* サイト全体のデフォルトフォントをGoogle Fontsに変更 */
/* 1. サイト全体のデフォルト（日本語：Noto Sans JP） */
body {
    font-family: "Noto Serif JP", serif !important;
}

/* 2. 見出しや特定エリアのみ（英語・数字等：Tinos） */
h3, .en-text {
  font-family: "Hina Mincho", serif !important;
  font-weight: 400;
  font-style: normal;
}

h2 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

h1 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40pt;
}


/*トップページキャプション*/
.top-caption-large {
    font-family: Cambria, Georgia, serif;
    font-size: 36pt;
}

.site-header-logo img {
    width: 120px;
    height: auto;
}
.site-header-logo span {
    #background-color: #a0a0a0;
    background-color: var(--glanz-gray-iro);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
}
.site-footer-copyright p:nth-of-type(2) {
    display: none;
}

.header-search,
.header-search form,
.header-search input,
.header-search button {
    display: none !important;
}

.global-nav-search,
.global-nav-search form {
    display: none !important;
}
/* 日本語（日本国旗） */
.menuitem-lang-jp > a {
    background-image: url('https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/jp.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding-left: 26px;
    display: flex;
    align-items: center;
}

/* 英語（イギリス国旗） */
.menuitem-lang-en > a {
    background-image: url('https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/gb.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding-left: 26px;
    display: flex;
    align-items: center;
}


body {
    background-color: white !important;
}


/* フッターナビゲーションメニュー全体の背景色を変更 */
.site-footer-menu {
    background-color: var(--glanz-gray-iro);
    color: white;
    padding-top: 20px;
}

/* フッターナビゲーションメニューキャプション(日本語表記)*/
.site-footer-menu-caption {
    font-size: 8pt;
}

/* ヘッダー全体の背景色を変更 */
.site-header {
    background-color: var(--glanz-gray-iro);
    /*border-bottom: 1px solid #ddd;  必要に応じて境界線を追加 */
}
/* グローバルメニューの文字色 */
.global-nav-list .global-nav-name {
    color: white;
}
/* メニューのサブテキスト（英語表記など）の色 */
.global-nav-list .global-nav-description {
    color: white;
}


/* --- スクロールして固定された時のヘッダー背景 --- */
.header_scrolled.site-header {
    background-color: var(--glanz-washi-iro) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 浮いた感じを出すための影 */
}

/* --- スクロール時のメニュー文字色 --- */
.header_scrolled .global-nav-list .global-nav-name {
    color: var(--glanz-sumi-iro) !important;
}

/* --- スクロール時のメニュー（英語表記部分など）の色 --- */
.header_scrolled .global-nav-list .global-nav-description {
    color: var(--glanz-sumi-iro) !important;
}

/* フッターのContents（サイトマップ表示）を非表示 */
footer.footer,
footer .site-footer-title,
footer .site-footer-sitemap,
footer .menu-japanese-upper-menu-container,
footer .site-footer-copyright {
    display: none !important;
}


.lightweight-accordion-title {
	color: white;
    background-color: var(--glanz-gray-usuiro) !important;
}
.lightweight-accordion-body {
    background-color: var(--glanz-lightgray-iro) !important;
}
.lightweight-accordion-body .col-3 {
  white-space: nowrap;
}
/* --------------------------------------------------
   画面幅 768px 以下（スマホ縦表示など）での列間引き設定
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* 2列目(col-1) と 3列目(col-2) を非表示にする */
    .json2table-display .col-1,
    .json2table-display .col-2 {
        display: none;
    }
}


/* タブ（タイトル）の背景色と文字色を強制的に変更 */
.wp-block-vk-blocks-border-box {
    background-color: var(--glanz-washi-iro) !important;
    color: var(--glanz-enji-iro) !important;
    border-color: var(--glanz-oudo-iro) !important;
    border-radius: 12px;
}


/* 入力欄とテキストエリアの背景色と枠線 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    background-color: var(--glanz-oudo-usuiro) !important; /* 背景色 */
    border: 2px solid var(--glanz-enji-iro) !important;    /* 枠線の太さと色 */
    color: var(--glanz-sumi-iro) !important;               /* 文字の色 */
}
.wpcf7-form select {
    border: 2px solid var(--glanz-enji-iro) !important;    /* 枠線の太さと色 */
    color: #333 !important;               /* 文字の色 */
}

/* 入力中（フォーカス時）の色 */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    background-color: #ffffff;
    border-color: #0073aa;     /* フォーカス時の枠線色 */
    outline: none;
}

/* メインコンテンツエリア下部の余白を消す */
.site-body,
.site-body-sub,
.site-body-main,
.main-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 記事本文エリア最終要素の下余白を消す */
.entry-body > *:last-child,
.site-body-main > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* site-footer ノード自体を完全に非表示にして高さをなくす */
footer.site-footer,
.site-footer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* フロントページ以外の「ページヘッダー（ページ名表示エリア）」を非表示 */
body:not(.home) .page-header {
    display: none !important;
}

/* フロントページ以外の「パンくずリスト（階層ガイド）」を非表示 */
body:not(.home) .breadcrumb,
body:not(.home) .vk-breadcrumb {
    display: none !important;
}

/* カバーブロック本体に背景色を設定 */
.hero-trombone-bg {
    background-color: var(--glanz-lightgray-iro);
}
.hero-repair-bg {
    background-color: var(--glanz-lightgray-iro);
}

/* オーバーレイ（上に被さる色）の干渉をなくす */
/*
.wp-block-cover.hero-trombone-bg .wp-block-cover__gradient-background,
.wp-block-cover.hero-trombone-bg .wp-block-cover__background {
    display: none;
}*/

/* 投稿ページの投稿者名を非表示にする */
.entry-meta-items .entry-meta-item-author,
.site-body .entry-meta .author,
.vcard.author {
    display: none !important;
}

/* 親グループを画面いっぱいに広げ、上下分離のレイアウトにする */
.wp-block-cover .wp-block-group.cover-multi-overlay {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* 1つ目を上、2つ目を下に配置 */
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 10px; /* 端からの余白（お好みで調整） */
}

/* 1つ目のグループ（右上配置） */
.cover-multi-overlay > .wp-block-group:nth-child(1) {
  align-self: flex-end !important;  /* 右寄せ */
  margin: 0 !important;
  max-width: 45%;                    /* 横幅が広がりすぎないよう制限（任意） */
}

/* 2つ目のグループ（左下配置） */
.cover-multi-overlay > .wp-block-group:nth-child(2) {
  align-self: flex-start !important; /* 左寄せ */
  margin: 0 !important;
  max-width: 55%;                    /* 横幅が広がりすぎないよう制限（任意） */
}


/*
投稿書式の設定
*/
/* リスト全体のスタイル初期化 */
.wp-block-latest-posts.custom-inline-posts {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 各記事（li要素）を横並び（Flexbox）にし、日付を先頭に配置 */
.wp-block-latest-posts.custom-inline-posts li {
  display: flex !important;
  flex-direction: row !important; /* 日付を先頭、タイトルを後ろに */
  align-items: baseline;          /* 日付とタイトルのテキストの下位置を揃える */
  gap: 15px;                      /* 日付とタイトルの間の余白 */
  padding: 8px 0;                 /* 各行の上下余白 */
  border-bottom: 1px dashed #e0e0e0; /* 下線区切り（不要なら削除可） */
}

/* 日付（time要素）のスタイル */
.wp-block-latest-posts.custom-inline-posts li time {
  order: 1;             /* 先頭に配置 */
  flex-shrink: 0;       /* 日付の幅が潰れないように固定 */
  font-size: 0.9em;
  color: #666666;
}

/* タイトル（a要素）のスタイル */
.wp-block-latest-posts.custom-inline-posts li a {
  order: 2;             /* 日付の後に配置 */
  text-decoration: none;
}

/* ホバー時のデザイン */
.wp-block-latest-posts.custom-inline-posts li a:hover {
  color: #0066cc;
  text-decoration: underline;
}

/* スマホ表示（画面幅が狭い時）の調整 */
@media (max-width: 600px) {
  .wp-block-latest-posts.custom-inline-posts li {
    flex-direction: column; /* スマホでは読みやすさ優先で2行にする場合 */
    gap: 4px;
  }
}

/*トロンボーンメイン画像用*/
/* --------------------------------------------------
   1. 基本設定（横幅の上限がある場合の固定スタイル）
   -------------------------------------------------- */
/* カバーブロック本体の最大幅と固定時の高さを設定 */
.wp-block-cover.scalable-img {
  max-width: 1200px;        /* 上限としたい横幅（例: 1200px） */
  margin-left: auto !important;  /* 中央寄せ */
  margin-right: auto !important; /* 中央寄せ */
}

/* --------------------------------------------------
   2. メディアクエリ：画面幅が1200px以下のときだけスケーラブルにする
   -------------------------------------------------- */
@media (max-width: 1200px) {
  /* スマホ・タブレット〜1200px未満は自動縮小（スケーラブル） */
  .wp-block-cover.scalable-img img.wp-block-cover__image-background {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .wp-block-cover.scalable-img {
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
  }
}




:root {
  --glanz-test-iro: #777777;
  --glanz-sumi-iro: #353538;
  --glanz-washi-iro: #f8f7f3;
  --glanz-kon-iro: #223a70;
  --glanz-ai-iro: #165E83;
  --glanz-enji-iro: #B94047;
  --glanz-kusa-iro: #7B8D42;
  --glanz-kusa-usuiro: #becf84;
  --glanz-oudo-iro: #C39143;
  --glanz-oudo-usuiro: #ddc095;
  --glanz-murasaki-iro: #895B8A;
  --glanz-murasaki-usuiro: #ba97bb;
  --glanz-gray-iro: #787878;
  --glanz-gray-usuiro: #a8a8a8;
  --glanz-lightgray-iro: #ededed;

  --vk-color-primary: #C0C0C0;      /* キーカラー（Lightning の primary color 相当） */
  --vk-color-bg: #f8f7f3;           /* 背景色 */
  --vk-color-secondary: #444444;    /* サブカラー */
  --vk-color-text: #888888;         /* 文字色 */
  --vk-color-text-body: var(--glanz-sumi-iro);         /* 文字色 */
  --vk-color-link: #000000;         /* リンク色 */
  --vk-color-link-hover: #c74458;   /* リンクホバー */
}


/*
:root {
  --glanz-test-iro: #777777;
  --glanz-sumi-iro: #353538;
  --glanz-washi-iro: #f8f7f3;
  --glanz-kon-iro: #223a70;
  --glanz-ai-iro: #165E83;
  --glanz-enji-iro: #B94047;
  --glanz-kusa-iro: #7B8D42;
  --glanz-kusa-usuiro: #c8d3a3;
  --glanz-oudo-iro: #C39143;
  --glanz-oudo-usuiro: #f1cc95;
  --glanz-murasaki-iro: #895B8A;
  --glanz-murasaki-usuiro: #ba97bb;

  --vk-color-primary: #165E83;      /* キーカラー（Lightning の primary color 相当） */
  --vk-color-bg: #f8f7f3;           /* 背景色 */
  --vk-color-secondary: #444444;    /* サブカラー */
  --vk-color-text: #888888;         /* 文字色 */
  --vk-color-text-body: var(--glanz-sumi-iro);         /* 文字色 */
  --vk-color-link: #000000;         /* リンク色 */
  --vk-color-link-hover: #c74458;   /* リンクホバー */
}
*/