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


/*カラム数表示の設定（全体）*/
/* 共通設定：親 */
.wp-block-columns.custom-responsive-cols,
.wp-block-columns.custom-responsive-cols-left {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 共通設定：各カラム */
.wp-block-columns.custom-responsive-cols > .wp-block-column,
.wp-block-columns.custom-responsive-cols-left > .wp-block-column {
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* スマホ共通（767px以下） */
@media (max-width: 767px) {
  .wp-block-columns.custom-responsive-cols,
  .wp-block-columns.custom-responsive-cols-left {
    justify-content: flex-start !important;
  }

  .wp-block-columns.custom-responsive-cols > .wp-block-column,
  .wp-block-columns.custom-responsive-cols-left > .wp-block-column {
    width: calc(50% - 2px) !important;
  }

  .wp-block-columns.custom-responsive-cols > .wp-block-column img,
  .wp-block-columns.custom-responsive-cols-left > .wp-block-column img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto;
  }
}

/* PC・タブレット共通（768px以上） */
@media (min-width: 768px) {
  .wp-block-columns.custom-responsive-cols {
    justify-content: center !important;
  }

  .wp-block-columns.custom-responsive-cols-left {
    justify-content: flex-start !important;
  }

  .wp-block-columns.custom-responsive-cols > .wp-block-column,
  .wp-block-columns.custom-responsive-cols-left > .wp-block-column {
    width: calc(25% - 3px) !important;
    display: flex !important;
    justify-content: center !important;
  }

  .wp-block-columns.custom-responsive-cols > .wp-block-column img,
  .wp-block-columns.custom-responsive-cols-left > .wp-block-column img {
    width: 260px !important;
    height: auto !important;
    display: block !important;
  }
}

/* ✅ 共通設定 */
.wp-block-columns.custom-cols-flex-grouped {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.wp-block-columns.custom-cols-flex-grouped > .wp-block-column {
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* ✅ スマホ：767px以下 */
@media (max-width: 767px) {
  .wp-block-columns.custom-cols-flex-grouped {
    justify-content: flex-start !important;
  }

  .wp-block-columns.custom-cols-flex-grouped > .wp-block-column {
    width: calc(50% - 2px) !important;
  }

  /* 1カラムだけの時は左寄せ */
  .wp-block-columns.custom-cols-flex-grouped > .wp-block-column:only-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .wp-block-columns.custom-cols-flex-grouped > .wp-block-column img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto;
  }
}

@media (min-width: 768px) {
  .wp-block-columns.custom-cols-flex-grouped {
    justify-content: center !important;
  }

  .wp-block-columns.custom-cols-flex-grouped > .wp-block-column {
    flex: 1 1 0% !important; /* 幅を自動にし、1行で収める */
    max-width: 16.6666% !important; /* 6カラム最大 */
    display: flex !important;
    justify-content: center !important;
  }

  .wp-block-columns.custom-cols-flex-grouped > .wp-block-column img {
    width: 260px !important;
    height: auto !important;
    display: block !important;
  }
}


/*見出し(ページ全体)*/
/*ページ見出しh1を非表示にする*/
h1, .entry-title, .page-header {
  display: none ;
}
/* 投稿一覧タイトルだけ表示 */
.media-heading.entry-title {
  display: block !important;
  font-family: "Noto Sans JP", sans-serif;
}


/*グローバルメニューＰＣ用*/
/*ダウンメニュー透過*/
#gMenu_outer {
  background-color: rgba(255, 255, 255, 0.7);}

.gMenu li a {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.gMenu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #ff8a8a,
    #ffd18a,
    #b4ff8a,
    #8afff1,
    #8a9bff
  );
  transition: width 0.4s ease;
  background-size: 100% 100%;
}
.gMenu li a:hover::after {
  width: 100%;
}
.gMenu li a:hover .gMenu_description {
  color: #c9a647;  /* ← ここを好きな色に変更 */
  transition: color 0.3s ease;
}
.gMenu .sub-menu {
  background-color: #f5f5f5;
}
.gMenu .sub-menu a {
  color: #000;
}
.gMenu .sub-menu a:hover {
  color: #fff;
}
.gMenu .sub-menu {
  min-width: 120px;
  max-width: 190px;
  width: auto;
}
.gMenu .sub-menu a {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.gMenu .sub-menu a {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.4;
}




/*コンセプトページ*/
/*コンセプト 背景設定*/
body.page-id-17 {
    position: relative;
    overflow-x: hidden;
    background-image: url("https://start-house.net/wp-content/uploads/2025/11/background15.jpg"); /* 中央共通画像 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* 左右柄の共通設定 */
body.page-id-17::before,
body.page-id-17::after {
    content: "";
    position: fixed;
    top: 0;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: auto 100%;
    z-index: -1;
}
/* ===== PC版 769px以上 ===== */
@media (min-width: 769px) {
    body.page-id-17::before {
        left: 0;
        width: 480px;
        background-image: url("https://start-house.net/wp-content/uploads/2025/11/background14.jpg"); /* 左柄PC版 */
        background-position: left center;

 }
    body.page-id-17::after {
        right: 0;
        width: 480px;
        background-image: url("https://start-house.net/wp-content/uploads/2025/11/background16.jpg"); /* 右柄PC版 */
        background-position: right center;
    }
}

/* ===== スマホ版 768px以下 ===== */
@media (max-width: 768px) {
    body.page-id-17::before {
        left: 0;
        width: 200px;
        background-image: url("https://start-house.net/wp-content/uploads/2025/11/background18.jpg"); /* 左柄スマホ版 */
        background-position: left center;
    }
    body.page-id-17::after {
        right: 0;
        width: 200px;
        background-image: url("https://start-house.net/wp-content/uploads/2025/11/background17.jpg"); /* 右柄スマホ版 */
        background-position: right center;
    }
}
/* 4つのコンセプト見出し下の余白をゼロ */
.concept-heading-bottom-zero {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* 4つの小見出しの上余白 */
.performance-heading {
    margin-top: 80px !important;
}
   

/* 会社案内ページ */
/* 会社案内の見出し */
.has-icon {
  display: flex;
  align-items: center;
  gap: 8px; /* アイコンとの余白 */
	margin-top: 30px !important;
  margin-bottom: 10px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.has-icon .heading-icon {
  width: 36px;
  height: 36px;
}

h5.wp-block-heading {
  padding-left: 2px !important;  
}
/*表の色*/
table td:first-child,
table th:first-child {
  background-color: #f0f8ff;
}
/* Googleマップを中央寄せ */
.map-wrapper {
    text-align: center; /* 横方向中央寄せ */
}
.map-wrapper iframe {
    display: inline-block; /* text-align に従うようにする */
}


/* スタッフ紹介ページ */
/* 背景設定 */
/* 共通：中央・左背景 */
body.page-id-23,
body.page-id-461,
body.page-id-217,
body.page-id-438,
body.page-id-451,
body.page-id-449,
body.page-id-455,
body.page-id-457,
body.page-id-459 {
  position: relative;

  overflow-x: hidden;

  background-image: url("https://start-house.net/wp-content/uploads/2026/01/background35.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 右画像を背景扱いに */
body.page-id-23::before,
body.page-id-461::before,
body.page-id-217::before,
body.page-id-438::before,
body.page-id-451::before,
body.page-id-449::before,
body.page-id-455::before,
body.page-id-457::before,
body.page-id-459::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  height: 100vh;

  background-image: url("https://start-house.net/wp-content/uploads/2026/01/background34.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;

  z-index: -1; /* コンテンツより下に */
  pointer-events: none;
}

/* コンテンツを最前面 */
.page-id-23 .site-content,
.page-id-461 .site-content,
.page-id-217 .site-content,
.page-id-438 .site-content,
.page-id-451 .site-content,


}
.img-hover:hover::after {
  background-color: rgba(255, 255, 255, 0.4);
}


.wp-block-buttons.no-hover .wp-block-button__link:hover {
  color: #536264 !important;
  background-color: transparent !important;
  border-color: #536264 !important;
  cursor: default !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}


/*ホーム画面の投稿欄*/
/* 投稿一覧ページタイトル下余白 */
.media-heading.entry-title {
  margin-bottom: 2px !important;
}
.media-heading.entry-title a {
  font-size: 17px; /* サイズ */
  font-weight: 600; /* 太さ */
}
.new-post-mark {
    display: inline-block;
	line-height: normal;
    background-color: #ff4d4d;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
	  padding: 0.5px 3px;
    margin-left: 6px;
    border-radius: 3px;
}

/* スマホ版 */
@media screen and (max-width: 767px) {
  .entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* 画面が極端に狭いときに折り返し許可 */
  }

  .entry-meta_items_term {
    margin-left: auto; /* 自動で右側に寄せる */
  }

  .entry-meta_items_term_button {
    float: none !important; /* 過去の float を無効化 */
    margin: 0;
  }
}

/* イベントニュース */
/* 投稿タイトル下余白 */
.wp-block-latest-posts__post-title {
  display: inline-block;
  margin-bottom: 2px !important;
  font-size: 17px; /* サイズ */
  font-weight: 600; /* 太さ */
}

/* 日付 */
.wp-block-latest-posts__post-date {
    font-size: 14px;
    color: #666;
    margin-left: 0;
}

/* 投稿抜粋 */
.wp-block-latest-posts__post-excerpt {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
}

/* スマホ版 */
@media screen and (max-width: 767px) {
  .wp-block-latest-posts__post-excerpt,
  .wp-block-latest-posts__post-title,
  .wp-block-latest-posts__post-date,
  .wp-block-latest-posts__featured-image {
      width: 100%;
      display: block;
  }

.wp-block-latest-posts__post-title + span {
      margin-top: 4px;
      display: inline-block;
  }
}

.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-title + span {
    display: inline-block;
    vertical-align: middle; /* 高さを揃える */
    margin-left: 7px; /* 日付とNEW!の間隔 */
}

/* 最新投稿リストの上下パディングを調整 */
.wp-block-latest-posts__list li {
    padding-top: 6px;
    padding-bottom: 6px;
}
.wp-block-latest-posts__post-excerpt {
    margin-bottom: 5px;
}

/* カテゴリー */
/* 見出しの・を線区切りに */
.wp-block-categories-list {
    list-style: none;
    padding-left: 0;
}
.wp-block-categories-list li {
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 0;
}
.wp-block-categories-list li:first-child {
    border-top: 1px solid #e5e5e5;
}
.wp-block-categories-list li {
    margin: 0;
}

/* 投稿カテゴリーページのサイドバー設定 */
.wp-block-categories-list li a {
    margin: 0 !important;    /* マージンをゼロに */
    padding: 0 !important;   /* パディングをゼロに */
	background: none !important; /* 背景も消す（テーマで色が付いている場合） */
	border-bottom: none !important;
	color: #337ab7;             /* 文字色 */
	text-decoration-color: #337ab7; /* 下線の色を文字色と同じに */
}



/* 投稿タイトル上余白 */
.wp-block-latest-posts__post-title {
    display: inline-block;   /* 上マージンを効かせるため */
    margin-top: 6px;
}

/* ～767pxはアイキャッチ画像非表示 */
@media screen and (max-width: 767px) {
    .wp-block-latest-posts__featured-image {
        display: none !important;
    }
}


.meta-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.meta-right {
    margin-left: auto;
}





/* ＝＝＝＝ホーム画面＝＝＝＝ */
/* イベントニュース */
/* ニュースとイベント　2カラム */
.two-column-posts {
  display: flex;
  gap: 20px;
  margin-top: 2em;
  flex-wrap: wrap;
}

.post-column {
  flex: 1;
  min-width: 300px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 18px 16px 18px;
  box-sizing: border-box;
}

.post-heading img {
  display: block;
  margin-bottom: 8px;
}
.post-heading {
  border-bottom: 2px solid #ccc;
  padding-bottom: 8px;
}
/*ニュースとイベントカラム下余白*/
.two-column-posts {
  margin-bottom: 100px; 
}
/*ニュースとイベントのブロック内のスクロール*/
.scroll-box {
	max-height: 185px;/* 5件分の高さに調整 */
  overflow-y: auto;
  padding-right: 10px;
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox用 */
  background-color: #fefefe; /* ごく薄いグレー（奥行き感） */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); /* 内側

に軽い影で立体感 */
  border-radius: 4px; /* 少し角を丸くする（好みで） */
}

.scroll-box::-webkit-scrollbar {
  width: 5px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 3px;
}

.scroll-box::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

.view-more-link {
  display: block;
  text-align: right;
  font-size: 0.9em;
  margin-top: 8px;
  color: #333;
  text-decoration: none;
}

.view-more-link:hover {
  text-decoration: underline;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list li {
  margin-bottom: 1em;
  line-height: 1.5;
}

.post-date {
  display: inline-block;
  font-size: 0.85em;
  color: #666;
  margin-left: 8px;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .two-column-posts {
    flex-direction: column;
  }
}

.post-column img {
  width: 500px;
  max-width: 100%;
  display: block;
  margin: 0 auto 20px auto; /* 上 0 / 右 auto / 下 20px / 左 auto */
  border-bottom: 1px solid #ccc; /* 下に1pxの薄い線 */
  padding-bottom: 4px; /* 線と画像の間に少し余白 */
}

.media-heading.entry-title {
  font-size: 14px;  /* 小さめの文字サイズ */
  font-weight: bold; /* 太字 */
  margin: 0;         /* 余白リセット（必要なら） */
}


/*ホーム画面の施工例*/
/*右下のリンク線*/  
.vk_button_link_txt {
  display: inline-block; 
  cursor: pointer;
}
/* 施工例スライダー写真間余白 */
.works-slider .vk_slider_item_container {
  padding-left: 4px;
  padding-right: 4px;
}

/*ホバー時に青色*/
.vk_button_link_txt:hover {
  color: #0066ff; 
  text-decoration-style: solid !important; 
}


/*＝＝＝問い合わせフォーム＝＝＝*/
/* 無効状態の送信ボタンの背景色 */
.wpcf7-submit:disabled {
  background-color: #888;
}
/* 「（必須）」を赤文字にする */
span.required {
  color: red;
  font-weight: normal;
}


/*＝＝＝住宅施工例ページ＝＝＝*/
/*見出しの上余白*/
.tight-top {
  margin-top: 0px; 
}


/*スタッフ・コンセプト以外の背景*/
body {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 4px 4px;
}


/* ===== フッター全体設定 ===== */
/* カラムレイアウト設定 */
.footerWidget .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* レイアウト整える */
}
.footerMenu {
    display: none;
}
footer,
.site-footer,
.footerWidget {
  background-color: #fff !important;
}
.copySection {
  background-color: #f5f5f5; /* または元の薄いグレー色 */
}

.footerWidget .row > .col-md-3 {
  padding: 0 10px; /* 左右余白 */
  flex: none !important;
  max-width: none !important;
}

/* 各カラムの幅（PC） */
.footerWidget .row > .col-md-3:nth-child(1) { width: 33% !important; text-align: left; }
.footerWidget .row > .col-md-3:nth-child(2) { width: 17% !important; }
.footerWidget .row > .col-md-3:nth-child(3) { width: 32% !important; }
.footerWidget .row > .col-md-3:nth-child(4) { width: 18% !important; }

/* メニュー全体のリセット */
.footerWidget .widget_nav_menu .menu,
.footerWidget .widget_nav_menu .menu li,
.footerWidget .widget_nav_menu .menu li ul.sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}

/* メニューリンクのデザイン */
.footerWidget .widget_nav_menu .menu li a {
  display: block;
  padding: 4px 8px;
  line-height: 1.2;
  color: #666;
  font-size: 13px;
  text-decoration: none;
  background: none;
  border: none;
  box-shadow: none;
}

/* ホバー時の色変更 */
.footerWidget .widget_nav_menu .menu li a:hover {
  color: #5B8FC9;
}

/* サブメニューのインデント */
.footerWidget .widget_nav_menu .menu li ul.sub-menu {
  padding-left: 15px;
}





/* フッター共通テキスト */
.footer-contact-widget p,
.footer-company-info p {
  margin: 2px 0;
  line-height: 1.4;
  font-size: 14px;
}

/* 社名 */
.footer-company-info .company-name {
  font-weight: bold;
  font-size: 16px;
}

/* TELリンク */
.footer-contact-widget a[href^="tel:"] {
  text-decoration: none;
}

/* ロゴ中央 */
.wp-block-image.size-full img {
  display: block;
  margin: 0 auto;
}

@media screen and (min-width: 992px) {

  .footer-company-info {
    display: table;
    margin: 0 auto 8px;
    text-align: left;
  }

  .footer-contact-widget {
    display: inline-block;
    margin-top: 1px;
    border-top: 1px solid #000;
    padding-top: 8px;
    text-align: center;
  }

  .center-on-mobile {
    display: inline-block;
    text-align: center;
  }

  .fax {
    display: block;
  }
	
  #block-23 {
  margin-bottom: 8px;
}
}

@media (min-width: 768px) and (max-width: 991px) {
  /* 会社情報 */
  .footer-company-info {
    display: table;
    margin: 0 auto 1px;
    text-align: left;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
  }

  /* 連絡先全体 */
  .footer-contact-widget {
    display: inline-block;  /* ブロック幅を内容の幅に */
    margin: 0 auto;
    text-align: center;
  }
	
	/* 親に中央寄せ */
.footer-contact-widget .center-on-mobile {
    text-align: center;
}

/* TEL / FAX を縦並び＆中央寄せ */
.footer-contact-widget .tel,
.footer-contact-widget .fax,
.footer-contact-widget .hours{
    display: block;        /* 縦並びにする */
    text-align: center;    /* 中央寄せ */
    margin-bottom: 2px;    /* 行間 */
}

/* (日曜定休) を右寄せ＋右に少しスペース */
.footer-contact-widget .holiday {
    float: right;      /* 右寄せ */
    margin-right: 15px; /* 右側に少しスペース */
    display: inline-block; /* 安定表示のため */
}
/* block-23 下の余白を8pxに */
#block-23 {
    margin-bottom: 8px;
}
}

@media (max-width: 767px) {
  .footer-company-info {
    display: table;
    margin: 0 auto 8px;
    text-align: left;
  }

  .footer-contact-widget {
    display: inline-block;
    margin-top: 1px;
    border-top: 1px solid #000;
    padding-top: 8px;
    text-align: center;
  }

  .center-on-mobile, 
	.footer-contact-widget .hours{
    display: inline-block;
    text-align: center;
  }

  .footer-contact-widget .hours {
      display: block;
  }
	
  .fax {
    display: block;
  }
	
  #block-23 {
  margin-bottom: 8px;
}
}


