/* ========== リセット & 基本 ========== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP",
               "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  background:#f7f9fc;
  color:#222;
  line-height:1.6;
}

a { text-decoration:none; color:inherit; }

.container { width:min(92%,1200px); margin-inline:auto; }

/* ========== ヘッダー ========== */
header { background:#004c8c; color:#fff; }
.header-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem;
}
.logo{ font-size:1.4rem; font-weight:700; }

.global-nav ul{
  list-style:none; display:flex; gap:1.2rem; font-size:0.95rem;
}
.global-nav a{ color:#fff; }

.header-contact{ text-align:right; font-size:0.8rem; }

/* ========== Hero ========== */
.hero{
  height:50vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background-size:cover; background-position:center;
}

/* ========== セクション共通 ========== */
.section-title{
  text-align:center; font-size:2rem; margin:3rem 0 1.2rem; font-weight:700;
  position:relative; color:#004c8c;
}
.section-title::after{
  content:\"\"; position:absolute; left:50%; bottom:-8px;
  width:60px; height:4px; background:#004c8c; transform:translateX(-50%);
}

.section-description{
  text-align:center; color:#444; font-size:1.05rem; margin-bottom:2rem;
}

/* ========== 事業内容バナー ========== */
.services-grid-4{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.image-card{
  position:relative; height:200px; border-radius:10px; overflow:hidden;
  background-size:cover; background-position:center; color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.image-card .card-text{
  background:rgba(0,0,0,0.45); padding:1rem 1.5rem; border-radius:8px;
}
.image-card h3{ margin:0; font-size:1.4rem; font-weight:700; }
.image-card p { margin:0; font-size:0.9rem; }

/* ========== 施工実績 Swiper ========== */
#works{ padding:2rem 0; }
.works-swiper .swiper-slide img{
  width:100%; height:200px; object-fit:cover; border-radius:8px;
}
.swiper-button-prev, .swiper-button-next{ color:#004c8c; }
.swiper-pagination-bullet-active{ background:#004c8c; }

/* ========== 会社案内 ========== */
.about-list{
  list-style:none; padding-left:0; max-width:800px; margin:0 auto 3rem;
}
.about-list li{ margin-bottom:0.6rem; }

/* ========== フッター ========== */
footer{
  background:#e9eef2; text-align:center; padding:1rem; margin-top:3rem;
  font-size:0.9rem;
}

/* ========== モバイル調整 ========== */
@media(max-width:768px){
  .header-bar{ flex-direction:column; gap:0.6rem; text-align:center; }
  .services-grid-4{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .image-card{ height:160px; }
  .works-swiper .swiper-slide img{ height:160px; }
}
/* ========== 会社案内リスト ========== */
#about .about-list {
  text-align: center;
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
/* お問い合わせフォーム */
.contact-form {
  max-width: 700px;
  margin: 0 auto 3rem;
}
.form-group {
  margin-bottom: 1.2rem;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.btn-primary {
  background: #004c8c;
  color: #fff;
  padding: 0.7rem 2.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}
.btn-primary:hover {
  opacity: 0.9;
}
/* ========== SNS カード ========== */
.social-cards{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:2rem;
  flex-wrap:wrap;
}
.social-card{
  background:#fff;
  border:1px solid #e0e4e8;
  border-radius:10px;
  width:260px;
  padding:1.5rem;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}
.social-card .fa-line,
.social-card .fa-instagram{
  color:#25d366;   /* LINE グリーン */
}
.social-card:nth-child(2) .fa-instagram{
  color:#c13584;   /* Instagram グラデーションのベース */
}
.social-card h3{
  margin:0.8rem 0 1rem;
  font-size:1.1rem;
  font-weight:700;
  color:#004c8c;
}
.qr-code{
  width:120px;
  height:120px;
  object-fit:cover;
  border:1px solid #ccc;
  border-radius:4px;
  margin:0 auto;
}

/* ========== レスポンシブ調整 ========== */
@media(max-width:600px){
  .social-card{ width:200px; }
}
@media (max-width: 600px){
  .hero h2 { font-size: 2.2rem; }
  .hero p  { font-size: 1.1rem; }
}
/* ========== Recruit Section ========== */
#recruit{
  padding: 3rem 0;
  background: #f9fbfe;
}
.recruit-wrapper{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}
.recruit-message h3,
.recruit-3win h3,
.recruit-terms h3{
  font-size: 1.4rem;
  margin-bottom: .8rem;
  color: #004c8c;
  font-weight: 700;
}
.recruit-message p{
  line-height: 1.8;
  color: #444;
}
.recruit-3win ul,
.recruit-terms ul{
  list-style: disc;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: #444;
}
.recruit-photo{
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
  color: #777;
}

/* Grid layout for desktop */
@media(min-width: 768px){
  .recruit-wrapper{
    grid-template-columns: 1fr 1fr;
  }
  .recruit-terms{
    grid-column: span 2;   /* 募集要項を横幅いっぱいに */
  }
}

/* Mobile tweaks */
@media(max-width: 767px){
  .recruit-wrapper{
    grid-template-columns: 1fr;   /* 1カラム */
  }
}
/* Recruit Page Layout */
.recruit-main-section{
  padding:3rem 0;
}
.recruit-grid{
  display:grid;
  gap:2rem;
}
.recruit-left{ flex:1; }
.recruit-right{ flex:1; }
.recruit-terms-section{
  margin-top:3rem;
}
@media(min-width:768px){
  .recruit-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:767px){
  .recruit-grid{
    grid-template-columns:1fr;
  }
}
/* ========== Phone & FAX Banner ========== */
.phone-banner{
  background:#004c8c;
  color:#fff;
  text-align:center;
  padding:1.2rem;
  margin-top:2rem;
  border-radius:6px;
  font-size:1.1rem;
}
/* ===== strengths 見出し帯（背景画像） ===== */
#strengths.strengths-with-band{
  position: relative;
  padding: 3rem 0 2.5rem;
}
#strengths.strengths-with-band::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;   /* 上部にだけ帯を敷く */
  width: 100%;
  height: 260px;          /* 帯の高さ：必要なら調整可 */
  background: url("images/strength-wide.jpg") center/cover no-repeat;
  border-radius: 0 0 10px 10px;
  filter: brightness(.9);
  z-index: 0;
}
#strengths.strengths-with-band::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: rgba(0,0,0,.35); /* 文字の可読性を確保する薄い被せ */
  border-radius: 0 0 10px 10px;
  z-index: 0;
}
#strengths.strengths-with-band .container{
  position: relative;     /* 擬似要素の上に内容を載せる */
  z-index: 1;
}
/* 見出しを白字に（既存.section-titleの装飾は維持） */
.section-title.light{ color:#fff; }
.section-title.light::after{ background:#fff; }

/* モバイルで帯を少し浅く */
@media (max-width: 600px){
  #strengths.strengths-with-band::before,
  #strengths.strengths-with-band::after{ height: 200px; }
}
/* ===== 選ばれる理由：セクション全面に背景画像 ===== */
#strengths.strengths-full-bg{
  position: relative;
  padding: 3rem 0 2.5rem;           /* 見出しとカードの上下余白 */
  margin-top: 2.5rem;               /* 事業内容ボタンとの間の余白 */
  overflow: hidden;                 /* 角丸を適用する場合に備え */
  border-radius: 10px;              /* お好みで外してOK */
}
#strengths.strengths-full-bg::before{
  content: "";
  position: absolute;
  inset: 0;                         /* セクション全体をカバー */
  background: url("images/strength-wide.jpg") center/cover no-repeat;
  z-index: 0;
}
#strengths.strengths-full-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.30);      /* 可読性のための薄い暗幕 */
  z-index: 0;
}
#strengths.strengths-full-bg .container{
  position: relative;               /* 背景の上に内容を載せる */
  z-index: 1;
}

/* 見出しを白字に（既存 .section-title の装飾を活かす） */
.section-title.light{ color:#fff; }
.section-title.light::after{ background:#fff; }/* ===== Area two-column layout ===== */
.area-grid{
  display:grid;
  gap:2rem;
  align-items:center;
  grid-template-columns: 1.1fr 1fr;   /* 左やや広め */
}
.area-left .area-list{
  margin: .5rem 0 0;
  padding-left: 1.2rem;
  color:#444;
  line-height:1.8;
}
.area-right img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  background:#fff;
}

/* Mobile */
@media (max-width: 768px){
  .area-grid{ grid-template-columns:1fr; }
  .area-right{ order:-1; }      /* モバイルで画像を先頭に */
  .area-right img{ border-radius:8px; }
}