@charset "UTF-8";
/*-------------------------------------
00 additional reset
--------------------------------------*/
button {
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input {
  font-size: 16px;
}
/*-------------------------------------
00 setup 
--------------------------------------*/
*, *::before, *::after{
  box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: none;
    font-size: 62.5%;/*10px*/
    box-sizing: border-box;
  }
  body {
    width: 100%;
    height: 100%;
    font-family: Arial, "ヒラギノ角ゴ Pro", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", MS PGothic, "sans-serif";
    color: #333;
    background: #fff;
    overflow: visible;
    text-align: justify;
    letter-spacing: 0.05em;
    line-height: 1;
  }
  img {
    max-width: 100%;
  }
  a {
    text-decoration: none;
  }
  /* a:link {
  
  } */
  /* a:hover,
  a:active,
  a:focus {
    color: #;
  } */
  p {
    line-height: 1.75;
  }
/*-------------------------------------
00 layout
--------------------------------------*/
.header, .main, .footer {
  width: 100%;
}

/*-------------------------------------
01 header
--------------------------------------*/
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px; /* adjust height if necessary */
  border-bottom: 1px solid #EEEEEE;
}

.header_logo {
  max-width: 200px; /* or any suitable width */
  height: auto;
}
/*-------------------------------------
02 note & banner
--------------------------------------*/
.note {
  width: 100%;
  background: #FEFFD3;
  padding: 13px;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
}
.tx_pink {
  color: #F96EA4;
}
.banner {
  padding: 10px;
  text-align: center;
  background-color: #ffffff;
  width: 100%;
  }
  .banner img {
    width: 100%;
    height: auto;
    display: block;
  }
/*-------------------------------------
03 form
--------------------------------------*/
.step_title {
  background: #5B9CF2;
  color: #ffffff;
  font-weight: normal;
  font-size: 1.6rem;
  text-align: center;
  padding: 20px 10px 10px 10px;
  position: relative;
  font-weight: bold;
}
.step_title:before {
  position: absolute;
  content: '';
  width: 0;
height: 0;
border-style: solid;
border-width: 19px 25px 0 25px;
border-color: #ffffff transparent transparent transparent;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}
.step_sub {
  font-family: 'Philosopher', sans-serif;
  font-size: 20px;
  color: #F9FFBE;
  display: inline-block;
  padding-bottom: 10px;
  letter-spacing: 1.8px;
  font-weight: bold;
}
.flow {
  background: #F9F5EF;
  text-align: center;
  padding: 16px 10px 6px;
}
.flow img {
  width: 100%;
  height: auto;
  display: block;
}
.form label, .form input {
  display: block;
}
.form label {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 6px;

}
.form_contents {
  padding: 20px 15px 0px 15px;
}
.form .must {
  display: inline-block;
  background: #DD4848;
  color: #fff;
  font-size: 12px;
  width: 36px;
  height: 19px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  margin-left: 7px;
  font-weight: normal;
  padding-top: 1px;
}
.form .ok {
  display: inline-block;
  background: #1FA232;
  color: #fff;
  font-size: 12px;
  width: 36px;
  height: 19px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  margin-left: 7px;
  position: relative;
  z-index: 999;
  padding-top: 1px;
}
.form .ok:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f00c';
  right: -22px;
  color: #1FA232;
  font-size: 16px;
  font-weight: 900;
}

.form .optional {
  display: inline-block;
  background: #999999;
  color: #fff;
  font-size: 12px;
  width: 36px;
  height: 19px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  margin-left: 7px;
  font-weight: normal;
  padding-top: 1px;
}
.form input {
  border: 1px solid #cccccc;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
  background-color: #FFF9D9;
}
.form textarea {
  border: 1px solid #cccccc;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  height: 50px;

}
.form input::placeholder,
.form textarea::placeholder {
  color: #999999;
}
.form textarea::placeholder {
line-height: 1.5;
font-weight: 300;
}
.form_btn {
  width: 283px;
height: 50px;
background: #F7931E 0% 0% no-repeat padding-box;
box-shadow: 0px 4px 0px #C47418;
border-radius: 4px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
font-weight: 400;
display: block;
margin: 15px auto;
}

