/*
Theme Name: Fsekei Theme
Theme URI: https://fsekei.com/
Author: あなたのお名前
Version: 1.0
Text Domain: fsekei-theme
*/
/* ここからテーマのベーススタイルを記述します */
/* ① ヘッダーを画面上部に固定 */
.site-header {
/*   position: fixed; */
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;        /* 最初は透明 */
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 1000;
}

/* ② スクロール後に付けるクラス */
.site-header.scrolled {
  background: rgba(255,255,255,);  /* お好みの色・透過度 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ③ ヘッダーが固定される分だけ本文を下げる */
body {
  padding-top: 80px; /* ヘッダーの高さに合わせて調整 */
}

body {
  margin: 0;
  padding: 0;
}
.case-item-title {
  text-decoration: none;
}
/* ----- フォント設定 ----- */
body {
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  color: #333;
}
h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.02em;
}
p, li, a, .btn, .case-item-title {

  font-weight: 400;
  line-height: 1.6;
}

/* 小見出しやキャプションに軽めの6００も */
h5, h6, .section-title-text {
  font-weight: 600;
}
body {
  font-family: 'Noto Serif JP', 'Work Sans', sans-serif;
}
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}
html, body {
  font-family: "Noto Serif JP", serif;
}
/* ヘッダー全体 */
.site-header {
  background: #fff; /* 任意 */
  padding: 12px 0;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 中身を中央寄せ */
.header-inner {
  display: flex;
  justify-content: center;  /* 中央寄せの肝 */
  align-items: center;
}

/* ナビ部分 */
.site-navigation {
  display: flex;
  align-items: center;
  gap: 20px; /* メニューとボタンの間隔 */
}

/* グローバルナビ（ul） */
.nav-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 問い合わせボタン */
.btn-contact {
  background:#1d2742;
  color:#fff;
  text-decoration:none;
  padding:8px 16px;
  border-radius:6px;
  font-size:14px;
  transition:background .25s;
}
.btn-contact:hover { background:#2a3860; }

/* モバイル（ハンバーガーメニュー表示） */
@media (max-width: 768px){
  .header-inner {
    justify-content: space-between; /* 左ハンバーガー / 中央にすると崩れるので */
  }
  .site-navigation {
    display: none; /* ハンバーガー開閉用JSで制御 */
  }
  .site-navigation.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    padding: 20px;
  }
  .nav-menu {
    flex-direction: column;
    gap: 12px;
  }
  .header-cta {
    margin-top: 12px;
  }
}

/* ドロップダウン（子メニュー） */
.nav-menu li .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 8px 0;
}
.nav-menu li:hover > .sub-menu {
  display: block;
}
.nav-menu li .sub-menu li {
  white-space: nowrap;
}
.nav-menu li .sub-menu li a {
  display: block;
  padding: 8px 16px;
}

/* ─── グローバルナビ／多階層ドロップダウン ─── */
.nav-menu,
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  position: relative; /* 子メニューの基準 */
  float: left;
  margin-right: 32px;
}

/* トップレベルのリンク */
.nav-menu > li > a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}
/* ─── 第1階層（白い矩形） ─── */
.nav-menu li > ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-width: 200px;      /* 白い矩形の固定幅 */
  padding: 0;
  margin: 0;
  z-index: 100;
}
.nav-menu li:hover > ul.sub-menu {
  display: block;
}

/* li 要素を矩形いっぱいに広げる */
.nav-menu li > ul.sub-menu li {
  position: relative;
  width: 100%;           /* 親矩形（200px）いっぱいに */
}

/* ─── 第2階層（水色の矩形） ─── */
.nav-menu li > ul.sub-menu li > ul.sub-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;            /* 親矩形の右端からスタート */
  background: #e0f7ff;   /* 水色（Figma指定色に合わせて調整） */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-width: 200px;      /* 白と同じ幅に揃える */
  padding: 0;
  margin: 0;
  z-index: 101;
}
.nav-menu li > ul.sub-menu li:hover > ul.sub-menu {
  display: block;
}

/* リンク共通 */
.nav-menu li ul.sub-menu li a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
}



/* お問い合わせボタン */
.header-cta .btn-contact {
  display: inline-block;
  padding: 10px 24px;
  background-color: #00436C; /* Figmaのボタン色 */
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
}

/* モバイル対応（例） */
@media (max-width: 767px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
  }
  .site-navigation {
    width: 100%;
    order: 3;
    display: none;
  }
  .site-navigation.open {
    display: block;
  }
  .header-cta {
    order: 2;
    margin-top: 10px;
  }
  .nav-toggle {
    display: flex;
    order: 1;
  }
}

/* ===== ヒーロー：フェードスライダー ===== */
.hero-fade-slider {
  position: relative;
  height: 60vh;
  overflow: hidden;
}
.hero-fade-slider .swiper-container,
.hero-fade-slider .swiper-wrapper,
.hero-fade-slider .swiper-slide {
  width: 100%;
  height: 100%;
}
.hero-fade-slider .swiper-slide {
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スライド内テキスト */
.hero-fade-slider .slide-content {
  text-align: center;
  color: #fff;
  opacity: 0;
}
.hero-fade-slider .slide-content h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero-fade-slider .slide-content p {
  font-size: 1.25rem;
}

/* ページネーション */
.hero-fade-slider .swiper-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.hero-fade-slider .swiper-pagination-bullet {
  background: rgba(255,255,255,0.5);
}
.hero-fade-slider .swiper-pagination-bullet-active {
  background: #fff;
}
/* fadeInUp */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* fadeInRight */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* fadeInLeft */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



/* スライダーより下ここから */
.top-overview {
  padding: 45px 20px;  /* 上下余白 */
  background-color: #fff; /* 必要に応じて背景色 */
}
.top-overview .overview-inner {
  display: flex;

  align-items: flex-start;
  gap: 40px;           /* 左右の間隔 */
  max-width: 1200px;   /* 指定の最大幅 */
  margin: 0 auto;      /* 中央寄せ */
  flex-wrap: wrap;     /* 狭い画面で縦並びに */
    justify-content: space-between;
}
.top-overview .overview-text {
  flex: 1 1 520px;     /* テキスト側の幅調整 */
}
/* タイトルと本文のフォントサイズ */
.top-overview .overview-text h2 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 12px;
    letter-spacing: 0.25em;
  
}
.top-overview .overview-text p {
    font-size: 12px;
    line-height: 2.3;
    margin-bottom: 8px;
    letter-spacing: 0.25em;
}

