/*
Theme Name: Lightning Child
Template: lightning
Description: Lightningの子テーマです。
Author: Eri Kato
Last Update: 2025-10-03
*/

/* ==========================================
* このCSSは、サイト全体の共通スタイルになります。
* ここに記述したCSSは全てのページに適用されます。
* 個別のページのCSSは/assets/css/以下に記述しています。
========================================== */

/* ========== サイト全体のレイアウト ========== */
/* 使用するGoogleフォントのインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New&display=swap');

/* サイト全体で使用するフォント */
html, body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* フッターメニューのページ内リンクの位置を調整 */
[id] {
  scroll-margin-top: 8rem;
}

/* 横スクロールバーを非表示 */
html {
  overflow-x: visible !important;
}

/* ページヘッダーを非表示 */
.section.page-header {
  display: none !important;
}

/* パンくずリストを非表示 */
.breadSection {
  display: none !important;
}

/* コンテンツのデフォルトの上下余白を削除 */
.section.siteContent {
  padding: 0;
}

/* ========== ヘッダーのレイアウト ========== */
/* ヘッダーを固定するためのスタイル */
.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  min-height: 80px; /* ヘッダーの高さを調整 */
  box-shadow: none !important; /* デフォルトで付いてるヘッダーの下の影を削除 */
}

/* コンテンツがヘッダーで隠れないようにヘッダーの高さ分を確保 */
.section.siteContent,
.blog-main-section,
.archive,
.search-results {
  padding-top: 80px;
}

/* ブログアーカイブページと検索結果ページの見出しの上余白をなくす */
.archive .section.siteContent,
.search-results .section.siteContent {
  padding-top: 0;
}

/* WordPressの管理バーがある場合のヘッダー位置を調整 */
.admin-bar .siteHeader {
  top: 32px;
}

