@charset "utf-8";
/* CSS Document */
/* ----------------------------------------------- destyle.cssで無効化されたフォームデザインを戻す */
/* 基本 */
button, input, select, textarea {
  -webkit-appearance: auto;
  appearance: auto;
  border-width: 1px;
  background-color: #fff;
  /*font-size: 0.9em;*/
  /*padding: 0.4em;*/
}
/* 選択系パーツ */
input[type="radio"], input[type="checkbox"] {
  cursor: pointer;
  vertical-align: initial;
}
/* ボタン */
input[type="submit"], input[type="reset"], input[type="button"], button {
  background-color: #f0f0f0;
  border: solid 1px #666;
  border-radius: 3px;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover {
  background-color: #ddd;
  cursor: pointer;
}
/* ----------------------------------------------- layout.cssからのコピー */
/* -------------------- 全体 */
* {
  font-size: 100%;
  letter-spacing: 0.05em;
}
html {
  font-size: 62.5%;
}
body {
  color: #222;
  font-family: 'OpenSans', 'NotoSans JP', 'Hiragino Sans W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1.6em;
  line-height: 2;
  /*-webkit-print-color-adjust: exact;*/
  background: #fcf0e8;
  word-break: break-word;
}
/* -------------------- 画像 */
img {
  max-width: 100%;
  height: auto;
}
/* -------------------- リンク */
a {
  color: #1a73e8;
}
a:hover {
  color: #76abf1;
  /*opacity: 0.6;*/
}
a:hover img {
  opacity: 0.8;
}
/* -------------------- color */
.red {
  color: #ff0000;
}
.pink {
  color: #e9505f;
}
/* -------------------- position */
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
/* ----------------------------------------------- second.cssからのコピー */
/* -------------------- list */
#container ul, #container ol {
  margin: 20px 0;
  padding: 0 0 0 40px;
}
#container ul {
  list-style: disc;
}
#container ol {
  list-style: decimal;
}
/* ----------------------------------------------- フォームのページ用css */
/* ------------------------------ wrapper*/
#wrapper {}
/* ------------------------------ header*/
#header {
  width: 100%;
  padding: 56px 60px 30px 60px;
}
@media screen and (max-width: 768px) {
  #header {
    padding: 24px;
  }
}
#header .logo {
  margin: 0;
}
#header .logo img {
  width: 300px;
}
@media screen and (max-width: 768px) {
  #header .logo img {
    width: 200px;
  }
}
/* ------------------------------ main*/
#main {
  display: block;
  width: 100%;
  padding: 0 64px 80px 64px;
}
@media screen and (max-width: 768px) {
  #main {
    padding: 0 0 32px 0;
  }
}
/* ------------------------------ container*/
#container {
  width: 100%;
  margin: 0 auto;
  padding: 80px;
  border-radius: 20px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  #container {
    padding: 24px;
  }
}
/* ------------------------------ 見出し*/
#container h1 {
  clear: both;
  margin: 0 0 24px 0;
  color: #e9505f;
  font-family: 'ZenMaruGothic', 'NotoSans JP', sans-serif;
  font-size: 4rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  #container h1 {
    font-size: 2.4rem;
  }
}
#container h2 {
  clear: both;
  margin: 64px 0 24px 0;
  color: #e9505f;
  font-family: 'ZenMaruGothic', 'NotoSans JP', sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  #container h2 {
    margin: 32px 0 24px 0;
    font-size: 1.8rem;
  }
}
#container h3 {
  position: relative;
  /*clear: both;*/
  margin: 40px 0 0 0;
  padding: 16px 0 0 22px;
  /*点線*/
  /*  background-image: linear-gradient(to right, #f1959e 4px, transparent 4px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: bottom left;*/
  /**/
  color: #e9505f;
  font-family: 'ZenMaruGothic', 'NotoSans JP', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.6;
}
#container h3::before {
  content: "";
  display: inline-block;
  position: absolute;
  clear: both;
  top: 23px;
  left: 0;
  width: 6px;
  height: 16px;
  background: #f1959e;
}
#container h3::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 37px;
  left: 0;
  width: 6px;
  height: 14px;
  background: #f4ac7c;
}
@media screen and (max-width: 768px) {
  #container h3 {
    margin: 30px 0 20px 0;
    padding: 12px 0 12px 14px;
    font-size: 1.7rem;
  }
  #container h3::before {
    top: 16px;
    width: 4px;
    height: 10px;
  }
  #container h3::after {
    top: 26px;
    width: 4px;
    height: 10px;
  }
}
/* ------------------------------ flow*/
#main .flow {
  margin: 64px 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #main .flow {
    margin: 32px 0;
  }
}
/* ------------------------------ lead*/
#main .lead {}
/* ------------------------------ message*/
#main .message {
  /*border: 4px solid #F6F3FC;*/
  margin: 20px 0;
  padding: 24px;
  background: #f2f2f4;
}
#main .message p, #main .message ul {
  margin: 0;
}
/* ------------------------------ table*/
#main table.form {
  width: 100%;
  margin: 40px auto 20px auto;
  /*border-collapse: separate;
  border-spacing: 8px;*/
}
#main table.form th, #main table.form td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
#main table.form th {
  width: 25%;
  /*padding: 10px 20px;*/
  padding: 24px;
  /*color: #555;*/
  font-weight: 700;
  /*background-color: #F6F3FC;*/
}
#main table.form td {
  /*padding: 10px 15px;*/
  padding: 24px;
  background-color: #fff;
  width: auto !important;
}
#main table.form th p, #main table.form td p {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  #main table.form {
    margin: 20px 0;
    border-bottom: 1px solid #ccc;
  }
  #main table.form th, #main table.form td {
    display: block;
  }
  #main table.form th {
    width: 100%;
    /*margin: 20px 0 0 0;*/
    /*padding: 10px 15px;*/
    padding: 24px 0 0 0;
    border-bottom: 0;
  }
  #main table.form td {
    /*padding: 10px 0;*/
    padding: 16px 0 24px 0;
    border: 0;
  }
}
/* ----- メールアドレス */
@media screen and (max-width: 768px) {
  #main table.form td#mail_address1_block {
    padding: 16px 0 0 0;
  }
}
/**/
/* ----- 必須*/
#main .required {
  /*display: inline-block;
  border-radius: 3px;
  background-color: #d11343;
  margin: 0 6px;
  padding: 4px 6px;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 1.0em;
  font-weight: 500;
  color: #fff;*/
  display: block;
  color: #ff0000;
  font-weight: 500;
}
#main table.form th .required {
  font-size: 1.4rem;
}
/* ----- 入力名*/
#main table.form td .item {
  display: block;
  margin: 0 4px;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 700;
  /*color: #B23385;*/
}
@media screen and (max-width: 768px) {
  #main table.form td .item {
    margin: 0;
  }
}
/* ----- 入力必須エラー*/
/*テキスト*/
#main table.form td .error {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: #ff0000;
}
/* ----- 補足*/
#main table.form td .note {
  display: block;
  /*font-size: 1.4rem;
  font-weight: 500;
  color: #777;
  letter-spacing: 0.02em;*/
}
#main table.form td .input_area {
  margin: 20px;
}
#main table.form td .input_area input[type="text"] {
  margin: 0;
}
/* ------------------------------ agree*/
#main .agree {
  width: 100%;
  margin: 0 auto;
}
/**/
#main .agree ul {
  list-style: none;
}
#main .agree ul li {
  position: relative;
  font-size: 1.6rem;
}
#main .agree ul li::after {
  display: block;
  content: '';
  position: absolute;
  top: .8em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #B23385;
  border-radius: 100%;
}
/* ----- 入力必須エラー*/
/*テキスト*/
#main .agree .error {
  margin: 0;
  padding: 0;
  color: #ff0000;
  font-size: 1.6rem;
  font-weight: 600;
  display: block;
}
/* ------------------------------ footer*/
#footer {
  width: 100%;
}
/* ----- copyright*/
#footer .copyright {
  margin: 0;
  padding: 8px 0 16px 0;
  background: #4c403d;
  color: #fff;
  text-align: center;
  line-height: 1;
}
#footer .copyright small {
  font-size: 1.1rem;
}
/* ------------------------------ form*/
/* ----- 入力枠*/
#main table.form td input[type="text"], #main table.form td input[type="number"], #main table.form td input[type="date"], #main table.form td .selectbox select, #main table.form td textarea {
  background-color: #F2F2F2;
  font-size: 1.6rem;
  font-family: 'NotoSans JP', sans-serif;
  margin: 0 4px;
  padding: 6px 8px;
  border: 2px solid #ccc;
  border-radius: 3px;
  transition: .4s;
}
@media screen and (max-width: 768px) {
  #main table.form td input[type="text"], #main table.form td input[type="number"], #main table.form td input[type="date"], #main table.form td .selectbox select, #main table.form td textarea {
    background-color: #fff;
    /*border: 2px solid #ccc;*/
    margin: 0;
  }
}
/*フォーカス*/
#main table.form td input[type="text"]:focus, #main table.form td input[type="number"]:focus, #main table.form td input[type="date"]:focus, #main table.form td .selectbox select:focus, #main table.form td textarea:focus {
  outline: 0;
  border: 2px solid #f19051;
  /*background-color: #fcecee;*/
}
/* ----- 入力枠 エラー*/
#main table.form td.error input[type="text"], #main table.form td.error input[type="number"], #main table.form td.error input[type="date"], #main table.form td.error .selectbox select, #main table.form td.error textarea {
  background-color: rgba(209, 19, 67, 0.1);
}