/* スマホ版設定 */
/* スマホ表示の調整 */
@media (max-width: 767px) {
	/* カラム2〜4を非表示に */
  .footerWidget .row > .col-md-3:nth-child(2),
  .footerWidget .row > .col-md-3:nth-child(3),
  .footerWidget .row > .col-md-3:nth-child(4) {
    display: none !important;
  }
  /* カラム1を中央表示に */
  .footerWidget .row {
    justify-content: center !important;
  }
.footerWidget .row > .col-md-3:nth-child(1) {
  width: 100% !important;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
}

/*フッター下部分の左右余白なしに*/
.copySection {
  background-color: #f4f4f4;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
}

/* モバイルメニュー */
/* 問合わせアイコンサイズ配置 */
.mobile-nav-widget-images {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  padding: 0px 0;
  flex-wrap: wrap;
}

.mobile-nav-widget-images a {
  flex: 1;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  margin: 0 5px; /* 左右マージン */
}

.mobile-nav-widget-images a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* 460px～767pxの問い合わせアイコンサイズ固定 */
@media (min-width: 460px) and (max-width: 767px) {
  .mobile-nav-widget-images {
    justify-content: flex-end;  /* 右寄せ */
    flex-wrap: nowrap;           /* 横並び固定 */
  }

  .mobile-nav-widget-images a {
    flex: 0 0 125px;    /* 固定幅 */
  }

  .mobile-nav-widget-images a img {
    height: auto; /* メディアクエリでは縦横比維持 */
  }
}
/* 問合せアイコン裏の背景色設定 */
.mobile-nav-widget-images {
  background-color: #fff8f0; 
  padding: 40px 0 15px 0;
  border-bottom: 1px solid #fff8f0; /* 下線も揃える */
}



/* ホバー・タップ時の変化 */
.mobile-nav-widget-images a:hover img,
.mobile-nav-widget-images a:active img {
  opacity: 0.85;
  filter: brightness(1.05);
}


/* モバイルメニューの下部～767px*/
/* テキスト部分の背景と余白 */
.mobile-only-contact {
  display: block;
  background-color: #fff8f0;
  padding: 8px 16px;       /* 余白控えめ */
  text-align: center;
  border-bottom: 1px solid #fff8f0;
  font-family: sans-serif;
}

@media (max-width: 767px) {
  /* ラベル（お問い合わせください） */
  .mobile-only-contact .contact-label {
    display: block !important;        /* ブロック要素に */
    margin: 16px 0 5px 0 !important;  /* 上16px 下5px */
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    line-height: 1.1;
  }
  /* 電話番号 <p> 自体の余白をリセット */
  .mobile-only-contact .contact-phone {
    margin: 0;
    padding: 0;
  }
  /* 電話番号リンク */
  .mobile-only-contact .contact-phone a {
    font-size: 30px;
    font-weight: bold;
    color: orange;
    text-decoration: none;
    line-height: 1.0;
    display: inline-block;
    margin: 0;


  }
  /* 営業時間 */
  .mobile-only-contact .contact-hours {
    font-size: 13px;
    color: #555;
    margin: 7px 0 16px 0;     /* 電話番号に最小限で密着 */
    line-height: 1.1;
  }
}

/* モバイル版：767px以下 */
@media (max-width: 767px) {
  /* ハンバーガーメニュー内のSNSアイコン */
  .mobile-sns-icons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 12px 0 150px 0;
    background-color: #fff8f0;
	border-bottom: 1px solid #fff8f0; /* 線を背景色に */
  }

	#vk-mobile-nav {
    padding-top: 0;    /* 上の余白をゼロに */
    margin-top: 0;     /* 外側の余白もゼロに */
}
	
  .mobile-sns-icons a {
    width: 35px;
    height: 35px;
    display: block;
  }

  .mobile-sns-icons img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    display: block; /* 下の余白除去 */
  }

  /* Xアイコンだけ小さく調整 */
  .mobile-sns-icons img[alt="X"] {
    width: 90% !important;
    height: auto !important;
  }
	
	/* ハンバーガーメニュー内のリンクテキストだけ中央寄せ */
