@charset "utf-8";

.first-view {
    height: calc(500px - 110px);
    position: relative;
    background-image: url(../imeges/works/works.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#works {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 150px;
  color: #d2ddb9;
  font-weight: bold;
  font-size: 56px;
  color: aliceblue;
  text-shadow: 4px 4px 10px #533d2e;
}

.works-leed {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  font-size: 18px; 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 40px;
  height: 200px;
 }
 
 .worksLeed {
   line-height: 50px;
 }

 .works-area {
  background-color: #fff;
  max-width: 1100px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 30px;
  padding-bottom: 100px;
  border: 2px solid #aaaaaa;  
 }

 .worksM {
  width: 900px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
 
 .worksH {
  font-size: 36px;
  font-weight: bold;
 padding-top: 50px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 text-shadow: 2px 2px 6px #5ba4e8;
 display: flex;
 align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
}

.worksH:before, .worksH:after {
  background-color: black; /* 横線の色 */
  border-radius: 5px; /* 横線の両端を丸く */
  content: "";
  flex-grow: 1; /* 横幅いっぱい */
  height: 5px; /* 横線の高さ */
  box-shadow: 4px 4px 10px #5ba4e8;
}
.worksH:before {
  margin-right: 15px; /* 文字との余白 */
}
.worksH:after {
  margin-left: 15px; /* 文字との余白 */
}

.kyujin {
  max-width: 1000px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 50px;
 text-align: center;
 padding-bottom: 50px;
}

.kyujin img {
 width: 270px;
 border-radius: 60%;
}

.kyujin-item3 img {
  border-radius: 70%;
  height: 210px;  
}

.kyujin-leed-area {
  padding-top: 30px;
  width: 1000px;
  max-width: 90%;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
  background-color: rgb(17, 176,  244);
  border-radius: 20px;
  padding-bottom: 20px;
  padding-right: 30px;
}

.kyujin-leed {
  display: flex;
}

.kyujin-leed-area img {
  width: 250px;
  border-radius: 20px;
  margin-left: 30px;
  margin-top: 30px;
}

.kyujin-leedH {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  text-shadow: 4px 4px 10px #3306e9;
}

.kyujin-leedP {
  text-align: left;
  margin-top: 30px;
  font-size: 18px;
  line-height: 40px;
  margin-left: 50px;
}

.contact-aria {
  width: 900px;
  max-width: 90%;
  display: flex;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
 }

 .tel-aria {
  width: 300px;
  max-width: 100%;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #000;
  background-color: #ffffff;
  padding: 6px 0;
 text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

.tel-aria:hover {
  background-color: rgb(0, 255, 234);
}
  

.contact {
  width: 300px;
  max-width: 100%;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #000;
  background-color: #ffffff;
  padding: 6px 0;
 text-align: center;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 10px;
}

.contact:hover {
  background-color: rgb(0, 255, 234);
}

.tel-aria a{
  display:block;
  text-decoration: none;
}

@media screen and (max-width:800px) {

  .first-view {
    height: calc(500px - 80px);
  }

#works {
  font-size: 34px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.works-leed {
  font-size: 14px;
  padding-top: 30px;
}

.worksLeed {
  max-width: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 25px;
}

.works-area {
  width: 100%;
}

.worksM {
  width: 100%;
  max-width: 95%;
}

.worksH {
  font-size: 18px;

}

.kyujin {
  display: block;
  width: 80%;
  padding-top: 0px;
  padding-bottom: 30px;
  margin-top: 5px;
}

.kyujin img {
  margin-top: 30px;
}

.kyujin-leed-area {
  padding-right: 0;
  padding-top: 10px;
  padding-top: 0;
}

.kyujin-leed {
  display: block;
}

.kyujin-leedH {
  line-height: 45px;
}

.kyujin-leed-area img {
  width: 98%;
  margin-left: 5px;
}

.kyujin-leedP {
  line-height: 35px;
  margin-left: 0;
  text-align: center;
}

.contact-aria {
  display: block;
}

.contact {
  margin-top: 20px;
}

.tel-aria a[href*="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  }

}