/* overview-text を縦並び flex に */
.top-overview .overview-text {
  display: flex;
  flex-direction: column;
}

/* 残りのスペースをリンク下に集める */
.top-overview .overview-text .overview-link {
    align-self: flex-end;
    margin-top: auto;
    position: relative;
    font-size: 15px;
    color: #353535;
    text-decoration: none;
    letter-spacing: 0.08em;
}

/* 下線 */
.top-overview .overview-text .overview-link::after {
  content: "";
  position: absolute;
  bottom: -2px;            /* リンクの下に少し余白を入れる */
  left: 0;
  width: 100%;
  height: 1px;
    background: #7d7d7d;
}


/* overview-image は変更不要 */
.top-overview .overview-image {
  flex: 1 1 480px;
  text-align: right;
}
.top-overview .overview-image img {
    max-width: 100%;
    height: 450px;
    border-radius: 4px;
    /* text-align: center; */
    object-fit: contain;
}










/* ここから施工事例 */
/* ===== 施工事例セクション ===== */
.construction-section {
    /* padding: 10px 20px 50px 20px; */
  background: #fdfdfd;
}
.construction-section .container {
  max-width: 1200px;   /* 幅を1200pxに制限 */
  margin: 0 auto;
	    margin-top: 80px;
}
.section-header {
  display:block;
  align-items: center;
  /* justify-content: space-between; もし右端揃えしたいなら入れたままでもOK */
  justify-content:center;  /* ← 両端ではなく左寄せ */
  gap: 48px;                     /* ← この値をお好みで調整 */
      margin-bottom: 15px;
}
.section-header h2 {
  margin: 0;                     /* デフォルトマージンはリセット */
}

.section-header .link-more {
  margin: 0;                     /* gap だけで間隔を作る */
}
.construction-section .section-header h2 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.25em;
}
.construction-section .section-header .link-more {
font-size: 15px;
    text-decoration: none;
    color: #353535;
    letter-spacing: 0.08em;
}
.construction-section .section-header .link-more:hover {
  opacity: 0.8;
}

.construction-section .cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;   /* 各行を内容に応じて伸縮 */
  gap: 20px;
}
/* 2. case-item を縦積み flex ボックスに */
.construction-section .case-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 3. 画像は固定サイズでトリミング */
.construction-section .case-item img {
  width: 380px;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* 4. 画像下にタイトル用の余白を確保 */
.construction-section .case-item-title {
  margin: 12px 0 0;       /* 上に余白をとる */
  font-size: 12px;
  color: #333;
  text-align: center;
  word-wrap: break-word;  /* 長いテキストは折り返す */
  letter-spacing: 0.05em; /* お好みで文字間隔 */
}

/* ホバー時の色を変えたい場合（任意） */
.construction-section .case-item a:hover .case-item-title {
  color: #007acc;          /* ホバーでアクセントカラーに */
}

/* ベース：Swiper コンテナの幅制限 */
.construction-section .cases-swiper {
  max-width: 1200px;
  margin: 0 auto;
}

/* case-item 内の画像縦横比を揃える（380×250） */
.construction-section .case-item img,
.construction-section .case-item .wp-post-image {
  width: 380px;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  margin: 0 auto;
}

/* タイトル */
.construction-section .case-item-title {
    font-size: 14px;
    color: #333;
    text-align: center;
    margin: 8px 0 0;
    letter-spacing: 0.06em;
}

/* PCで矢印非表示／ドット非表示にする場合 */
@media (min-width: 768px) {
  .construction-section .swiper-pagination,
  .construction-section .swiper-button-prev,
  .construction-section .swiper-button-next {
    display: none;
  }
}


.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 40px; /* セクションとの余白調整 */
}

.section-title-text {
  font-size: 16px;         /* お好みのサイズに */
  font-weight: 600;
  text-transform: lowercase;
  margin-right: 12px;      /* 文字と線の間隔 */
  color: #333;
}

.section-title-line {
  flex: 1;                 /* 残り幅すべて */
  height: 2px;             /* 線の太さ */
  background-color: #333;  /* 線の色 */
  max-width: 200px;        /* 線の長さ上限（必要に応じて調整） */
}











/* ===== News セクション ===== */
.news-section {
  padding: 80px 20px;
}
.news-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* セクションヘッダー */
.news-section .section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
	border:0;
}
.news-section .section-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin-right: 12px;
    letter-spacing: 0.2em;
}
.news-section .section-header-line {
flex: 1;
    height: 0.5px;
    background: #333;
    max-width: 100px;
}

/* グリッドレイアウト */
.news-section .news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-section .news-item img,
.news-section .news-item .wp-post-image {
  width: 100%;
  height: 250px;    /* 好みで調整 */
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.news-section .news-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-top: 12px;
    letter-spacing: 0.06em;
}

/* View More リンクを3列目の下に右寄せ */
.news-section .news-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.news-section .news-more .link-more {
  text-decoration: none;
  border-bottom: 1px solid #7d7d7d;
  padding-bottom: 2px;
      font-size: 15px;
    color: #353535;
    text-decoration: none;
    letter-spacing: 0.08em;
}
.news-section .news-more .link-more:hover {
  opacity: 0.8;
}

/* レスポンシブ：スマホは1カラム */
@media (max-width: 767px) {
  .news-section .news-grid {
    grid-template-columns: 1fr;
  }
  .news-section .news-item img,
  .news-section .news-item .wp-post-image {
    height: auto; /* 高さは自動調整 */
  }
}


