/* --- 全体の設定 --- */
body {
  margin: 0;
  font-family: sans-serif; /* 基本のフォントを指定 */
  color: #ffffff; /* 基本の文字色を指定 */
}

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

.container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 4357; /* 縦横比を固定 */
}

/* 1440px以上で幅と高さを固定 */
@media screen and (min-width: 1440px) {
  .container {
    width: 1440px;
    height: 4357px;
  }
}
.container img {
  position: absolute;
  height: auto;
  left: 0;
  width: 100%;
}

/* --- 背景画像 --- */
.slice_0_0 { top: 0.00%; z-index: 1; }
.slice_1_0 { top: 20.63%; }
.slice_2_0 { top: 38.33%;  }
.slice_3_0 { top: 55.38%; z-index: 0; }
.slice_4_0 { top: 66.77%; z-index: 0; }
.slice_5_0 { top: 79.87%; z-index: 0; }


/* --- コンテンツ --- */

/* --- ヘッダー --- */
header {
  /* 必要に応じて高さや余白を指定 */
  padding-bottom: 0vh;
}

.header-contact {
  text-align: right;
}

.hero-content {
  text-align: center;
  padding: 0vh 0;
}

h1 {
  font-size: 3rem;
  margin: 0;
}

/* --- 各セクション --- */
section {
  padding: 0vh 0;
}

h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

h2 span {
  display: block;
  font-size: 1.5rem;
}

h3 {
  font-size: 1.8rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  
}

/* --- フッター --- */
footer {
  text-align: center;
  padding-top: 10vh;
}

address {
  font-style: normal; /* addressタグの斜体をリセット */
  line-height: 1.8;
}

.copyright {
  margin-top: 2rem;
  font-size: 0.9rem;
}




/* SP向けのスタイル */
@media screen and (max-width: 768px) {
  .container {
    aspect-ratio: 480 / 4243 ; /* 縦横比を固定 */
  }
  
  /* ▼▼▼ 変更点 ▼▼▼ */
  /* SP用画像サイズから計算したtop値で隙間なく配置 */
  .slice_0_0 { top: 0.00%; z-index: 1; }
  .slice_1_0 { top: 15.74%; z-index: 1; }
  .slice_2_0 { top: 38.93%; z-index: 1; }
  .slice_3_0 { top: 56.87%; z-index: 1; }
  .slice_4_0 { top: 71.06%; z-index: 1; }
  .slice_5_0 { top: 85.55%; z-index: 1; }

  .copyright-text {
    
    /* SP用のフッターテキスト位置を再調整 */
    top: 275%;
  }
  
  

}