@charset "UTF-8";
/* CSS Document */
/*------------------------------------------------------------
	メールフォーム
------------------------------------------------------------*/

#header {
  height: 120px;
}
#header h1 {
  display: block;
  padding-top: 5%;
  text-align: center;
  font-weight: 900;
  font-size: 2.4rem;
  color: #ea7c06;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}

@media only screen and (max-width: 750px) { 
  #header {
    height: 60px;
     background-size:100%;
  }
  #header h1 {
    font-size: 1.6rem;
  }
}
#form {
	width: 100%;
	max-width: 960px;
	text-align: center;
	margin: 30px auto;
	font-size: 16px;
	line-height: 150%;
    background: #fff;
  border-radius: 10px;
  border: 3px solid #ea7c06;
  box-sizing: border-box;
}
@media only screen and (max-width: 750px) { 
  #form {
    width: 90%;
    padding: 5% 0;
  }
}
#form a.tel {
	font-weight: 700;
}
#form h3 {
	width: 100%;
	font-size: 30px;
	margin: 0 auto 5% auto;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
  font-weight: 900;
	line-height: 150%;
}

#form h4 {
	width: 100%;
	margin: 30px auto 30px;
	padding: 20px;
	background: #0b8b37; /* 緑 */
	color: #FFF;
	text-align: center;
	box-sizing: border-box;
}
#form h5 {
	width: 100%;
	font-size: 20px;
	box-sizing: border-box;
	margin: 20px 0 10px 0;
}
#form h5.kamoku {
	font-size: 16px;
	border-bottom: 1px solid #333;
	margin: 0 0 10px 0;
}
#form .ymd h6 {
	margin-top: .75em;
}
#form .ymd h6:first-of-type {
	margin-top: 0em;
}
.formWrap {
	width: 90%;
	margin: 0 auto 0;
	padding: 0;
	text-align: left;
	box-sizing: border-box;
}
.formWrap p {
	margin-bottom: 1em;
}
.formCheck {
	width: 90%;
	margin: 5% auto 0;
	text-align: center;
}
.formCheck a {
	text-decoration: underline;
}
#form .must {
	background-color: #DC1C24; /*赤*/
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	margin: 0 10px 5px 0px;
	padding: 0 10px 0;
	text-decoration: none;
	text-shadow: 0px 1px 0px #810e05;
}
#form .must-new {
	background-color:#3DC86D; /*みどり*/
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	margin: 0 10px 5px 0px;
	padding: 0 10px 0;
	text-decoration: none;
	text-shadow: 0px 1px 0px #0b8b37;
}
#form li, dd {
	padding: 0 0 10px;
}
#form dd input {
	padding: 10px;
	box-sizing: border-box;
}
#form dd input[type="radio"] {
	margin: 0 0 0 1em;
	padding: 0;
}
.mailform dt {
  padding-bottom: 10px;
}
.form-i {
	width: 100%;
	/*margin: 0 0 20px;*/
	font-size: 16px;
	background: #FFF;
	border: 1px solid #999;
	border-radius: 3px;
}
.form-i2 {
	width: 12rem;
	margin: 0 0 20px;
	font-size: 16px;
	background: #FFF;
	border: 1px solid #999;
  text-align: left !important;
}
#form hr {
	margin: 10px auto 30px;
	border: 1px dotted #CCC;
}
#form input[type=text] {
	height: 45px;
}
#form input[type=tel] {
	height: 45px;
}
#form input[type=email] {
	height: 45px;
}
#form select {
	width: 100%;
	height: 45px;
	padding: 3px 8px;
	font-size: 1.25em;
}
#form input[type=checkbox] {
	margin: 0 1em;
	-ms-transform: scale(1.5, 1.5);
	-webkit-transform: scale(1.5, 1.5);
	transform: scale(1.5, 1.5);
}
#form textarea {
	box-sizing: border-box;
	width: 100% !important;
	padding: 3px 8px;
	height: 140px !important;
}
#form .time {
/*margin-bottom: .75em;*/
}
/* ボタン　*/
.contactBtn_01 {
	padding: 4px;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #FF7C00;
	background: -moz-linear-gradient( center top, #FBB203 30%, #FF7C00 70% );
	background: -ms-linear-gradient( top, #FBB203 30%, #FF7C00 70% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBB203', endColorstr='#FF7C00');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(30%, #FBB203), color-stop(70%, #FF7C00) );
	background-color: #FBB203;
	color: #FFF;
	display: inline-block;
	box-shadow: 0px 2px 2px rgba(000,000,000,0.3);
}
.contactBtn_01:hover {
	background: -moz-linear-gradient( center top, #ff9600 35%, #fcbd34 70% );
	background: -ms-linear-gradient( top, #ff9600 35%, #fcbd34 70% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9600', endColorstr='#fcbd34');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(35%, #ff9600), color-stop(70%, #fcbd34) );
	background-color: #ff9600;
}
.contactBtn_01:active {
	position: relative;
	top: 5px;
}
.formButton {
	width: 700px;
	height: 70px;
	margin: 50px 0;
	font-size: 18px;
}
.mfp_element_all {
	max-width: 100% !important;
}
#contact #about_company {
	margin-top: 0;
	padding: 3% 0;
}

@media only screen and (max-width: 750px) {
#form {
	margin: 5% auto;
	line-height: 140%;
}
#form h3 {
	font-size: 1.4em;
	margin: 4% autoo;
	padding: 0;
}
#form h4 {
	margin: 2% auto 4%;
	padding: 15px;
	font-size: 1.25em;
}
.formButton {
	width: 80%;
	height: 70px;
	margin: 3% 0;
	font-size: 1.5em;
}
#contact #about_company {
	padding: 2% 0;
}
#form .thx {
	margin-bottom: 15%;
}
#form .thx h3 {
	font-size: 1.25em;
}
}