/* 施工事例のタイトル下線を完全に消す */
.construction-section .case-item-title,
.construction-section .case-item-title a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 施工事例タイトルを包む a 要素の下線を完全にオフ */
.construction-section .case-item a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 念のため、ホバー時もオフ */
.construction-section .case-item a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* H3 に直接当てておく */
.construction-section .case-item-title {
  text-decoration: none !important;
  border-bottom: none !important;
}
.news-section .news-excerpt{
  text-decoration: none !important;
  border-bottom: none !important;
}





/* footer */
/* ===== フッター ===== */
.site-footer {
  background: #fff;
  padding: 60px 20px;
  text-align: center;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ロゴ */
.footer-logo img {
  max-height: 60px;  /* デザインに合わせて */
  width: auto;
}

/* 会社情報 */
.footer-info {
  margin-top: 16px;
}
.footer-info p {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* SNSアイコン */
.footer-social {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 24px;           /* アイコン間のスペース */
}
.footer-social a img {
  width: 32px;
  height: 32px;
  display: block;

  transition: filter .3s;
}
.footer-social a:hover img {
  filter: none;  /* ホバーでカラー表示 */
}
/* ニュースセクションのリンク下線をオフ */
.news-section .news-item a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 特に excerpt 部分を狙ってオフにする場合 */
.news-section .news-item a .news-excerpt {
  text-decoration: none !important;
}




















/* ===== ローコストハウス：パターン1 ===== */
.lowcost-pattern {
  padding: 0px 20px;
  background: #fff; /* 必要なら色を付ける */
      margin-bottom: 60px;
}
.lowcost-pattern .container {
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
.lowcost-pattern .pattern-caption {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

/* 3カラムのグリッド */
.lowcost-pattern .pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lowcost-pattern .pattern-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* レスポンシブ：スマホは1カラム */
@media (max-width: 767px) {
  .lowcost-pattern .pattern-grid {
    grid-template-columns: 1fr;
  }
}


/* ―― ローコストハウス：コピーセクション ―― */
.lowcost-copy {
  padding: 40px 20px;
  background: #fff;
}
.lowcost-copy .container {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* タイトル：21px */
.lowcost-copy-title {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 24px;
  color: #222;
  text-align: center;
  /* ―― ローコストハウス：コピーセクション ―― */
.lowcost-copy {
  padding: 60px 20px;
  background: #fff;
}
.lowcost-copy .container {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* タイトル：21px */
.lowcost-copy-title {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 24px;
  color: #222;
}

/* 本文：13px */
.lowcost-copy-text p {
  font-size: 13px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
}

/* 最後の段落は余白なしでもOK */
.lowcost-copy-text p:last-child {
  margin-bottom: 0;
}

}

/* 本文：13px */
.lowcost-copy-text p {
  font-size: 13px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
}

/* 最後の段落は余白なしでもOK */
.lowcost-copy-text p:last-child {
  margin-bottom: 0;
}




/* ===== 共通：セクションヘッダー ===== */
.section-header {
  display:block;
  /* justify-content: center; タイトルを中央寄せ */
  align-items: baseline;
  margin-bottom: 8px;
}
.section-header h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #222;
  text-align: center;
}
.section-sub {
  display: block;
  font-size: 12px;
  color: #777;
  margin-left: 12px;
  text-align: center;
}

/* ===== 共通：リード文 ===== */
.section-lead {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-bottom: 24px;
}


/* ===== SDGs宣言セクション ===== */
.company-sdgs {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}
.company-sdgs .sdgs-icons img {
  max-width: 100%;
  margin-bottom: 32px;
}
.company-sdgs .sdgs-items h4,
.company-sdgs .sdgs-items p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 16px;
  font-size: 13px;
  line-height: 1.6;
}
.company-sdgs .sdgs-items h4 {
  font-size: 14px;
  font-weight: 500;
  margin-top: 24px;
}


/* ===== 代表者紹介セクション ===== */
.company-ceo {
  padding: 80px 20px;
}
.company-ceo .ceo-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center; /* 全体を中央寄せ */
  align-items: flex-start;
}
.company-ceo .ceo-photo img {
  width: 240px;
  border-radius: 4px;
  display: block;
}
.company-ceo .ceo-info {
  max-width: 600px;
}
.company-ceo .ceo-name {
  font-size: 18px;
  margin-bottom: 8px;
  text-align: center;
}
.company-ceo .ceo-profile,
.company-ceo .ceo-message p {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 16px;
  font-size: 13px;
  line-height: 1.8;
}


/* ===== 会社概要セクション ===== */
.company-overview {
  padding: 60px 20px;
  background: #fff;
}
.company-overview .container {
  display: flex;
  justify-content: center; /* overview-list を中央寄せ */
}
.company-overview .overview-list {
    display: grid
;
    grid-template-columns: 100px 5fr;
    gap: 11px 5px;
    width: max-content;
}
.company-overview .overview-list dt, .company-overview .overview-list dd {
    text-align: left;
    font-size: 16px;
    color: #333;
    margin: 0;
}
.company-overview .overview-list dt {
  font-weight: 500;
}

/* ===== レスポンシブ ===== */
@media (max-width: 767px) {
  .company-ceo .ceo-inner {
    flex-direction: column;
    align-items: center;
  }
  .company-overview .overview-list {
    grid-template-columns: 1fr;
    width: 100%;
  }
}






/* CSS: 2カラム表示に */

.ba-slider-container {
    max-width: 1200px;
    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 auto;
}

/* 各スライダーの基本スタイル */
.ba-slider {
  position: relative;
  width: 100%;
  /* 高さはアスペクト比に合わせて調整可 */
  padding-top: 62.5%; /* 16:10 想定の場合 */
  overflow: hidden;
  cursor: ew-resize;
}

/* 内部コンテンツは絶対配置でカバー */
.ba-slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* アフター画像のマスク */
.ba-slider .after-image {
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
}

/* ハンドル（つまみ） */
.ba-slider .handle {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: rgba(255,255,255,0.8);
  pointer-events: none;
}

.construction-section .cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.construction-section .case-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.construction-section .case-item img {
  width: 100%;
  /* 固定サイズにしたい場合は数値を指定 */
  max-width: 380px;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
}

.construction-section .case-item-title {
  margin-top: 12px;
  font-size: 14px;
  color: #333;
  text-align: center;
}
/* 画面幅767px以下で適用 */
@media only screen and (max-width: 767px) {
  /* 施工事例グリッドを1カラムに */
  .construction-section .cases-grid {
    grid-template-columns: 1fr !important;
  }

  /* ヒーロースライダーを固定高さに */
  .hero-fade-slider {
    height: 400px !important;
  }
  .hero-fade-slider .swiper-container,
  .hero-fade-slider .swiper-wrapper,
  .hero-fade-slider .swiper-slide {
    height: 100% !important;
  }
.construction-section .case-item img, .construction-section .case-item .wp-post-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    margin: 0 auto;
}
  /* 他、モバイル専用で変更したいスタイルをここに */
}



/* 共通：ヘッダー右端のCTAは非表示（モバイル用は nav 内に移動したのでこちらだけ） */
.header-inner > .header-cta {
  display: none;
}
/* まずは全体をリセット */
.nav-toggle,
.site-navigation,
.header-inner > .header-cta {
  display: none;
}

/* ── デスクトップ（768px以上） ── */
@media (min-width: 768px) {
  /* ハンバーガー非表示 */
  .nav-toggle { display: none; }

  /* 外側CTAを表示 */
  .header-inner > .header-cta {
    display: block;
    margin-left: auto;
  }

  /* ナビは横並びで常に表示 */
  .site-navigation {
    display: flex !important;
    align-items: center;
    position: static;
    width: auto;
    background: none;
  }


  /* メニュー内リンク */
  .nav-menu {
    display: flex;
    gap: 32px;
  }
}

/* ── モバイル（767px以下） ── */
@media (max-width: 767px) {
  /* ハンバーガー表示 */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px; height: 18px;
    background: none; border: none; padding: 0; cursor: pointer;
    margin-left: auto;
  }
  .nav-toggle span {
    display: block; height: 2px; background: #333; border-radius: 1px;
    transition: transform .3s, opacity .3s;
  }

  /* メニュー（閉じた状態）*/
  .site-navigation { display: none; }
  /* open クラスで表示 */
  .site-navigation.open {
    display: block !important;
    position: absolute; top: 80px; left: 0; width: 100%; background: #fff;
    z-index: 999;
  }

  /* モバイル版メニュー内：縦並び */
  .site-navigation .nav-menu {
    display: flex;
    flex-direction: column;
    margin: 0; padding: 0;
  }
  .site-navigation .nav-menu li a {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
  }

  /* メニュー内CTA */
  .site-navigation > .header-cta {
    display: block;
    padding: 12px 20px;
    border-top: 1px solid #eee;
  }
}
/* 全体リセット */
.header-inner > .header-cta { display: none; }
.header-cta--desktop { display: none; }

/* モバイル */
@media (max-width: 767px) {
  .site-navigation.open > .header-cta { display: block; }
}


/* ── デスクトップ（768px以上） ── */
@media (min-width: 768px) {
  /* ナビゲーションを flex 化 */
  .site-navigation {
    display: flex !important;      /* まず親を flex container に */
    align-items: center;           /* 垂直センター */
    position: static;
    width: auto;
    background: none;
        gap: 40px; /* ← ナビ（左）とCTA（右）の間隔 */
    /* float を気にせず、中の要素を並べる */
  }

  /* 既存の float:left をリセットしつつ、メニュー自体も flex */
  .site-navigation .nav-menu {
    display: flex !important;
    float: none !important;        /* ← これが肝 */
    margin: 0;
    padding: 0;
    gap: 32px;
  }
  .site-navigation .nav-menu li {
    float: none !important;        /* ← float 解除 */
    margin: 0;
  }

  /* メニュー項目 */
  .site-navigation .nav-menu li > a {
    display: block;
    padding: 10px 0;
  }


}
/* .overview-text の最初の img だけを幅 300px に */
.overview-text > img {
  width: 300px;    /* お好みのサイズに変更 */
  max-width: 100%; /* 親幅をはみ出さない */
  height: auto;
  display: block;  /* 必要なら中央寄せなど */
  margin-bottom: 16px; /* キャプションや見出しとの間隔 */
}



.image-grid {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin: 0 auto;
}
.image-item {
  width: 23%; /* 4つ横並びにするために100÷4=25%、余白込みで少し調整 */
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* お好みで */
}

/* スマホ対応（画面幅768px以下で1カラムに） */
@media (max-width: 768px) {
  .image-item {
    width: 100%;
  }
  .ba-slider-container {

    grid-template-columns:block;
    gap: 20px;
    margin: 0 auto;
}
}



.home-more{
    text-decoration: none;
    border-bottom: 1px solid #7d7d7d;
    padding-bottom: 2px;
    font-size: 15px;
    color: #353535;
    text-decoration: none;
    letter-spacing: 0.08em;
}

.home-more{
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}


   .grid-table {
      display: grid;
      grid-template-columns: 150px 1fr;
      border: 1px solid #000;
      width: 100%;
      max-width: 700px;
      margin: 0 auto;
    }

    .grid-table div {
      border: 1px solid #000;
      padding: 10px;
      white-space: pre-line;
    }

    .grid-header {
      background-color: #f0f0f0;
      font-weight: bold;
      text-align: center;
    }


    
    .flow-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90%;
      max-width: 600px;
      margin: 0 auto;
    }

    .flow-box {
      border: 1px solid #333;
      padding: 10px 20px;
      margin: 10px 0;
      text-align: center;
      background-color: #fff;
      position: relative;
      width: 100%;
    }

    .flow-box::after {
      content: "";
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      border: 10px solid transparent;
      border-top-color: #333;
    }

    .flow-box.last::after {
      display: none;
    }

    .sub-box {
      font-size: 0.9em;
      margin-top: 5px;
    }

    .double-box {
      display: flex;
      flex-direction: column;
      border: 1px solid #333;
      padding: 10px;
      margin: 10px 0;
      width: 100%;
    }

    .double-box > div {
      border-top: 1px solid #ccc;
      padding: 5px;
      text-align: center;
    }

    .double-box > div:first-child {
      border-top: none;
    }

       .locohouse-wrapper {
      font-family: "Hiragino Kaku Gothic ProN", sans-serif;
      line-height: 1.8;
      max-width: 700px;
      margin: 50px auto;
      padding: 0 20px;
    }

    .locohouse-title {
      text-align: center;
      margin-bottom: 1em;
    }

    .locohouse-features {
      list-style-type: "・";
      padding-left: 1.2em;
      margin: 0;
    }

    .locohouse-features li {
      margin-bottom: 0.4em;
    }

    /* スマホ対応（画面幅768px以下で1カラムに） */