#menu-global-menu-2 li a {
  text-align: center;
  display: block; /* 幅いっぱいではなくても中央寄せが効くように */
}
}


/* 992px以上ではボタンとメニューを非表示 */
@media screen and (min-width: 992px) {
    #vk-mobile-nav-menu-btn,
    #vk-mobile-nav {
        display: none !important;
    }
}

/* タブレット幅（768〜991px）では
   ハンバーガーメニュー内のアイコン・テキストを非表示 */
@media (min-width: 768px) and (max-width: 991px) {

  .mobile-nav-widget-images,
  .mobile-only-contact,
  .mobile-sns-icons {
    display: none !important;
  }

	/* ハンバーガーメニューを右半分幅にする */
#vk-mobile-nav {
  width: 35vw; 
  right: 0;
  left: auto;
}
	
	/* ハンバーガーメニュー全体の背景色 */
#vk-mobile-nav {
    background-color: #fff8f0 !important;
}
/* メニュー項目だけ背景を白または透明に */
#menu-global-menu-2 {
    background-color: #ffffff; /* 白にしたい場合 */
    /* background-color: transparent; */ /* 色なし（透過）にしたい場合はこちらを使う */
}

#menu-global-menu-2 li a {
  text-align: center;
  display: block; /* 幅いっぱいではなくても中央寄せが効くように */
}

}










