@charset "utf-8";
/**
 * @package    WCF
 * @version    6.1

 * @subpackage wcl.class
 * OUTLINE:	フォーム部品
 */
/************************************************************************************************************************************
	.c_form
************************************************************************************************************************************/
/************************************************************************************************************************************
	入力フィールド系
************************************************************************************************************************************/
/** form input text
*********************/
.c_form input[type="text"], .c_form input[type="email"], .c_form input[type="password"], .c_form input[type="url"], .c_form input[type="telephone"], .c_form input[type="number"], .c_form input[type="datetime"] {
  box-sizing: border-box;
  font-size: 12px;
  font-family: "Noto Sans CJK JP", 'Noto Sans JP', 'Noto Sans Japanese', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  max-width: 200px;
  width: 100%;
  padding: 2px 0.5em;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 0;
  border-radius: 0px;
  -webkit-appearance: none;
  box-shadow: none;
}
.c_form textarea {
  /*	resize: none;*/
  resize: vertical;
  box-sizing: border-box;
  font-size: 12px;
  font-family: "Noto Sans CJK JP", 'Noto Sans JP', 'Noto Sans Japanese', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*max-width: 565px;*/
  width: 100%;
  padding: 4px 0.5em;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 0;
  border-radius: 0px;
  -webkit-appearance: none;
  box-shadow: none;
  resize: none;
}
@media print, screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
  .c_form input[type="text"], .c_form input[type="email"], .c_form input[type="password"], .c_form input[type="url"], .c_form input[type="telephone"], .c_form input[type="number"], .c_form input[type="datetime"] {
    max-width: none;
  }
  .c_form textarea {
    max-width: none;
    width: 100%;
    margin-bottom: 0px;
  }
}
/************************************************************************************************************************************
	select
************************************************************************************************************************************/
.cp_ipselect {
  box-sizing: border-box;
  overflow: hidden;
  width: 195px;
  text-align: center;
}
.cp_ipselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.cp_ipselect select::-ms-expand {
  display: none;
}
.cp_ipselect.cp_sl03 {
  position: relative;
  border-radius: 2px;
  border: 1px solid #cccccc;
  background: #ffffff;
}
.cp_ipselect.cp_sl03::before {
  position: absolute;
  top: 1.2em;
  right: 8px;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 7px solid #9d9d9d;
  pointer-events: none;
}
.cp_ipselect.cp_sl03 select {
  padding: 10px 38px 10px 8px;
  color: #333;
  font-size: 14px;
  font-family: "Noto Sans CJK JP", 'Noto Sans JP', 'Noto Sans Japanese', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.cp_ipselect.cp_sl03 select option {
  color: #333;
  font-size: 14px;
  font-family: "Noto Sans CJK JP", 'Noto Sans JP', 'Noto Sans Japanese', "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 767px) {
  .cp_ipselect {
    width: 50%;
  }
}
/************************************************************************************************************************************
	ボタン
************************************************************************************************************************************/
.form_button_wrap {
  text-align: center;
  letter-spacing: normal;
  width: 100%;
  margin-top: 39px;
}
.form_button_wrap .form_button {
  position: relative;
  display: inline-block;
  text-decoration: none;
  width: 100%;
}
.form_button_wrap .form_button button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  padding: 0;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 100;
  display: inline-block;
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: 1px;
  width: 140px;
  height: 70px;
  padding: 0 20px 0;
  text-align: center;
  background-color: #697380;
}
@media print, screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
  .form_button_wrap .form_button button {
    font-size: 16px;
  }
}
/************************************************************************************************************************************
	動的メッセージ
************************************************************************************************************************************/
table.c_form tbody td .required_message {
  color: #ff4851;
}
#formSubmit .message_area {
  text-align: center;
  background-color: #FFF;
}
#formSubmit .message_area .error {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 0;
  margin-bottom: 40px;
  border: solid 4px #ff4851;
}
#formSubmit .message_area .success {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 0;
  margin-bottom: 40px;
  border: solid 4px #43E0C6;
}
#formSubmit .required_text {
  display: block;
  color: #ff0000;
  padding-top: 8px;
  padding-bottom: 3px;
  background-color: #FFF;
}