@media (max-width: 768px) {
  .ba-slider-container {

	  
	  
    grid-template-columns:block; 
    gap: 20px;
    margin: 0 auto;
}
}

  .label-before,
  .label-after {
    position: absolute;
    top: 10px;
    padding: 4px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    z-index: 5;
  }

  .label-before {
    left: 10px;
  }

  .label-after {
    right: 10px;
  }


      .taishin-wrapper {
      padding: 60px 20px;
    }

    .taishin-container {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: flex-start;
    }

    .taishin-image {
      flex: 1 1 45%;
      max-width: 45%;
    }

    .taishin-image img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    .taishin-text {
      flex: 1 1 50%;
      min-width: 300px;
    }

    .taishin-title {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 0.2em;
    }

    .taishin-subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 1.8em;
    }

    .taishin-body h2 {
      font-size: 20px;
      margin-bottom: 0.6em;
    }

    .taishin-body p {
      font-size: 16px;
      line-height: 1.9;
      margin-bottom: 1.2em;
    }


.image-slider-section {
  max-width: 1150px; /* 必要に応じて調整 */
  margin: 0 auto;
  padding: 40px 20px; /* 上下余白と左右余白 */
}

.locosthouse-swiper .swiper-slide {
  text-align: center;
}

.locosthouse-swiper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.locosthouse-swiper .swiper-slide img {
  display: block;
  margin: 0 auto;
}
.locosthouse-swiper .swiper-slide {
  text-align: center;
}