/* ヘッダーのスタイル */
.container.siteHeadContainer {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ロゴを左、メニューを右に */
  max-width: 100% !important; /* ヘッダーのウィンドウ幅いっぱいに */
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ヘッダーメニューを画面端まで広げる */
.gMenu_outer {
  width: 100%;
}

/* ヘッダーメニューのページ名を真ん中に寄せる */
.gMenu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

/* ヘッダーメニューのホバー時にオレンジ色 */
.gMenu a:hover {
  color: #F05C00;
}

/* ヘッダーメニューのスタイル */
.gMenu>li .gMenu_name {
  font-size: 0.95rem; /* メニューの文字サイズ */
  margin-right: 1.3rem; /* メニューのリンク間の余白 */
}

/* スマホ表示からPC版に切り替えたときのヘッダーメニューの文字サイズを維持 */
.device-mobile .gMenu>li .gMenu_name {
  font-size: 0.95rem !important;
}

/* ヘッダーメニューのデフォルトで付いてる下線を削除 */
.gMenu>li:before {
  border-bottom: none;
}

/* 開いているページのリンクをオレンジ色 */
.gMenu>li.current_page_item>a,
.gMenu>li.current_page_item>a {
  color: #F05C00;
}

/* ウィンドウ幅を変えてもヘッダーのロゴのサイズを保ったまま表示 */
.siteHeader_logo img {
  width: auto;
  max-width: none;
  flex-shrink: 0;
  display: block;
}

/* ウィンドウ幅を変えてもヘッダーのお問い合わせ画像のサイズを保ったまま表示 */
.menu-item-contact img {
  width: 12rem;
  height: auto;
  max-width: none;
  display: block;
}

/* ホバー時にヘッダーのお問い合わせ画像を切り替え */
.menu-item-contact img:hover {
  content: url('assets/images/contact_hover.svg');
}

/* ========== ヘッダー下部のレイアウト ========== */
/* 固定ページのタイトルカバーの高さを調整 */
.header_union_cover {
  min-height: 240px !important;
}

/* 社労士事務所についてページのタイトルカバーの高さを調整 */
.header_hidamaru_union_cover {
  min-height: 280px !important;
}

/* ========== フッター上部のレイアウト ========== */
/* お問い合わせコンテナを画面端まで広げる */
.section.sectionBox.siteContent_after .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* お問い合わせコンテナの余白を削除 */
.section.sectionBox.siteContent_after .container p {
  margin-bottom: 0;
}

/* お問い合わせコンテナのスタイル */
.contact_footer {
  background-color: #E2E2E2;
  position: relative;
  overflow: hidden;
  margin-left: 7.5rem;
  margin-right: 7.5rem;
}

/* お問い合わせコンテナ内のカバー画像を中央寄せ */
.contact_footer .wp-block-cover__image-background {
  width: 800px !important;
  margin-left: auto;
  margin-right: auto;
}

/* お問い合わせコンテナの中身全体を下にずらす */
.contact_footer_content {
  margin-top: 1rem;
}

/* 「お気軽にお問い合わせください」の文字スタイル */
.contact_h1 {
  text-align: center;
  font-size: 3rem;
}

/* お問い合わせコンテナ本文の文字スタイル */
.contact_text {
  text-align: center;
  font-size: 1rem;
}

/* ========== フッターのレイアウト ========== */
/* フッターの背景色と文字色 */
.section.siteFooter {
  background-color: #222222;
  color: #FFFFFF;
}

/* フッターメニューのリンクのスタイル */
.section.siteFooter a {
  color: #FFFFFF;
  text-decoration: none;
}

/* フッターメニューのリンクのホバー時にオレンジ色 */
.section.siteFooter a:hover {
  color: #F05C00;
}

/* フッターメニューを画面端まで広げる */
.container.sectionBox.footerWidget {
  max-width: 100% !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 区切り線のスタイル */
hr {
  border-top: 2px solid #696969;
}

/* フッターメニュータイトルの段落の下余白を削除 */
p.footer_menutitle {
  margin-block-end: 0.2rem;
}

/* フッターメニューの区切り線の上余白を削除 */
hr.footer_menu {
  margin-block-start: 0;
}

/* フッターメニューの下余白を削除 */
.siteFooter .widget {
  margin-bottom: 0;
}

/* フッターメニューの会社概要カラムのスタイル */
.footerWidget .row>div:first-child {
  width: 33%;
  flex: 0 0 33%;
  max-width: 33%;  /* 会社概要のカラム幅だけ広げる */
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-right: 2px solid #444444;  /* 右側の区切り線 */
}

/* フッターメニューの「サポートメニュー」カラムのスタイル */
.container.sectionBox.footerWidget .row>div:nth-child(2) {
  margin-left: 3rem; /* 会社概要とフッターメニューの間隔を調整 */
  flex: 0 0 14%;
  max-width: 14%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* フッターメニューのその他のカラムのスタイル */
.container.sectionBox.footerWidget .row>div:nth-child(3),
.container.sectionBox.footerWidget .row>div:nth-child(4),
.container.sectionBox.footerWidget .row>div:nth-child(5) {
  flex: 0 0 16%;
  max-width: 16%;
  padding-left: 3rem; /* フッターメニューのカラム幅を調整 */
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* 6番目のカラムは非表示 */
.container.sectionBox.footerWidget .row>div:nth-child(6) {
  display: none;
}

/* フッターの会社概要カラム内のロゴの下余白 */
.footer_logo {
  margin-bottom: 1.5rem;
}

/* フッターの会社概要カラム内の会社名の下余白 */
.footer_companyname {
  margin-bottom: 0;
}

/* フッターの会社概要カラム内の住所の下余白 */
.footer_address {
  margin-bottom: 1.5rem;
}

/* フッターの会社概要とSNSアイコンの余白を調整 */
.sns_icon {
  margin-bottom: 0;
}

/* フッターのFacebookアイコンとInstagramアイコンの余白 */
.facebook img {
  margin-right: 1rem;
}

/* コピーライト上の区切り線のスタイルと余白 */
hr.footer-copyright-hr {
  border-top: 2px solid #696969;
  margin-top: 0;
  margin-bottom: 1.2rem;
}

/* コピーライトの文字サイズと位置を調整 */
.copyright {
  font-size: 0.8rem;
  padding-left: 4rem;
}

/*========== 固定ページ・投稿ページ内のブロックのスタイル =========
* WordPressのエディターで作成するコンテンツのスタイル調整です。
* お客様も記事の投稿で使用する機能なので、修正依頼の際は随時調整してください。
=============================================================*/
/* 段落の下のデフォルトで付いてる余白を削除 */
.section.siteContent p {
  margin-bottom: 0;
}

/*「ハイライト」後のデフォルトで付いてる余白を削除 */
.section.siteContent .mark,
mark {
  padding: 0;
}

/* カバー画像の表示を親コンテナに合わせる */
.wp-block-cover .wp-block-cover__image-background {
  object-fit: fill;
}

/* ブロックで作成したボタンのスタイル */
/* CSS元参考URL：https://mogumogu-design.com/btn-effect/ */
.wp-block-button .wp-block-button__link {
  font-size: 1rem;
  width: 280px;
  height: 56px;
  display: inline-block;
  border: 1px solid;
  position: relative;
  background: #fff;

  border: 2px solid #fff;
  border-radius: 5px;
  padding: 0.9rem 2rem 0.9rem 0rem;

  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    transition: all .3s;
    right: 1rem;
    top: 50%;
  }

  &:before {
    width: 2rem;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
  }

  &:after {
    opacity: 0;
    width: 0;
    height: 0;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  &:hover {
    &:before {
      width: 1.5rem;
    }

    &:after {
      opacity: 1;
      width: 8px;
      height: 8px;
    }
  }
}

/* ブロックで作成した投稿テンプレートのスタイル */
/* 記事タイトル数が長くなっても記事クエリカード一覧の高さを揃える */
.wp-block-post>.wp-block-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wp-block-post-title {
  margin-top: auto;
}

/* 記事クエリカード内の投稿日付のフォントを指定＆日付の上下の間隔を調整 */
.wp-block-post-date {
  font-family: "Roboto", sans-serif;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 記事クエリカード内のタイトルの色をホバー時はオレンジに、下線も削除 */
.wp-block-post-title a:hover {
  color: #F05C00;
  text-decoration: none;
}

/* ========== ブログアーカイブ・検索結果ページのレイアウト ========== */
/* CSS元参考URL：https://www.nishi2002.com/31919.html */
/* 記事タイトルの色をホバー時はオレンジ */
.media .media-body .media-heading a:hover {
  color: #F05C00;
}

/* ブログアーカイブ・検索結果ページをグリッド表示にする */
#main .postList,
.home .mainSection .postList {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

#main .media,
.home .media {
  padding: 1%;
  margin: 2% 2% 1.5rem;
  border: solid 1px #E2E2E2;
  border-radius: 0.3rem;
}

@media (max-width: 480px) {

  #main .media,
  .home .media {
    width: 98%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {

  #main .media,
  .home .media {
    width: 46%;
  }
}

@media (min-width: 768px) {

  #main .media,
  .home .media {
    width: 29.333%;
  }
}

.media-object {
  aspect-ratio: 3 / 2; /* サムネイル画像のアスペクト比を3:2に指定 */
  object-fit: cover; /* 解像度を合わせるため画像をカバー表示 */
}

.archive .entry-meta_items_term,
.blog .entry-meta_items_term,
.home .entry-meta_items_term {
  display: none;
}

#main .media .postList_thumbnail,
.home .media .postList_thumbnail {
  width: 100%;
  padding-right: 0px;
  float: none;
}

#main .navigation.pagination,
.home .navigation.pagination {
  width: 100%;
}

/* 記事一覧の下余白を追加 */
.mainSection>div:last-child {
  margin-bottom: 4rem;
}

/* ========== ブログとブログ個別ページの検索バーのスタイル ========== */
/* HTML・CSS元参考URL：https://pote-chil.com/css-stock/ja/search-form */
/* 検索フォーム全体のスタイル */
.form-search {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #F3F3F3;
  border: 1px solid #F3F3F3;
  border-radius: 0.3rem;
  padding-left: 1rem;
}

/* 検索ボタンとフォームを横並びにして幅をいっぱいに広げる*/
.form-search input[type="text"] {
  flex: 1 1 0%;
  min-width: 0;
  background-color: #F3F3F3;
  border: none;
  outline: none;
  height: 60px;
  box-sizing: border-box;
  margin-left: -0.5rem;
}

/* 検索フォームのプレースホルダーのスタイル */
.form-search input::placeholder {
  color: #777777;
  font-size: 0.9rem;
}

/* 検索ボタンのスタイル */
.form-search button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/* 検索ボタンの虫眼鏡アイコン */
.form-search button::before {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23888888'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  content: '';
}

/* 検索フォームのフォーカス時の効果を削除 */
.form-control:focus {
  background-color: #F3F3F3;
  border-color: #F3F3F3;
  box-shadow: none;
}

/* 検索フォームとお問い合わせフォームのオートフィル効果を削除 */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
  box-shadow: 0 0 0 1000px none inset !important;
  -webkit-box-shadow: 0 0 0 1000px none inset !important;
  background-color: none !important;
  color: #000 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* お問い合わせフォームのオートフィル効果を削除（フォームの白背景に合わせる） */
.smf-form input:-webkit-autofill,
.smf-form textarea:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  background-color: #fff !important;
}

/* ブログとブログ個別ページのカテゴリ・タグコンテナのスタイル */
/* ブログ個別ページの検索・カテゴリ・タグコンテナ全体のスタイル */
.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 検索とカテゴリ・タグの間隔を調整 */
  margin-top: 6.5rem;
  margin-bottom: 6rem;
}

/* カテゴリ・タグのボックスを横並びにする */
.box-column {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

/* カテゴリ・タグのボックス幅を均等にする */
.box-column>* {
  flex: 1 1 50%;
  max-width: 50%;
}

/* カテゴリ・タグのボックスのスタイル */
.box {
  border: 1px solid #989898; /* ボックスの枠線の色 */
  border-radius: 0.3rem;
  padding: 1rem; /* ボックスの内側余白 */
}

/* カテゴリボックス内のカテゴリ一覧のスタイル */
.box_category {
  display: flex;
  justify-content: center; /* カテゴリを中央寄せ */
  flex-wrap: wrap; /* カテゴリを横並びにする */
  gap: 1.9rem 3rem; /* カテゴリの間隔を調整 */
  margin-right: 1.1rem; /* ボックスの右余白 */
}

/* カテゴリ一覧の文字色 */
.box_category a {
  color: #000;
}

/* カテゴリ一覧のホバー時のスタイル */
.box_category a:hover {
  text-decoration: none;
  color: #F05C00;
}

/* カテゴリ一覧のマーカーの色 */
.box_category ::marker {
  color: #F05C00;
}

/* タグボックス内のタグ一覧のスタイル */
.box_tag {
  display: flex;
  justify-content: center; /* タグを中央寄せ */
  flex-wrap: wrap; /* タグを横並びにする */
  gap: 1.9rem 2.3rem; /* タグの間隔を調整 */
  margin-right: 1.3rem; /* ボックスの右余白 */
}

/* タグ一覧の文字色 */
.box_tag a {
  color: #000;
}

/* タグ一覧のホバー時のスタイル */
.box_tag a:hover {
  text-decoration: none;
  color: #F05C00;
}

/* タグ一覧のリストマーカーを削除 */
.box_tag li {
  list-style: none;
}
.box_tag li::marker {
  list-style: none;
}

/* タグ一覧の前にタグアイコンを追加 */
.box_tag a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f02b";
  color: #F05C00;
  font-weight: bold;
  margin-right: 0.3rem; /* アイコンとテキストの間隔 */
}

/* ブロックで作成するページネーションのスタイル */
/* CSS元参考URL：https://chiiweb.net/media/wp-pagenavi/（デザイン05） */
.wp-pagenavi5 {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F05C00;
}

.wp-pagenavi5 a {
  color: #F05C00;
}

.wp-pagenavi5 span.page-numbers.current,
.wp-pagenavi5 a.page-numbers {
  padding: 16px; /* ページネーションの間隔を調整 */
  border-bottom: 2px solid #F05C00;
  margin-left: -3px; /* ページネーションの下線部分をくっつける */
  margin-right: -3px;
}

.wp-pagenavi5 span.page-numbers.current {
  position: relative;
}

.wp-pagenavi5 span.page-numbers.current::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 12px 6px;
  border-color: transparent transparent #F05C00 transparent;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  margin: auto;
}

.wp-pagenavi5 a.page-numbers:hover {
  text-decoration: none;
  color: #fff;
  background-color: #F05C00; /* ホバー時にオレンジ色の背景 */
}

.wp-pagenavi5 a.page-numbers {
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); /* ホバー解除時も滑らかに */
}

/* ブログアーカイブ・検索結果ページのページネーションのスタイル */
.pagination {
  margin-top: 0; /* ページネーションの上余白を削除 */
}

.navigation.pagination span.page-numbers.current,
.navigation.pagination a.page-numbers {
  padding: 16px; /* ページネーションの間隔を調整 */
  border-bottom: 2px solid #F05C00;
  border-radius: 0; /* 角を丸くしない */
}

.navigation.pagination span.page-numbers.current {
  position: relative;
}

.navigation.pagination span.page-numbers.current::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 12px 6px;
  border-color: transparent transparent #F05C00 transparent;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  margin: auto;
}

ul.page-numbers li {
  overflow: visible;
}

ul.page-numbers li span.page-numbers,
ul.page-numbers li a {
  border: none;
  font-weight: bold;
}

ul.page-numbers li span.page-numbers.current {
  color: #000;
  background-color: #FFF;
}

.navigation.pagination a.page-numbers:hover {
  text-decoration: none;
  color: #fff;
  background-color: #F05C00; /* ホバー時にオレンジ色の背景 */
}

.navigation.pagination a.page-numbers {
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); /* ホバー解除時も滑らかに */
}

a.prev.page-numbers,
a.next.page-numbers {
  border-bottom: none !important; /* 前後のページネーションの下線を削除 */
  background-color: transparent !important; /* 前後のページネーションの背景を削除 */
  color: #000 !important; /* 文字色を黒に */
}

/* ブログとみらいのおと事業部ページの投稿テンプレート周りのスタイル */
/* グレー色の記事一覧コンテナをお問い合わせコンテナと重ねる */
.background_gray {
  margin-bottom: -1rem;
}

/* 背景カバー画像のサイズを調整 */
.background_gray .wp-block-cover__image-background.wp-image-783 {
  width: auto !important;
}

/* ========== ブログ個別ページのスタイル ========== */
/* 記事コンテナの上余白 */
.singularContent {
  margin-top: 5rem;
}

/* 記事タイトルとアイコンを上揃えにする */
.entry-header .image-text-container {
  align-items: start;
}

/* 記事タイトルのアイコンの上余白 */
.blog-title-icon {
  margin-top: 0.5em;
}

/* デフォルトの投稿日付アイコンを削除 */
.fa_v6_css .entry-meta_items.published::before {
  display: none;
}

/* デフォルトのカテゴリー・タグラベルの削除 */
.entry-meta-dataList dt {
  display: none;
}

/* 投稿日付のフォントと文字サイズ */
.published.entry-meta_items {
  font-size: 1.3rem;
  font-family: "Roboto", sans-serif;
}

/* 投稿日付とカテゴリ一覧を横並びにする（ブログ個別ページのみ） */
.single .entry-title-and-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  margin-bottom: 0.5rem;
}

/* 下余白を削除して投稿日付とカテゴリ一覧を揃える（ブログ個別ページのみ） */
.single .entry-meta {
  margin-bottom: 0;
}

/* カテゴリ一覧の左余白 */
.entry-meta-dataList dl {
  margin-left: 0.3rem;
}

/* カテゴリ一覧（リスト）を横並びにする */
.entry-meta-dataList dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
}