/* ＰＣ版ヘッダーメニュー */
/* 電話などテキスト */
.header-contact-info {
    display: block;           /* ブロック表示 */   
}

.header-contact-info p {
    margin: 0;               /* 上下余白リセット */
    line-height: 1.2;
    font-size: 14px;
    color: #333;
    white-space: nowrap;      /* 折り返さない */
}

.header-contact-info p:first-child {
    margin-bottom: 5px;      /* 「お気軽に〜」と次の行の間 */
    font-weight: normal;
}

.header-contact-info p:nth-child(2) a {
    font-size: 27px;
    font-weight: bold;
    color: orange;
    text-decoration: none;
    line-height: 1.0;
    display: inline-block;
    white-space: nowrap;      /* 折り返さない */
}

.header-contact-info p:last-child {
    margin-top: 7px;         /* 電話番号との間隔 */
    font-size: 13px;
    color: #555;
    white-space: nowrap;      /* 折り返さない */
}


/* PC版 問い合わせアイコンサイズ・配置 */
.header-nav-images {
  display: flex;                /* 子要素を横並びに */
  justify-content: center;      /* 全体を中央寄せ */
  align-items: center;          /* 高さを中央揃え */
  gap: 6px;                     /* アイコン間の隙間 */
  padding: 0;                   /* 上下余白なし */
  flex-wrap: nowrap;            /* 折り返さず横並び固定 */
}