.locosthouse-swiper img {
  display: block;
  margin: 0 auto;
  max-width: 60%;
  height: 300px;
}

.slide-caption {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  text-align: center;
}


.spec-grid-wrapper {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* スマホで折り返す */
  max-width: 1150px;
  margin: 0 auto;
}

.spec-box {
  flex: 1 1 300px;
  min-width: 280px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 15px;
  box-sizing: border-box;
}

.spec-box table {
  width: 100%;
  border-collapse: collapse;
}

.spec-box th {
  text-align: left;
  background: #f2f2f2;
  padding: 8px;
  width: 30%;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}

.spec-box td {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  font-size: 0.95rem;
}



/* 施工事例 */
.construction-grid {
  display: flex;
  gap: 30px;
  flex-wrap: wrap; /* スマホなどで折り返し可 */
  justify-content: space-between;
  max-width: 1150px;
  margin: 0 auto;
}

.construction-item {
  width: calc(33.333% - 20px); /* 3列時に余白含めて調整 */
  box-sizing: border-box;
  text-align: center;
}

.construction-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.construction-title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 1rem;
}
.construction-section a {
  color: inherit;
  text-decoration: none;
}
.news-item a {
  color: inherit;
  text-decoration: none;
}


.flowchart {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: sans-serif;
}

.flow-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
}

.flow-step,
.flow-sub-step {
  border: 1px solid #000;
  padding: 10px 20px;
  margin: 10px auto;
  text-align: center;
  background: #fff;
}

.flow-step {
  font-weight: bold;
}

.flow-step-group {
  margin: 20px 0;
  padding-left: 20px;
  border-left: 3px solid #999;
}




/* ▼ お知らせブロック全体のラッパ ▼ */
.news-section {
  max-width: 700px;  /* 表示幅の目安 */
  margin: 1rem auto; /* センター寄せ */
  padding: 0 1rem;
  font-family: sans-serif;  /* フォント例 */
  color: #333;
  font: normal normal normal/ 60px "Hiragino Mincho Pro", serif;
}

.news-heading {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #1b1b1a;  /* 見出し部分の色 (例) */
  margin-bottom: 0.3rem;
  font: normal normal normal 14px / 14px "Hiragino Mincho Pro", serif;
}

.news-subheading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
  font: normal normal normal 32px / 32px "Hiragino Mincho Pro", serif;
}

/* ▼ お知らせ一覧のUL ▼ */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 30px;
}

/* ▼ お知らせ1件分のスタイル ▼ */
.news-item {
  display: flex;
  align-items: center;   /* 日付・バッジ・タイトルを縦中央にそろえる */
  padding: 1rem 0;
  border-bottom: 1px solid #ddd; /* 下線 */
}

/* ▼ 投稿日部分 ▼ */
.news-date {
  width: 110px;        /* 日付の横幅を固定して整列 */
  color: #666;
  font-size: 0.9rem;
  margin-right: 1rem;
}

/* ▼ カテゴリバッジ部分 ▼ */
.news-badge {
  display: inline-block;
  background-color: #f7a952; /* オレンジ系 */
  color: #fff;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  margin-right: 1rem;
  border-radius: 4px;
}

/* ▼ タイトル部分 ▼ */
.news-title {
  flex: 1;  /* 残りのスペースを使う */
  font-size: 1rem;
}

.news-title a {
  text-decoration: none; 
  color: #333;
  
  font: normal normal normal 14px / 60px "Hiragino Mincho Pro", serif;
}

.news-title a:hover {
  text-decoration: underline; /* ホバー時の装飾 */
}

/* ▼ 「お知らせ一覧をみる」のボタン ▼ */
.news-archive-link {
  text-align: right;  /* 右寄せ */
  margin-top: 1.5rem;
}

/* ボタンのスタイル例 */
.news-archive-link a {
  color: #358d7e;
  text-decoration: none;
  border: 1px solid #358d7e;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.news-archive-link a:hover {
  background-color: #52686a;
  color: #fff;
}




