@charset "utf-8";

body {
  background: url(../stained-img/stained-bg.png);
}

main {
  width: 100%;
  max-width: 1400px;
}

.question img {
  width: 40px;
  margin-left: 15px;
}

.question {
  display: flex;
  justify-content: center;
  padding-top: 200px;
}

/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin: 75px auto 0;
}

.accordion-area li {
  margin: 10px 0;
}

.accordion-area section {
  border: 2px solid #5c3f01;
  background-color: #ffffff;
  border-radius: 18px;
}

/*アコーディオンタイトル*/
.title {
  position: relative;
  /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  padding: 3% 3% 3% 50px;
  transition: all 0.5s ease;
  color: #5c3f01;
}

/*アイコンの＋と×*/
.title::before,
.title::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  background-color: #7b4045;
}

.title::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg);
}

.title::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg);
}

/*closeというクラスがついたら形状変化*/

.title.close::before {
  transform: rotate(45deg);
}

.title.close::after {
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;
  /*はじめは非表示*/
  background-color: #fddbb8;
  border-radius: 18px;
  margin: 0 3% 3% 3%;
  padding: 3%;
}

.box .top-access {
  text-decoration: underline;
  color: #0000ff;
}

/* お問い合わせ見出し */
.form img {
  width: 40px;
  margin-left: 15px;
}

.form {
  display: flex;
  justify-content: center;
  margin-top: 170px;
}

/* フォーム */
.contact {
  width: 70%;
  margin: 70px auto 0;
}

form dl {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  line-height: 4.5;
  margin: 0 auto;
}

form dl dt {
  width: 280px;
}

form dl dd input {
  width: 300px;
  /* 入力欄幅の調整 */
  height: 35px;
}

form dl dd select {
  width: 250px;
  height: 30px;
}

form dl dd textarea {
  width: 300px;
  height: 80px;
}

.caution {
  width: 45%;
  margin: 15px auto 0;
  /* padding-left: 130px; */
  padding-left: 17%;
}

.caution p {
  font-size: 14px;
}

form button {
  margin-top: 40px;
  font-family: "Shippori Mincho", serif;
  font-size: 15px;
  padding: 6px 30px;
  border-radius: 18px;
  border: 1px solid #cc582a;
  background-color: #cc582a;
  color: #f2f6df;
}

form button:hover {
  border: 1px solid #df6b3d;
  background-color: #df6b3d;
}

@media (max-width: 1270px) {
  .caution {
    width: 50%;
    padding-left: 23%;
  }
}

@media (max-width: 1200px) {
  .caution {
    width: 58%;
    padding-left: 27%;
  }
}

@media (max-width: 1183px) {
  .contact {
    width: 80%;
  }

  .caution {
    width: 50%;
    padding-left: 21%;
  }
}

@media (max-width: 1170px) {
  .caution {
    padding-left: 18%;
    margin-left: 31%;
  }
}

@media (max-width: 1035px) {
  .contact {
    width: 90%;
  }

  .caution {
    width: 50%;
    margin-left: 28%;
  }
}

@media (max-width: 975px) {
  .contact {
    width: 95%;
  }
}

@media (max-width: 872px) {
  .contact {
    margin-left: 16%;
    padding: 0 5%;
  }

  .contact {
    width: 95%;
  }

  .caution {
    width: 60%;
    padding-left: 14%;
    margin-left: 2%;
  }

  form button {
    margin-left: 12%;
  }
}

@media (max-width: 750px) {
  .contact {
    margin-left: 10%;
  }
}

@media (max-width: 600px) {
  .contact {
    margin-left: 5%;
  }

  .caution {
    width: 70%;
  }

  form button {
    margin-left: 25%;
  }
}

@media (max-width: 500px) {
  .contact {
    padding: 0 30px;
    margin-left: 0;
  }

  .caution {
    width: 87%;
  }
}
@media (max-width: 450px) {
  .contact {
    padding: 0;
    margin-left: 0;
  }

  .caution {
    width: 87%;
  }
}

@media (max-width: 375px) {
  .question h2 {
    font-size: 22px;
  }

  .question img {
    width: 35px;
  }

  .question {
    padding-top: 100px;
  }

  .accordion-area {
    margin: 33px auto 0;
  }

  .box {
    font-size: 15px;
  }

  .form img {
    width: 35px;
  }

  .form {
    margin-top: 130px;
  }

  .form h2 {
    font-size: 22px;
  }

  .accordion-area li {
    margin-top: 20px;
  }

  form dl {
    width: 80%;
    line-height: 2.5;
  }

  form dl dt {
    margin-top: 25px;
  }

  .contact {
    margin-left: 0;
    margin-top: 15px;
    padding: 0;
    width: 95%;
  }

  .caution {
    padding-left: 0;
    margin-left: 25%;
    width: 90%;
  }

  form button {
    margin-left: 20%;
  }

  .contact {
    width: 70%;
  }

  .caution p {
    font-size: 14px;
  }
}