@charset "utf-8";
main{
  margin-top: 14rem;
}
/*-------------------------------------------
contact
-------------------------------------------*/
.contact {
  margin-bottom: 10rem;
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24rem;
}

.contact_title {
  margin: 7rem 0 2rem 0;
  /* width: 28rem; */
  height: 2.9rem;
  font-family: var(--NotoSans);
  font-weight: var(--bold);
  color: #E67F12;
  font-size: 2rem;
  line-height: 1;
  opacity: 0;
  text-align: center;
}

.contact_message {
  margin: 0 auto 5.7rem;
  width: 43rem;
  height: auto;
  font-family: var(--NotoSans);
  font-weight: var(--regular);
  color: #221917;
  font-size: 1.6rem;
  line-height: 2em;
  white-space: nowrap;
  opacity: 0;
}
/*-------------------------------------------
animation
-------------------------------------------*/
.contact_title.fade_in {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.contact_message.fade_in{
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnime {
  0% {
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.contact_form {
  display: flex;
  flex-wrap: wrap;
  width: 55.7rem;
  margin: 0 0 3.2rem 20rem;
}

.input_item {
  width: 18.4rem;
  height: 2.4rem;
  font-size: 1.6rem;
  color: #221917;
  font-family:var(--NotoSans);
  font-weight:var(--regular);
  margin-top: 1.3rem;
  line-height: 1;
}

.item_name {
  width: 4.8rem;
  height: 2.4rem;
}

.item_kana,.item_tel {
  width: 6.4rem;
  height: 2.4rem;
}

.item_mail {
  width: 11.2rem;
  height: 2.4rem;
}

.item_subject {
  width: 3.2rem;
  height: 2.4rem;
}

.item_message {
  width: 3.2rem;
  height: 2.4rem;
}

.require {
  width: 4.8rem;
  height: 2.4rem;
  font-size: 1.6rem;
  font-family:var(--NotoSans);
  font-weight:var(--regular);
  color: #FF2E00;
  margin-left: 0.8rem;
  line-height: 1;
}

input[name="form_name"],
input[name="form_kana"],
input[name="form_tel"], 
input[name="form_mail"],
input[name="form_subject"]
  {
    width: 37.3rem;
    height: 5rem;
    font-size: 1.6rem;
    padding: 0.5rem 1rem;
    font-family:var(--NotoSans);
    font-weight:var(--regular);
    border: solid 0.1rem #221917;
    margin-bottom: 1.6rem;  
    background-color: #E8E8E8;
}


/* textarea[name="form_message"] {
  font-size: 1.6rem;
  padding: 1rem 1rem;
  font-family:var(--NotoSans);
  font-weight:var(--regular);
  width: 37.3rem;
  height: 27.9rem;
  overflow: hidden;
  background-color: #E8E8E8;
  border: solid 0.1rem #221917;
  resize: none;  
} */
textarea[name="form_message"] {
  font-size: 1.6rem;
  padding: 1rem 0 0 1.5rem;
  font-family:var(--NotoSans);
  font-weight:var(--regular);
  width: 100%;
  height: 100%;
  background-color: #E8E8E8;
}

.message {
  width: 55.7rem;
  height: 27.9rem;
  position: relative;
  border: solid 0.1rem #221917;
  resize: both;
  overflow: hidden;
}

/* .message::before {
  position: absolute;
  content: "";
  width: 6.08769250209rem;
  right: -2.08769250209rem; 
  bottom: -0.1rem;  
  transform-origin: 0% 100%;
  transform: rotate(-47.39468deg); 
  border-bottom: solid 0.1rem #221917;
}

.message::after {
  position: absolute;
  content: "";
  width: 3.04384625104rem;
  right: -1.09384625104rem;
  bottom: -0.1rem;  
  transform-origin: 0% 100%;
  transform: rotate(-47.39468deg); 		
  border-bottom: solid 0.1rem #221917;
} */

input[type="submit"] {
  color: #221917;
  display: block;
  width: 15.1rem;
  height: 5.4rem;
  padding: 1.3rem 5.6rem 1.2rem 5.5rem;
  margin: 0 auto 8rem;
  border: solid 0.1rem #221917;
  font-size: 2rem;
  line-height: 1;
  font-family:var(--NotoSans);
  font-weight:var(--regular);
  background-color: #E8E8E8;
}

input[type="submit"]:hover {
  cursor: pointer;
}

.map {
  /* width: 55.7rem; */
  height: 29.4rem;
  margin: 0 auto 2rem;
  width: 100%;
}

.traffic_title {
  width: 18rem;
  height: 2.9rem;
  font-size: 2rem;
  font-family:var(--NotoSans);
  font-weight:var(--regular);
  color: #221917;
  line-height: 1;
  margin-bottom: 2rem;
}

.traffic_method {
  width: 32.5rem;
  height: auto;
}

.traffic_detail {
  font-size: 1.7rem;
  font-family: var(--NotoSans);
  font-weight: var(--regular);
  line-height: 2.23529411765em;
  color: #221917;
}

@media screen and (max-width:699.98px) {
  .contact {
    margin-bottom: 7rem;
  }

  .contact_title {
    /* margin: 7.05rem 0 4rem 8.3rem; */
    /* width: 21rem; */
    /* height: 2.1rem; */
    font-size: 1.5rem;
    line-height: 1;
  }

  .contact_message {
    margin: 0 0 4rem 3.2rem;
    width: 32.3rem;
    height: auto;
    font-size: 1.2rem;
    line-height: 2.66666666667em;
    white-space: nowrap;
  }

  .contact_form {
    width: 33.5rem;
    margin: 0 0 3rem 2rem;
  }

  .input_item {
    margin: 0 0 1rem 0;
    width: 33.5rem;
  }

  input[name="form_name"],
  input[name="form_kana"],
  input[name="form_tel"], 
  input[name="form_mail"],
  input[name="form_subject"] {
    width: 33.5rem;
    height: 3rem;
    margin: 0 0 3rem 0;  
  }

  /* textarea[name="form_message"] {
    font-size: 1.6rem;
    padding: 1rem 1rem;
    font-family:var(--NotoSans);
    font-weight:var(--regular);
    width: 33.5rem;
    height: 16.8rem;
    overflow: hidden;
    background-color: #E8E8E8;
    border: solid 0.1rem #221917;
    resize: none;  
  }


  textarea{
    padding: 0rem 0 0 1rem;
  } */

  textarea[name="form_message"] {
    font-size: 1.6rem;
    padding: 1rem 0 0 1.5rem;
    font-family:var(--NotoSans);
    font-weight:var(--regular);
    width: 100%;
    height: 100%;
    background-color: #E8E8E8;
  }
  
  .message {
    width: 33.5rem;
    height: 16.8rem;
    position: relative;
    border: solid 0.1rem #221917;
    resize: both;
    overflow: hidden;
  }

  input[type="submit"] {
    color: #221917;
    width:9.2rem;
    height: 3.3rem;
    padding: 0.7rem 3.3rem 0.7rem 3.3rem;
    margin: 0 0 7rem 14.2rem;
    font-size: 1.3rem;
    line-height: 1;
  }

  .map {
    width: 33.5rem;
    height: 17.7rem;
    margin: 0 0 4rem 2rem;
  }

  .traffic {
    margin-left: 5.8rem;
  }

  .traffic_title {
    width: 13.5rem;
    height: 2.1rem;
    font-size: 1.5rem;
    margin-bottom: 4rem;
  }

  .traffic_method {
    width: 24.8rem;
    height: auto;
    white-space: nowrap;
  }
  
  .traffic_detail {
    font-size: 1.3rem;
    line-height: 2.30769230769em;
  }
}