main.content-area {
  max-width: 1080px;
  margin: 0 auto;
  margin-bottom: 150px;
}
main.content-area h1{
  font: normal normal normal 21px / 21px "Hiragino Mincho Pro", serif;
}
main.news-archive {
  max-width: 1080px;
  margin: 0 auto;
  font: normal normal normal 14px / 60px "Hiragino Mincho Pro", serif;
}
main.news-archive h1{

  font: normal normal normal 18px / 60px "Hiragino Mincho Pro", serif;
}



/* 画像URLだけ差し替えてください */
:root{
  --hero-img-pc: url('http://artra2.xsrv.jp/wp-content/uploads/2025/08/TOP①-scaled.jpg');
  --hero-img-m:  url('http://artra2.xsrv.jp/wp-content/uploads/2025/08/TOP①-scaled.jpg');
}

.container{max-width:1150px;margin:0 auto;padding:0 20px;}

/* ===== Hero ===== */
.hero{
position: relative;
padding: 2rem 0 32rem;
    text-align: center;
    isolation: isolate;
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:52vh; min-height:360px;
  background-image:var(--hero-img-pc);
  background-size:cover; background-position:center 35%;
  opacity:.24; pointer-events:none;
}
@media (max-width: 768px){
  .hero{ padding:2rem 0 14rem; }
  .hero::after{ background-image:var(--hero-img-m); height:44vh; min-height:260px; }
}

/* 上の小さなリンク */
.hero-links{
  display:flex; gap:1.5rem; justify-content:center; align-items:center;
  margin-bottom:2.2rem; font-size:21px; letter-spacing:.08em;
}
.hero-links a{ color:#1d2742; text-decoration:none; opacity:.8;　font-family: "Noto Serif JP", serif; }
.hero-works{
  position:relative; padding-bottom:2px;
}
.hero-works::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:#1d2742; transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.hero-works:hover::after{ transform:scaleX(1); }

/* 見出し（アニメーション）*/
.hero-copy{
  font-family:"Noto Serif JP","YuMincho","Hiragino Mincho ProN",serif;
  font-weight:700;
  color:#1d2742;
  line-height:1.35;
  letter-spacing:.08em;
  font-size:clamp(28px, 4.2vw, 64px);
}

.hero-copy .inner{
  display:inline-block;
  transform:translateY(1.2em);
  opacity:0;
}

/* 発火後（is-inviewが付くと再生） */
.hero-copy.is-inview .line:nth-child(1) .inner{
  animation:slideUp .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-copy.is-inview .line:nth-child(2) .inner{
  animation:slideUp .8s cubic-bezier(.2,.7,.2,1) .18s forwards;
}

/* ふわっと上に出る */
@keyframes slideUp{
  0%{ transform:translateY(1.2em); opacity:0; filter:blur(4px); }
  100%{ transform:translateY(0); opacity:1; filter:blur(0); }
}

.container{max-width:1440px;margin:0 auto;padding:0 20px;}

.news-section .section-title{
  font-weight:700; letter-spacing:.04em;
  font-size:clamp(22px,2.4vw,32px); margin:1rem 0 1.5rem;
}

.news-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1024px){ .news-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .news-grid{grid-template-columns:1fr;} }

.news-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.news-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.10); }

.news-thumb img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
}