/* 各リンク（画像の枠） */
.header-nav-images a {
  width: 100px;           /* 横幅 */
  aspect-ratio: 3 / 2;   /* 横：縦 = 3：2 */
  overflow: hidden;      /* はみ出し防止 */
  border-radius: 6px;    /* 角丸 */
  margin: 0;             /* 外側余白なし */
  flex: none;            /* 親フレックスで伸縮しない */
}

/* 画像自体 */
.header-nav-images a img {
  width: 100%;           /* 枠いっぱいに広げる */
  height: 100%;          /* 枠の高さに合わせる */
  object-fit: cover;     /* 縦横比を維持して枠に収める */
  display: block;        /* 下に隙間を作らない */
  border-radius: 6px;    /* 枠と同じ角丸 */
  transition: opacity 0.3s ease, filter 0.3s ease; /* ホバーアニメーション */
}

/* ホバー・クリック時の演出 */
.header-nav-images a:hover img,
.header-nav-images a:active img {
  opacity: 0.85;          /* 少し透けさせる */
  filter: brightness(1.05); /* 明るくして強調 */
}


@media (min-width: 768px) {
  /* PC版 SNSアイコン */
  .header-sns-icons {
    display: flex;                  /* 横並び */
    flex-direction: row;            /* 横方向に配置 */
    justify-content: center;        /* 中央揃え */
    align-items: center;            /* 高さ揃え */
    gap: 20px;                      /* アイコン間の隙間 */
    padding: 20px 5px 20px 5px;     /* 上20px 右5px 下20px 左5px */
}

  .header-sns-icons a {
    width: 28px;     /* リンクの幅 */
    height: 28px;    /* リンクの高さ */
    display: block;
}

  .header-sns-icons img {
    width: 100%;                     /* 画像をリンクいっぱいに */
    height: 100%;
    object-fit: contain;             /* 画像の比率維持 */
    border-radius: 4px;
    display: block;                  /* 下の余白除去 */
    transition: opacity 0.3s ease, filter 0.3s ease; /* ホバーアニメ */
  }

  .header-sns-icons a:hover img,
  .header-sns-icons a:active img {
    opacity: 0.85;                   /* 少し透過 */
    filter: brightness(1.05);        /* 明るくする */
  }

  /* Xアイコンだけ小さく調整 */
 .header-sns-icons img[alt="X"] {
  width: 90%;
  height: auto;
  display: block;      /* ブロック化 */
  margin: 0 auto;      /* 左右中央寄せ */
}

}