/* カテゴリ一覧のデフォルトの連結文字列（,）を削除 */
.entry-meta-dataList dd {
  font-size: 0;
}

/* カテゴリー一覧の文字サイズと間隔 */
.entry-meta-dataList dd a {
  font-size: 0.9rem;
  padding: 0 0px 1px;
}

/* カテゴリー一覧（リスト）のスタイル */
.entry-meta-dataList li.category-marker {
  list-style: none;
  display: inline-block;
  position: relative;
  font-size: 0.9rem;
  padding-left: 1rem;
  margin-right: 0.8rem;
  margin-bottom: 0;
}

/* カテゴリー一覧（リスト）のマーカーのスタイル */
.entry-meta-dataList li.category-marker::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 1;
  font-size: 2.5rem;
  color: #ff6600;
}

/* タグ一覧の左余白 */
.entry-meta-dataList.entry-tag dl {
  margin-left: 0rem;
}

/* タグ一覧の文字サイズと間隔 */
.entry-meta-dataList.entry-tag dd a {
  font-size: 0.9rem;
  padding: 0 5px 1px;
}

/* カテゴリー・タグのホバー時の色 */
.entry-meta-dataList dd a:hover {
  text-decoration: none;
  color: #F05C00;
}

/* タグクラウドのアイコンの色 */
.tagcloud a:before {
  color: #F05C00;
}

