/* Main */

main .wrapper {
  width: 100%;
  background: #f5f5f5;
}

#title {
  width: 100%;
  max-width: 960px;
  height: 300px;
  margin: 0 auto;
  background: #f5f5f5;
}

/* main .wrapper #title .name {
    position: absolute; 
    top: 25%;
    left: 10%;
    transform: translate(-25%, -10%);
  } */

main .wrapper #title .name {
  padding-top: 180px;
  padding-left: 5px;
}

@media screen and (max-width: 820px) {
  main .wrapper #title .name {
    padding-top: 160px;
    text-align: center;
  }
}

main #title .name h2 {
  font-size: 35px;
  font-weight: 100;
  letter-spacing: 0.1rem;
  font-family: "Roboto Flex", sans-serif;
  margin-bottom: 5px;
}

/* Contact */

/* 必須 */
.required{
    display:inline-block;
    background:#e60012;
    color:#fff;
    font-size:12px;
    padding:0px 8px 2px 8px;
    margin-left:10px;
    border-radius:4px;
    position:relative;
    top:-2px;
}

button{
    background:#ccc;
    border:none;
    padding:20px 100px;
    border-radius:10px;
    cursor:pointer;
}
/* 必須 */

#contact {
  width: 100%;
  /* background: #ffd6d6; */
}

#contact .c-form {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 0px 70px 0px;
}

@media screen and (max-width: 820px) {
  #contact .c-form {
    width: 80%;
  }
}

#contact .c-form p {
  font-size: 1rem;
}

#contact .c-form .hr {
  width: 100%;
  border-top: solid 1px #ececec;
  margin: 50px 0 100px 0;
}

.item .label {
  font-weight: 600;
}

.item {
  overflow: hidden;
  /* はみ出た部分は隠す */
  margin-bottom: 50px;
}

.inputs {
  display: block;
  margin-top: 10px;
}

input[type="checkbox"] {
  position: relative;
  top: 3px;
  margin-right: 5px;
}

::placeholder {
  color: #d6d6d6;
}

input[type="text"],
input[type="email"] {
  width: 50%;
  height: 50px;
  border: solid 1px #c5c5c5;
  padding: 15px;
  font-size: 15px;
  border-radius: 5px;
}

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

  input[type="text"],
  input[type="email"] {
  width: 100%;
}
}

textarea{
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
    outline:none;
    border:1px solid #78a3ff;
    box-shadow:0 0 8px rgba(25,98,255,0.15);
}

#contact .c-form .item .ask-text {
  font-size: 0.9rem;
  margin-top: 10px;
}

#contact .c-form .item .weight {
  font-size: 0.9rem;
  margin-top: 10px;
}

textarea {
  width: 100%;
  max-width: 100%;
  height: 160px;
  border: solid 1px #d6d6d6;
  padding: 15px;
  font-size: 15px;
  border-radius: 5px;
  margin-top: 10px;
}

.btn-area{
  display:flex;
  justify-content:center;
  gap:20px;
}

/* submit */

input[type="submit"] {
  background: #9fc5ff;
  padding: 20px 100px;
  border: 1px solid #9fc5ff;
  border-radius: 10px;
  cursor: pointer;
}

input[type="submit"] {
  transition: all 0.3s;
  color: #000;
}

input[type="submit"]:hover {
  color: #1962ff;
  background: #ffffff;
}

/* ボタンを押せなくする */
input[type="submit"]:disabled{
    background:#bfbfbf;
    border-color:#bfbfbf;
    color:#666;
    cursor:not-allowed;
}

/* reset */

input[type="reset"] {
  background: #c0c0c0;
  padding: 20px 90px;
  border: 1px solid #c0c0c0;
  border-radius: 10px;
  margin-left: 10px;
  cursor: pointer;
}

input[type="reset"] {
  transition: all 0.3s;
  color: #000;
}

input[type="reset"]:hover {
  color: #1962ff;
  background: #ffffff;
}

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

  .btn-area{
    flex-direction:column;
    align-items:center;
  }

  .btn-area input{
    width:100%;
    max-width:255px;
    margin:0;
  }
}

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

  input[type="submit"],
  input[type="reset"] {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 20px 10px;
  }

}