* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
  
  body {
    margin: 0; 
    color: #222;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; 
  }
  body{
    color: #222;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  
    font-weight: 500; 
  }
  
  a {
    color: inherit; 
    text-decoration: none; 
  }

  .container {
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
  }
  
  .site-header__top {
    background: #f5f5f5; 
  }
  
  .site-header__note {
    margin: 0; 
    padding: 10px 0; 
    font-size: 13px; 
    color: #666; 
  }
  
  .site-header__middle {
    background: #fff; 
  }
  
  .site-header__middle-inner {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 16px 0; 
  }

  .site-header__logo img {
    height: 44px;
    width: auto; 
  }
  
  .site-header__contact {
    display: flex; 
    align-items: center; 
    gap: 16px; 
  }
  

  .btn-contact {
    display: inline-block; 
    padding: 10px 16px; 
    background: #d9d9d9; 
    border-radius: 2px; 
    font-weight: 600; 
  }
  
  
  .tel__number {
    margin: 0; 
    font-size: 28px; 
    font-weight: 700;
    color: #1d66b3;
    line-height: 1;
  }
  
  .tel__time {
    margin: 4px 0 0; 
    font-size: 12px;
    color: #777;
  }
  

  .site-nav {
    background: #f5f5f5;
  }
  
  .site-nav__list {
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: flex; 
    justify-content: flex-end; 
    gap: 0; 
  }
  
  .site-nav__item a {
    display: block; 
    padding: 14px 18px; 
    font-weight: 600; 
    color: #444; 
    border-left: 1px solid #ddd; 
  }
  
  .site-nav__item:last-child a {
    border-right: 1px solid #ddd; 
  }
  
  /* ===== FV===== */
  .hero {
    min-height: 520px; 
    background-image: url("../img/hero.jpg"); 
    background-size: cover;
    background-position: center;
    position: relative; 
  }
  
  .hero::before {
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.15); 
  }
  
  .hero__inner {
    position: relative; 
    max-width: 1100px;
    margin: 0 auto; 
    padding: 160px 20px 0; 
  }
  
  .hero__title {
    margin: 0; 
    color: #fff; 
    font-size: 44px;
    font-weight: 700; 
    line-height: 1.6; 
  }

.section {
  padding: 80px 0;
}

.section-title {
  margin: 0;
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  color: #1d66b3;
  letter-spacing: 0.04em;
}

.section-lead {
  margin: 28px 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 2.2;
  color: #333;
}

.photo-strip__grid {
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 0; 
}

.photo-strip__img {
  width: 100%; 
  height: 220px; 
  object-fit: cover; 
  display: block; 
}

/* ===== About ===== */
.about {
  padding: 90px 0;
  background: #fff;
}

.about__eyebrow {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #111;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 6px;
}

.about__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #1d66b3;
}

.about__title {
  margin: 18px 0 0;
  text-align: center;
  font-size: 44px;
  font-weight: 800;
  color: #1d66b3;
  letter-spacing: 0.04em;
}

.about-item {
  margin-top: 60px;
  display: grid; 
  grid-template-columns: 1fr 520px; 
  gap: 60px;
  align-items: center;
}


.about-item--reverse {
  grid-template-columns: 520px 1fr;
}


.about-item__content {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 24px;
  align-items: start;
}


.about-item--reverse .about-item__content {
  order: 2;
}
.about-item--reverse .about-item__media {
  order: 1;
}

.about-badge {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 6px solid #cfe0f3;

  display: flex;            
  flex-direction: column;   
  align-items: center;    
  justify-content: center;   
  gap: 6px;                

  text-align: center;
}

.about-badge__label {
  font-size: 13px;
  font-weight: 700;
  color: #1d66b3;
  line-height: 1;
}

.about-badge__num {
  margin: 0;              
  font-size: 30px;
  font-weight: 800;
  color: #777;
  line-height: 1;
}

.about-copy__title {
  margin: 6px 0 0;
  font-size: 28px;
  line-height: 1.6;
  font-weight: 800;
  color: #1d66b3;
}

.about-copy__accent {
  color: #f28c28;
}

.about-copy__text {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 2.2;
  color: #222;
}

.about-item__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}


