/* layout.css */


.section { /* 標準 */
  padding-block: var(--space-15);
}

.section--tight { /* 余白なし */
  padding-block: 0;
}


.section--white {  /* 白背景 */
  background-color: var(--color-white);
}

.section--gray {/* 濃グレー背景 */
  background-color: var(--color-gray);
}

.section--gray {/* 薄グレー背景 */
  background-color: var(--color-lightgray);
}

.section--center {/* 中央揃え */
  text-align: center;
}

.section--left {/* 左揃え */
  text-align: left;
}

.section--with-divider { /* セクション上を80px空ける */
  margin-top: var(--space-10);
}


/* ===== ヘッダー ===== */

.site-header {
  background: var(--color-white);
}

.site-header__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-title__catch {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  text-wrap: none;
}

.site-nav--desktop {
  display: none;
}

.hamburger {
  margin-left: auto;
}

/* PC以上 */
@media (min-width: 1024px) {
  .site-nav--desktop {
    display: block;
  }
  .hamburger {
    display: none;
  }
}
@media (max-width: 768px) {
  .site-title{
    flex-direction: column;
    gap: var(--space-2);
  }
  .site-header__inner {
  gap: var(--space-5);
}
}

/* ===== サービス===== */
.service-innner {
  text-align: center;
  margin-inline: auto;
}

@media (max-width:1200px){
  .service-innner {
    width: 420px;  
    text-align: left;
  }
}
@media (max-width:768px){
  .service-innner {
    width: 80vw;  
  }
}

/* ===== About===== */

.about-inner {
  max-width: 1312px;
  margin: 0 auto;      /* 箱を中央に */
  text-align: left;    /* 中身は左揃え */
}




/* ===== 実績===== */

.works-inner {
  max-width: 1312px;
  margin: 0 auto;  
  text-align: left;    
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 400px);
  gap: var(--space-7);
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (max-width:1352px){
.works-inner {
  padding: 0 var(--space-5);  
  text-align: center;   
}
}
@media (max-width:768px){
.works-inner {
width: 80vw;
margin-inline: auto;
padding: 0;
}
.works-grid {
  grid-template-columns: repeat(auto-fit, 80vw);
  gap: var(--space-5);
}
}


/* ===== 流れ ===== */

.flow-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;   
}


#flow > .flow-inner > h2,
#flow > .flow-inner > p { /* 見出しだけ中央揃え */
  text-align: center;
}


.flow-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}
.flow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--flow-bg);
  border-radius: 12px;
  color: var(--color-white);
}

@media (max-width: 768px) {
.flow-inner {
  max-width: 80vw;
  margin: 0 auto;
  text-align: left;   
}

}

/* ===== 料金 ===== */

.budget-guide-inner {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.budget-guide-text{
  height: 580px;
  display: flex;
  flex-direction: column;
}


/* ===== 問い合わせ ===== */

.contact-area {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#contact {
  flex: 1; /* 余った高さを全部使う */
  display: flex;
  flex-direction: column;
}
#contact.section {
  padding-block: 0;
}

.contact-inner {
  max-width: 1312px;
  align-items: center;
  margin: 0 auto;
  position: relative; 
}


@media (max-width: 1312px) {
  .contact-area {
    height: auto;
  }
  .contact-inner {
  padding: var(--space-6) 0;
}
}
/* ===== フッター ===== */

.footer {
  height: 100px; /* 固定 */
}

.footer-inner {
  max-width: 1312px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}