/*
==========================================================
フォーム共通
==========================================================
*/
input[type=radio], input[type=checkbox] {
  display: none;
}
.form-area label {
  cursor: pointer;
  margin-right: 15px;
}
::-webkit-input-placeholder {
  color: #ACACAC;
}
/*=======================
テキストボックス
========================*/
#formWrap .text, #formWrap textarea {
  border: 1px solid #777;
  padding: 4px;
  color: #333;
  background: #fff;
  border-radius: 3px;
}
#formWrap textarea {
  width: 100%;
}
/*=======================
セレクトボックス
========================*/
select {
  height: 30px;
  margin-bottom: 5px;
}
#formWrap {
  margin-bottom: 50px;
  padding-right: 10%;
  padding-left: 10%;
}
/*テーブルレイアウト*/
#formWrap table {
  text-align: left;
  line-height: 150%;
  margin-right: auto;
  margin-left: auto;
  border-collapse: collapse;
  margin-bottom: 50px;
  width: 100%;
}
#formWrap th, #formWrap td {
  text-align: left;
  vertical-align: middle;
  padding: 15px;
  line-height: 1.5em;
  border: 1px solid #CCC;
}
#formWrap table tr th {
  width: 20%;
  padding: 15px;
  border: 1px solid #CCC;
  background-color: #f1f1f1;
}
#formWrap table tr td input.zip {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
#formWrap table tr td ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  line-height: 150%;
}
#formWrap table tr td ul li {
  margin-bottom: 5px;
}
/*cssレイアウト*/
#formWrap dl {
  padding: 20px 0;
  border-bottom: solid 1px #ccc;
  display: flex;
  align-items: flex-start;
}
#formWrap dt {
  width: 28%;
  margin-right: 5%;
  overflow: hidden;
}
#formWrap dt .must {
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  background-color: #C60508;
  padding: 0px 10px;
float: right;
line-height: 2em;
margin-top: 5px;
border-radius: 5px;
}
#formWrap dd {
  width: 70%;
}
#formWrap .notes {
  color: #666;
  clear: both;
  display: block;
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.4em;
}
#formWrap .zip {
  margin-bottom: 10px;
}
/*=======================
input設定
========================*/
input[type='text'] {
  font-size: 16px;
}
input[type='text'].tel_box {
  width: 30%
}
input[type='text'].mail_box {
  width: 60%
}
input[type='text'].name_box {
  width: 30%;
}
input[type='text'].text10 {
  width: 10%;
}
input[type='text'].text20 {
  width: 20%;
}
input[type='text'].text30 {
  width: 30%;
}
input[type='text'].text40 {
  width: 40%;
}
input[type='text'].text50 {
  width: 50%;
}
input[type='text'].text60 {
  width: 60%;
}
input[type='text'].text70 {
  width: 70%;
}
input[type='text'].text80 {
  width: 80%;
}
input[type='text'].text90 {
  width: 90%;
}
input[type='text'].text100 {
  width: 100%;
}
/*数字入力用*/
input[type='tel'].text10 {
  width: 60px;
}
input[type='tel'].text20 {
  width: 60px;
}
input[type='tel'].text_postal { /*〒番号*/
  width: 80px;
}
input[type='button'].postal_bt { /*〒から住所を自動入力ボタン*/
  background-color: #ccc;
  font-size: 16px;
  margin-bottom: 10px;
}
/*=======================
チェック・セレクトボックス設定
========================*/
.radio, .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 20px 20px 20px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
}
.radio:hover, .checkbox:hover {
  background-color: #FFD1D9;
}
.radio:hover:after, .checkbox:hover:after {
  border-color: #FF6600;
}
.radio:after, .checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 24px;
  height: 24px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}
.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #FF3808;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}
.checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -9px;
    width: 10px;
  height: 16px;
  border-right: 3px solid #FF3808;
  border-bottom: 3px solid #FF3808;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}
/*=======================
チェック・セレクトボックス設定（ラジオボタンの中のチェックボックス）
========================*/
.radio_in {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
}
.checkbox_in {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
  margin-bottom: 0px;
  margin-left: 0;
  margin-right: 20px;
  margin-top: 0;
}
.radio_in:hover, .checkbox_in:hover {
  background-color: #FFD1D9;
}
.radio_in:hover:after, .checkbox_in:hover:after {
  border-color: #FF6600;
}
.radio_in:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}
.checkbox_in:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}
.radio_in:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FF3808;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio_in:before {
  opacity: 1;
}
.checkbox_in:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #FF3808;
  border-bottom: 3px solid #FF3808;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox_in:before {
  opacity: 1;
}
/*=======================
送信ボタン
========================*/
#submit {
  padding-top: 50px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding-bottom: 0%;
}
#submit p {
  font-size: 16px;
  line-height: 1.8em;
}
#submit .privacy {
  color: #D70100;
}
#submit .bt {
  padding-top: 30px;
  padding-bottom: 0px;
}
#submit .css_btn_class {
  width: 40%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 24px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  display: inline-block;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 50px;
  background-color: #ccc;
}
/*
#submit .css_btn_class:hover {
  background-color: #d8c46c;
  text-decoration: none;
}
*/
#submit .css_btn_class:active {
  position: relative;
  top: 1px;
}
#submit .btn_text {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
}
#submit a img:hover {
  opacity: .70; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=70); /* IE lt 8 */
  -ms-filter: "alpha(opacity=70)"; /* IE 8 */
  -khtml-opacity: .70; /* Safari 1.x */
  -moz-opacity: .70; /* FF lt 1.5, Netscape */
}
/*
==========================================================
フォーム / プライバシーポリシー共通
==========================================================
*/
#privacy {
  padding: 0px;
  margin-top: 30px;
  margin-right: 0px;
  margin-bottom: 40px;
  margin-left: 0px;
}
#privacy .pv {
  text-align: left;
  margin: 0px;
  padding: 40px;
  border: 1px solid #CCC;
  height: 400px;
  overflow: auto;
}
#privacy .pv .title {
display: block;
text-align: left;
margin-bottom: 30px;
color: #333;
font-size: 16px;
}
#privacy .pv .title span {
font-size: 18px;
font-weight: 600;
display: block;
text-align: center;
}

