@charset "utf-8";

/* お問い合わせページ-入力 */
section.contact__form {
  margin: 0 auto 10%;
  width: 100%;
  max-width: calc(70% - 50px);
}

form.form__input__area {
  border: solid 4px #a7a7a7;
  padding: 7% 8%;
  border-radius: 26px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.input-area {
  margin: 0 auto 3%;
  padding: 0 0 2%;
  border-bottom: dotted 2px #a7a7a7;
}

.input-area__no-border {
  margin: 0 auto 3%;
  padding: 0 0 2%;
}

.input-area__on-border {
  margin: 4% auto 2%;
  padding: 0 0 3%;
  border-bottom: dotted 2px #a7a7a7;
}

p.input__space {
  margin: 4% auto 0;
}

.input-area.submit__block {
  width: 100%;
  max-width: calc(100% - 10px);
  margin: 0 auto;
  border: none;
  text-align: center;
}

.matter__label {
  width: 100%;
  max-width: 9.5rem;
  padding: 1% 0;
  display: contents;
  font-size: 1.3rem;
}

input#matter {
  margin: 0 2% 0 4%;
}

.related__label {
  width: 100%;
  max-width: 9.5rem;
  padding: 1% 0;
  display: contents;
  font-size: 1.3rem;
}

input#related {
  margin: 0 2% 0 4%;
}

.privacy__lead__text{
  font-size: calc(100% - .2rem);
  font-weight: bold;
  margin: 0 auto 2%;
}

.submit-btn {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 5% auto 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

p.input__hint__red {
  font-size: calc(100% - .2rem);
  color: #777;
}

.prefectures__box {
  margin: 4% auto 1%;
}

.input__title{
  font-size: calc(100% - -.2rem);
  font-weight: bold;
  margin: 0 0 1% 0;
}

.input-area__no-border textarea {
  width: 100%;
  max-width: calc(100% - 10px);
}

.inquiry__text__red{
  font-size: .8rem;
  color: red;
  font-weight: bold;
  margin: 0 auto 1%;
}

/*学校見学チェックボックス*/

.visit__checkox__flex {
  /*display: flex;*/
  width: 100%;
  /*max-width: 490px;*/
}

.visit__checkbox__block {
  display: flex;
  line-height: 2rem;
  margin: 0 0 0 3%;
  width: 100%;
}

.visit__checkbox__block label {
  width: 100%;
  max-width: 70px;
}

.visit__checkbox__block input {
  margin: 0 2% 0 2%;
}

/*label.checkbox__space {
  margin: 0 auto 0 4%;
}*/

.required__input::before{
  content: "必須";
  display: inline-block;
  background-color: #f93838;
  padding: .6% .8%;
  line-height: 1rem;
  width: 100%;
  max-width: 36px;
  font-size: .9rem;
  color: #fff;
  text-align: center;
  justify-content: center;
  justify-items: center;
  margin: 0 auto 0 2%;
}

.any__input::before{
  content: "任意";
  display: inline-block;
  background-color: #37b119;
  padding: .6% .8%;
  line-height: 1rem;
  width: 100%;
  max-width: 36px;
  font-size: .9rem;
  color: #fff;
  text-align: center;
  justify-content: center;
  justify-items: center;
  margin: 0 auto 0 2%;
}


/* お問い合わせページ-確認-完了 */

section.contact__complete__box {
  width: 100%;
  max-width: 1200px;
  margin: 8% auto 8%;
}

.contact__end__block {
  width: 100%;
  max-width: 800px;
  margin: 3% auto;
}

.contact__end__block h2 {
  font-size: 1.4rem;
  font-weight: bold;
  font-family: system-ui;
  text-align: center;
  margin: 0 auto 4%;
}

.contact__end__block p {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-size: .9rem;
  line-height: 1.6rem;
}

.prefectures__code__title{
  font-size: 1.2rem;
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.prefectures__box{
  margin: 4% auto 1%;
}

.complete__inquiry__phone__box {
  width: 100%;
  max-width: 340px;
  margin: 6% auto 3%;
}

.complete__phone__box {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.complete__inquiry__phone__box h4 {
  text-align: center;
}

span.red__input__check {
  font-size: .85rem;
  color: red;
  font-weight: bold;
}

/* 送信ボタン */
.submit-btn {
  /* buttonタグのリセットCSS */
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;

  /* ボタン有効時のスタイル */
  color: #fff;
  padding: 8px 24px;
  background-color: #3abec1;
  cursor: pointer; /* ポインターカーソルを表示 */
}

/* ボタン無効時のスタイル */
.submit-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed; /* クリック不可のカーソルを表示 */
}

.send__return__button p {
  text-align: center;
  width: 100%;
  max-width: 500px;
  margin: 4% auto;
  font-size: .8rem;
}

/* 戻るボタン */
.return-button {
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  color: #fff;
  padding: 8px 24px;
  background-color: #607D8B;
  margin: 0 2% 0 35%;
}

/* 内容送信ボタン */
.send-button {
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  color: #fff;
  padding: 8px 24px;
  background-color: #3abec1;
}

/*エラーアラート*/
.error__alert{
  color: #ff0000;
  font-size: .75em;
  font-weight: bold;
  vertical-align: middle;
  line-height: 2rem;
  display: none;
}

.error__alert.invalid{
  display: block;
  width: 100%;
  /*max-width: 200px;*/
}

span.error__alert::before {
  content: '⚠';
  font-size: 1.5rem;
  vertical-align: sub;
  font-weight: bold;
  margin: 0 .5% 0 auto;
}


/*スマホ用CSS*/
/*480px-375px*/
@media screen and (max-width:480px) {

  /*contact.php,confirm.php*/

  form.form__input__area {
    border: solid 1px #a7a7a7;
    padding: 3% 8%;
    border-radius: 26px;
  }

  .foot__logo img {
    width: 230px;
  }
  
  section.contact__form {
    margin: 0 auto 10%;
    width: 100%;
    max-width: calc(100% - 37px);
  }
  
  form.form__input__area {
    padding: 7% 6%;
    border-radius: 16px;
  }
  
  .input-area {
    margin: 0 auto 8%;
  }

  .input__title {
    font-size: calc(100% - -.1rem);
  }

  .input-area__no-border {
    margin: 0 auto 3%;
    padding: 0 0 2%;
  }
  
  .input-area__on-border {
    margin: 6% auto 7%;
    padding: 0 0 3%;
    border-bottom: dotted 2px #a7a7a7;
  }

  .send__return__button {
    width: 100%;
    max-width: 197px;
    margin: 0 auto;
  }

  .return-button {
    margin: 0 auto;
  }

  /* アラート表示時の文字崩れ対策 */
  .visit__checkbox__block {
    display: block;
  }

  /*complete.php*/

  section.contact__complete__box {
    margin: 8% auto 18%;
  }

  .contact__end__block {
    width: 100%;
    max-width: 480px;
    margin: 3% auto;
  }

  .contact__end__block p {
    max-width: 360px;
  }

}