#main table td.error select {
  background-color: rgba(209, 19, 67, 0.1);
}

/*次世代忍者スポーツ 職業 入力枠 エラー*/
#main table.form td .error select {
  background-color: rgba(209, 19, 67, 0.1);
}
#main table.form td .error input[type="text"], #main table.form td .error input[type="number"], #main table.form td .error input[type="date"] {
  background-color: rgba(209, 19, 67, 0.1);
}

/* ----- サイズ*/
#main textarea {
  resize: none;
  width: 99%;
}
#main input.w100 {
  width: 99%;
}
#main input.w90 {
  width: 90%;
}
#main input.w50 {
  width: 50%;
}
#main input.w30 {
  width: 30%;
}
#main input.w20 {
  width: 6em;
}
@media screen and (max-width: 959px) {
  #main textarea {
    width: 100%;
  }
  #main input.w100 {
    width: 100%;
  }
  #main input.w90 {
    width: 100%;
  }
  #main input.w50 {
    width: 60%;
  }
  #main input.w30 {
    width: 40%;
  }
  #main input.w20 {
    width: 25%;
  }
}
@media screen and (max-width: 414px) {
  #main input.w50 {
    width: 100%;
  }
  #main input.w30 {
    width: 50%;
  }
}
/* ----- checkbox*/
/*#main label.check {
  position: relative;
  padding: 0 0 4px 32px;
  display: block;
}
#main label.check:hover {
  cursor: pointer;
}
#main label.check:hover:after {
  border-color: #B23385;
}
#main label.check:after, .check:before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
}
#main label.check:after {
  left: 2px;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
#main label.check:before {
  left: 8px;
  margin-top: -10px;
  width: 8px;
  height: 16px;
  border-right: 3px solid #B23385;
  border-bottom: 3px solid #B23385;
  transform: rotate(45deg);
  opacity: 0;
  z-index: 1;
}
#main input[type="checkbox"]:focus + .check:after {
  border: 2px solid #B23385;
}
#main input[type="checkbox"]:checked + .check::before {
  opacity: 1;
}*/
/* ----- selectbox*/
#main table td select {
  /*margin: 0 0 10px 0;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  background-image: url("../img/arrow_select.png");
  background-repeat: no-repeat;
  background-size: 13px;
  background-position: 98% 50%;
  background-color: #F8F8F8;*/
  font-size: 1.6rem;
  font-family: 'NotoSans JP', sans-serif;
  margin: 0 4px;
  padding: 10px 20px 10px 10px;
  border: 2px solid #ccc;
  border-radius: 3px;
  transition: .4s;
    background-color: #F2F2F2;
}

