@charset "utf-8";


/* --------------------------------
      baserCMS Default
--------------------------------- */



#flashMessage, #ResultMessage {
  padding: 10px 10px;
  margin: 15px auto !important;
  color: #FF0033;
  font-weight: bold;
  border: 5px solid #FF0033;
}

a:focus {
  outline: none;
}

#MailMessageIndexForm a
#MailMessageConfirmForm a{
  text-decoration:underline;
}

/* --------------------------------
      メールフォーム
--------------------------------- */
#MailMessageConfirmForm table,
#MailMessageIndexForm label{
	border:none;
	border:initial;
	font-size:90%;
}
#MailMessageConfirmForm th,
#MailMessageConfirmForm td,
#MailMessageIndexForm table th,
#MailMessageIndexForm table td{
	border:initial;
	border-bottom:1px solid #CCCCCC;
}

.col-head label,
.col-input label{
	background:transparent;
	background:initial;
	display:initial;
	padding:initial;
	margin:initial;
}


/* フォーム項目 */
#MailMessageConfirmForm small,
#MailMessageIndexForm small{
	font-size:80%;
}

input[type=text], textarea, select, input[type=password] {
	margin:3px 2px;
	padding: 5px 5px;
	border:1px solid #BBBBBB;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
  font-family:inherit;
}
input[type=checkbox] {
	vertical-align: middle;
}
input[type=radio],
input[type=checkbox] {
	margin-left:5px;
	margin-right:5px;
}
textarea {
	width:95%;
}
select {
  padding: 4px 2px;
  min-width:3.5em;
}
#MailMessageConfirmForm optgroup option,
#MailMessageIndexForm optgroup option{
	padding-left:20px;
}

/* 個別にカスタマイズ */

  #MailMessageName,
  #MailMessageKana,
  #MailMessageCompany{
    /*width:300px;;*/
  }


/* 同意 */
#MailMessageIndexForm #RowMessageAgreement .col-input{
  text-align:center;
}
#RowMessageAgreement .col-input a{
  text-decoration:underline;
}



/* 日付 */
input.hasDatepicker{
  width:9em;
}

/*チェックボックスを横並びにする*/
#MailMessageConfirmForm .checkbox,
#MailMessageIndexForm .checkbox{
  display:inline-block;
}
#MailMessageConfirmForm input.button,
#MailMessageIndexForm input.button{
  cursor: pointer;
  font-family: inherit;
  padding: .6em .4em;;
	margin:3px 4px;
  background: #000000;
  border:2px solid  #000000;
  color:#FFFFFF;
}
#MailMessageConfirmForm input.button:hover,
#MailMessageIndexForm input.button:hover{
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
#MailMessageConfirmForm input.button:active,
#MailMessageIndexForm input.button:active{
  background: #FFFFFF;
  color:currentColor;
}

/* --------------------------------
      レイアウト
--------------------------------- */

.mail-description{
  max-width:100%;
  margin:0 auto;
/*   margin-top:20px; */
}
#MailMessageIndexForm{
}

#MailMessageConfirmForm ,
#MailMessageConfirmForm *,
#MailMessageIndexForm ,
#MailMessageIndexForm *{
  box-sizing: border-box;
}
#MailMessageConfirmForm table,
#MailMessageIndexForm table{
  border:none;
  max-width:100%;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
#MailMessageConfirmForm th,
#MailMessageConfirmForm td,
#MailMessageIndexForm th,
#MailMessageIndexForm td{
  font-weight:normal;
  padding: 10px;
  border-bottom:1px solid #EEEEEE;
}
#MailMessageConfirmForm th,
#MailMessageIndexForm  th {

  width:15em;
  text-align:left;
  vertical-align:middle;
}



 /* 入力必須ラベル 
-------------------- */
#MailMessageConfirmForm th,
#MailMessageIndexForm th {
  padding-left: calc(10px + 3rem + 8px)!important;/* レスポンシブ時も固定*/
}
#MailMessageConfirmForm .col-head,
#MailMessageIndexForm .col-head{
  position:relative;
  /*z-index:0;*/
}
#MailMessageConfirmForm .normal,
#MailMessageConfirmForm .required,
#MailMessageIndexForm .normal,
#MailMessageIndexForm .required{
  position:absolute;
  display: block;
  font-size:11px;
  white-space:nowrap;
  left: 10px;
  line-height:2em;;
  top: 0;
  bottom: 0;
  text-align:center;
  height:2em;
  width: 3em!important;
  margin-top:auto;
  margin-bottom:auto;
}
#MailMessageConfirmForm .required,
#MailMessageIndexForm .required{
  color:#FFFFFF!important;
  background-color:#FF7070!important;
}