button.disabled, button:disabled {
  background-color: #ccc; /* 灰色に設定 */
  box-shadow: none;
  color: #666; /* 文字色を暗くする */
  border: 1px solid #999; /* 境界線を明確にする */
  cursor: not-allowed; /* カーソルを禁止マークに変更 */
}

.form_btn:active {
  opacity: .8;
  color: #FCEE00;
  transition: .5s;

}
.error {
  margin-top: -10px;
  font-size: 14px;
  color: #FA1B00;
}
.form .input_wrap{
  position: relative;
}
.form .input_wrap.is_checked:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f00c';
  color: #1FA232;
  font-size: 16px;
  bottom: 50%;
  transform: translateY(50%);
  right: 10px;
}
.form .age.input_wrap.is_checked:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f00c';
  color: #1FA232;
  font-size: 16px;
  /* bottom: 50%;
  transform: translateY(50%); */
  bottom: auto;
  transform: none; 

  top: -20px;
  right: 10px;

}
/*-------------------------------------
04 footer
--------------------------------------*/
.footer {
  text-align: center;
  font-size: 1.2rem;
  border-top: 1px solid #EEEEEE;
  padding: 10px;
}
/*----------------------------------------------------
privacy add 2022.1.30
-------------------------------------------------------*/
.privacy_link {
	font-size: 13px;
	text-align: center;
	padding-top: .7em;
	margin-bottom: .7em;
	text-decoration: underline;
}
.privacy_link a[target="_blank"] {
	position: relative;
}
.privacy_link a[target="_blank"]::after {
	position: absolute;
	content: '';
	display: inline-block;
	background: url('../../images/external-link.svg') center center no-repeat;
	background-size: contain;
	width: 16px;
	height: 16px;
	top: -1px;
	right: -20px;
	margin-left: 5px;
}
.mt15 {margin-top: 15px;}

/*----------------------------------------------------
add age 2022.7.13
-------------------------------------------------------*/
/* select {outline: none;} */
select {
  -webkit-appearance: none;
  appearance: none;
  padding: 12px; border-radius: 4px; font-size: 1.6rem;
  width: 100%;
  border: 1px solid #cccccc;
  background: #fff;
  color: #333;
  min-height: 40px;
}

  select {
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    appearance: menulist;

  }

.select-wrap {display: flex; align-items: center;}
.select-wrap .age-select {
  width: 45%; height: 48px; border-color: #ccc; 
  padding: 12px .5em; 
  display: inline-block;
  background-color: #FFF9D9;
}
.select-wrap .numbers {
  width: 25%; height: 48px; margin-left: 0.5em; border-color: #ccc; 
  padding: 12px .5em; 
  display: inline-block;
  background-color: #FFF9D9;
}
.select-wrap .btn-plus {padding-left: 0.5em;}
/* .fukidashi_base {position: relative;} */
.fukidashi {
  display: inline-block;
  /* position: absolute;  */
  color: #fff; background: #FD7373; font-size: 13px; font-weight: normal; width: 230px; 
  /* right: 0;  */
  text-align: center; padding: .25em .5em; line-height: 1; 
  margin-bottom: 1em;
position: relative;}
.fukidashi:before {
	content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  /* border-right: 5px solid #FD7373; */
  border-top: 5px solid #FD7373;
}
.mt5 {margin-top: 10px;}
#plan{
  background-color: #fff;
}

/*    OK        */
.ok_span,
.ok_label .must {
    display: none;
}
.must,
.ok_label .ok_span.ok {
    display: inline-flex;
}
/*    error    */
.spStep2 p {
    display: none;
}
.spStep2 .error p {
    display: block;
}
/*    error    */
.form_contents p {
    display: none;
}
.form_contents .error p {
    display: block;
}

/*	step	*/
/* 初期状態でSTEP2, STEP3は非表示 */
#step2,
#step3 {
  display: none;
}

/* 表示状態にするためのクラス */
.show {
  display: block !important; /* 強制的に表示させるクラス */
}