/* 記事タイトルの下線を削除 */
.entry-header {
  border-bottom: none;
}

/* ブログページの背景色 */
.blog-main-section {
  background-color: #F3F3F3;
}

/* 記事コンテナのスタイル */
.blog-container {
  background-color: #FFF; /* 記事コンテナの背景色 */
  padding: 4rem 7.5rem 1rem 7.5rem; /* 記事コンテナの内側余白 */
}

/* 次の記事、前の記事クエリカード画像のアスペクト比を3:2に指定 */
.vk_post_imgOuter {
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* 次の記事、前の記事クエリカードの日付のフォント */
.vk_post_date {
  font-family: "Roboto", sans-serif;
}

/* 前の記事クエリカードのflexを解除（前の記事しかない場合にレイアウトが崩れるのを防止） */
.singularContent>.container>.row {
  display: unset;
}

/* 「すべての記事」ボタンの下余白 */
.all_articles_button {
  margin-bottom: 6.5rem;
}

/* ========== そのほかの追加CSSのスタイル ==========
 * WordPressエディターでブロックの 高度な設定 > 追加CSS で使用できる汎用のCSSです。
 * どこに属するかわからないスタイルや、サイト全体でよく使うスタイルをまとめています。
 ============================================== */
/* 画像とテキストを横並びにして中央に表示する */
/* ※ 主にセクション見出しのアイコンとテキストで使用 */
.image-text-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 「ミッション」コンテナの左右余白調整 */
.mission-container {
  margin-left: 3rem;
  margin-right: 3rem;
}

/* ページタイトルや見出し上部の小さい英文のフォント */
/* ※ sp_mintextはSP版共通のスタイルにも使用しているので、そちらも合わせて修正ください */
.sp_mintext,
.sp_mintext_lh15,
.sp_mintext_lh25 {
  font-family: "Roboto", sans-serif;
}

/* オレンジマーカー付のリストのスタイル */
/* ※「サポートメニュー」「社労士事務所について」ページで使用 */

 /* リストのデフォルトスタイルを削除 */
.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リストの文字スタイル */
.custom-list li {
  position: relative;
  padding-left: 0.95rem;
  margin-bottom: 0.8rem;
  border-bottom: 2px solid #F3F3F3;
  padding-bottom: 0.8rem;
  line-height: 1.85; /* リストの各行の間隔 */
  font-size: 15px;
}

/* リストのマーカーのスタイル */
.custom-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: #ff6600;
  font-size: 0.5rem;
}