#MailMessageConfirmForm .normal,
#MailMessageIndexForm .normal{
  color:#FFFFFF!important;
  background-color:#6CC!important;
}

/* 入力エラー項目 */
#MailMessageConfirmForm .form-error,
#MailMessageIndexForm .form-error{
  border-color:rgba(255,231,231,1);
  border-width: 2px;
  background-color:rgba(252,245,235,0.7);
}
#MailMessageConfirmForm .checkbox.form-error,
#MailMessageConfirmForm .radiobox.form-error,
#MailMessageIndexForm .checkbox.form-error,
#MailMessageIndexForm .radiobox.form-error{
  padding:3px;
  padding-right:10px;
}


/* 入力エラーメッセージ */
#MailMessageConfirmForm .message,
#MailMessageConfirmForm .error-message,
#MailMessageIndexForm .message,
#MailMessageIndexForm .error-message {
  color: #FF0033;
}
/* 画像認証・ボタン位置 */
#MailMessageConfirmForm .submit,
#MailMessageConfirmForm .auth-captcha,
#MailMessageIndexForm .submit,
#MailMessageIndexForm .auth-captcha{
  text-align:center;
}
.auth-captcha-image{
  vertical-align: middle;
}
/* --------------------------------
      レスポンシブ
--------------------------------- */
@media only screen and (max-width: 768px){
  input[type=text], textarea, select, input[type=password] {
    max-width:95%;
}
  #MailMessageConfirmForm table,
  #MailMessageConfirmForm thead,
  #MailMessageConfirmForm tbody,
  #MailMessageConfirmForm tr,
  #MailMessageConfirmForm th,
  #MailMessageConfirmForm td,
  #MailMessageIndexForm table,
  #MailMessageIndexForm thead,
  #MailMessageIndexForm tbody,
  #MailMessageIndexForm tr,
  #MailMessageIndexForm th,
  #MailMessageIndexForm td{
    display:block;
    width:100%;
  }
  #MailMessageConfirmForm,
  #MailMessageConfirmForm th,
  #MailMessageConfirmForm td,
  #MailMessageIndexForm,
  #MailMessageIndexForm th,
  #MailMessageIndexForm td {
    border: none;
    background: none;
    list-style: none;
  }
  #MailMessageConfirmForm th,
  #MailMessageIndexForm th {
    padding: 6px;
    padding-left: calc(5px + 2.3rem + 8px);
    background-color: #EEEEEE;
  }
  #MailMessageConfirmForm td,
  #MailMessageIndexForm td {
    padding: 10px 6px;
  }
  #MailMessageConfirmForm td textarea,
  #MailMessageIndexForm td textarea {
    width: 100%;
  }
  #MailMessageConfirmForm .submit input,
  #MailMessageIndexForm .submit input {
    margin-bottom: 5px;
  }
	
  #MailMessageConfirmForm .normal,
  #MailMessageConfirmForm .required,
  #MailMessageIndexForm .normal,
  #MailMessageIndexForm .required{
    left: 6px;
  }
	
  
}



/* --------------------------------
      カラーカスタマイズ
--------------------------------- */
/* フォーム項目 */
input[type=text], textarea, select, input[type=password] {
	border-color:1px solid #ccc;
}
/* 入力必須ラベル */
#MailMessageConfirmForm .col-head .required,
#MailMessageIndexForm .col-head .required{
  color:#FFFFFF!important;
  background-color:#FF7070!important;
}
#MailMessageConfirmForm .col-head .normal,
#MailMessageIndexForm .col-head .normal{
  color:#FFFFFF!important;
  background-color:#6CC!important;
}

#MailMessageConfirmForm .submit input[type="reset"],  
#MailMessageIndexForm .submit input[type="reset"] {
  background:gray;
  border-color:gray;
}
#MailMessageConfirmForm .submit input[type="submit"],
#MailMessageIndexForm .submit input[type="submit"] {
  background:#009944;
  border-color:#009944;
}
#MailMessageConfirmForm .submit input[type="reset"]:active, 
#MailMessageIndexForm .submit input[type="reset"]:active {
  background: #FFFFFF;
  color:gray;
}
#MailMessageConfirmForm .submit input[type="submit"]:active,
#MailMessageIndexForm .submit input[type="submit"]:active {
  background: #FFFFFF;
  color:#009944;
}

@media only screen and (max-width: 767px){
  #MailMessageIndexForm input[type=text], textarea, select, input[type=password] {
  font-size:12px;
}

#MailMessageConfirmForm th,
#MailMessageIndexForm th{
    background-color: #E8F7FF!important;
  }
#MailMessageConfirmForm th,
#MailMessageIndexForm th{
    background-color: #FCF8ED!important;
  }
  
  
}