#privacy .pv dl {
padding: 20px 0;
border-bottom: 1px solid #CCC;
display: flex;
flex-wrap: wrap;
}
#privacy .pv dl :last-child {
border-bottom: none;
}
#privacy .pv dl dt {
  font-weight: bold;
  width: 100%;
  margin-bottom: 1em;
}
#privacy .pv dl dd {
  width: 100%;
}
#privacy .pv dl dd li {
margin-bottom: 1em;
}
/*
#privacy .pvbox {
  display: none;
}
*/
#privacy .open {
  text-align: center;
  margin-bottom: 20px;

}

#privacy .open span {
  color: #06C;
  text-decoration: underline;
  font-size: 16px;
}
#privacy .pvbox .pv dl dd {
  line-height: 1.5em;
}
#privacy .sub {
  font-size: 12px;
  line-height: 1.5em;
  text-align: left;
  color: #666;
}
.accept_ck{
display: flex;
justify-content: center;
font-size: 18px;
}

/*---------------------------------------
確認画面（エラー）
---------------------------------------*/
.confirm {
width: 90%;
margin: 0 auto;
}
.form-area h4 {
font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
margin-bottom: 40px;
line-height: 1.8em;
}
.form-area .error_messe {
font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
color: #B81417;
}
.form-area .css_btn_class {
  width: 80%!important;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 24px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  display: inline-block;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 50px;
  background-color: #333!important;
}
.form-area .back_btn {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 24px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  display: block;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 50px;
  background-color: #ccc;
  margin: 0 auto;
}
.form-area .css_btn_class:hover,
.form-area .back_btn:hover {
opacity: 0.7;
}
.form-area .short {
  width: 40%;
}
.form-area .long {
  width: 80%;
}

/*---------------------------------------
確認画面
---------------------------------------*/
.form-area h3 {
font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
margin-bottom: 40px;
line-height: 1.8em;
text-align: center;
}
.form-area table {
font-size: 16px;
}
#submit ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 80%;
margin: 0 auto;
}
#submit ul li {
width: 48%;
margin-bottom: 20px;
}

/*
==========================================================
プライバシーポリシー同意チェック
==========================================================
*/
.checkbox__button {
  margin-top: 60px;
}
.button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 24px;
  background-color: #f12b2b !important;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*
==========================================================
サンクスページ
==========================================================
*/
#thanks {
width: 80%;
margin: 0 auto 100px;
}
#thanks dl {
padding: 50px 0;
text-align: center;
}
#thanks dt {
font-size:  28px;
text-align: center;
margin-bottom: 60px;
}
#hanks dd {
font-size:  18px;
text-align: center;
line-height: 1.8em;
margin-bottom: 30px;
}
#thanks address{
border: solid 1px #ccc;
padding: 40px;
background-color: #f0f4f7;
text-align: center;
font-size: 20px;
line-height: 2.4em;
margin-bottom: 50px;
}
#thanks .btn {
display: flex;
background-color: #C40609;
border-radius: 4px;
padding: 12px 20px;
text-align: center;
margin: 0px auto 0px;
 justify-content: center;
font-size: 18px;
 letter-spacing: 0.2em;
 width: 30%;
 color: #fff;
}
#thanks .btn:hover {
opacity: 0.8;
}

@media screen and (max-width: 768px) {

/*cssレイアウト*/

#formWrap {
  margin-bottom: 50px;
width: 100%;
padding: 0!important;
}
#formWrap dl {
  padding: 20px 0;
  border-bottom: solid 1px #ccc;
  display: block!important;
  font-size: 16px;
}
#formWrap dt {
  width: 100%;
  margin-right: 5%;
  margin-bottom: 10px;
}
#formWrap dt .must {
  display: inline-block;
  color: #cdac78;
  margin-left: 20px;
  font-size: 13px;
  font-weight: normal;
}
#formWrap dd {
  width: 100%!important;
}
#formWrap .notes {
  color: #666;
  clear: both;
  display: block;
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.4em;
}
input[type='text'] ,
input[type='tel'] {
width: 100%!important;
}

.pv {
padding: 20px!important;
}
#privacy .accept_ck {
width: 100%;
margin: 0!important;
}
.radio, .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 0px 8px 0;
  padding: 20px 8px 20px 50px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
}

#submit .css_btn_class{
width: 100%;
}

/*---------------------------------------
確認画面
---------------------------------------*/

.form-area table {
font-size: 16px;
margin-bottom: 0!important;
}
.form-area table th {
width: 30%!important;
}
#submit ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 80%;
margin: 0 auto;
}
#submit ul li {
width: 100%;
margin-bottom: 20px;
}
.form-area .css_btn_class,
.form-area .back_btn {
font-size: 18px!important;
}

/*
==========================================================
サンクスページ
==========================================================
*/
.thanks {
width: 90%;
margin: 0 auto 50px;
}
.thanks dl {
padding: 50px 0;
}
.thanks dt {
line-height: 1.8em;
margin-bottom: 40px;
text-align: center;
}
.thanks dd {
font-size:  clamp(1rem, 0.778rem + 0.46vw, 1.125rem);
line-height: 1.8em;
margin-bottom: 30px;
text-align: left;
}
.thanks dd address {
text-align: center!important;
}
.thanks .btn {
width: 40%!important;
}




}