.news-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.news-meta{ display:flex; align-items:center; gap:.6rem; font-size:12px; color:#6b7280; }
.news-cat{
  background:#eef2ff; color:#3730a3; padding:.2rem .5rem; border-radius:999px; font-size:11px;
}

.news-title{ font-size:clamp(16px,1.6vw,18px); line-height:1.5; margin:0; }
.news-title a{ color:#111827; text-decoration:none; }
.news-title a:hover{ text-decoration:underline; }

.news-excerpt{ font-size:14px; color:#4b5563; margin:0; }

.news-actions{ margin-top:auto; }
.news-readmore{
  display:inline-block; font-size:13px; letter-spacing:.06em;
  text-decoration:none; color:#1d2742; position:relative; padding-bottom:2px;
}
.news-readmore::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.news-readmore:hover::after{ transform:scaleX(1); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px; /* ボタンとアイコンの間隔 */

}


/* お問い合わせボタン（既存に無ければ） */
.btn-contact{
  background:#1d2742; color:#fff; text-decoration:none;
  padding:8px 16px; border-radius:6px; font-size:14px;
  transition:background .25s ease;
}
.btn-contact:hover{ background:#2a3860; }

/* モバイルでの扱い（任意）：768px以下はメニュー内に収めたい場合 */
@media (max-width: 768px){
  .site-navigation{ /* 既存の開閉に合わせている想定 */ }
  .header-cta{ gap:10px; }
  .header-social img{ width:26px; height:26px; }
}


/* ナビとCTAを同じ行に */
.site-navigation{
  display:flex;
  align-items:center;
  gap:16px;
}

/* メニューは左、CTAは右端へ */
.nav-menu{
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:wrap;
}
.header-cta{
  margin-left:auto;            /* 右端に寄せるキモ */
  display:flex;
  align-items:center;
  gap:12px;                    /* ボタンとアイコンの間隔 */
}

/* 問い合わせボタン */
.btn-contact{
  background:#1d2742; color:#fff; text-decoration:none;
  padding:8px 16px; border-radius:6px; font-size:14px;
  transition:background .25s ease;
}
.btn-contact:hover{ background:#2a3860; }

/* アイコンサイズ */
.header-social img{
  width:40px; height:40px; display:block;
}

/* モバイル（必要なら調整） */
@media (max-width: 768px){
  .site-navigation{ flex-wrap:wrap; }
  .header-cta{ width:100%; justify-content:flex-end; }
}


/* デスクトップ（横並び） */
@media (min-width:1025px){
  .site-navigation{
    display:flex; align-items:center; gap:16px; /* ← ここで横並びに */
  }
  .nav-menu{
    display:flex; gap:24px; margin:0; padding:0; list-style:none; flex-wrap:wrap;
  }
  .header-cta{
    margin-left:auto; display:flex; align-items:center; gap:12px;
  }
  .header-social img{ width:20px; height:20px; display:block; }
  .btn-contact{
    background:#1d2742; color:#fff; text-decoration:none;
    padding:8px 16px; border-radius:6px; font-size:14px; transition:background .25s;
  }
  .btn-contact:hover{ background:#2a3860; }
}

/* モバイル（ハンバーガーで開閉するパネル） */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* 折りたたみパネル化 */
  .site-navigation{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; display:none; /* ← 初期は閉じる */
    padding:12px 20px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:1000;
  }
  .site-navigation.is-open{ display:block; }

  .nav-menu{
    display:flex; flex-direction:column; gap:12px;
    margin:0; padding:0; list-style:none;
  }
  .header-cta{
    margin-top:12px; display:flex; align-items:center; gap:12px;
    justify-content:flex-start; /* メニュー下で左寄せ */
  }
  .header-social img{ width:20px; height:20px; display:block; }

  .btn-contact{
    background:#1d2742; color:#fff; text-decoration:none;
    padding:10px 16px; border-radius:6px; font-size:15px;
  }

  /* パネルをヘッダーの相対位置基準にする */
  .header-inner{ position:relative; }
}
body.home,
body.front-page {
  overflow: hidden;
  height: 100%;
}
/* 1150pxセンターはお好みの既存を流用でOK */
.container { max-width:1150px; margin:0 auto; padding:0 20px; }


.hero {

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

}

/* ヒーロー内の余白が原因で溢れないように適度に */
.hero-inner { padding: 40px 0; }

/* 見出しなどはそのまま */
.hero-copy{
  font-family:"Noto Serif JP",serif; /* ここは後であおぞら明朝に置換でもOK */
  font-size: clamp(28px, 4.2vw, 64px);
  font-weight: 700;
  color: #1d2742;
  line-height: 1.35;
}
body.no-scroll {
  overflow: hidden;
}

body.no-scroll .hero {
  height: 100svh;
}




/* 会社名 + SNS横並び */
.hero-company {
  display: flex;
  justify-content: center; /* 中央揃え */
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem; /* 下に余白 */
}

.company-name {
  font-family: "Noto Serif JP", serif; /* あおぞら明朝に置き換え可 */
  font-size:25px　 !important;
  color: #1d2742;
  font-weight: 600;
  letter-spacing: .05em;
}
/* 会社名＋アイコンの並びはflexで */
.hero-company{ display:flex; justify-content:center; align-items:center; gap:12px; }

/* リンク側もflexにして中央揃え */
.company-insta{ display:inline-flex; align-items:center; }

/* ← ここが本命：他のリセットを無効化してサイズ固定 */
.company-insta img{
  width: 40px;           /* お好みで 20〜24px など */
  height: 40px;          /* 高さも固定（にしたくないなら auto）*/
  max-width: none;       /* img{max-width:100%} を打ち消す */
  object-fit: contain;   /* 比率維持して収める */
  display: block;        /* ベースラインのズレ防止 */
  vertical-align: middle;/* 念のため */
}
.company-insta:hover img {
  opacity: .7;
}

.hero {
  position: relative; /* 疑似要素とロゴの重ね合わせに必要 */
  overflow: hidden;
}


.wide-banner {
  width: 100%;
 height: 350px; /* ← heightよりもmin-heightの方が安全 */
  background-size: cover;
  background-position:top;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-1 {
  background-image: url('https://artra2.xsrv.jp/wp-content/uploads/2025/08/マイクロハウス.png');
}

.banner-2 {
  background-image: url('https://fsekei.com/wp-content/uploads/2025/09/AdobeStock_1039346410-scaled.jpeg');
}
.image-grid {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.spacing-top { margin-top: 60px; }

.image-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}
/* グリッド内の画像を必ずカラム最大幅に */
.image-grid .image-item { width:100%; }  /* 念のため */
.image-grid .image-item img{
  display:block;
  width:100% !important;   /* 最優先で横幅いっぱい */
  height:auto !important;
  max-width:none !important;  /* テーマの img{max-width:100%} を打ち消す */
  object-fit:cover;           /* 等倍にこだわらないなら見栄え優先 */
}


/* セクション */
.cta-pairs { margin-top: 40px; }
.cta-pairs-title{
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.4;
  text-align: center;
  margin: 0 0 16px;
  color:#152047;
}
.sp-br { display:none; }
@media (max-width:640px){ .sp-br{ display:inline; } }

/* ボタン横並び */
.cta-pairs-buttons{
  display:flex; gap:14px; justify-content:center; align-items:center;
  flex-wrap: wrap;
}

.btn-pair{
  background:#152047;
  color:#fff;
  text-decoration:none;
  padding:12px 22px;
  border-radius:9999px;
  font-weight:700;
  letter-spacing:.04em;
  transition:transform .15s ease, opacity .15s ease;
  display:inline-block;
}
.btn-pair:hover{ opacity:.9; transform:translateY(-1px); }

@media (max-width:640px){
  .cta-pairs-buttons{ flex-direction:column; gap:10px; }
  .btn-pair{ width:100%; text-align:center; }
}
/* マイクロハウス専用 */
.btn-micro {
  background: #fff;           /* 背景 白 */
  border: 2px solid #000;     /* 枠線 黒 */
  color: orange;              /* 文字 オレンジ */
}

/* hover時のアクセント */
.btn-micro:hover {
  background: orange;         /* 背景 オレンジ */
  color: #fff;                /* 文字 白 */
  border-color: orange;       /* 枠線もオレンジに */
}


/* アンカーの下敷き防止（固定ヘッダーがある場合のみ） */
:root { --header-h: 0px; } /* JSで上書きします */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ページ全体をスムーススクロール（好みで） */
html { scroll-behavior: smooth; }

.image-item {
  text-align: center;   /* キャプションを中央揃え */
}

.image-caption {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}
.image-grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }

.image-item{ margin:0; }               /* figure のデフォ余白を消す */
.image-item img{
  display:block; width:100%; height:auto;
}
.image-caption{
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:#333;
  text-align:center;
}
.post-content {
  max-width: 1080px;      /* コンテンツ幅制限 */
  margin: 80px auto 0;    /* 上80px、左右autoで中央寄せ */
  padding: 0 20px;        /* 画面幅が狭い時に左右余白 */
  box-sizing: border-box; /* パディング込みで1080px */
}
.post-content h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;     /* タイトルを中央寄せにしたい場合 */
}
.entry-meta {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 20px;
  text-align: center;
}
.entry-body {
  line-height: 1.8;
}
.post-content {
  max-width: 1080px;      /* 横幅制限 */
  margin: 80px auto 0;    /* 上に80px余白、左右autoで中央寄せ */
  padding: 0 20px;        /* スマホでの左右余白 */
  box-sizing: border-box; /* パディング込みで幅制御 */
}

.post-content h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;     /* ニュースも中央揃えにしたい場合 */
}

.post-content p {
  line-height: 1.8;
  margin-bottom: 1.5em;
}
/* ボタン本体 */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;   /* 幅 */
  height: 20px;  /* 高さ */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 線3本 */
.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #152047; /* ←ここで色を指定（例: 濃紺） */
  border-radius: 2px;
  transition: background .3s;
}
/* PC（≥1025px）は横並びで常時表示 */
@media (min-width:1025px){
  .site-navigation{ display:flex; align-items:center; gap:16px; }
  .nav-menu{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
  .header-cta{ margin-left: auto; }
}

/* SP（≤1024px）はパネルで開閉 */
@media (max-width:1024px){
  .header-inner{ position:relative; }              /* パネルの基準 */
  .site-navigation{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; display:none;                 /* 初期は閉じる */
    padding:16px 20px; box-shadow:0 8px 24px rgba(0,0,0,.08);
    z-index: 1000;
  }
  .site-navigation.is-open{ display:block; }       /* 開く */
  .nav-menu{ display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; }
  .header-cta{ margin-top:12px; }
  .nav-toggle{ display:inline-flex; }              /* ボタンを表示 */
}

/* 既にどこかで .site-navigation{display:flex;} を書いている場合、
   上のメディアクエリを必ずその後ろに置くか、セレクタを強めてください。 */

/* 背景スクロール固定（任意：メニュー開いている間だけ） */
body.menu-open{ overflow:hidden; }

/* ヘッダーを最前面に */
.site-header{
  position: relative;    /* ←必須 */
  z-index: 9999;         /* ヒーローより前に */
}

/* モバイル時の開閉パネル */
@media (max-width:1024px){
  .header-inner{ position:relative; z-index: 10000; } /* 基準を手前に */
  .nav-toggle{ z-index: 10010; }

  .site-navigation{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:16px 20px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:none !important;     /* 初期は閉じる（強制） */
    z-index: 10005;              /* ヒーローより手前 */
  }
  .site-navigation.is-open{ display:block !important; }
}

/* 念のためトップ専用でも確実に開く */
@media (max-width:1024px){
  .home .site-navigation{ display:none !important; }
  .home .site-navigation.is-open{ display:block !important; }
}
/* PC（≥1025px）はハンバーガー隠す＆ナビ横並びで常時表示 */
@media (min-width:1025px){
  .nav-toggle{ display:none !important; }              /* ← 確実に消す */
  .site-navigation{ display:flex !important; 
                    align-items:center; gap:16px; }
  .nav-menu{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
  .header-cta{ margin-left:auto; }
}

/* SP（≤1024px）はトグル（※参考） */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; }
  .site-navigation{ display:none; }
  .site-navigation.is-open{ display:block; }
}



/* 背景レイヤー（下層） */
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; /* 下から敷く */
  height:52vh; min-height:360px;
  background-image: var(--hero-img-pc); /* もしくは直接URL指定（下に例） */
  background-size:cover;
  background-position:center bottom;
  opacity:.24;
  pointer-events:none;
  z-index: 1;                    /* ← 下層に固定 */
}

/* コンテンツ層（上に載せる） */
.hero-inner{
  position: relative;
  z-index: 2;                    /* ← 背景より前に */
}


.image-grid {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.grid-2 { 
  grid-template-columns: repeat(2, 1fr); 
}

/* スマホ時は縦並びにする */
@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.image-caption {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  text-align: center;
}


.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52vh;
  min-height: 360px;
  background-image: var(--hero-img-pc);
  background-size: cover;
  background-position: center bottom;
  opacity: .24;
  pointer-events: none;
  z-index: 1;           /* 背景を下に */
}



/* 背景帯（下部） */
.hero::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;    /* 下端に敷く */
  height: 52vh;
  min-height: 360px;
  background-image: var(--hero-img-pc); /* 直接URLでもOK */
  background-size: cover;
  background-position: center 35%;
  opacity: .24;
  pointer-events: none;
  z-index: 1;           /* 一番下 */
}

/* ← これが “帯” と同じ領域（ロゴをこの中に置く） */
.hero-bottom{
  position: absolute;
  inset: auto 0 0 0;    /* ::after と同じ */
  height: 52vh;
  min-height: 360px;
  display: flex;
  align-items: flex-end; /* 下に寄せる */
  justify-content: center; /* 横中央 */
  z-index: 2;             /* 背景より前、他テキストよりは後でもOK */
  pointer-events: none;    /* クリックは通す（必要なら外してOK） */
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;     /* 下に帯 */
  height: 52vh;
  min-height: 360px;
  background-image: var(--hero-img-pc);
  background-size: cover;
  background-position: center 30%;
  opacity: .24;
  pointer-events: none;
  z-index: 1;            /* 背景は下レイヤー */
}

/* ロゴは after の上に重ねる */
.hero-logo {
  position: absolute;
  bottom: -60%;            /* 帯の中で下から10%の位置（調整可） */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;             /* after より大きく */
}

.hero-logo img {
  width: 160px;
  height: auto;
  display: block;
}
/* テキスト等のコンテンツは必要なら最前面に */
.hero-inner{ position: relative; z-index: 3; }
/* トップページだけフッターロゴを非表示 */
.home .footer-logo {
  display: none !important;
}