@charset "UTF-8";

html,body{
	font-family: YakuHanJP_Noto, Noto Sans JP, -apple-system, BlinkMacSystemFont, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN W3, HiraKakuProN-W3, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, Hiragino Kaku Gothic Pro, メイリオ,Meiryo, 游ゴシック体, YuGothic, Yu Gothic M, Osaka, ＭＳ Ｐゴシック, MS PGothic, Helvetica Neue, Helvetica, sans-serif;
	background-color: #000;
}
header#sqexHeader-black_rsp {margin-bottom:0; }
.header {text-align: center;}
.header .title {
  font-weight: bold;
  padding: 3rem 0;
}
.header .main_image img{
	text-align: center;
}
.header .main_image img{display: inline-block;}
.navi{display: none;}
#baseframe img {max-width: 100%;}
#baseframe { margin-bottom: 80px; color: #ffffff;}
#baseframe .info{padding: 0 1.2rem 1rem; font-size: 0.8rem;max-width: 800px; margin: 0 auto;}
#baseframe form {padding: 6px; max-width: 800px; margin: 0 auto;}
#baseframe form .heading {
  font-weight: bold;
  font-size: 1.12rem;
  border-left: 5px solid #dd0723;
  margin-top: 0.8rem;
  padding-left: 0.5rem;
  letter-spacing: 0.04rem;
}
#baseframe span.require{
  background: #dd0723;
  display: inline-block;
  width: 28px;
  height: auto;
  text-align: center;
  vertical-align: 2px;
}
#baseframe span.require:before{
  content: '必須';
  font-size: 0.68rem;
  font-weight: bold;
  color: #fff;
}
div.field_head {
  display: inline;
  font-weight: bold;
}
form div.field { box-sizing: border-box; padding: 0 1em 2em; border-bottom: 1px dotted #ccc; }
form div.field div.field { border-bottom: 1px dashed #ccc; }
form div.field div.field:last-child { border-bottom: none; padding-bottom: 0; }
form div.field div.label, form div.field div.value { float: none; width: 100%; }
form div.field div.label { padding: 1.1em 0 0; }
form div.field div.value { padding: 0.5em 0 0; }
form div.field div.value table { width: 100%; box-sizing: border-box; border-collapse: collapse; }
form div.field div.value table th { background-color: #dcdcdc; padding: 0.3em; border: 1px solid #c0c0c0; }
form div.field div.value table th.center { text-align: center; }
form div.field div.value table td { padding: 0.3em; text-align: center; border: 1px solid #c0c0c0; }
form div.field div.value select{max-width: 100%; font-size: 16px; }
form div.field div.value label{
  padding: 0 1.15em .15em 0;
  margin-bottom: .4em;
  display: inline-flex;
  font-size: 0.9rem;
}
input[type="submit"] {-webkit-appearance: none;}
form div.field div.value label input {margin-right: 0.45em; }
textarea,input[type="text"] { -webkit-appearance: none;box-sizing: border-box; width: 100%;font-size: 16px; }
textarea:focus,input[type=text]:focus { border-color: #333333; }
textarea, input[type="text"]{border: 1px solid #bbb;}
form input[type='text'] {
  font: 16px/24px sans-serif;
  box-sizing: border-box;
  padding: 0.3em;
}
form 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;
}
.select .value .input select::-ms-expand {
    display: none;
}
.select .value .input {
  position: relative;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
  background: #ffffff;
}
.select .value .input::before {
  position: absolute;
  top: 0.8em;
  right: 0.9em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333333;
  pointer-events: none;
}
.select .value select { padding: 6px 38px 6px 6px; color: #333333; }
/*.Error*/
.done .error { background-color: #FF0000; color: #fff; font-weight: bold; margin:0.5em auto; padding: 5px 0; text-align: center; width:50%; }
.error_msg{ font-size: 12px;font-weight: bold;color: #FF0000;}
form .error{
  color: #dd0723;
  font-weight: bold;
  display: block;
  font-size: 0.95rem;
}
/*.comment*/
.comment { margin-top: 2px; }
.comment02 { font-size: 77%; margin-left: 5px; }
.postfix{ font-size: 70%; }
@media screen and ( max-width:600px ) {
body { background-size: contain; }
div#baseframe {
 width: 100%; box-sizing: border-box; margin: 0 auto 30px;
 }
.comment02 {
 display: block; margin-left: 0; margin-top: 2px;
}
.title img {
width: 100%;
}
form div.field div.value label {
  padding: .18em 0;
  display: table;
  width: 100%;
}
.buttons {
  padding: 1rem;
}
}

/* action button */
form div.buttons span.button_commit input,
form div.buttons span.button_next input{
  border: none;
	padding: 0.6rem 1rem;
	position: relative;
	color: #fff;
	font-weight: 700;
	text-align: center;
	background-color: #dd0723;
	width: 60%;
  font-size: 1.2rem;
  margin-top: 1rem;
}
form div.buttons span input:hover{
  opacity: 0.8;
  cursor:pointer;
}
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
.buttons{
  padding-top: 30px;
  text-align: center;
}
form div.buttons span.button_back input{
  border: none;
  padding: 0.6rem 1rem;
  position: relative;
  font-weight: 700;
  text-align: center;
  background-color: #efefef;
  width: 30%;
  font-size: 1.2rem;
  margin-top: 1rem;
}
/* confirm */
.confirm .select .value .input{
  position: unset;
  border: none;
}
.confirm form div.field div.value{
  padding: 0.5em 15px 0;
  font-size: 0.9rem;
}
/* thanks */
#baseframe.thanks{margin-bottom: 460px;}
.thanks_message {max-width: 800px;margin: 20px auto; padding: 0 40px;}
