@charset "utf-8";
/*------------------------------------------------------------------
/*
/*  PageTitle：
/*  URL：
/*
/*------------------------------------------------------------------*/
#mailform #wrapper {
  background: #fbfbfb;
  background: linear-gradient(173deg, rgba(251, 251, 251, 1) 0%, rgba(255, 255, 255, 1) 40%);
}
#mailform .mail-form-wrap {
  margin: auto;
  padding-bottom: 50px;
}
#mailform .mail-form-wrap :where(*) {
  font-size: 1.6rem;
}
#mailform .mail-form-wrap h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 60px;
}
#mailform .mail-form-wrap .note {
  text-align: initial;
  margin-bottom: 30px;
}
#mailform .mail-form-wrap .sp {
  display: none;
}

/* 注意書き */
#mailform .mail-form-wrap .form_description {
  background: #f5f5f5;
  padding: 30px;
  border-radius: 5px;
  text-align: initial;
  margin-bottom: 50px;
}
#mailform .mail-form-wrap .form_description ul {
  padding-left: 1.5em;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#mailform .mail-form-wrap .form_description ul li {
  list-style: disc;
}
#mailform .mail-form-wrap .form_description .bold {
  font-weight: bold;
}
#mailform .mail-form-wrap .form_description .must {
  margin-left: 0;
}
#mailform .mail-form-wrap a {
  text-decoration: underline;
}
#mailform .mail-form-wrap .form_description .expl {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  width: fit-content;
  margin: 10px auto auto;
}
#mailform .mail-form-wrap .form_description .expl img {
  max-width: 100%;
}

/* フォーム */
#mailform form .form_column {
  display: flex;
  gap: 20px 30px;
  border-bottom: 3px dotted #ccc;
  padding-bottom: 30px;
}
#mailform form .form_column:not(:last-child) {
  margin-bottom: 30px;
}
#mailform form .form_wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
}
#mailform form .label {
  flex-shrink: 0;
  text-align: initial;
  width: 200px;
  font-weight: bold;
}
#mailform form .label label {
  font-size: 1.8rem;
}

/* 必須 */
#mailform form .must {
  margin: 0 5px;
  background: #f16860;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fff;
  font-weight: normal;
  font-size: 1.2rem;
  display: inline-block;
}

/* エラーテキスト */
span.wpcf7-not-valid-tip {
  color: #fff;
  display: block;
  background: #f16860;
  width: fit-content;
  padding: 2px 10px;
  margin-top: 10px;
  font-size: 1.4rem !important;
  position: relative;
  border-radius: 3px;
}
span.wpcf7-not-valid-tip::before {
  content: "";
  background: #f16860;
  height: calc(tan(60deg) * 10px / 2);
  width: 10px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: absolute;
  left: 8px;
  bottom: 100%;
}

/* input下の注意書き */
#mailform form .bottom_text {
  display: flex;
  gap: 5px 10px;
  flex-wrap: wrap;
  margin-top: 5px;
}
#mailform form .bottom_text * {
  font-size: 1.4rem;
  display: block;
}

/* 各調整 */
#mailform form .input {
  text-align: initial;
  width: calc(100% - 200px - 30px);
  /* display: flex;
  flex-direction: column; */
}
#mailform .mail-form-wrap :is(input, textarea, select) {
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid #707070;
  border-radius: 5px;
}
#mailform .mail-form-wrap .wpcf7-list-item:first-child {
  margin-left: 0;
}
#mailform .mail-form-wrap textarea {
  resize: vertical;
}
#mailform form .red {
  color: #f16860;
}
#mailform .wpcf7-form-control-wrap > :where(*) {
  margin-right: 5px;
}
#mailform .mail-form-wrap label {
  cursor: pointer;
}

/* 幅指定 */
#mailform form .w100 {
  width: 100%;
}
#mailform form .w90 {
  width: 90%;
}
#mailform form .w80 {
  width: 80%;
}
#mailform form .w70 {
  width: 70%;
}
#mailform form .w60 {
  width: 60%;
}
#mailform form .w50 {
  width: 50%;
}
#mailform form .w40 {
  width: 40%;
}
#mailform form .w30 {
  width: 30%;
}
#mailform form .w20 {
  width: 20%;
}
#mailform form .w10 {
  width: 10%;
}
/* margin */
#mailform form .mr10 {
  margin-right: 10px;
}
#mailform form .mr20 {
  margin-right: 20px;
}
#mailform form .mr30 {
  margin-right: 30px;
}
#mailform form .mr40 {
  margin-right: 40px;
}
#mailform form .mr50 {
  margin-right: 50px;
}
#mailform form .ml10 {
  margin-left: 10px;
}
#mailform form .ml20 {
  margin-left: 20px;
}
#mailform form .ml30 {
  margin-left: 30px;
}
#mailform form .ml40 {
  margin-left: 40px;
}
#mailform form .ml50 {
  margin-left: 50px;
}
/* ボタン */
#mailform .mail-form-submit {
  text-align: center;
}
#mailform .mail-form-submit input {
  border: 0 none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 1em;
  padding: 0.5em 2.5em;
  width: 200px;
  max-width: 100%;
}
#mailform .mail-form-submit input[type="reset"],
#mailform .mail-form-submit input[type="button"] {
  background: #f1f1f1 none repeat scroll 0 0;
  border-bottom: 3px solid #aaa;
  color: #666;
  font-size: 1.8rem;
  text-align: center;
}
#mailform .mail-form-submit input[type="submit"] {
  background: #2e80c5;
  border-bottom: 3px solid #315c80;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #mailform .mail-form-wrap .sp {
    display: block;
  }
  #mailform .mail-form-wrap .pc {
    display: none;
  }
  #mailform form .form_column {
    flex-direction: column;
  }
  #mailform form :is(.label, .input) {
    width: 100%;
  }
  #mailform form :is(.w100, .w90, .w80, .w70, .w60, .w50, .w40, .w30, .w20, .w10) {
    width: 100%;
  }
  #mailform form #age.w20 {
    width: 40%;
  }
  #mailform .mail-form-submit {
    width: 70%;
    margin: 20px auto 0px;
  }
  #mailform .mail-form-submit input {
    width: 90%;
    font-size: 1.5rem;
    margin: 0.25em auto 1em;
  }
  #mailform .mail-form-submit input[type="reset"],
  #mailform .mail-form-submit input[type="button"] {
    font-size: 1.6rem;
  }
}