@media only screen and (min-width: 751px) {
#form a.tel {
	pointer-events: none;/*リンクを非リンクに変える*/
	cursor: default;/*マウスカーソルを矢印のまま変えない*/
}
}


/*------------------------------------------------------------
	追加CSS 無料体験専用フォーム
　　2021.3.26 write:アルファ長浜
------------------------------------------------------------*/

  .formCheck .privacy {
      font-size: 1.2rem;
      line-height: 1.4;
    }
    .mfp__privacy {
      padding-top: 3%;
      margin-bottom: 4%;
      font-size: 1.2rem;
    }
    
    .tryalform__btn-wrap {
       position: relative;
      margin-top: 60px;
    }
    .tryalform__btn-wrap .contactBtn_01 {
      position: relative;
    }
  .tryalform__btn-wrap .bene-box {
  position: absolute;
  top: -4rem;
  left: calc(50% - 250px);
  display: block;
  width: 500px;
  padding: 1rem 0;
  border:2px solid #FF7C00;
  border-radius: 100vh;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
      z-index: 10;
    }
.tryalform__btn-wrap .bene-box:before,
.tryalform__btn-wrap .bene-box:after {
  position: absolute;
  left: calc(50% - 10px);
  content: "";
}
.tryalform__btn-wrap .bene-box:before {
  bottom: -10px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #FF7C00 transparent transparent transparent;
}

.tryalform__btn-wrap .bene-box:after {
  bottom: -7px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}    
    .tryalform__btn-wrap .bene-box strong {

    }
.tryalform__btn-wrap .bene-box strong.red {
      color: red;
    }
    .tryalform__btn-wrap .formButton {
      margin: 0 auto;
    }
    .tryalform__btn-wrap .contactBtn_01 i {
      padding-right: 1rem;
    }
    @media only screen and (max-width: 750px) {
    .tryalform__btn-wrap {
        margin-top: 25%;
      }
      .tryalform__btn-wrap .bene-box {
         width: 70%;
        max-width: 380px;
         left:50%;
         transform: translateY(-50%) translateX(-50%);
         padding: 10px 10px;
         font-size: 1.6rem;
      }
    }
  @media only screen and (min-width: 751px) { 
   .tryalform__btn-wrap .formButton {
      font-size: 2.2rem;
      font-weight: 700;
    }
    }


