body {
  font-family: "Montserrat","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}
.header-div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: tomato; /* 必要に応じて背景色を設定 */
  z-index: 1000; /* 他の要素の上に表示するための設定 */
}
.header-div h1 {
  margin-right: 50px;
}
.header-div a {
  margin-right: 20px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}
.header-div a:hover{
  color: #fff;
}
header img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
/* header */
/*  Works  */
.main-works-div {
  padding-bottom: 50px;
}
#Works {
  text-align: center;
  font-size: 32px;
  margin: 2rem auto;
}
.Works-div a {
  text-decoration: none;
  color: black;
}
.Works-content-div {
  display: flex; /* 要素を横並びにする */
  justify-content: center;
  align-items: center; /* 要素を中央に寄せる */
  flex-wrap: wrap; /* 画面幅が狭くなった時に要素を折り返す */
  margin: 20px 0;
  text-align: center; /* テキストを中央に寄せる */
  gap: 20px; /* 要素間の間隔を20pxに設定 */
}
.Works-content-div a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.Works-content-item {
  max-width: 300px;
  height: auto;
  object-fit: cover;
  padding: 20px;
  border-radius: 10px;
  background-color: tomato;
}
.Works-content-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.Works-content-item:hover {
  box-shadow: 14px 14px 0 black;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
}
.Works-content-item p {
  font-size: 16px;
}
/*  Technology  */
#Technology {
  margin: 100px auto;
  text-align: center;
}
.Technology-content-div {
  display: flex; /* 要素を横並びにする */
  align-items: center;    
  justify-content: center; /* 要素を中央に寄せる */
  flex-wrap: wrap; /* 画面幅が狭くなった時に要素を折り返す */
  margin-top: 100px;
}
.Technology-content-item {
  display: flex; /* 要素を横並びにする */
  text-align: center;   /* テキストを中央に寄せる */
  align-items: center;  /* 要素を中央に寄せる */
  max-width: 350px;
  max-height: 300px;
  margin: 10px;
}
.Technology-content-item img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  margin-right: 10px;
}
#Technology {
  text-align: center;
  font-size: 32px;
  margin: 0;
}
/*  About  */
.main-about-div {
  background-color:  tomato;
}
.About-div {
  max-width: 1080px;
  margin: 0 auto;
  padding: 50px;
}
.About-content-div {
  display: flex; /* 要素を横並びにする */
  justify-content: center;
  align-items: center; /* 要素を中央に寄せる */
  text-align: center;
  margin: 20px 0;
  color: #fff;
}
.About-content-text {
  display: flex; /* 要素を横並びにする */
  display: block; /* 要素を縦並びにする */
  align-items: center;  /* 要素を中央に寄せる */
}
.About-content-div img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin-right: 20px;
}
#About {
  text-align: center;
  font-size: 32px;
  margin: 0;
}
/*  footer  */
.footer-div {
  margin: 20px auto;
}
.footer-content-div {
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
.footer-content-item {
  margin: 20px auto;
}
.footer-content-item-mail p {
  color: black;
  text-decoration: none; /* リンクの下線を消す */
  border-bottom: 1px dotted #4CAF50; /* ドットラインで強調 */
}
#Contact {
  text-align: center;
  font-size: 32px;
}
/*  メディアクリエイト  */
@media (max-width: 1000px) {
  .header-div {
    display: block; /* 要素を縦並びにする */
    align-items: center;
    text-align: center; /* テキストを中央に寄せる */
    padding: 20px 0;
  }
  .Works-div {
    margin: 0 auto;
    padding: 0;
  }
  .Works-content-div {
    display: grid; /* 要素を横並びにする */
    grid-template-columns: repeat(2, 1fr); /* 2列に設定 */
    grid-gap: 20px; /* 要素間の間隔を20pxに設定 */
    justify-items: center; /* 要素を中央に寄せる */
    align-items: center; /* 要素を中央に寄せる */
  }
  .Works-content-item img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .header-div h1  {
    margin: 10px auto;
  }
  .About-content-div {
    display: block; /* 要素を縦並びにする */
    align-items: center;
  }
  .About-content-div img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .About-content-text {
    margin: 20px 0;
    text-align: center;
  }
  .footer-content-item-sms a img {
    margin-right: 5px; /* 画像間の間隔を10pxに設定 */
  } 
  .footer-content-item-mail a {
    font-size: 16px;
    margin: 0 auto;
    padding: 10px;
    word-wrap: break-word; /* 長い単語を折り返す */
  }
  .Works-div {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .Works-content-div {
    grid-template-columns: repeat(1, 1fr); /* 1列に設定 */
    width: 100%;
    margin: 0 auto;
    height: auto;
  }
  .Works-content-item {
    width: auto;
    height: auto;
    padding: 10px;
  }
  .About-content-div {
    display: block; /* 要素を縦並びにする */
    align-items: center;
  }
  .About-content-div img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .footer-content-item-mail a {
    font-size: 14px;
  }
}