.about-sep {
  margin: 48px auto 0;
  width: 92px;
  height: 2px;
  background-image: linear-gradient(to right, #1d66b3 50%, rgba(0,0,0,0) 0%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

.about-cta {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.about-cta__btn {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 22px;
  border: 2px solid #1d66b3;
  border-radius: 999px;
  color: #1d66b3;
  font-weight: 800;
}

.about-cta__icon {
  font-size: 18px;
}

.about-copy {
  min-width: 0;
}
@media (max-width: 768px) {


  .site-nav__list {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .site-nav__item a {
    border-left: none;
    border-right: none;
  }

  .hero__inner {
    padding-top: 120px;
  }

  .hero__title {
    font-size: 30px;
    line-height: 1.5;
  }

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

  .photo-strip__img {
    height: 160px;
  }
}

.service {
  padding: 90px 0;
  background: #f6f6f6; 
}

.service__head {
  text-align: center;
  margin-bottom: 44px;
}

.service__eyebrow {
  margin: 0;
  display: inline-block;
  font-weight: 700;
  color: #111;
  border-bottom: 2px solid #1d66b3;
  padding-bottom: 6px;
}

.service__title {
  margin: 16px 0 0;
  font-size: 44px;
  font-weight: 800;
  color: #1d66b3;
  letter-spacing: 0.04em;
}

.service__lead {
  margin: 22px 0 0;
  color: #333;
  line-height: 2.1;
  font-size: 16px;
}

.service-grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; 
}

.service-card {
  position: relative; 
  display: block;
  overflow: hidden; 
}

.service-card__img {
  width: 100%;
  height: 260px;       
  object-fit: cover;  
  display: block;
}

.service-card__label{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 90px;            
  display: flex;             
  align-items: center;     
  justify-content: center;  

  padding: 0 12px;      
  text-align: center;
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  font-size: 20px;

  background: rgba(29, 102, 179, 0.85);
}
/* ボタンが置かれている帯（背景を白にする） */
.service-cta{
  margin-top: 50px;

  background: #fff;                
  padding: 80px 0;              
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: flex;
  justify-content: center;
}

.service-cta__btn{
  width: min(520px, 92%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 18px 22px;
  border: 2px solid #1d66b3;
  border-radius: 999px;
  color: #1d66b3;
  font-weight: 800;
  background: #fff;
}

.service-cta__icon {
  font-size: 18px;
}
/* =========================
  Service
========================= */
@media (max-width: 520px){
  .service-grid{
    grid-template-columns: 1fr; 
  }

  .service-card__img{
    height: 220px;
  }

  .service-card__label{
    height: 80px;
    font-size: 18px;
  }
}

.split-cta__inner{
  max-width: 520px;
  margin: 0 auto;
}

.split-cta {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  min-height: 420px;
}


.split-cta__content {
  background: #0b56a0; 
  color: #fff; 

  padding: 70px 60px; 
  display: flex; 
  flex-direction: column;
  justify-content: center; 
  gap: 22px; 
}


.split-cta__title {
  margin: 0; 
  font-size: 34px; 
  font-weight: 800; 
  line-height: 1.55; 
  letter-spacing: 0.02em; 
}


.split-cta__line{
  display: block;
  width: 90px;        
  height: 2px;       
  background: #fff;    
  margin: 18px 0 22px;  
}


.split-cta__text {
  margin: 0; 
  font-size: 16px; 
  line-height: 2.0;
  font-weight: 700; 
  opacity: 0.95; 
}

.split-cta__btn {
  margin-top: 8px; 
  width: fit-content; 
  display: inline-flex; 
  align-items: center; 
  gap: 14px; 

  padding: 5px 30px; 
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px; 
  color: #fff; 
  font-weight: 800; 
}

.split-cta__media {
  position: relative; 
  overflow: hidden; 
}

.split-cta__img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}
/* split-ctaの矢印だけ：円（枠＋丸）を消して、矢印は残す */
.split-cta__btnIcon{
  width: auto;         
  height: auto;     
  border: 0;     
  border-radius: 0;     
  display: inline; 
  place-items: unset;      /* grid用の指定を解除 */
}


@media (max-width: 900px) {
  .split-cta {
    grid-template-columns: 1fr; 
    min-height: auto; 
  }

  .split-cta__content {
    padding: 34px 22px; 
  }

  .split-cta__title {
    font-size: 26px;
  }

  .split-cta__text {
    font-size: 14px; 
  }

  .split-cta__media {
    height: 260px; 
  }

  .split-cta__btn {
    width: 100%;
    justify-content: center; 
  }
}

.news{
  padding: 110px 0; 
  background: #fff; 
}

.news__head{
  text-align: center; 
}

.news__en{
  margin: 0 0 12px;
  display: inline-block; 
  font-weight: 700; 
  position: relative; 
  padding-bottom: 8px; 
}

.news__en::after{
  content: ""; 
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; 
  background: #1d66b3; 
}

.news__title{
  margin: 0;
  font-size: 44px; 
  font-weight: 800; 
  color: #1d66b3; 
  letter-spacing: 0.04em; 
}

/* 郢昜ｹ斟礼ｹ晢ｽｼ郢ｧ�ｽｹ1髯ｦ繝ｻ*/
.news__list{
  margin: 70px auto 0; 
  padding: 0;
  list-style: none; 
  max-width: 820px;
}

.news-item{
  display: flex;
  align-items: center; 
  gap: 22px; 
  justify-content: flex-start; 
}

.news-item__date{
  font-size: 16px;
  color: #111;
  white-space: nowrap; 
}

.news-item__tag{
  display: inline-flex; 
  align-items: center;
  justify-content: center; 
  height: 28px; 
  padding: 0 14px; 
  background: #1d66b3; 
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.news-item__link{
  color: #111;
  font-size: 16px;
  text-decoration: none; 
  line-height: 1.8; 
}

.news__cta{
  margin-top: 70px; 
  display: flex; 
  justify-content: center; 
}

.news__btn{
  width: min(520px, 100%);
  display: flex;
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  padding: 18px 22px; 
  border: 2px solid #1d66b3; 
  border-radius: 999px; 
  color: #1d66b3; 
  font-weight: 800;
  background: #fff; 
  text-decoration: none;
}

.news__btnIcon{
  font-size: 18px; 
}

/* ===== News===== */
@media (max-width: 768px){
  .news{
    padding: 70px 0;
  }

  .news__title{
    font-size: 30px;
  }

  .news__list{
    margin-top: 40px;
    max-width: 100%;
  }

  .news-item{
    flex-wrap: wrap; 
    gap: 12px 16px; 
  }

  .news-item__link{
    width: 100%;
  }

  .news__cta{
    margin-top: 45px;
  }
}

.cta-consult{
  background: #0b57a4;      
  padding: 65px 0;       
}

.cta-consult__inner{
  text-align: center;  
  color: #fff;     
  display: flex;     
  flex-direction: column; 
  align-items: center; 
}


.cta-consult__title{
  margin: 0;         
  font-size: 36px;    
  font-weight: 800;     
  letter-spacing: 0.04em;  
}

.cta-consult__text{
  margin: 30px 0 0;        
  font-size: 16px;       
  line-height: 2.1;      
  font-weight: 600;      
  opacity: 0.95;     
  padding-bottom: 24px; 
}
/* CTAだけ：矢印は残す / 円（枠・丸み・背景）は完全に無効化 */
.cta-consult .cta-consult__btn .btn-pill__icon,
.cta-consult .cta-consult__btn:hover .btn-pill__icon{
  border: 0;
  border-radius: 0;
  background: transparent;
  width: auto;
  height: auto;
  padding: 0;
  display: inline;
}

/* ===== btn-pill（共通） ===== */
.btn-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: min(520px, 100%);
  padding: 18px 22px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 800;

  background: #fff;
  color: #1d66b3;
  border: 2px solid #1d66b3;

  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-pill__icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid currentColor; /* ← これ、めちゃ良い */
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  transition: background-color .25s ease, color .25s ease, border-color .25s ease; /* ← アイコンも滑らかに */
}

.btn-pill__text{
  display: block;
  text-align: center;
}

/* 共通 hover */
.btn-pill:hover{
  background: #1d66b3;
  color: #fff;
  border-color: #1d66b3;
}

.btn-pill:hover .btn-pill__icon{
  background: #fff;
  color: #1d66b3;
  border-color: #fff;
}

.btn-pill--primary{
  background: #1d66b3;
  color: #fff;
  border: 2px solid rgba(255,255,255,.7);
}

.btn-pill--primary:hover{
  background: #fff;
  color: #1d66b3;
  border-color: #1d66b3;
}

.btn-pill--primary:hover .btn-pill__icon{
  background: #fff;      
  color: #1d66b3;        
  border-color: #1d66b3;
}

/* ===== 採用・協力業者募集（recruit-banners） ===== */
.recruit-banners{
  padding: 100px 0;           
  background: #fff;         
}

.recruit-banners__grid{
  display: flex;             
  gap: 40px;                  
  justify-content: center;     
}

.recruit-banners__card{
  position: relative;        
  display: block;             
  width: 100%;
  max-width: 560px;           
  overflow: hidden;
  text-decoration: none;   
  background: #eee; 
}

.recruit-banners__img{
  width: 100%;       
  height: 240px;      
  object-fit: cover;  
  display: block; 
  transform: scale(1);
  transition: transform .35s;
}

.recruit-banners__panel{
  position: absolute;           
  left: 50%;                 
  top: 50%;                  
  transform: translate(-50%,-50%); 

  width: min(420px, 80%);      
  padding: 26px 34px;          
  background: rgba(255,255,255,.85); 
  border-radius: 6px;         
  display: flex;             
  align-items: center;        
  gap: 18px;                    
  box-shadow: 0 10px 24px rgba(0,0,0,.08); 
}

.recruit-banners__icon{
  width: 44px;                 
  height: 44px;              
  border-radius: 999px;        
  background: #0b4d8c;      
  color: #fff;                
  display: inline-flex;         
  align-items: center;       
  justify-content: center;   
  font-size: 18px;       
  line-height: 1;            
}

.recruit-banners__label{
  font-size: 20px;       
  font-weight: 700;         
  color: #111;            
  letter-spacing: .04em;   
}

/* ホバー（hover：ホバー）で画像を少しズーム（PCのみ） */
.recruit-banners__card:hover .recruit-banners__img{
  transform: scale(1.04);
}
/* ===== フッター ===== */
.site-footer {
  background: #f1f1f1;
}

/* 上段の中身 */
.site-footer__inner {
  padding: 90px 0; 
  display: flex; 
  gap: 60px; 
  align-items: flex-start; 
}

/* 左カラム */
.site-footer__left {
  width: 44%;
}

.site-footer__catch {
  margin: 0 0 14px;
  font-size: 14px;
  color: #666;
  letter-spacing: 0.02em; 
}

.site-footer__brand {
  margin: 0 0 14px;
}

.site-footer__logo {
  width: 220px; /* ロゴサイズ */
  height: auto;
  display: block;
}

.site-footer__addr {
  margin: 0 0 14px;
  color: #111;
  line-height: 1.8;
  font-size: 14px;
}

.site-footer__tel {
  margin: 0;
  color: #1d66b3;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.site-footer__tel-label {
  font-size: 18px;
  margin-right: 8px;
}

.site-footer__tel-link {
  color: inherit;
  text-decoration: none;
}

/* 右ナビ（3列） */
.site-footer__nav {
  width: 56%;
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 28px 40px; 
}

/* 1列 */
.site-footer__col {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 18px;
}

/* 親リンク（丸い矢印付き） */
.site-footer__link {
  position: relative;
  padding-left: 34px; 
  color: #111;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.6;
  white-space: nowrap;
}

/* 丸矢印（疑似要素） */
.site-footer__link::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0.1em;

  width: 24px;
  height: 24px;
  border-radius: 50%; 
  background: #0b5aa7; 
  color: #fff;

  display: grid;
  place-items: center; 
  font-size: 14px;
}

/* 子リンク（会社案内配下：アイコンなし/インデント） */
.site-footer__link.is-child {
  padding-left: 0; 
  font-weight: 600;
}

.site-footer__link.is-child::before {
  content: none; 
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* 下段（コピーライトの帯） */
.site-footer__bottom {
  background: #0b5aa7;
  padding: 16px 0;
}

.site-footer__copy {
  color: #fff;
  font-size: 14px;
}

/* 右下TOPボタン */
.to-top {
  position: fixed; 
  right: 24px;
  bottom: 24px;

  width: 86px;
  height: 86px;

  background: #0b5aa7;
  color: #fff;
  text-decoration: none;

  display: grid;
  place-items: center; 
  border-radius: 6px; 
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  z-index: 50; 
}

.to-top__arrow {
  font-size: 22px;
  line-height: 1;
  margin-top: 6px;
}

.to-top__text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* ===== レスポンシブ（responsive：レスポンシブ） ===== */
@media (max-width: 900px){
  .recruit-banners__grid{
    flex-direction: column;  
    align-items: center;      
  }

  .recruit-banners__img{
    height: 220px;             
  }
}

@media (max-width: 768px){
  .cta-consult{
    padding: 80px 0;
  }

  .cta-consult__title{
    font-size: 26px;
  }

  .cta-consult__text{
    font-size: 14px;
    line-height: 2.0;
  }

  .btn-pill{
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 28px;
  }
  .section-lead {
    font-size: 15px;
    line-height: 2.0;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .about {
    padding: 60px 0;
  }

  .about__title {
    font-size: 30px;
  }

  .about-item {
    grid-template-columns: 1fr; 
    gap: 18px;
  }

  .about-item--reverse {
    grid-template-columns: 1fr;
  }

  .about-item--reverse .about-item__content,
  .about-item--reverse .about-item__media {
    order: initial;
  }

  .about-item__content {
    grid-template-columns: 90px 1fr;
    column-gap: 14px;
  }

  .about-badge {
    width: 78px;
    height: 78px;
    border-width: 5px;
  }

  .about-badge__num {
    font-size: 24px;
  }

  .about-copy__title {
    font-size: 20px;
  }

  .about-copy__text {
    font-size: 14px;
    line-height: 1.9;
  }

  .about-item__img {
    height: 220px;
  }
}

@media (max-width: 768px) {

  .site-header__middle-inner {
    flex-direction: column; 
    align-items: flex-start; 
    gap: 12px;
  }

  .site-header__contact {
    flex-direction: column; 
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .service {
    padding: 60px 0;
  }

  .service__title {
    font-size: 30px;
  }

  .service__lead {
    font-size: 14px;
    line-height: 2.0;
    padding: 0 10px;
  }
}
/* ===== Footer：レスポンシブ（れすぽんしぶ） ===== */
@media (max-width: 900px){
  /* 左右2カラム → 縦並び */
  .site-footer__inner{
    flex-direction: column;
    gap: 32px;
    padding: 80px 0;
  }

  .site-footer__left,
  .site-footer__nav{
    width: 100%;
  }

  /* 3列 → 2列（タブレット想定） */
  .site-footer__nav{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 26px;
  }
}

@media (max-width: 520px){
  /* 2列 → 1列（スマホ） */
  .site-footer__nav{
    grid-template-columns: 1fr;
  }

  .site-footer__logo{
    width: 180px;
  }

  .site-footer__tel{
    font-size: 22px;
  }

  /* リンクの矢印と文字のバランス調整 */
  .site-footer__link{
    padding-left: 30px;
  }
  .site-footer__link::before{
    width: 22px;
    height: 22px;
    font-size: 13px;
  }

  /* TOPボタンが邪魔なら少し小さく */
  .to-top{
    width: 70px;
    height: 70px;
    right: 14px;
    bottom: 14px;
  }
  .to-top__text{
    font-size: 12px;
  }
}

/* FV 共通 */
.page-hero{
  position: relative;
  height: 390px;      
  overflow: hidden;
  display: grid;
  place-items: center;   
}


.page-hero__bg{
  position: absolute;
  inset: 0;
  background: #0b56a0;        
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;                
}

/* 中身を前へ */
.page-hero__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  place-items: center;
}

  .page-hero__titlebox{
    width: min(720px, 90%);  
    padding: 26px 24px;     
    background: rgba(255,255,255,0.85);
    border-radius: 6px;   
    text-align: center;     
  }
  
.page-hero__title{
  margin: 0;
  font-size: 32px;
  font-weight: 800;
}
/* maintenance（メンテナンス）ページのhero背景 */
.page-hero--maintenance .page-hero__bg{
  background-image: url("../img/hero-maintenance.jpeg");
}


/* 工事事業ページ背景画像 */
.page-hero--construction .page-hero__bg{
  background-image: url("../img/hero-construction.jpeg");
}

/* 会社案内ページ背景画像 */
.page-hero--company .page-hero__bg{
  background-image: url("../img/AdobeStock_202457959_Preview.jpeg");
}

/* お問い合わせページ背景画像 */
.page-hero--contact .page-hero__bg{
  background-image: url("../img/AdobeStock_292792422_Preview.jpeg");
}

/* ===== メッセージセクション（共通） ===== */
.page-message{
  padding: 90px 0 60px;
  background: #fff;
}

.page-message__inner{
  text-align: center;
}

.page-message__lead{
  margin: 0;
  font-size: 18px;
  line-height: 2.2;
  color: #222;
}

.page-message__accent{
  margin: 44px 0 0;
  font-size: 18px;
  line-height: 2.0;
  color: #0b56a0;
  font-weight: 700;
}

/* ボタン（枠だけ） */
.btn-outline{
  margin: 34px auto 0;
  width: min(520px, 92%);
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  border: 2px solid #0b56a0;
  border-radius: 999px;
  color: #0b56a0;
  background: transparent;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn-outline__icon{
  width: auto;
  height: auto;
  display: inline;
  border: none;
  border-radius: 0;
  padding: 0;
  font-weight: 800;
  line-height: 1;
}

.btn-outline:hover{
  opacity: 0.85;
}

/* 下の細い線 */
.page-message__line{
  width: min(720px, 86%);
  height: 1px;
  background: #e6e6e6;
  margin: 62px auto 0;
}

/* ===== サービス詳細（service-detail） ===== */
.service-detail{
  padding: 70px 0 90px;
  background: #fff;
}

.service-detail__head{
  text-align: center;
}

.service-detail__icon{
  width: 68px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.service-detail__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #0b56a0;
  letter-spacing: 0.02em;
}

.service-detail__line{
  display: block;
  width: 78px;
  height: 2px;
  background: #0b56a0;
  margin: 16px auto 0;
}

.service-detail__text{
  margin-top: 34px;
  text-align: center;
  color: #222;
  line-height: 2.2;
}

.service-detail__text p{
  margin: 0;
}

.service-detail__text p + p{
  margin-top: 10px;
}

.service-detail__photos{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.service-detail__photo{
  margin: 0;
  text-align: center;
}

.service-detail__photo img{
  width: 100%;
  height: auto;
  display: block;
}

.service-detail__photo figcaption{
  margin-top: 14px;
  font-size: 16px;
  color: #333;
}

/* SP（スマホ） */
@media (max-width: 768px){
  .service-detail{
    padding: 50px 0 70px;
  }

  .service-detail__title{
    font-size: 26px;
  }

  .service-detail__photos{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* =========================
   工事ページ：service-block（共通）
========================= */
.service-block{
  padding: 90px 0;
  background: #fff;
  text-align: center;
}

.service-block__inner{
  text-align: center;
}

/* アイコン：全セクション統一（img直置き想定） */
.service-block__icon{
  width: 70px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

/* 見出し */
.service-block__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #0b56a0;
  letter-spacing: 0.02em;
}

.service-block__line{
  display: block;
  width: 72px;
  height: 3px;
  background: #0b56a0;
  margin: 14px auto 28px;
}

/* 本文（text） */
.service-block__text{
  margin: 0 auto 48px;
  width: min(780px, 92%);
  color: #222;
  font-size: 16px;
  line-height: 2.2;
  font-weight: 500;
}

/* 本文を p で統一した時の段落間隔 */
.service-block__text p{
  margin: 0;
}
.service-block__text p + p{
  margin-top: 10px;
}

/* 写真2枚：photos版（外壁・蓄電池・内装など） */
.service-block__photos{
  width: min(980px, 96%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.service-block__photo{
  margin: 0;
  text-align: center;
}

.service-block__photo img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-block__photo figcaption{
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

/* 写真2枚：gallery版（オール電化・水回り） */
.service-block__gallery{
  width: min(920px, 96%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.service-block__figure{
  margin: 0;
  text-align: center;
}

.service-block__figure img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-block__cap{
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  text-align: center;
}

/* SP（スマホ） */
@media (max-width: 768px){
  .service-block{
    padding: 70px 0;
  }

  .service-block__title{
    font-size: 26px;
  }

  .service-block__text{
    font-size: 15px;
    line-height: 2.2;
    margin-bottom: 36px;
  }

  .service-block__photos,
  .service-block__gallery{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.service-block__icon--wide{
  width: 120px; 
  height: auto; 
}
/* ===== maintenance lead（リード） ===== */
.maint-lead{
  padding: 80px 0 70px; /* 上下の余白（よはく） */
  background: #fff; /* 背景（はいけい） */
  text-align: center; /* 中央寄せ */
  border-bottom: 2px solid #0b56a0; 
}

/* 中身の幅（はば）を整える */
.maint-lead__inner{
  max-width: 980px; /* 最大横幅（さいだいよこはば） */
}

/* 1段目の説明文 */
.maint-lead__text{
  margin: 0 0 34px; /* 下だけ余白 */
  font-size: 18px; /* 文字サイズ */
  line-height: 2.2; /* 行間（ぎょうかん） */
  font-weight: 600; /* 少し太く */
  color: #222; /* 文字色 */
}

/* 青い案内文（2段目） */
.maint-lead__note{
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2.2;
  font-weight: 700;
  color: #0b56a0;
}

/* ボタンを中央に置くための箱 */
.maint-lead__actions{
  display: flex; /* 横並び（よこならび）にできる箱 */
  justify-content: center; 
}

/* ===== まるい枠ボタン（見本の形） ===== */
.btn-outline{
  display: inline-flex; 
  align-items: center; 
  gap: 14px; 
  padding: 16px 44px;
  border: 2px solid #0b56a0;
  border-radius: 999px; 
  color: #0b56a0; 
  font-weight: 700; 
  letter-spacing: 0.04em; 
  text-decoration: none; 
  transition: transform .2s ease, background-color .2s ease, color .2s ease; 
}

/* 左の矢印アイコン */
.btn-outline__icon{
  display: grid; 
  place-items: center; 
  width: 28px; 
  height: 28px; 
  font-size: 18px; 
  line-height: 1;
}


/* ===== スマホ（SP）調整 ===== */
@media (max-width: 600px){
  .maint-lead__text{
    font-size: 16px;
    line-height: 2.1;
  }

  .maint-lead__note{
    font-size: 15px;
    line-height: 2.1;
  }

  .btn-outline{
    padding: 14px 26px;
    gap: 12px;
  }
}

/* ===== メンテナンス導入（maint-intro） ===== */
.maint-intro{
  padding: 90px 16px 80px; /* padding（パディング：内側余白） */
  background: #fff;        /* background（バックグラウンド：背景） */
}

.maint-intro__inner{
  max-width: 900px;  /* max-width（マックス幅：最大横幅） */
  margin: 0 auto;    /* margin（マージン：外側余白） 0 auto = 中央寄せ */
  text-align: center;/* text-align（テキスト整列） center = 中央 */
}

.maint-intro__icon{
  width: 72px;        /* width（ウィズ：横幅） */
  margin: 0 auto 22px;/* 下に余白 */
}

.maint-intro__icon svg{
  display: block; /* display（ディスプレイ：表示形式） block = 余白崩れ防止 */
  width: 100%;
  height: auto;   /* auto（オート：自動） 縦横比を保つ */
}

.maint-intro__icon-stroke{
  fill: none;                /* fill（フィル：塗り） none = 塗りなし */
  stroke: #0b56a0;           /* stroke（ストローク：線の色） */
  stroke-width: 2.4;         /* stroke-width（線の太さ） */
  stroke-linecap: round;     /* linecap（線の端） round = 丸 */
  stroke-linejoin: round;    /* linejoin（線の角） round = 丸 */
}

.maint-intro__title{
  margin: 0;              
  color: #0b56a0;        
  font-size: 34px;        
  font-weight: 800;       
  letter-spacing: 0.02em;  
  line-height: 1.5;         
}

.maint-intro__text{
  margin: 0;
  color: #222;
  font-size: 16px;
  line-height: 2.2;
}

/* ===== SP調整（スマホ） ===== */
@media (max-width: 600px){
  .maint-intro{
    padding: 64px 16px 56px;
  }

  .maint-intro__title{
    font-size: 24px;
  }

  .maint-intro__icon{
    width: 60px;
    margin-bottom: 16px;
  }

  .maint-intro__line{
    width: 64px;
    margin: 14px auto 18px;
  }

  .maint-intro__text{
    font-size: 14px;
    line-height: 2.0;
  }
}

.maint-intro__line{
  width: 72px;         
  height: 3px;        
  background: #0b56a0;   
  margin: 18px auto 26px; 
  border-radius: 999px;  
}

/* ===== 点検項目セクション（maint-item） ===== */
.maint-item{
  padding: 90px 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
}

/* ===== 見出し（head）===== */
.maint-item__head{
  margin: 0 auto 34px;   /* ← auto を入れて中央寄せ */
  max-width: 900px;      /* ← bodyと同じ幅にする（値は調整OK） */
  text-align: left;
}

.maint-item__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #222;
  letter-spacing: 0.02em;
}

.maint-item__line{
  width: 86px;
  height: 3px;
  background: #0b56a0;
  margin: 14px 0 0;       /* 左寄せ */
  border-radius: 999px;
}

/* ===== 2カラム本体 ===== */
.maint-item__body{
  display: grid;
  grid-template-columns:  320px 1fr;
  column-gap: 12px;   /* 横（カラム間）だけ狭く */
  row-gap: 20px;      /* 縦の間隔はそのまま */
  align-items: start;

  max-width: 900px;
  margin: 0 auto;
}

/* 左：画像（写真は左寄せ） */
.maint-item__media{
  margin: 0;
  /* flex + justify-content:center を使わない（中央寄せになるため） */
}

.maint-item__img{
  width: 100%;
  max-width: 290px;
  height: auto;
  display: block;
  margin: 0;                           /* 左固定 */
}

/* 右：文章（左寄せ） */
.maint-item__content{
  text-align: left;
}

.maint-item__lead{
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.55;
  color: #222;
}

.maint-item__text{
  margin: 0;
  font-size: 15px;
  line-height: 2.2;
  color: #222;
}

/* ===== スマホ（SP） ===== */
@media (max-width: 800px){
  .maint-item__head,
  .maint-item__body{
    max-width: none; /* none（ノン）＝上限なし */
    margin: 0;       /* 余白リセット */
  }

  .maint-item{
    padding: 64px 0;
  }

  .maint-item__title{
    font-size: 26px;
  }

  .maint-item__body{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .maint-item__lead{
    font-size: 18px;
  }
}

/* ====その他のメンテサービス（mant-other) === */
.maint-other{
  padding: 90px 0;
  border-top: 1px solid #e6e6e6;
  background: #fff;
}

.maint-other__head{
  text-align: center;
  margin-bottom: 46px;
}

.maint-other__icon{
    display: block;
    width: 80px;
    height: auto;
    margin: 0 auto 20px;
  }

.maint-other__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #0b56a0;
  letter-spacing: 0.02em;
}

.maint-other__line{
  width: 92px;
  height:3px;
  background: #0b56a0;
  border-radius: 999px;
  margin: 18px auto 0;
}

.maint-other__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

/* ===カード（service-card) ===（service-card) === */
.service-card{
  border: 2px solid #0b56a0;
  background: #fff; 
  padding: 36px 34px 34px;           
}

.service-card__title{
  margin: 0;            
  text-align: center;           
  color: #0b56a0;               
  font-size: 24px;            
  font-weight: 800;     
  letter-spacing: 0.02em;     
  margin-bottom: 22px;       
}

/* 画像 */
.service-card__media{
  margin: 0;                  
}

.service-card__img{
  width: 100%;            
  height: auto;         
  display: block;        
  margin: 0 auto 18px;           
  max-width: 520px;          
}

/* 太字の短い文章 */
.service-card__catch{
  margin: 0 0 12px;            
  font-weight: 800;        
  font-size: 18px;          
  color: #0b56a0;           
}

/* 本文 */
.service-card__text{
  margin: 0;                   
  color: #222;                
  font-size: 15px;             
  line-height: 2.1;         
}

/* ===== スマホ（SP） ===== */
@media(max-width: 800px){
  .maint-other{
    padding: 64px 0;
  }

  .maint-other__title{
    font-size: 26px;
  }

  .maint-other__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .service-card{
    padding: 28px 22px 24px;
  }

  .service-card__title{
    font-size: 20px;
  }
}
/* ===== メンテナンス費用 ===== */
.maint-cost{
  padding: 90px 0;
  border-top: 1px solid #e6e6e6;
  background: #fff;
}

/* 見出し */
.maint-cost__head{
  text-align: center;
  margin-bottom: 46px;
}

/* アイコン */
.maint-cost__icon{
  width: 64px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

/* タイトル */
.maint-cost__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #0b56a0;
}

/* 青い線 */
.maint-cost__line{
  width: 92px;
  height: 3px;
  background: #0b56a0;
  border-radius: 999px;
  margin: 18px auto 20px;
}

/* 説明文（←ここを中央寄せ） */
.maint-cost__lead{
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #222;
  text-align: center;
}

/* ===== 表全体 ===== */
.maint-cost__table-wrap{
  margin-top: 40px;
}

.maint-cost__table{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 3px solid #0b56a0;
}

.maint-cost__table th{
  background: #e9eef5;
  color: #0b56a0;
  font-weight: 800;
  font-size: 18px;
  padding: 18px;
  border: 1px solid #0b56a0;
}

.maint-cost__table td{
  padding: 18px;
  font-size: 16px;
  border: 1px solid #0b56a0;
}

/* 左の「種類」列（tbodyの1列目）を全部、見出しと同じ背景にする */
.maint-cost__table tbody td:first-child{
  background: #e9eef5;
}

/* ===== 注意書き ===== */
.maint-cost__notes{
  margin-top: 24px;

  max-width: 980px;
  margin: 0 auto;
}

.maint-cost__notes p{
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.8;
  color: #444;
}

/* ===== スマホ ===== */
@media (max-width: 800px){
  .maint-cost{
    padding: 64px 0;
  }

  .maint-cost__title{
    font-size: 26px;
  }

  .maint-cost__table th,
  .maint-cost__table td{
    font-size: 14px;
    padding: 12px;
  }
}
/* ===== company-lead ===== */
.company-lead{
  padding: 80px 80px;
}

.company-lead-title{
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #1d66b3;
  letter-spacing: 0.04em;
}

.company-lead-text{
  margin: 28px 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.03em;
}

/* =========================
  会社案内：資格・施工ID一覧
========================= */
.company-cred{
  position: relative;
  padding: 90px 0;
  overflow: hidden;
}

.company-cred__bg{
  position: absolute;
  inset: 0;
  background-image: url("../img/maintenance_service_1.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: 0.95;
  z-index: 0;
}

.company-cred__inner{
  position: relative;
  z-index: 1;
}
/* 共通：白いカード（2つの囲い） */
.company-card{
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 60px 30px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
  max-width: 980px;
  margin: 0 auto;
}

/* 2つのカードの間隔 */
.company-card + .company-card{
  margin-top: 70px;
}

.company-card__title{
  margin: 0;
  text-align: center;
  font-size: 43px;
  font-weight: 700;
  color: #2a2a2a;
  letter-spacing: 0.04em;
}
/* リード文 */
.company-card__lead{
  margin: 22px 0 0;
  text-align: center;
  font-size: 18px;
  line-height: 2.2;
  color: #444;
}
/* ===== 有資格者一覧 ===== */
.license-grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(20, 80, 150, 0.18);
}
/* 資格セル */
.license-grid__item{
  padding: 22px 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #1f2a33;
  border-top: 1px solid rgba(20, 80, 150, 0.18);
  border-right: 1px solid rgba(20, 80, 150, 0.18);
  background: rgba(200, 225, 245, 0.35);
}
/* 左右の交互色（ストライプ） */
.license-grid__item:nth-child(4n+1),
.license-grid__item:nth-child(4n+2){
  background: rgba(200, 225, 245, 0.55);
}

/* 1行目は上線が不要 */
.license-grid__item:nth-child(-n+2){
  border-top: none;
  /* 最初の2個（1行目）だけ上線を消す */
}

/* 右列のセルは右線を消す */
.license-grid__item:nth-child(2n){
  border-right: none;
  /* 2,4,6…（右側列）は右線不要 */
}
/* ===== 取引メーカー施工ID一覧（ロゴ並び） ===== */
.logo-grid{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 34px 36px;
  align-items: center;
  justify-items: center;
  padding-top: 28px;
}
/* ロゴ画像 */
.logo-grid__img{
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width: 768px){
  .company-card{
    padding: 46px 18px;
    /* スマホは内側余白を少し減らす */
  }

  .company-card__title{
    font-size: 30px;
    /* 見出しを小さく */
  }

  .company-card__lead{
    font-size: 16px;
    /* 本文を小さく */
  }

  .license-grid__item{
    font-size: 16px;
    padding: 18px 12px;
  }

  .logo-grid{
    grid-template-columns: repeat(2, 1fr);
    /* スマホは2列にする */
    gap: 24px 18px;
  }

  .logo-grid__img{
    width: 170px;
  }
}
/* === 会社概要（outline) === */
.outline{
  padding: 90px 0;
}

.outline__en{
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight:800;
  color: #444;
  position: relative;
}

.outline__en::after{
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 10px auto 0;
  background: #1d66b3;
}

.outline__title{
  margin: 18px 0 0;
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  color: #1d66b3;
  letter-spacing: 0.04em;
}

.outline__table-wrap{
  margin-top: 46px;
}
/* 表本体 */
.outline__table{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #1d66b3;
}

.outline__table th,
.outline__table td{
  border: 2px solid #1d66b3;
  padding: 26px 28px;
  font-size: 18px;
  line-height: 1.9;
}

/* 左列（見出し側） */
.outline__table th{
  width: 190px;
  background: #dfeaf7;
  font-weight: 700px;
  text-align: left;
  vertical-align: middle;
}
/* 事業内容のリスト */
.outline__list{
  margin: 0;
  padding-left: 1.2em;
  /* 左の点（・）のための余白 */
}

.outline__list li{
  margin: 6px 0;
  /* 行間の微調整 */
}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width: 768px){
  .outline__title{
    font-size: 32px;
  }

  .outline__table th,
  .outline__table td{
    padding: 18px 16px;
    font-size: 16px;
  }

  .outline__table th{
    width: 140px;
  }
}

/* ===== アクセスマップ ===== */
.access{
  padding: 90px 0;
  background: #f6f6f6;
}

/* 英語見出し（Access Map） */
.access__en{
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #444;
  position: relative;
}

/* 下線 */
.access__en::after{
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin: 10px auto 0;
  background: #1d66b3;
}

/* 日本語タイトル（アクセスマップ） */
.access__title{
  margin: 18px 0 0;
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  color: #1d66b3;
  letter-spacing: 0.04em;
}

/* 住所・TELなど */
.access__info{
  margin-top: 38px;
  text-align: center;
}

.access__line{
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 2.0;
  color: #222;
}

/* 1行目を少し広めに */
.access__line:first-child{
  margin-top: 0;
}

/* ラベル（TEL / FAX / 本社 など） */
.access__label{
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ラベルと本文の間 */
.access__text{
  margin-left: 12px;
}

/* TELとFAXなどの間隔用 */
.access__gap{
  display: inline-block;
  width: 22px;
}

/* 地図 */
.access__map-wrap{
  margin-top: 34px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0,0,0,0.12);
}

/* iframeサイズ */
.access__map{
  width: 100%;
  height: 430px;
  border: 0;
  display: block;
}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width: 768px){
  .access__title{
    font-size: 32px;
  }

  .access__line{
    font-size: 16px;
    line-height: 2.0;
  }

  .access__gap{
    width: 12px;
  }

  .access__map{
    height: 320px;
  }
}
/* ===== contact ===== */
:root{
  --contact-blue: #0b56a0;
  --contact-border: #d9d9d9;
  --contact-bg: #f3f3f3;
  --contact-text: #111;        
}

/* ===== container ===== */
.container{
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* ===== contact全体 ===== */
.contact-main{
  color: var(--contact-text);
}
/* ===== 導入文 ===== */
.contact-intro{
  padding: 110px 0; 
}

.contact-intro__text{
  text-align: center;
  font-weight: 700;  
  line-height: 2.0; 
  letter-spacing: 0.07em;
  margin: 0;    
  font-size: 18px; 
}
/* ===== お電話ボックス ===== */
.contact-phone{
  padding: 0 0 60px;
}

.contact-phone__box{
  border: 2px solid var(--contact-blue);
  padding: 54px 24px;
  text-align: center;
}

.contact-phone__title{
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.contact-phone__number{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 12px;
}

.contact-phone__icon{
  color: var(--contact-blue);
  display: inline-flex;
}

.contact-phone__tel{
  font-size: 54px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #000;
  text-decoration: none;
}

.contact-phone__tel:hover{
  text-decoration: underline;
}

.contact-phone__hours{
  margin: 0;
  font-weight: 700;
}

/* ===== フォーム見出し ===== */
.contact-form{
  padding: 40px 0 0;
}

.contact-form__title{
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 12px;
}

.contact-form__note{
  text-align: center;
  line-height: 2.2;
  margin: 0 0 44px;
}

.contact-form__note-link{
  color: var(--contact-blue);
  font-weight: 800;
}

/* ===== フォーム行 ===== */
.form{
  padding-bottom: 0;
}


.row{
  display: grid;                  
  grid-template-columns: 240px 1fr;     
  gap: 18px;                      
  align-items: center;              
  padding: 18px 0;                 
  border-bottom: 1px solid #e6e6e6;  
}

.row--top{
  align-items: start;              
}

.row__label{
  font-weight: 800;         
  display: inline-flex;     
  align-items: center;     
  gap: 10px;                    
}

.row__label-text{
  letter-spacing: 0.02em;   
}

.row__field{
  min-width: 0;                
}

/* ===== 必須バッジ ===== */
.badge{
  display: inline-block;     
  padding: 3px 10px;             
  border-radius: 4px;              
  font-size: 14px;           
  font-weight: 800;              
  line-height: 1.3;            
}

.badge--required{
  background: var(--contact-blue);   
  color: #fff;                       
}

/* ===== 入力系 ===== */
.input,
.select,
.textarea{
  width: 100%;                        
  border: 1px solid var(--contact-border);
  border-radius: 4px;             
  padding: 16px 18px;             
  font-size: 16px;               
  outline: none;                  
  background: #fff;               
  box-sizing: border-box;          
}

.textarea{
  min-height: 190px;              
  resize: vertical;              
}

/* focus（フォーカス：入力中）の時の強調 */
.input:focus,
.select:focus,
.textarea:focus{
  border-color: var(--contact-blue);  
  box-shadow: 0 0 0 3px rgba(11, 86, 160, 0.15); 
}

/* ===== ラジオ ===== */
.radio{
  border: none;       
  padding: 0;          
  margin: 0;              
}

.radio__item{
  display: flex;        
  align-items: center;     
  gap: 10px;              
  padding: 7px 0;         
}

.radio__item input{
  width: 18px;        
  height: 18px;               
}

/* スクリーンリーダー専用（見た目は消すが読み上げは残す） */
.sr-only{
  position: absolute;              
  width: 1px;                         
  height: 1px;                   
  padding: 0;                      
  margin: -1px;                    
  overflow: hidden;             
  clip: rect(0, 0, 0, 0);        
  white-space: nowrap;            
  border: 0;                     
}

/* ===== プライバシーエリア（灰色） ===== */
.privacy{
  background: var(--contact-bg);   
  padding: 50px 0 70px;           
  margin-top: 34px;                  
}

.privacy__lead{
  text-align: center;            
  margin: 0 0 22px;            
  font-weight: 700;               
}

.privacy__box{
  max-width: 860px;       
  margin: 0 auto;         
  background: #fff;  
  border: 1px solid #cfcfcf;  
  padding: 22px;    
}

.privacy__title{
  margin: 0 0 14px;             
  font-size: 18px;              
  font-weight: 800;           
}

.privacy__scroll{
  max-height: 220px;               
  overflow: auto;                   
  padding-right: 10px;           
  line-height: 2.0;               
}

/* ===== 同意チェック ===== */
.agree{
  display: flex;            
  justify-content: center;     
  align-items: center; 
  gap: 10px;                     
  margin: 22px 0 0;          
  font-weight: 700;           
}

.agree__check{
  width: 16px;                    
  height: 16px;                  
}

/* ===== ボタン ===== */
.btn{
  display: flex;      
  align-items: center;       
  justify-content: center;     
  gap: 12px;              
  width: min(520px, 92%); 
  margin: 40px auto 0;         
  padding: 18px 22px;   
  border-radius: 999px;          
  border: 2px solid var(--contact-blue);
  background: #fff;        
  color: var(--contact-blue);
  font-size: 18px;       
  font-weight: 800;  
  cursor: pointer;   
}

.btn:hover{
  background: rgba(11, 86, 160, 0.06); 
}

.btn__icon{
  display: inline-flex;        
}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width: 768px){
  .row{
    grid-template-columns: 1fr;  
    gap: 10px; 
  }

  .contact-phone__tel{
    font-size: 36px; 
  }

  .privacy__box{
    padding: 18px;  
  }
}