@charset "UTF-8";

/* ============================================
   formmail.css
   対象: pageFormmail.tpl / pageFormmail_check.tpl / pageFormmail_comp.tpl
   ============================================ */


/* エラー表示
   .err
---------------------------------------------- */
.err {
  font-size: 12px;
  color: #ff5500;
}




/* テーブル
   table / th / td
---------------------------------------------- */
table {
  width: 100%;
  background: #FFF;
}
table td, table th {
  padding: 10px;
  color: #212121;
  border: 1px solid #ccc;
}
table th {
  width: 12em;
  background: #f1f1f1;
  text-align: left;
}
@media screen and (max-width: 600px) {
  table td, table th {
    display: block;
    width: 100%;
    margin-top: -1px;
  }
}

/* ============================================
   main.css より移植: フォームページ全体レイアウト
   ============================================ */

#type_contact_page #contact_sec1 .defo_inner {
  width: 60%;
}
#type_contact_page #contact_sec1 .defo_inner input[type=text],
#type_contact_page #contact_sec1 .defo_inner input[type=password],
#type_contact_page #contact_sec1 .defo_inner input[type=datetime],
#type_contact_page #contact_sec1 .defo_inner input[type=date],
#type_contact_page #contact_sec1 .defo_inner input[type=month],
#type_contact_page #contact_sec1 .defo_inner input[type=time],
#type_contact_page #contact_sec1 .defo_inner input[type=week],
#type_contact_page #contact_sec1 .defo_inner input[type=number],
#type_contact_page #contact_sec1 .defo_inner input[type=email],
#type_contact_page #contact_sec1 .defo_inner input[type=url],
#type_contact_page #contact_sec1 .defo_inner input[type=search],
#type_contact_page #contact_sec1 .defo_inner input[type=tel],
#type_contact_page #contact_sec1 .defo_inner input[type=color],
#type_contact_page #contact_sec1 .defo_inner select,
#type_contact_page #contact_sec1 .defo_inner textarea,
#type_contact_page #contact_sec1 .defo_inner .field {
  display: block;
  width: 100%;
  height: 45px;
  margin-bottom: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background-color: #eff1f5;
  box-shadow: none;
  color: #5c6b80;
  font-size: 1em;
  line-height: 45px;
  transition: background-color 0.24s ease-in-out;
}
#type_contact_page #contact_sec1 .defo_inner textarea {
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em;
  padding: 0.5em;
  overflow: auto;
}
#type_contact_page #contact_sec1 .defo_inner .inquiry th {
  text-align: left;
  font-size: 14px;
  color: #444;
  padding-right: 5px;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #d7d7d7;
}
#type_contact_page #contact_sec1 .defo_inner .inquiry td {
  font-size: 13px;
  border: solid 1px #d7d7d7;
}
#type_contact_page #contact_sec1 .defo_inner .entry-content .inquiry tr,
#type_contact_page #contact_sec1 .defo_inner .entry-content table {
  border: solid 1px #d7d7d7;
}
#type_contact_page #contact_sec1 .defo_inner .haveto {
  font-size: 12px;
  padding: 5px;
  background: #77CE98;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}
#type_contact_page #contact_sec1 .defo_inner .any {
  font-size: 12px;
  padding: 5px;
  background: #c9b397;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}
#type_contact_page #contact_sec1 .defo_inner .verticallist .wpcf7-list-item {
  display: block;
}
#type_contact_page #contact_sec1 .defo_inner #formbtn {
  display: block;
  padding: 15px;
  width: 350px;
  background: #77CE98;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 25px auto 25px;
  line-height: 1;
  transition: 0.4s;
  border: 2px solid #77CE98;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  font-family: vdl-penletter, "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  font-style: normal;
}
#type_contact_page #contact_sec1 .defo_inner #formbtn:hover {
  background: #fff;
  color: #77CE98;
}
#type_contact_page #contact_sec1 .defo_inner th {
  font-weight: 700;
  text-transform: uppercase;
  padding: 13px;
}
#type_contact_page #contact_sec1 .defo_inner td {
  border-top: 1px solid #ededed;
  padding: 12px;
}
#type_contact_page #contact_sec1 .defo_inner input,
#type_contact_page #contact_sec1 .defo_inner select,
#type_contact_page #contact_sec1 .defo_inner textarea {
  border: 1px solid #dfdfdf;
  letter-spacing: 1px;
  margin: 0;
  max-width: 100%;
  resize: none;
}
.contact_form input,
.contact_form select,
.contact_form textarea {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  position: relative;
  z-index: 10;
}