/*========= レスポンシブ対応（SP版）用のスタイル ==========
/* Lightningテーマのレスポンシブ対応のスタイルに合わせて調整しています。
 * 1440px、1162px、992px、782px、767px、600px、575px、480px、375px以下の9段階調整。
 * コンポーネントごとにメディアクエリを分けたいところですが現在未対応です。
===================================================== */

/* ========== SP版共通のスタイル ========== */
/* SP版で改行を入れる箇所 */
.sp_br {
  display: none;
}

/* ========== ハンバーガーメニューのスタイル ========== */
/* ハンバーガーメニューの閉じるボタン */
.vk-mobile-nav-menu-btn {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
  border: none;
  background-color: transparent;
  background-image: url(assets/images/ham_close.png);
}

/* ハンバーガーメニューの開くボタン */
.vk-mobile-nav-menu-btn.menu-open {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
  border: none;
  background-color: transparent;
  background-image: url(assets/images/ham_open.png);
}

/* ハンバーガーメニュー内の縦スクロールを削除 */
.vk-mobile-nav {
  overflow: hidden !important;
}

@media screen and (max-width: 1440px) {
  /* ヘッダー下部のページタイトルカバー画像を調整
  /* ※ ウィンドウ幅が1440px以上の時は可変となっています */
  .header_union_cover .wp-block-cover__image-background {
    width: 1440px;
  }

  /* 同じく社労士事務所についてページのヘッダー下部のタイトルカバー画像を調整 */
  .header_hidamaru_union_cover .wp-block-cover__image-background {
    width: 1440px;
  }

  /* 同じくフッター上部のお問い合わせコンテナのカバー画像を調整 */
  .union_cover .wp-block-cover__image-background {
    width: 1440px;
  }
}

