/* ---------- フォーム共通 ---------- */

.form_wrap {

  margin: 3em auto;

  width: 650px;

}

.box {

  border: 10px solid #fcf0f1;

  margin: 10px;

  padding: 20px;

  border-radius: 5px;

  font-family: sans-serif;

  font-size: 1.125rem;

}



.rules {

  width: 100%;

  height: 300px;

  padding: 10px;

  overflow-y: scroll;

  border: 1px solid #ddd;

  background-color: #f8f4f4;

  font-size: 14px;

}

.rules h3 {

  margin: 0.5em 0 1em;

}

.rules h4 {

  margin: 3em 0 1em;

}

.rules p {

  font-size: 1em;

}

.rules ul {

  list-style: none;

  margin-top: 3em;

  padding-left: 0;

}



.must {

  position: relative;

  color: red;

  font-weight: normal;

  margin-left: 0.3em;

  padding-left: 0.35em;

}

.must:before {

  display: block;

  content: "*";

  left: 0;

  top: -5px;

  position: absolute;

}



form label {

  white-space: normal;

  cursor: pointer;

}



input[type=radio], input[type=checkbox] {

  box-sizing: border-box;

  padding: 0;

  -webkit-appearance: none;

  -moz-appearance: none;

  position: relative;

  top: 5px;

  margin-right: 5px;

  width: 24px;

  height: 24px;

  border: 2px solid #28303d;

  background: #fff;

}



input[type=checkbox]:after {

  content: "";

  opacity: 0;

  display: block;

  left: 6px;

  top: 2px;

  position: absolute;

  width: 7px;

  height: 13px;

  border: 3px solid #000;

  border-top: 0;

  border-left: 0;

  transform: rotate(30deg);

}

input[type=checkbox]:checked {

  color: #000;

}

input[type=checkbox]:checked:after {

  opacity: 1;

}

/* input[type=checkbox]:focus {

  outline-offset: 2px;

  outline: 2px dotted #ddd;

} */



input[type=radio] {

  border-radius: 50%;

}

input[type=radio]:checked {

  /* border: 4px solid #28303d; */

}

input[type=radio]:after {

  content: "";

  opacity: 0;

  display: block;

  left: 3px;

  top: 3px;

  position: absolute;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: #28303d;

}

input[type=radio]:checked:after {

  opacity: 1;

}



input[type=text], input[type=tel], input[type=email], textarea {

  width: 70%;

  padding: 5px 10px;

  border: 2.5px solid #28303d;

}



select {

  padding: 5px 5px 5px 23px;

  width: 70%;

  color: #555;

  cursor: pointer;

  text-overflow: ellipsis;

  border-radius: 3px;

  -webkit-appearance: none;

  appearance: none;

}

/* selectの矢印 */

.appearance {

  position: relative;

}

.appearance::before {

  position: absolute;

  top: -7px;

  left: 7px;

  width: 0;

  height: 0;

  padding: 0;

  content: '';

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-top: 6px solid #555;

  pointer-events: none;

  margin-top: 15px;

}



input[type=file] {

  padding: 15px;

  background-color: #f2f2f2;

  width: 100%;

}

input[type=file]:hover {

  background-color: #f7f7f7;

  cursor: pointer;

}



dt, #tel03 {

  margin: 2em 0 0.5em;

  color: #1C2035;

}

dt {

  font-weight: normal;

}

#confirm dt {

  background: #eee;

}

.box dl:first-of-type dt:first-of-type,

#hojin dt:first-of-type {

  margin-top: 0;

}

dd {

  margin-bottom: 0.2em;

}

dd p {

  font-size: 0.8em;

}



h2 {

  margin: 2.5em 0 0.5em;

  font-size: 1.4em;

}

#complete h2 {

  margin: 1.5em 0;

  font-size: 1.6em;

}

h3 {

  margin: 2em 0 1em;

  font-size: 1.2em;

}

h4 {

  margin: 2em 0;

  font-size: 1em;

}

p {

  margin: 0 0 1em 0;

}



.action button {

  display: block;

  padding: 0.2em 3em;

  margin: 3em auto;

  line-height: 3em;

  color: #fff;

  font-size: 1.2em;

  background: #28303d;

  border: 2px #ccc solid;

}

.action button:hover {

  background: #555;

  cursor: pointer;

}

#confirm .action {

  display: flex;

  justify-content: center;

}

#confirm .action button {

  margin: 3em 1em;

}





/* ---------- 送信ボタン ---------- */



/* ======================================== *

 * for SP --base size 575px

/* ======================================== */

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

  .form_wrap {

    width: 100%;

  }

  input[type=text], input[type=tel], input[type=email], input[type=file], textarea, select {

    width: 100%;

  }







}