.modoru,
.complete {
	display: none;
}
.form.kakunin textarea,
.form.kakunin input {
	border: none;
	pointer-events : none;
}
.form.kakunin .step_title,
.form.kakunin .flow {
	display: none;
}
.form.kakunin section.step4,
.form.kakunin section.step4 .step_title,
.form.kakunin section.step4 .flow {
	display: block;
}

.form.kakunin .kakunin {
	display: none;
}
.form.kakunin .modoru,
.form.kakunin .complete {
	display: block;
}
.form .modoru {
	background: #ccc 0% 0% no-repeat padding-box;
	box-shadow: 0px 4px 0px #aaa;
}


.form .input_wrap {
	margin-bottom: 15px;
}
.form input {
	margin: 0;
}
/*	error	*/
.error {
	margin: 0;
}
form p {
	display: block;
}
form .error + p {
	display: block;
}
form .error.empty p.hankaku {
	display: none;
}
form .error.hankaku p.empty {
	display: none;
}
form .error.hankaku p.hankaku {
	display: block;
}
form .error.empty p.empty {
	display: block;
}
form .error.email_error p.email_error {
	display: block;
}
.empty,
.email_error {
    color: red;
    display: none; /* 初期状態では非表示にする */
}
input.error {
  background: #FFD3CF !important;
}
.form_btnbk {
  width: 283px;
  height: 50px;
  background: #FFFFFF; /* 背景色を白に変更 */
  box-shadow: 0px 4px 0px #C47418;
  border: 2px solid #F7931E; /* 枠線をオレンジ色に変更 */
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  color: #F7931E; /* 文字色をオレンジ色に変更 */
  font-weight: 400;
  display: block;
  margin: 15px auto;
}

/*----------------------------------------------------
add 2024.0913
-------------------------------------------------------*/
/* .tacのスタイル修正 */
.tac {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto; /* 中央揃え */
  position: relative;
  background: #fc612d;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
  overflow: hidden;
  width: 300px; /* 幅を適切に設定 */
  height: 50px; /* 高さを設定 */
}

/* .muryoのスタイル調整 */
.muryo {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fd952d;
  color: #fff;
  font-size: 12px;
  padding: 0 10px; /* パディングを追加 */
  height: 50px; /* 高さをボタンに合わせる */
  border-radius: 10px 0 0 10px; /* 角丸を左側にのみ適用 */
  writing-mode: vertical-rl; /* 縦書き */
  letter-spacing: 5px; /* 文字間隔 */
}

.disabled-button {
  background-color: #cccccc; /* 灰色 */
  color: #666666; /* 濃い灰色の文字 */
  pointer-events: none;
  opacity: 0.5;
}

.disabled-text {
  color: #cccccc; /* 灰色のテキスト */
  cursor: not-allowed;
}

/* tac と muryo を灰色にする */
.disabled-tac {
  background-color: #cccccc; /* tac の背景を灰色に */
  color: #666666; /* テキストを濃い灰色に */
}

.disabled-muryo {
  background-color:#cccccc; /* muryo の背景を灰色に */
  color: #666666; /* テキストを濃い灰色に */
}

/* ボタンスタイルの調整 */
button.t_form_btn {
  cursor: pointer;
  margin: 0;
  padding: 0 10px; /* パディングを追加して内部のテキストとの間隔を作る */
  width: auto; /* 自動幅 */
  height: 45px;
  font-weight: 700;
  color: #fff;
  line-height: 45px;
  background: #fc612d; /* 背景色を#fc612dに設定 */
  font-size: 13px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  flex-grow: 1; /* フレックスアイテムとして拡張を許可 */
}
/* 全体的なスタイリング */
.disabled-button, .disabled-text {
  opacity: 1; /* 透明度を通常に戻す */
  color: #aaa; /* テキスト色を灰色に */
  cursor: not-allowed; /* カーソルを禁止マークに */
  pointer-events: none; /* クリック操作を無効に */
  background-color: #ccc; /* 背景色を灰色に設定 */
}

.t_form_btn.disabled-button {
  background-color: #ccc; /* 背景色を灰色に設定 */
  color: #666; /* テキスト色を暗めの灰色に */
}

