/* ==========サイトページ========== */
/* ヘッダー */

.site_header {
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  background-position: center center;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  height: 130%;
}

/*webp対応*/
.webp .site_header {
  background-image: url(../img/site_main.webp);
}

/*webp非対応*/
.no-webp .site_header {
  background-image: url(../img/site_main.jpg);
}

.site_header .about_title {
  font-size: 2rem;
  text-align: left;
}

.site_header .btn_link {
  margin-top: 3rem;
  margin-right: 45vw;
  margin-left: 0;
  margin-bottom: 2rem;
}

/* リンクボタン（円） */

.button_link a {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: #578e7e;
  border-radius: 999px;
  display: flex;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  text-align: center;
  align-items: center;
  padding: 10px;
  margin-top: 2rem;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 80%;
}

.button_link a:hover {
  color: #578e7e;
  background: #fff;
  transition: all 0.3s;
}

/* デザインカンプ */

#website .design_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

#website .design_list img {
  width: 17vw;
  height: auto;
  margin-top: 2rem;
  object-fit: contain;
  transition: transform 0.6s ease; /* ゆっくり変化させる */
}

#website .design_list p {
  color: #578e7e;
}

/* 拡大 */
#website .design_list img:hover {
  transform: scale(1.05); /* 拡大 */
}

/* ==========LPページ========== */
.lp_header {
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  background-position: center center;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  height: 130%;
}

/*webp対応*/
.webp .lp_header {
  background-image: url(../img/lp_main.webp);
}

/*webp非対応*/
.no-webp .lp_header {
  background-image: url(../img/lp_main.png);
}