/*------------------------------------------------------------
	追加CSS フォーム姓名分割
　　2021.4.28 write:アルファ長浜
------------------------------------------------------------*/
.mailform .form-name__block {
  display: flex;
  align-items: center;
}
.mailform .form-name__block .form-name__block-wrap {
  display: flex;
  align-items: center;
  width: 40%;
  margin-left: 1%;
  margin-right: 2%;
}
.form-name__block-wrap span {
  display: flex;
  width: 6rem;
}
.form-name__block-wrap span.form-name__kana {
  width: 14rem;
}
@media only screen and (max-width: 750px) { 
  .mailform .form-name__block {
    flex-wrap: wrap;
  }
.mailform .form-name__block .form-name__block-wrap {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
  .form-name__block-wrap span.form-name__kana {
  width: 10rem;
}
}


.formWrap {
  margin-bottom: 4%;
}
.formWrap .attention {
  font-size: 1.4rem;
}
@media only screen and (max-width: 750px) { 
  .formWrap .attention {
  font-size: 1.2rem;
}
}
.formWrap .form-email {
	width: 70%;
	margin: 0 ;
	font-size: 16px;
}
.formWrap .form-pwd {
	width: 20%;
}
@media only screen and (max-width: 750px) { 
.formWrap .form-name__input {
  margin-bottom: 2%;
}
  .formWrap .form-email {
    width: 100%;
  }
.formWrap .form-pwd {
	width: 40%;
}
}

#form .thx {
  padding: 5%;
  box-sizing: border-box;
}

.mailform dt:not(:first-child)  {
  margin-top: 1rem;
}

/*　ラジオボタン */

/* 性別*/
#form .form-radio__mf {
  display: flex;
  justify-content: center;
  align-items: center;
}
#form .form-radio__mf .form-radio__child {
  display: flex;
  justify-content: flex-start;
  margin-right: 10%;
}

/* レベル */
#form .form-radio__level {

}
#form .form-radio__level .form-radio__child {
  display: flex;
  justify-content: flex-start;
  padding-bottom: .5rem;
  font-size: 1.4rem;
}

#form .radio-input{
  display: none;
}
#form label.form-radio__child {
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
#form  label.form-radio__child::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
#form .radio-input:checked + label.form-radio__child {
  color: #d01137;
}
#form .radio-input:checked + label.form-radio__child::after{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #d01137;
  border-radius: 50%;
}

#form .form-radio__child span {
  display: block;
  margin-top: -2px;
}

#form dt.mfp {
  font-weight: 700;
}


/*　生年月日　 */
#form .form-select-ymd {
  display: flex;
  flex-wrap: wrap;
}
#form select.form-select__year {
  width: 24%;
}
#form select.form-select__md {
  width: 20%;
}
#form select.form-select__time {
  width: 25%;
}
#form .form-select-ymd  span.form-select__txt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2%;
  padding: 0 3% 0 1%;
}
@media only screen and (max-width: 750px) { 
  #form select.form-select__year {
  width: 30%;
}
#form select.form-select__md {
  width: 25%;
}
  #form select.form-select__time {
    margin-top: .75rem;
  width: 70%;
}
#form .form-select-ymd  span.form-select__txt {
  width: 3%;
  padding: 0 2% 0 1%;
}
  
}


/*　予約日時　 */
.form-reserve__attention {
  display: block;
  font-size: 1.4rem;
}
.form-reserve__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 15%;
}
.form-reserve__attention strong {
  font-weight: 700;
}
@media only screen and (max-width: 750px) { 
.form-reserve__txt {
  display: block;
  width: 100%;
  font-size: 1.3rem;
}  
#form .form-reserve__txt .must-new {
  font-size: 1.2rem;
  margin-bottom: 3px;
  padding: 0 5px 0;
}
}

/*　確認画面のレイアウト崩れ　 */
table#mfp_confirm_table tr th {
  white-space: normal;
  width: 50%;
}