/* テキスト固有のスタイリング（.muryoを含む） */
.muryo.disabled-text span {
  background-color: #ccc; /* 背景色を灰色に設定 */
  color: #666; /* テキスト色を暗めの灰色に */
  padding: 2px 5px; /* パディングを設定 */
  border-radius: 4px; /* 角を丸く */
}

button.t_form_btn::before {
  position: absolute;
  background-color: #fff;
  content: "";
  width: 30px;
  height: 100%;
  left: 0;
  opacity: 0;
  top: -180px;
  transform: rotate(45deg);
  animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
	  0% { transform: scale(0) rotate(45deg); opacity: 0; }
	 80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	 81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 追加 */
.t_form_btn.disabled-button::before {
  animation: none;
}

/* for modal dialog */
.modal, .modal-overlay {
  display: none; /* 初期状態で非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* オーバーレイの背景 */
  z-index: 1000; /* 他の要素の上に表示 */
}

/* モーダルのスタイル */
/* モーダル全体のスタイル */
.modal {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 背景を半透明の黒に設定 */
  z-index: 9999; /* 最前面に表示 */
  overflow-y: auto; /* コンテンツがあふれた際にスクロール可能 */
  -webkit-overflow-scrolling: touch; /* iOSデバイスでスムーズスクロール */
}

/* モーダルコンテンツのスタイル */
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  width: 90%; /* スマホ画面に合わせて幅を90%に調整 */
  max-width: 500px; /* 最大幅を500pxに制限 */
  background-color: #fff;
  padding: 20px;
  border-radius: 8px; /* 角を丸める */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を付ける */
  z-index: 10000; /* モーダル本体を最前面に */
}

/* モーダルオーバーレイのスタイル */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 背景をさらに濃く */
  z-index: 9998; /* モーダルの下に配置 */
}

/* スマホ用のレスポンシブデザイン */
@media (max-width: 480px) {
  .modal-content {
    width: 95%; /* 幅をさらに広げて95%に設定 */
    padding: 15px; /* パディングを小さく */
  }
}

/* タブレット・PC用のスタイル */
@media (min-width: 768px) {
  .modal-content {
    width: 70%; /* タブレット・PCではもう少し広く */
  }
}

/* モーダル内のボックススタイル */
.leave-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

.box-leave {
  padding: 20px; /* パディングを適切に調整 */
  text-align: center;
}

.leave-message .box-leave {
  background: #fff;
  text-align: center;
  border-radius: 4px;
  position: relative;
}
.leave-message .box-leave .btn-close {
  position: absolute;
  top: -8px;
  right: -8px;
}
.leave-message .box-leave h3 {
  font-size: 2rem;
  font-weight: bold; /* これで文字が太くなります */
}

.leave-message .box-leave h3 .green {
  color: #5FB52B;
}

.leave-message .box-leave p {
  font-size: 1.6rem; /* 本文のフォントサイズを少し大きく */
  line-height: 1.5;  /* 行間を適切に設定 */
}
.leave-message .box-leave ul {
  text-align: left;
  color: #5FB52B;
  font-weight: bold;
  list-style: none;
  margin-left: -1em;
}
.leave-message .box-leave ul li {
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 15px;
  font-size: 1.5rem; /* テキストのサイズを大きくします */
  color: #5FB52B;
}
.leave-message .box-leave ul li::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  background: url(../img/icon-check.svg) center center no-repeat;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.remaining-items {
  display: inline; /* 表示されているか確認 */
  color: #000; /* 必要に応じてフォントカラーも確認 */
}

/* ボタンのスタイル */
.btn-wrap button {
  width: 100%;
  height: 48px;
  background-color: #fd952d;
  border-radius: 10px;
  color: white;
  font-weight: bold;
}

@media (max-width: 480px) {
  .btn-wrap button {
    width: 100%;
  }
}