/* スマホ（767px以下）で非表示にするPC用ヘッダー部分 */
@media (max-width: 767px) {
  /* ロゴ以外を非表示に */
  .siteHeader .header-right-block,
  .siteHeader .gMenu_outer {
    display: none;
  }
}


/* タブレット・ＰＣの右ウィジェット */
.header-right-block-inner {
  display: flex;            /* 横並びにする */
  align-items: center;      /* 縦中央揃え */
  gap: 15px;                /* ナビアイコンとSNSアイコン間の固定余白 */
  justify-content: flex-end; /* 右寄せ */
}

/* ブロック内のアイコン間も固定 */
.header-nav-images,
.header-sns-icons {
  display: flex;
  gap: 15px; /* 各アイコン間の固定余白 */
}


@media (min-width: 768px) {
  /* ロゴ＋右側ウィジェットを横並び */
  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ロゴ */
  .siteHeader_logo img {
    height: 60px; /* ロゴ高さはお好みで */
  }

  /* 右側ウィジェット全体 */
  .header-right-block {
    display: flex;
    align-items: center;
    gap: 24px;
  }

/* ヘッダー内のロゴと右ブロックを横並びに */
.navbar-header {
  display: flex;            /* 横並びに */
  justify-content: space-between; /* 左右に振り分け */
  align-items: center;      /* 縦中央揃え */
}

/* header-right-block は右寄せ */
.header-right-block {
  display: flex;
  gap: 10px;                /* ウィジェット間の隙間 */
  align-items: center;      /* 縦中央揃え */
}
}