@media screen and (max-width: 1162px) {

  /* ========== フッターのスタイル ==========*/
  /* 会社概要のカラムを幅広にしてフッターメニューの上に配置（1段目） */
  .footerWidget .row>div:first-child {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    border-right: none;
  }

  /* サポートメニューのカラムを左端に配置（2段目） */
  .container.sectionBox.footerWidget .row>div:nth-child(2) {
    margin-left: 0; /* サポートメニューの左余白を削除 */
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%; /* サポートメニューのカラムの幅を25%に設定 */
    padding-top: 0 !important;
    padding-bottom: 3rem !important; /* カラムの上下の余白を削除 */
  }

  /* サポートメニューのカラムに合わせて幅と余白を設定（2段目） */
  .container.sectionBox.footerWidget .row>div:nth-child(3),
  .container.sectionBox.footerWidget .row>div:nth-child(4),
  .container.container.sectionBox.footerWidget .row>div:nth-child(5) {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
    padding-top: 0 !important;
    padding-bottom: 3rem !important;
  }

  /* フッターメニューのリンク間の余白を狭める */
  .gMenu>li .gMenu_name {
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 991.82px) {

  /* ========== 共通のスタイル ========== */

  /* ウィンドウ幅が992px以下の時にスペーサーの余白をなくす */
  /* ※ クラス名は主にページヘッダータイトル上部のスペーサーに使用されています */
  .spacer_0_992px {
    height: 0 !important;
  }

  /* ========== ヘッダーのスタイル ========== */
  /* ヘッダーの横スクロールを防止 */
  html {
    overflow-x: hidden !important;
  }

  /* WordPressのカスタマイズバーを固定位置に変更 */
  #wpadminbar {
    position: fixed;
  }

  /* ヘッダーのロゴの位置とサイズを変更 */
  .siteHeader_logo img {
    position: fixed;
    max-height: 40px;
    margin-top: 1rem;
    left: 2rem;
  }

  /* ヘッダーのハンバーガーメニューの位置調整 */
  .vk-mobile-nav-menu-btn {
    top: 10px;
  }

  /* WordPressのカスタマイズバーがある場合のハンバーガーメニューの位置調整 */
  .admin-bar .vk-mobile-nav-menu-btn {
    top: calc(38px + 4px);
  }

  /* ========== ハンバーガーメニュー内のスタイル ========== */
  /* ハンバーガーメニュー内のロゴの位置調整 */
  .mobile_logo {
    position: absolute;
    top: 1.5rem;
    margin-left: 0.5rem;
  }

  /* ハンバーガーメニュー内の背景色 */
  .vk-mobile-nav {
    background-color: #F3F3F3;
  }

  /* ハンバーガーメニュー内の背景画像の位置調整 */
  .hammenu_background img {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
  }

  /* ハンバーガーメニュー内のロゴとナビゲーションメニューの余白 */
  .vk-mobile-nav-menu-outer {
    margin-top: 3.5rem;
  }

  /* ナビゲーションメニューの上線を削除 */
  .vk-mobile-nav nav>ul {
    border-top: none;
  }

  /* ナビゲーションメニューの文字のスタイル */
  .vk-mobile-nav .widget_nav_menu ul li a,
  .vk-mobile-nav nav ul li a {
    border-bottom: none;
    font-size: 1.1rem;
    font-weight: bold;
  }

  /* ナビゲーションメニューの上下左右の余白調整 */
  .vk-mobile-nav nav ul li {
    line-height: 0;
    padding: 1.5rem 2rem 1.5rem 2rem;
  }

  /* ハンバーガーメニュー内のお問い合わせボタンを中央寄せ */
  .hammenu-contact {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== フッター上部のスタイル ========== */
  /* お問い合わせコンテナの左右の余白を縮める */
  .contact_footer {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* ========== ブログ個別ページのスタイル ========== */
  /* 記事コンテナの左右の余白を縮める */
  .blog-container {
    padding: 2rem 3rem 1rem 3rem !important;
  }

  /* カテゴリ一覧（リスト）のマーカーの位置を調整 */
  .entry-meta-dataList li.category-marker::before {
    top: 0 !important;
  }

  /* 前の記事クエリカードをflexに戻す（前の記事しかない場合にレイアウトが崩れるのを防止） */
  .singularContent>.container>.row {
    display: flex !important;
  }

}

@media screen and (max-width: 781.82px) {

  /* ========== ヘッダーのスタイル ========== */
  /* ヘッダーのロゴの位置とサイズを変更 */
  .siteHeader_logo img {
    height: 32px;
    position: fixed;
    margin-top: 1.5rem;
    left: 1rem;
  }

  /* WordPressのカスタマイズバーがある場合のロゴの位置調整 */
  .admin-bar .siteHeader_logo img {
    margin-top: 2rem;
  }

  /* WordPressのカスタマイズバーがある場合のハンバーガーメニューの位置調整 */
  .admin-bar .vk-mobile-nav-menu-btn {
    top: calc(46px + 5px);
  }

  /* Lightningテーマのヘッダーの縮小に合わせてパディングも縮める */
  .section.siteContent {
    padding-top: 72px !important;
  }

  /* ブログ個別ページ・アーカイブページ・検索結果ページのパディングも縮める */
  .blog-main-section,
  .archive,
  .search-results {
    padding-top: 66px !important;
  }

  /* ブログアーカイブページの見出しの余白をなくす */
  .archive .section.siteContent {
    padding-top: 0 !important;
  }

  /* 検索結果ページの見出しの余白をなくす */
  .search-results .section.siteContent {
    padding-top: 0 !important;
  }

  /* ========== フッター上部のスタイル ========== */
  /* お問い合わせコンテナの画像を幅いっぱいに広げる */
  .union_cover .contact_footer img {
    width: 100% !important;
  }

  /* 「お気軽にお問い合わせください」のフォントサイズを縮める */
  .contact_h1 {
    font-size: 1.6rem !important;
  }

  /* ========== フッターのスタイル ========== */
  /* フッター部の左右の余白を縮める */
  .container.sectionBox.footerWidget {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* フッターを2列3行のグリッドレイアウトに変更 */
  .container.sectionBox.footerWidget .row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* フッターを横2列にする */
    grid-template-rows: auto auto auto;
    /* フッターを縦3行にする（1行目:会社概要, 2-3行目:メニュー） */
    gap: 1.5rem;
  }

  /* フッターの会社概要カラムを1段目幅いっぱいに広げる */
  .container.sectionBox.footerWidget .row>div:nth-child(1) {
    grid-column: 1 / 3;
    flex: none !important;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #444444;
    padding-bottom: 3rem;
  }

  /* フッターメニュー（2～5番目のカラム）は2行2列に並べる */
  .container.sectionBox.footerWidget .row>div:nth-child(2),
  .container.sectionBox.footerWidget .row>div:nth-child(3),
  .container.sectionBox.footerWidget .row>div:nth-child(4),
  .container.sectionBox.footerWidget .row>div:nth-child(5) {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 1rem !important;
  }

  /* フッター2段目のカラムの下の余白を削除 */
  .container.sectionBox.footerWidget .row>div:nth-child(2),
  .container.sectionBox.footerWidget .row>div:nth-child(3) {
    padding-bottom: 0 !important;
  }

  /* フッター3段目のカラムに下の余白を追加 */
  .container.sectionBox.footerWidget .row>div:nth-child(4),
  .container.sectionBox.footerWidget .row>div:nth-child(5) {
    padding-bottom: 1.5rem !important;
  }

  /* フッターメニューのページタイトルのフォントサイズを大きくする */
  .footer_menutitle {
    font-size: 1.05rem !important;
  }

  /* コピーライトの文字サイズと左余白を調整 */
  .copyright {
    font-size: 0.9rem !important;
    padding-left: 1.05rem;
  }
}

@media screen and (max-width: 767.33px) {

  /* ========== 共通のスタイル ========== */
  /* セクションアイコンのサイズをPC版の70％にする */
  img[src$="section_icon.svg"] {
    width: 15px !important;
    height: 21px !important;
  }

  /* ブロック内のテーブルのセルの内側余白を縮める */
  .wp-block-table td {
    padding: 0.5rem 0.5rem !important;
  }

  /* ========== ヘッダー下部のスタイル ========== */
  /* ページタイトルのカバー画像の高さを調整 */
  .header_union_cover {
    min-height: 140px !important;
  }

  /* 社労士事務所についてページのページタイトルのカバー画像の高さを調整 */
  .header_hidamaru_union_cover {
    min-height: 180px !important;
  }

  /* ========== ブログ個別ページのスタイル ========== */
  /* カテゴリとタグのボックスの間隔をなくす */
  .category_tag_column:where(.wp-block-columns.is-layout-flex) {
    gap: 0 !important;
  }

  /* カテゴリとタグボックスを縦1段に並べる */
  .box-column {
    flex-direction: column;
    gap: 1.5rem;
  }
  .box-column>* {
    max-width: 100%;
    flex: 1 1 100%;
  }

  /* 記事コンテナの外側余白を縮める */
  .singularContent {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  /* 記事コンテナの内側余白を縮める */
  .blog-container {
    padding: 0rem 1.5rem 0rem 1.5rem !important;
  }

  /* 前後記事リンクの下余白を縮める */
  .vk_posts.postNextPrev>div {
    margin-bottom: 1rem;
  }

  /* ============== そのほかの追加CSSのスタイル ===================
   * レスポンシブ対応のため、追加CSSで自由に使用できる汎用クラスです。
   * 主にSP版（767px以下）のウィンドウ幅に合わせたスタイルを想定しています。
   * ========================================================= */

  /* スペーサーの余白をなくす */
  .spacer_0 {
    height: 0px !important;
  }

  /* テキストを中央寄せ */
  .sp_center {
    text-align: center;
  }

  /* ボタンを中央寄せ */
  .sp_button_center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 「ミッション」コンテナの左右余白を縮める */
  .mission-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 主にページタイトルなどに使用している */
  .sp_midashi {
    font-size: 1.8rem !important;
  }

  /* 主に見出しに使用している */
  .sp_contentmidashi {
    font-size: 1.7rem !important;
  }

  .sp_16 {
    font-size: 1.6rem !important;
  }

  .sp_15 {
    font-size: 1.5rem !important;
  }
  .sp_14 {
    font-size: 1.4rem !important;
  }

  .sp_13 {
    font-size: 1.3rem !important;
  }

  .sp_12 {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
  }

  /* 主に本文に使用している */
  .sp_text {
    font-size: 1.1rem !important;
  }

  /* 主にリストに使用している */
  .sp_list {
    font-size: 1rem !important;
  }

  /* 主にページタイトルや見出し上部の小さい英文に使用している */
  .sp_mintext {
    font-size: 0.8rem !important;
  }

  .sp_mintext_lh15 {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  .sp_mintext_lh25 {
    font-size: 0.8rem !important;
    line-height: 2.5 !important;
  }
}

@media screen and (max-width: 600px) {
  /* 記事クエリカードの日付とタイトルの文字サイズを大きくする（1段カラムに合わせて） */
  .wp-block-post-date,
  .wp-block-post-title {
    font-size: 1.2rem !important;
  }

  /* ブログページとみらいのおと事業部の背景画像を変更（1段カラムに合わせて） */
  .background_gray .wp-block-cover__image-background.wp-image-783,
  .background_gray .wp-block-cover__image-background.wp-image-1984 {
    content: url(assets/images/sp_wave_large.png);
    width: 100% !important;
  }
}

@media screen and (max-width: 575.33px) {
  /* 記事クエリカードの左右の余白をなくす（1段カラムに合わせて） */
  .wp-block-group.has-white-background-color.has-background {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
}

@media screen and (max-width: 480px) {
  /* ========== 共通のスタイル ========== */
  /* SP版で改行を入れる箇所 */
  /* ※ sp_brはPC版ではdisplay:noneにしており、SP版でのみ表示する */
  .sp_br {
    display: inline;
  }

  /* PC版で改行を入れる箇所 */
  .pc_br {
    display: none;
  }

  /* ブロック内のボタンの文字サイズを大きくする */
  .wp-block-button .wp-block-button__link {
    font-size: 1.1rem;
  }

  /* オレンジマーカー付きリストのスタイル */
  .custom-list li {
    padding-left: 1.3rem;
    padding-bottom: 1rem;
    line-height: 1.85; /* リストの各行の間隔を広げる */
    font-size: 16px; /* リストの文字サイズを大きくする */
  }

  .custom-list li::before {
    font-size: 0.6rem; /* リストのマーカーを大きくする */
    padding-left: 0.3rem; /* リストのマーカーをテキスト側に寄せる */
  }

  /* テーブルのスタイル */
  .wp-block-table td,
  .wp-block-table th {
    font-size: 1.1rem !important;
    padding: 1rem 0.5rem 1rem 0.5rem !important;
    /* テーブル内のテキストの文字サイズと余白を大きくする */
  }

  /* テーブルの左側の列の幅を調整 */
  .wp-block-table td:first-child,
  .wp-block-table th:first-child {
    width: 28% !important;
  }

  /* ========== フッター上部のスタイル ========== */
  /* お問い合わせコンテナの画像をSP版用に変更 */
  .contact_footer img {
    content: url(assets/images/footer_container.png);
  }

  /* お問い合わせコンテナ本文の文字を大きくする */
  .contact_text {
    font-size: 1.05rem !important;
  }

  /* ========== ブログ個別ページのスタイル ========== */
  /* 記事コンテナの上余白を縮める */
  .singularContent {
    margin-top: 1rem !important;
  }

  /* 「すべての記事」ボタンの下余白を縮める */
  .all_articles_button {
    margin-bottom: 4rem !important;
  }

  /* 検索・カテゴリ・タグコンテナの余白を縮める */
  .search-container {
    margin-top: 3rem !important;
    margin-bottom: 4rem !important;
  }

  /* ========== SP版のスペーサーの高さのスタイル ==========
   * SP版表示用のスペーサーの高さをまとめています。
   * スペーサーブロックの追加CSSで自由に使用・追加してください。
  ================================================== */

  /* SP版では空白のカラムを非表示にする */
  .spacer_column {
    display: none !important;
  }

  .spacer_150 {
    height: 150px !important;
  }

  .spacer_100 {
    height: 100px !important;
  }

  .spacer_90 {
    height: 90px !important;
  }

  .spacer_75 {
    height: 75px !important;
  }

  .spacer_60 {
    height: 60px !important;
  }

  .spacer_50 {
    height: 50px !important;
  }

  .spacer_40 {
    height: 40px !important;
  }

  .spacer_30 {
    height: 35px !important;
  }

  .spacer_25 {
    height: 25px !important;
  }

  .spacer_20 {
    height: 20px !important;
  }

  .spacer_10 {
    height: 10px !important;
  }
}

@media screen and (max-width: 375px) {
  /* ========== ヘッダー下部のスタイル ========== */
  /* ページタイトルカバー画像を変更 */
  .header_union_cover .wp-block-cover__image-background {
    content: url(assets/images/header_union_sp.png);
    width: auto !important;
  }

  /* 社労士事務所についてページのページタイトルカバー画像を変更 */
  .header_hidamaru_union_cover .wp-block-cover__image-background {
    content: url(assets/images/header_hidamaruunion_sp.png);
    width: 375px !important;
  }

  /* ========== フッター上部のスタイル ========== */
  /* お問い合わせコンテナのカバー画像を変更 */
  .widget.widget_block .wp-block-cover.union_cover > .wp-block-cover__image-background {
    content: url(assets/images/footer_union_sp.png);
    width: 375px !important;
  }

  /* ========== ブログ個別ページのスタイル ========== */
  /* ブログ個別ページのヘッダー下部のカバー画像を変更 */
  .single .header_union_cover .wp-block-cover__image-background {
    content: url(assets/images/header_union_gray_sp.png);
    width: 375px !important;
  }
}