#id_wdp_border{
  width: 100vw;
  height: 10px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.btn-wrap {
  text-align: center; /* コンテナ内の要素を中央揃えにする */
  margin: 10px auto; /* 必要に応じて上下のマージンを調整 */
  width: auto; /* ボタンの幅に応じて自動調整するように設定 */
  max-width: 380px; /* 最大幅を設定して、デザイン上の意図に合わせる */
}
.btn-wrap button {
  display: inline-block; /* ブロックレベルのインライン表示にする */
  margin: 0 auto; /* 上下のマージンは0、左右のマージンは自動で中央揃え */
  color: white;
  background: #FD952E;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}
.btn-wrap button:focus {
  outline: 3px solid #5FB52B;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.btn-wrap button[disabled] {
  background: #B3B3B3;
}
.btn-wrap a {
  color: white;
  background: #FD952E;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn-wrap a:focus {
  outline: 3px solid #5FB52B;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.btn-wrap.btn-submit {
  position: relative;
}
.btn-wrap.btn-submit button {
  padding-left: 38px;
  background: #F55B31;
  font-size: 0.875rem;
}
.btn-wrap.btn-submit button:disabled {
  background: #B3B3B3;
}
.btn-wrap.btn-submit .free {
  position: absolute;
  display: inline-block;
  width: 38px;
  height: 100%;
  left: 0;
  top: 0;
  color: #fff;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  background: #FD952E;
  border-radius: 10px 0 0 10px;
  font-size: 0.8125rem;
  padding-right: 0.7em;
  font-weight: 700;
}
.btn-wrap button, .btn-wrap a {
  font-size: 1.4rem; /* ボタンのテキストサイズを大きく */
  padding: 12px 24px; /* ボタンのパディングを増やす */
}

.btn-wrap button:hover, .btn-wrap a:hover {
  background-color: #E8842B; /* ホバー時の背景色を少し明るく */
  transition: background-color 0.3s ease; /* スムーズな遷移を追加 */
}
.fwb {
  font-weight: bold;
}
.mt14 {
  margin-top: 14px;
  font-weight: bold; 
}
.radio-wrap-method {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.radio-btn {
  flex: 1;
}

.radio-btn input[type="radio"] {
  display: none;
}

.radio-btn label {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center ;
}

.radio-btn input[type="radio"]:checked + label {
  background-color: #0067D5;
  color: #fff;
  border-color: #0067D5;
}
/* checkbox */
.button-group.custom-checkbox input[type="checkbox"] {
  display: none;
}
.button-group.custom-checkbox label span {
  display: flex;
  justify-content: center;
  align-items: center;  width: 100%;
  height: 50px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #EEEEEE;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #9C9C9B;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.button-group.custom-checkbox input[type="checkbox"]:checked + span {
  background-color: #0067D5;
  color: #fff;
  border-color: #0067D5;
}
.form .label-additional-requests {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 20px;
}

.form .label-inquiry {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* === checkbox text inline for Step2 (.checkbox-group) === */
.checkbox-group {
  padding-top: 10px;
}

.checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* space between box and text */
  line-height: 1.6;    /* improve readability */
  font-weight: normal;
}
.checkbox-group label input[type="checkbox"] {
  margin: 0;           /* reset default */
  width: auto;         /* set width */
  height: auto;       /* set height */
}

/* === custom style for Step2 checkbox list === */
.checkbox-group.step2-style label {
  font-size: 14px;         /* adjustable font size */
  color: #333;             /* adjustable text color */
  padding: 4px 0;
}
.checkbox-group.step2-style label input[type="checkbox"] {
  accent-color: #0067D5;   /* checkbox color */
  transform: scale(1.2);   /* slightly larger checkbox */
}

/* Center the wrapper and keep it tidy on mobile */
.btn-wrap-step3 {
  width: 100%;
  display: flex;
  justify-content: center;   /* 横方向の中央寄せ */
  align-items: center;        /* 高さを持つ場合に縦方向も中央寄せ */
  margin: 20px auto;          /* 上下に余白、左右中央 */
}
@media (min-width: 481px) {
  .btn-wrap-step3 a { max-width: 380px; } /* 画面が広い時は幅を絞る */
}
.btn-wrap-step3 a {
  color: white;
  background: #FD952E;
  width: 80%;
  height: 48px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
/* jQuery UI autocomplete: メール候補がOKバッジより上に表示されるように */
.ui-autocomplete {
  position: absolute;
  z-index: 1000000; /* .form .ok { z-index: 999; } より上 */
}