#main table td select:focus {
  outline: 0;
  border: 2px solid #f19051;
  /*background-color: #fcecee;*/
}

/*#main select {
  display: inline-block;
}
#main select:hover {
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
#main select label {
  position: relative;
  margin: 0;
}
#main select label:after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 10px;
  right: 10px;
  top: 28%;
  border-bottom: 2px solid #B23385;
  border-right: 2px solid #B23385;
  transform: rotate(45deg);
}
#main select select {
  width: 200px;
  -ms-word-break: normal;
  word-break: normal;
  cursor: pointer;
}*/
/* ------------------------------ button_area*/
#main .button_area {
  text-align: center;
}
/* ------------------------------ btn */
/*次へ*/
#main .btn {
  /*color: #fff;
  background-color: #B33587;
  border-radius: 5px;
  margin: 15px 5px;
  padding: 11px 42px;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  transition: .4s;*/
  display: inline-block;
  min-width: 240px;
  margin: 20px 10px;
  padding: 16px 60px;
  border: 0;
  border-radius: 100vh;
  background: rgb(237, 115, 127);
  background: linear-gradient(45deg, rgba(237, 115, 127, 1) 0%, rgba(239, 130, 104, 1) 80%, rgba(241, 144, 81, 1) 100%);
  box-shadow: 0 25px 20px -20px rgba(64, 60, 67, 0.2);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: 0.4s;
}
#main .btn:hover {
  /*background-color: #999;*/
  opacity: 0.8;
}
/*戻る*/
#main .btn.back {
  background: #555;
}
#main .btn.back:hover {
  background: #999;
}