/* レスポンシブ: フォームページ幅調整 */
@media only screen and (max-width: 1199px) {
  #type_contact_page #contact_sec1 .defo_inner {
    width: 70%;
  }
}
@media only screen and (max-width: 991px) {
  #type_contact_page #contact_sec1 .defo_inner {
    width: 80%;
  }
}
@media (max-width: 920px) {
  #type_contact_page #contact_sec1 .defo_inner .inquiry td,
  #type_contact_page #contact_sec1 .defo_inner .inquiry th {
    display: block !important;
    width: 100% !important;
    border-top: none !important;
    box-sizing: border-box !important;
  }
  #type_contact_page #contact_sec1 .defo_inner .inquiry tr:first-child th {
    border-top: 1px solid #d7d7d7 !important;
  }
  #type_contact_page #contact_sec1 .defo_inner .inquiry .any,
  #type_contact_page #contact_sec1 .defo_inner .inquiry .haveto {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  #type_contact_page #contact_sec1 .defo_inner select {
    min-height: 42px;
  }
  #type_contact_page #contact_sec1 .defo_inner input.input_btn {
    margin-top: .8em;
  }

}

/* original
---------------------------------------------- */
#primary p {
  margin-bottom: 0;
  font-size: .8em;
}
#primary #type_contact_page #contact_sec1 .defo_inner {
  width: 80%;
  margin-bottom: 4rem;
}

@media (max-width: 920px) {
  #primary #type_contact_page #contact_sec1 .defo_inner {
    width: 98%;
  }
}

/* フォーム入力要素
   select / textarea / input
---------------------------------------------- */
select,
textarea {
  margin: 3px 2px;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"] {
  padding: 7px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}
textarea {
  resize: vertical;
  width: 99%;
}
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
  line-height: 1;
  cursor: pointer;
  padding: 0.1em;
}
input[type="checkbox"] {
  display: inline-block;
  padding: 10px 8px 8px 8px;
}


/* 入力幅ユーティリティ
   .inputSm / .inputMd / .inputLg / .textareaLg
---------------------------------------------- */
.inputSm {
  width: 4em;
}
.inputMd {
  width: 45%;
}
.inputLg {
  width: 99%;
}
.textareaLg {
  width: 99%;
  height: 10em;
}
@media screen and (max-width: 480px) {
  .inputMd,
  .inputLg {
    width: 94%;
  }
}


/* 郵便番号自動入力ボタン
   #postal_btn
---------------------------------------------- */
#postal_btn {
  margin-left: 5px;
  padding: 5px 10px;
  display: inline-block;
}


/* 必須ラベル
   .required
---------------------------------------------- */
.required {
  margin: 0 0 0 3px;
  padding: 3px 5px;
  color: #FFF;
  text-align: center;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  border-radius: 2px;
  background: #F00;
}


/* 送信ボタンエリア
   .formmailBtn
---------------------------------------------- */
.formmailBtn {
  margin: 30px auto 50px;
  position: relative;
  z-index: 5;
}
.formmailBtn p {
  line-height: 1.5;
  text-align: center;
  vertical-align: top;
}
.formmailBtn .btn {
  display: inline-block;
  width: auto;
  line-height: 1.5;
  padding: 12px 20px;
  border-radius: 3px;
  background: #77CE98;
  border: 2px solid #77CE98;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin: 0 5px 10px;
}
.formmailBtn .btn:hover {
  color: #77CE98;
  background-color: #fff;
}
.formmailBtn .btn.back {
  background: #444;
  border: 2px solid #444;
}
.formmailBtn .btn.back:hover {
  color: #444;
  background-color: #fff;
}
@media screen and (max-width: 480px) {
  .formmailBtn {
    margin: 15px auto 30px;
  }
}


/* プライバシーポリシーボックス
   .privacyBox
---------------------------------------------- */
.privacyBox {
  max-width: 600px;
  margin: 0 auto 50px;
  padding: 15px;
  border: 1px solid #ccc;
}
.privacyBox h3 {
  margin: 0 0 10px;
  padding: 0;
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
  font-size: 16px;
}
.privacyBox p {
  line-height: 1.5;
}

