@charset "utf-8";
/* CSS Document */

#hero {
  margin-top: 0px; /* 上からの距離を指定 */
  background-image: url(../images/hero.jpeg);
  background-position-x: center;
  background-size: cover;
  height: 540px; /* 高さを指定 */
  border-radius: 30px; /* 角丸の半径を指定 */
  display: flex; /* 表示形式を指定（例: block, flex） */
  align-items: center; /* 交差軸方向の揃え方（flexbox） */
  margin-bottom: 30px; /* 下からの距離を指定 */
  overflow: hidden; /* はみ出たコンテンツの扱いを指定 */
}

.hero_inner {
  z-index: 2; /* 重なり順を指定 */
  width: 100%; /* 幅を指定 */
  text-align: center; /* テキストの揃え方を指定 */
}

.hero_inner h1{
  color: #ffffff; /* テキストの色を指定 */
  font-size: 32px; /* フォントサイズを指定 */
  font-weight: 700; /* フォントの太さを指定 */
  margin-bottom: 30px; /* 下からの距離を指定 */
}

.hero_inner p {
  color: #ffffff; /* テキストの色を指定 */
  font-size: 20px; /* フォントサイズを指定 */
  font-weight: 500; /* フォントの太さを指定 */
  margin-bottom: 16px; /* 下からの距離を指定 */
}

#site-info {
  margin-bottom: 30px; /* 下からの距離を指定 */
}

.title {
  font-size: 20px; /* フォントサイズを指定 */
  font-weight: 500; /* フォントの太さを指定 */
  color: #cc0000; /* テキストの色を指定 */
  margin-top: 40px; 
}

#site-info h3 {
  font-size: 36px; /* フォントサイズを指定 */
  font-weight: 700; /* フォントの太さを指定 */
  margin-bottom: 60px; /* 下からの距離を指定 */
}

.column-2 {
  width: 48%; /* 幅を指定 */
}

.text {
  line-height: 2; /* 高さを指定 */
}

.siteinfo-img {
  background-image: url(../images/ajito.jpeg);
  background-position-x: center;
  background-size: cover;
  height: 340px; /* 高さを指定 */
  border-radius: 20px; /* 角丸の半径を指定 */
}

.heading {
  position: absolute; /* 配置方法を指定 */
  font-weight: 600; /* フォントの太さ */
  color: #cc0000; /* テキストカラー */
  opacity: 0.1; /* 不透明度 */
  z-index: 0; /* 重なり順 */
}

#strengths {
  margin-bottom: 120px; /* 下からの距離を指定 */
}

.strengths_inner {
  margin-bottom: 40px; /* 下からの距離を指定 */
  position: relative; /* 要素の配置方法を指定（absolute, relativeなど） */
}

.column-40 {
  width: 40%; /* 幅を指定 */
}

.column-55 {
  width: 55%; /* 幅を指定 */
  position: relative; /* 要素の配置方法を指定（absolute, relativeなど） */
}

#strengths img {
  border-radius: 20px; /* 角丸の半径を指定 */
}

#service h3 {
  font-size: 50px; /* フォントサイズを指定 */
  font-weight: 700; /* フォントの太さを指定 */
  margin-bottom: 24px; /* 下からの距離を指定 */
}

@media only screen and (max-width: 768px) {
  #hero {
    height: 460px; /* 高さを指定 */ /* 最大幅を指定 */ /* 幅を指定 */
  }
  .hero_inner p {
    font-size: 15px; /* フォントサイズを指定 */
  }
  .hero_inner h1 {
    font-size: 17px; /* フォントサイズを指定 */
  }
    #site-info h3 {
    font-size: 24px; /* 最大幅を指定 */ /* 幅を指定 */ /* フォントサイズを指定 */
    line-height: 1.5; /* 高さを指定 */
  }
  .column-2 {
    width: 100%; /* 幅を指定 */
  }
  .text {
    font-size: 15px; /* フォントサイズを指定 */
    line-height: 1.7; /* 高さを指定 */
  }
  .siteinfo-img {
    margin-top: 30px; /* 上からの距離を指定 */
  }
  .column-40,
  .column-55 {
    width: 100%; /* 最大幅を指定 */ /* 幅を指定 */
    margin-bottom: 30px; /* 下からの距離を指定 */
  }
  #service h3 {
    font-size: 17px; /* フォントサイズを指定 */
  }
}
h3{
  margin-bottom: 20px;
}

/* ▼ PC（デフォルト）用スタイル */
@media screen and (min-width: 769px) {
  .heading {
    font-size: 180px; /* フォントサイズ */
    top: 0;           /* 上からの位置 */
    right: 0;         /* 右からの位置 */
    transform: translateY(-30%); /* Y軸に移動 */
  }
}

/* ▼ スマホ用スタイル */
@media screen and (max-width: 768px) {
  .heading {
    font-size: 60px; /* フォントサイズ */
    top: 20px;        /* 上からの位置 */
    left: 50%;        /* 左から中央に */
    transform: translateX(-50%); /* X軸で中央寄せ */
  }
}