@charset "UTF-8";


* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  font-family: 'Noto Sans JP', Meiryo, sans-selif !important;
  font-weight: 300;
}


/*-- SCROLL BUTTON ----------------------------------------------------------*/
.scrollbtn {
  display: inline-block;
  width: 100px;
  margin: 0 5px 5px 5px;
  cursor: pointer;
}
.scrollbtn:hover {
  animation: bound-anim 0.4s ease-out;
}
@keyframes bound-anim {
  0% { transform: scale(1); }
  30% { transform: scale(0.85, 1.1); }
  40% { transform: scale(1.1, 1.15); }
  50% { transform: scale(1.15, 1.1); }
  70% { transform: scale(1.1, 0.85); }
  100% { transform: scale(1); }
}
.scrollbtn img {
  width: 100%;
}
@media print, screen and (min-width: 400px) {
  .scrollbtn {
    margin: 0 5px 15px 5px;
  }
}
@media print, screen and (min-width: 600px) {
  .scrollbtn {
    margin: 0 5px -5px 5px;
  }
}


/*-- CONTACT BUTTON ----------------------------------------------------------*/

.contactbtn {
  position: relative;
  display: inline-block;
  z-index: 1;
  margin: 0 0 10px 0;
  padding: 0 40px 0 60px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  outline: none;
  color: #c7c7c7;
}
.contactbtn:before {
  content: '?';
  position: absolute;
  left: 30px;
  display: inline-block;
  z-index: -1;
  width: 15px;
  height: 22px;
  padding: 0 0 0 7px;
  text-align: left;
  line-height: 22px;
  border-radius: 22px;
  background: #c7c7c7;
  font-size: 16px;
  color: #ffffff;
  font-family: 'Courgette', sans-selif;
}
@media print, screen and (min-width: 400px) {
  .contactbtn {
    margin: 0 0 20px 0;
  }
}
@media print, screen and (min-width: 600px) {
  .contactbtn {
    top: -25px;
    left: calc(50% - 60px);
    margin: 0;
  }
}


/*-- FOOTER ------------------------------------------------------------------*/

.footer {
  width: 90%;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
  font-weight: 100;
}
.copyright {
  width: 300px;
  margin: 0 auto 10px auto;
  text-align: center;
  font-size: 12px;
}
@media print, screen and (min-width: 600px) {
  .copyright {
    font-size: 13px;
  }
}


/*-- CONTACT -----------------------------------------------------------------*/

.contact-area {
  width: 90%;
  margin: 0 5%;
  padding: 40px 0 0 0;
}
.contact-area h2 {
  height: 50px;
  margin: 0 0 20px 0;
  padding: 0 0 0 120px;
  line-height: 50px;
  text-align: left;
  background: url(images/midashi_icon.png) no-repeat top left;
  background-size: contain;
  font-size: 15px;
  letter-spacing: 4px;
}
form {
  text-align: center;
}
.form-list {
  width: 90%;
  margin: 0 auto;
  text-align: left;
}
.form-list dt{
  margin: 0 0 5px 0;
  padding: 0;
  font-size: 0.8rem;
}
.form-list dd{
  margin: 0 0 15px 0;
  padding: 0;
}
input[type="text"], textarea {
  width: 100%;
  font-size: 16px;
  font-size: 300;
}
.pp-wrapper {
  width: 90%;
  margin: 0 auto;
  font-size: 0.8rem;
}
.pp-wrapper p {
  margin: 0 0 5px 0;
  text-align: left;
}
.pp-wrapper p.note {
  margin: 15px 0 25px 0;
}
.pp-text {
  overflow: scroll;
  width: 100%;
  height: 10rem;
  text-align: left;
  border: #333 solid 1px;
  font-size: 0.7rem;
  -webkit-overflow-scrolling: touch
}
.btn-wrapper {
  margin: 40px auto;
}
input[type="submit"], input[type="button"], input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 10em;
  height: 35px;
  margin: 0 5px;
  padding: 5px 1em;
  border-style: none;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
  animation: form-anim 0.4s ease-in;
  color: #ffffff;
}
@keyframes form-anim {
  0% { transform: scale(1); }
  30% { transform: scale(1.1, 0.85); }
  50% { transform: scale(1.15, 1.1); }
  70% { transform: scale(1.1, 1.15); }
  80% { transform: scale(0.90, 1.1); }
  1000% { transform: scale(1); }
}

.ckeck-note {
  width: 87.5%;
  margin: 0 0 2rem 5%;
  text-align: left;
  font-size: 0.8rem;
}
.check-list {
  width: 87.5%;
  margin: 0 0 2rem 5%;
  text-align: left;
  font-size: 0.8rem;
}
.check-list dt{
  margin: 0 0 5px 0;
  padding: 0;
}
.check-list dd{
  margin: 0 0 2rem 0;
  padding: 0 0 5px 0;
  border-bottom: #666666 dashed 1px;
}


@media print, screen and (min-width: 760px) {
  .contact-area h2 {
    width: 700px;
    margin: 0 auto 20px auto;
  }
  .contact-wrapper {
    display: flex;
    width: 700px;
    margin: 0 auto;
  }
  .form-list {
    width: 300px;
    margin: 0 50px;
  }
  textarea {
    height: 6em;
  }
  .pp-wrapper {
    width: 300px;
  }
  .pp-text {
    height: 220px;
  }
  .pp-wrapper p.note {
    font-size: 0.6rem;
    margin: 10px 0;
  }
  .btn-wrapper {
    margin: 10px auto;
  }
  .ckeck-note {
    width: 700px;
    margin: 0 auto 2rem auto;
    padding: 0 0 0 35px;
  }
}
@media print, screen and (min-width: 1000px) {

}