.privacyBox a {
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

@media screen and (max-width: 600px) {
  .privacyBox {
    width: 94%;
  }
}


/* フォームメインコンテンツ
   .formmailBox01
---------------------------------------------- */
.formmailBox01 li {
  padding-left: 1rem;
  position: relative;
}
.formmailBox01 li:before {
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  background-color: #212121;
  left: 0;
  top: 7px;
}
.formmailBox01 .address {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 15px 20px;
  margin: 20px 0;
}


/* 補足テキスト
   .textsmall
---------------------------------------------- */
.textsmall {
  font-size: 0.8em;
  line-height: 1.4;
  margin-top: 0.4em;
}


/* ① 年齢入力欄
   .inputAge
---------------------------------------------- */
#type_contact_page #contact_sec1 .defo_inner input[type=text].inputAge {
  width: 3em;
  display: inline;
}


/* ② 在籍学校: input + select 2つを1/3幅で横並び
   .schoolRow
---------------------------------------------- */
.schoolRow {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.schoolRow > * {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important; /* main.css の width:100% を上書き */
  display: block !important;
}

@media screen and (max-width: 600px) {
  .schoolRow {
    flex-direction: column;
  }
  .schoolRow > * {
    flex: 0 0 auto !important;   /* ← ここを追加/変更：flex-basisをautoにしてheightを効かせる */
    width: 100% !important;
  }
  #type_contact_page #contact_sec1 .defo_inner .schoolRow input[type="text"],
  #type_contact_page #contact_sec1 .defo_inner .schoolRow select {
      display: block;
      width: 100%;
      height: 45px;
      padding: 0 12px;
      background-color: #eff1f5;
      border: 0;
      border-radius: 3px;
      color: #5c6b80;
      font-size: 1em;
      line-height: 45px;
      box-sizing: border-box;
      -webkit-appearance: none;
      appearance: none;
  }
}

/* ③ 郵便番号入力幅 & 自動入力ボタン上の余白
   .inputPostal1 / .inputPostal2 / #postal_btn
---------------------------------------------- */
#type_contact_page #contact_sec1 .defo_inner input[type=text].inputPostal1 {
  width: 5em !important;
  display: inline;
}
#type_contact_page #contact_sec1 .defo_inner input[type=text].inputPostal2 {
  width: 6em !important;
  display: inline;
}
#postal_btn {
  /* margin-top: 8px; ボタン上の空き */
  display: inline;
}


/* ④ 電話番号3分割を横並び
   .telRow
---------------------------------------------- */
.telRow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.telRow input[type="tel"],
.telRow input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
}
.telRow .telSep {
  flex-shrink: 0;
}
@media screen and (max-width: 600px) {
  .telRow {
    display: block;
  }
}

/* ⑤ お問い合わせ内容: label右スペース & チェックボックス縦中央揃え
   .contactTypeRow
---------------------------------------------- */
.contactTypeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}
.contactTypeRow label {
  display: inline-flex;
  align-items: center;
  margin-right: 1em; /* label間の右スペース1文字分 */
}
.contactTypeRow input[type="checkbox"] {
  margin: 0 4px 0 0;
  padding: 0;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ⑦ 送信完了画面: 「»トップに戻る」リンクをボタン装飾
   .compBackLink
---------------------------------------------- */
.compBackLink {
  position: relative;
  z-index: 5;
  margin: 20px 0;
}
.compBackLink a {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 30px;
  background: #77CE98;
  border: 2px solid #77CE98;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  transition: 0.3s;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.compBackLink a:hover {
  background: #fff;
  color: #77CE98;
}


/* ⑥ お問い合わせ者: ラジオボタンの右にテキストエリアを配置
   .sendPersonRow / .sendPersonRadios / .sendPersonEtc
---------------------------------------------- */
.sendPersonRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sendPersonRadios {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  flex-shrink: 0;
}
.sendPersonRadios label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
#type_contact_page #contact_sec1 .defo_inner textarea.sendPersonEtc {
  flex: 1 1 200px;
  min-width: 200px;
  width: auto !important; /* main.css の textarea width:100% を上書き */
  min-height: 45px !important;
  height: 45px !important;
  margin: 0;
}
@media screen and (max-width: 600px) {
  .sendPersonRow {
    flex-direction: column;
  }
  #type_contact_page #contact_sec1 .defo_inner textarea.sendPersonEtc {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 45px !important;
  }
}