/* タブレット版ヘッダー */
@media (min-width: 768px) and (max-width: 991px) {

  /* navbar-header全体を縦並びに */
  .navbar-header {
    display: flex;
    flex-direction: column;   /* 縦並び */
    align-items: center;      /* 中央寄せ */
  }
  .container.siteHeadContainer {
    padding-bottom: 5px !important;
}

  /* ロゴは縮小させない */
  .siteHeader_logo img {
    height: 60px;
    width: auto;
    max-width: none;          /* 縮小防止 */
  }

  /* header-right-blockを横並び固定・余白自動 */
  .header-right-block {
    display: flex;
    flex-direction: row;            /* 横並び固定 */
    justify-content: space-between; /* ウィジェット間の余白自動調整 */
    width: 100%;                    /* 幅いっぱい */
    margin-top: 10px;
    flex-wrap: nowrap;              /* 折り返さない */
  }

  /* 各ウィジェットの幅は固定（伸ばさない） */
  .header-right-widget-area {
    flex: none;
    margin: 0;                      /* 余白はjustify-contentで調整 */
  }

  /* 画像やアイコンは元のサイズを維持 */
  .header-right-widget-area img {
    width: auto;
    height: auto;
    display: block;
  }

}

/* ＰＣ版ヘッダー */
@media (min-width: 992px) {

  .header-right-block {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    /* 自動で程よく余白調整 */
    gap: clamp(12px, 2vw, 32px);

    /* 折り返し禁止 */
    flex-wrap: nowrap;

    /* 右に寄りすぎ防止 */
    max-width: 580px;
    margin-left: auto;
  }
  
.siteHeader_logo {
    flex-shrink: 1;
    min-width: 0;
  }

	.siteHeader_logo img {
    max-width: clamp(200px, 18vw, 260px);
    height: auto;
    margin-left: 0px;
    margin-right: 0px;
  }
		
  .header-right-widget-area {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .header-nav-images {
    display: flex;
    gap: clamp(8px, 1.5vw, 20px);
  }

  .header-nav-images img {
    height: 42px;
    width: auto;
  }

  .header-sns-icons {
    display: flex;
    gap: clamp(20px, 1vw, 14px);
  }

  .header-sns-icons img {
    height: 28px;
    width: auto;
  }
	
 
}


/* グローバルメニューも中央寄せ */

@media (min-width: 992px) {
  #gMenu_outer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
  }

  #gMenu_outer li > a {
    padding: 10px 12px;
  }
}

/* ヘッダーの余白 */
@media (min-width: 768px) and (max-width: 991px) {
  .siteHeader {
    padding: 0;
    margin: 0;
  }
}
@media (min-width: 992px) {
  .siteHeader .siteHeadContainer.container {
    padding: 10px 15px 0 15px;   /* 上10px、左右15px */
    margin: 0;
    max-width: 100%;              /* 画面幅いっぱいに */
    width: 100%;                  /* 念のため横幅100% */
  }
}

/* ロゴの拡大縮小 */
@media (min-width: 992px) {
    /* spanをブロック化して余白リセット */
    .navbar-brand.siteHeader_logo span {
        display: block;
        margin: 0;
        padding: 0;
    }
    /* ロゴ画像 */
    .navbar-brand.siteHeader_logo img {
        width: clamp(200px, 20vw, 350px); /* 最小200px、画面比率で伸縮、最大350px */
        height: auto;                      /* 縦横比維持 */
        max-width: none;                   /* テーマ制限解除 */
        display: block;                    /* 横余白影響を最小化 */
    }
}
@media (min-width: 1000px) {
    .navbar-brand.siteHeader_logo img {
        width: clamp(200px, 21vw, 300px);
    }
}
@media (min-width: 1020px) {
    .navbar-brand.siteHeader_logo img {
        width: clamp(200px, 22vw, 300px);
    }
}
@media (min-width: 1040px) {
    .navbar-brand.siteHeader_logo img {
        width: clamp(200px, 23vw, 300px);
    }
}
@media (min-width: 1060px) {
    .navbar-brand.siteHeader_logo img {
        width: clamp(200px, 24vw, 300px);
    }
}
@media (min-width: 1080px) {
    .navbar-brand.siteHeader_logo img {
        width: clamp(200px, 25vw, 350px);
    }
}


/* 施工事例カラム設定 */
/* 正方形固定（Lightning対応・安全版） */
.rl-gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 正方形 */
  object-fit: cover;     /* 中央トリミング */
  display: block;
}

/* 600px～767pxを強制的に4カラムに */
@media (min-width: 600px) and (max-width: 768px) {
  .rl-gallery-item {
    width: calc(25% - 6px) !important;  /* 余白を引く */
    float: left;
	margin: 0 2.5px 5px 2.5px;          /* 横の間隔と下の余白 */
    box-sizing: border-box;              /* パディング・境界を含める */
  }
}

/* イベント案内の設定 */
/* 投稿日エリアを横並びにする */
.wp-block-latest-posts li {
  position: relative;
}

