@charset "utf-8";
/* CSS Document */

.cty_txt{
  margin-bottom: 16px;
  line-height: 2;
  color: #212121;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_linkprivacy{
  margin-bottom: 40px;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_linkprivacy a{color: #005198;}

.mtn_notes{
  margin-bottom: 20px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: bold;
  color: #E37604;
  opacity: 0;
  transition: all 0.3s linear;
}

.active .cty_txt,
.active .cty_linkprivacy,
.active .mtn_notes{opacity: 1;}

.cty_form{
  max-width: 1098px;
  padding: 70px 88px 160px;
  background: url("../img/common/ph_lightgray.png");
}

.cty_form dl{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.cty_form dt{
  width: 188px;
  margin-bottom: 40px;
  font-weight: bold;
  color: #212121;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_form dt:last-of-type{padding-bottom: 288px;}
.cty_require{
  margin-left: 8px;
  font-size: 1.125rem;
  font-weight: bold;
  color: #E37604;
}
.cty_form dd{
  width: calc(100% - 188px);
  margin-bottom: 40px;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_form dt:nth-of-type(2),
.cty_form dd:nth-of-type(2){transition-delay: 0.15s;}
.cty_form dt:nth-of-type(3),
.cty_form dd:nth-of-type(3){transition-delay: 0.3s;}
.cty_form dt:nth-of-type(4),
.cty_form dd:nth-of-type(4){transition-delay: 0.45s;}
.cty_form dt:nth-of-type(5),
.cty_form dd:nth-of-type(5){transition-delay: 0.6s;}
.cty_form dt:nth-of-type(6),
.cty_form dd:nth-of-type(6){transition-delay: 0.75s;}
.cty_form dt:nth-of-type(7),
.cty_form dd:nth-of-type(7){transition-delay: 0.9s;}
.cty_form dt:nth-of-type(8),
.cty_form dd:nth-of-type(8){transition-delay: 1.05s;}
.cty_form dt:nth-of-type(9),
.cty_form dd:nth-of-type(9){transition-delay: 1.2s;}
.cty_form dt:nth-of-type(10),
.cty_form dd:nth-of-type(10){transition-delay: 1.35s;}
.cty_form dt:nth-of-type(11),
.cty_form dd:nth-of-type(11){transition-delay: 1.5s;}
.cty_form dl.active dt,
.cty_form dl.active dd{opacity: 1;}

.cty_form dd input,
.cty_form dd textarea{
  width: 100%;
  min-height: 80px;
  padding: 24px 20px;
  font-size: 1.125rem;
  border-radius: 4px;
  border: none;
  background-color: #EBEDF3;
}
.cty_form dd textarea{height: 360px;}
/*radiobutton*/
.cty_radio label{
  display: block;
  margin-bottom: 16px;
  color: #212121;
  cursor: pointer;
}
.cty_radio label:last-of-type{margin-bottom: 0;}
.cty_radio label input[type="radio"]{
  position: absolute;
  visibility: hidden;
  width: auto;
}
.cty_radio label span{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: -2px;
  margin-right: 6px;
  vertical-align: middle;
  border: 2px solid #CCCCCC;
  border-radius: 100%;
  background-color: #F0F4F7;
}
.cty_radio label:hover span,
.cty_radio label:focus span{border-color: #999999;}
.cty_radio label span::after{
  content: "";
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  left: 3px;
  top: 3px;
  border-radius: 100%;
  background-color: #AAAAAA;
}
.cty_radio label input[type="radio"]:checked+span{border-color: #999999;}
.cty_radio label input[type="radio"]:checked+span::after{display: block;}

.cty_error{
  display: none;
  margin-top: 5px;
  padding-left: 10px;
  font-size: 0.875rem;
  color: #EE675C;
}


.cty_side{display: flex;}
.cty_side>p{width: 50%;}
.cty_side>p input{width: 70%;}
.cty_mgb{margin-bottom: 8px;}



.cty_caution{
  width: 632px;
  line-height: 2;
  margin: 0 auto 32px;
  text-align: center;
  color: #212121;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_caution a{color: #3168B0;}
.cty_checkagree{
  width: 632px;
  margin: 0 auto 40px;
  text-align: center;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_checkagree label input{
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.cty_checkagree label i{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 2px;
  background-color: #F0F4F7;
  border: 1px solid #CCCCCC;
}
.cty_checkagree label p{
  display: inline-block;
  font-size: 0.875rem;
  color: #212121;
}
.cty_checkagree label input[type="checkbox"]:checked+i::before{
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 4px;
  left: 2px;
  top: 1px;
  border-left: 3px solid #333333;
  border-bottom: 3px solid #333333;
  border-right: 6px solid transparent;
  border-top: 2px solid transparent;
  border-radius: 1px;
  transform: rotate(-50deg) skewX(-15deg);
}

.cty_btnarea{
  width: 352px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_submit{
  width: 100%;
  height: 60px;
  font-size: 0.875rem;
  font-weight: bold;
  border: none;
  color: #FFFFFF;
  border-radius: 2px;
  background-color: #004EA2;
  cursor: pointer;
}

.cty_caution.active,
.cty_checkagree.active,
.cty_btnarea.active{opacity: 1;}

.cty_confirm{margin-bottom: 96px;}
.cty_form .cty_confirm dt:last-of-type{padding-bottom: 0;}


.cty_back{
  width: 50%;
  height: 60px;
  margin: 0 auto 40px;
  font-size: 0.875rem;
  color: #212121;
  border-radius: 2px;
  border: 1px solid #707070;
  background-color: #FFFFFF;
  cursor: pointer;
}
.cty_confirm .cty_submit{margin-bottom: 32px;}



.cty_form h2{
  margin-bottom: 48px;
  font-size: 1.25rem;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_completetxt{
  margin-bottom: 16px;
  opacity: 0;
  transition: all 0.3s linear 0.15s;
}
.cty_form.active h2,
.cty_form.active .cty_completetxt{opacity: 1;}




@media screen and (min-width:821px){
  .cty_submit:hover{opacity: 0.7;}
  .cty_back:hover{opacity: 0.7;}
}









@media screen and (max-width:428px){
  .cty_form{
    margin-bottom: 32px;
    padding: 72px 16px 56px;
  }
  .cty_txt{font-size: 0.75rem;}
  .cty_linkprivacy{
    margin-bottom: 20px;
    font-size: 0.875rem;
  }
  .cty_form dt{
    width: 100%;
    margin-bottom: 8px;
  }
  .cty_form dt:last-of-type{padding-bottom: 0;}
  .cty_form dd{
    width: 100%;
    margin-bottom: 24px;
  }
  .cty_form dd input{
    min-height: 50px;
    padding: 12px 20px;
  }
  .cty_form dd textarea{padding: 12px;}



  .cty_caution{
    width: 100%;
    font-size: 0.75rem;
  }
  .cty_checkagree,
  .cty_btnarea{width: 100%;}




  .cty_form .cty_confirm dd{margin-bottom: 32px;}


  .cty_completetxt{font-size: 0.75rem;}
}