@charset "UTF-8";

.contact-top{
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  aspect-ratio: 1440/613;
  background: url(../images/5.sns_contact.image/contact-top.jpg) no-repeat center/cover;
  z-index: -1000;
  background-position: 50% -20px;
}

.bg-under{
  margin-top: calc( 613 / 1440 * 40vw );
  background-image: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0) 70%,rgba(255,255,255,1) 71%,rgba(255,255,255,1) 100%);
}

.bg-under img{
  width: 100%;
}

.wrap{
  display: flex;
  gap: 103px;
  justify-content: center;
  background-color: #fff;
}

.box1{
  margin-top: 20px;
}

.box2{
  margin-top: 20px;
  padding-top: 50px;
}

form {
  /* width: 615px; */
  width: 35vw;
  margin: 0 auto;
}

input[type="text"],
input[type="email"],
textarea {
  border: 1px solid #cccccc;
  background-color: #ffffff;
  width: 100%;
  margin-top: 5px;
  padding: 4px 8px;
  text-align: left;
}

textarea {
  height: 148px;
  margin-bottom: 30px;
  text-align: left;
}

form > p {
  /* line-height: 1.4; */
  margin-bottom: 20px;
  text-align: left;
}

input[type="submit"] {
  background-color: #505050;
  color: #ffffff;
  padding: 16px 40px;
  border-radius: 4px;
}

.input{
  text-align: center;
}

.footer{
  background-color: #fff;
}
/* ---------------english------------------------- */
.en_nav a{
  font-size: 2.0rem;
}
.en_h1 img{
  transform: translatey(24%);
}

@media screen and (max-width:960px) { 
  .box1 img{
    width: 80%;
  }
  .wrap{
    gap: 40px;
  }
  form {
    width: 40vw;
  }
  .footer{
    margin-top: 40px;
  }
}

@media screen and (max-width:520px) {
  .box1 img{
    width: 20%;
  }
  .box1{
    margin-top: 0px;
  }
  form {
    width: 60%;
    margin: 0 auto;
  }
  form > p {
    /* line-height: 1.4; */
    margin-bottom: 0px;
    text-align: left;
  }
  .wrap{
    display: block;
  }
  form {
    width: 90%;
    margin: -15px auto 0 auto;
  }
}