/* 日付とNEWをまとめる */
.wp-block-latest-posts__post-date,
.new-post-mark {
  display: inline-block;
  vertical-align: middle;
}

/* カテゴリボタンを右端へ */
.wp-block-latest-posts .entry-meta_items_term_button {
  float: right;
  margin-left: 10px;
}

/* 通常状態 */
.entry-meta_items_term_button,
.entry-meta_items_term_button:visited {
  color: #fff !important;
}

/* hoverしても変えない */
.entry-meta_items_term_button:hover,
.entry-meta_items_term_button:focus,
.entry-meta_items_term_button:active {
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* 767px以下のカテゴリボタン設定 */
@media (max-width: 767px) {
.entry-meta_items_term_button {
  display: inline-block !important; /* 横幅を文字に合わせる */
  width: auto !important;           /* 横幅固定を解除 */
  padding: 2px 8px !important;      /* 上下2px、左右8pxの余白 */
  font-size: 11px !important;       /* 文字サイズ調整 */
  line-height: 1.4 !important;      /* 高さ調整 */
  border-radius: 3px !important;    /* 角丸 */
  text-decoration: none !important; /* 下線なし */
  color: #fff !important;           /* 文字色白 */
  margin: 0 !important;             /* マージンをゼロに */
  margin-left: auto !important;     /* flexコンテナ内で右端に寄せる */
  float: none !important;           /* floatを解除（flexと併用する場合は不要） */
}
}

/* 767px以下の日付、NEW！、カテゴリボタンの並び設定 */
@media screen and (max-width: 767px) {
  /* liは縦構造を維持 */
  .wp-block-latest-posts__list li {
    display: flex !important;      /* ここをblock → flex に変更 */
    flex-wrap: wrap;               /* タイトル・本文は下に落とす */
    align-items: center;
  }

  /* メタ情報3つを横並び化 */
  .entry-meta_items_term_button,
  .wp-block-latest-posts__post-date,
  .new-post-mark {
   display: inline-block !important;
   width: auto !important;
   vertical-align: middle;
}
  /* 横並びの順番 */
  .wp-block-latest-posts__post-date { order: 1; margin-right: 8px; }
  .new-post-mark { order: 2; margin-right: 12px; }
  .entry-meta_items_term_button { 
    order: 3; 
    margin-left: auto; /* ← これで右端に押し出す */
  }

  /* タイトル・本文を下に落とす */
  .wp-block-latest-posts__post-title,
  .wp-block-latest-posts__post-excerpt {
    order: 4;
    flex-basis: 100%;   /* 横幅100%で下に */
    display: block;
    margin-top: 8px;
  }
}


/* コンセプト（性能）リストを右寄せ */
/* リスト全体を右寄せ */
.list-arrow-right {
    text-align: right; /* 右端に揃える */
}
/* liを右寄せ基準に */
.list-arrow-right li {
    display: inline-block; /* liを横並び扱い */
    margin: 0;
    padding-left: 0;       /* 左余白は不要 */
}
/* 矢印を左→右端に移動して文字とくっつける */
.list-arrow-right.is-style-vk-arrow-mark li::before {
    left: auto;    /* 左位置リセット */
    right: 100%;   /* 文字の左側に矢印をくっつける */
    margin-right: 4px; /* 文字との間隔を微調整 */
}

/* list-arrow-right が付いているカラムだけ適用 */
.list-arrow-right.wp-block-columns {
    gap: 0;
}

/* その中のカラムだけ */
.list-arrow-right.wp-block-columns .wp-block-column {
    margin: 0;
}

/* その中のリストだけ */
.list-arrow-right.wp-block-columns ul {
    margin: 0;
}

/* li 自体の余白をゼロ */
.list-arrow-right li {
    margin: 0 !important;
    padding: 0 !important;
}

/* li 内の strong, a も余白をゼロ */
.list-arrow-right li strong,
.list-arrow-right li a {
    margin: 0 !important;
    padding: 0 !important; 
    line-height: 2; /* 高さ */
	position: relative; 
    top: -1px; /* 文字を上に少しずらす */
}

/* 問い合わせフォームの設定 */
.wpcf7-form label {
  display: block;
  margin-bottom: 3px; /* 質問と入力欄の距離 */
}
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  margin-bottom: 10px; /* 次の質問までの距離 */
}
/* フォーム入力欄の大きさ設定 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-select {
  width: auto !important;       /* 親幅いっぱいにする */
  max-width: 100%;              /* はみ出し防止 */
  box-sizing: border-box;       /* padding込みで幅を計算 */
  padding-left: 10px;           /* 左余白 */
  padding-right: 10px;          /* 右余白 */
  display: block;               /* 横並びラベルも縦並びに */
}
/* 画面幅410px以下のスマホ用 */
@media screen and (max-width: 410px) {
  .wpcf7-form-control {
    width: 100% !important;
    max-width: 100%;
  }
}

/* ※ 正しくご入力ください。～の設定 */
.form-note {
  font-size: 13px; /* 文字サイズ */
  color: #666;     /* 薄めの色 */
}