@charset "UTF-8";

#form{
    margin-top: 100px;
}

.formPart{
	display: flex;
	flex-wrap: wrap;
}

.formPart dt {
    flex-basis: 200px;
    display: flex;
    height: 60px;
    line-height: 60px;
}

.formPart dd{
	flex-basis: 700px;
	margin-bottom: 30px;
}

.formPart dd.flex{
    display: flex;
    justify-content: space-between;
}

.formPart dd.flex input[type="text"]{
    width: 48%;
}


input[type="button"],input[type="text"],input[type="submit"],input[type="image"],textarea{
    -webkit-appearance: none;
    border-radius: 0;
}

input[type="text"], input[type="tel"], input[type="email"]{
	background-color: #000;
    width: 100%;
    line-height: 60px;
    height: 60px;
    font-size: 1.6rem;
    font-size: 16px;
    padding: 20px;
    border: 1px solid #707070;
    color: #fff;
}

select {
	color: #707070;
    background: #000;
    border: 1px solid #707070;
    line-height: 60px;
    height: 60px;
    padding-left: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px!important;
    font-size: 1.6rem!important;
}

.selectWrap{
	position: relative;
}

.selectWrap .required{
    color: #fff;
}


.selectWrap::after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 20px;
    margin: auto;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 10px;
    border-bottom: 2px solid #707070;
    border-right: 2px solid #707070;
    transform: rotate(45deg);
}


textarea{
	background-color: #000;
	width: 100%;
	height: 200px;
	border: 1px solid #707070;
	padding: 20px;
	font-size: 1.6rem;
    font-size: 16px;
    color: #fff;	
}

input[type=checkbox] {
    display: inline-block;
    margin-right: -3px;
    display: none;
}


input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-left: 24px;
}


.checkbox-input + span::before, input[type="checkbox"] + label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -10px;
    background: #ffffff;
}

.checkbox-input + span::before, input[type="checkbox"] + label::before {
    border: 2px solid #000;
}


input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 4px;
    width: 11px;
    height: 6px;
    border-left: 2px solid #A70CA1;
    border-bottom: 2px solid #A70CA1;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.checkbox-input{
    display: none;
}


.requredColor{
	color:#CC0000; 
}

.sumbitBox{
	width: 700px;
	float: right;
	margin-bottom: 200px;
}

.agreeCheckBox{
	text-align: center;
	margin-bottom: 40px;
}

.agreeCheckBox a{
	color: #fff;
	text-decoration: underline;
    text-underline-offset: 0.3rem;
}

.btnSubmit{
	border:1px solid #fff;
	color: #fff;
	line-height: 60px;
	height: 60px;
    min-width: 200px;
}

.submitConfirm{
	width: 100%;
	pointer-events: none;
    border:1px solid #707070;	
}

.submitConfirm.clear:hover{
    border:1px solid #A70CA1;
    background-color: #A70CA1;
}

.submitConfirm.clear:hover::after{
  content: "";
  position: absolute;
  width: 100px;
  height: 1px;
  background-color: #fff;
  top:0;
  bottom: 0;
  right: -50px;
  margin:auto;
}

.submitConfirm.clear {
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: all 0.2s;
    opacity: 1 !important;
	border:1px solid #fff;
	color: #fff;    
}

.confirm{
    padding-top: 100px;
}

.confirm .selectWrap::after {
    display: none;
}

.confirm .formPart {
    align-items: flex-start;
}

.confirm .formPart dt {
    height: auto;
    line-height: 1.2;
}

.confirm .formPart dt, 
.confirm .formPart dd{
	min-height: 60px;
}	

.confirm .formPart dd.flex{
    display: block;
}

.confirm .agreeCheckBox{
    display: none;
}

.complete_en{
    padding: 200px 0 0;
}

.completeTtl{
    font-size: 3.6rem;
    text-align: center;
    padding-bottom: 30px;
}

.completeIntro{
    text-align: center;
    padding-bottom: 30px;
}

.pageTtl.flex{
    display: flex;
    align-items: baseline;
}

.btnLanguaue{
    margin-left: 50px;
    font-size: 16px!important;
    display: flex;
    transition: transform 1s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, 110%, 0);    
}

.btnLanguaue.fadeUp{
    transform: translate3d(0, 0, 0);    
}


.btnLanguaue li {
  margin-right: 10px;
  color: #fff;
  position: relative;
  padding-right: 20px;
}

.btnLanguaue li:first-child:after{
    content: "-";
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
} 


.btnLanguaue li a{
    color: #707070;
}

.submitSend{
    width: 510px;
    border: #A70CA1; 
    background: #A70CA1;
}

.confirm .sumbitBox {
  width: 100%;
  margin: 50px auto 200px;
  display: flex;
  justify-content: center;
}


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

1024px

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

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


.sumbitBox{
    float: none;
}



}



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

768px

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

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

#form{
    width: 90%;
    margin: 0 auto;
}

.sumbitBox{
    width: 100%;
    margin: 0 auto 80px;
}

.formPart dt:first-child{
    margin-top: 15vw;
}

.formPart dt{
    padding: 8px 0;
}



input[type="text"], input[type="tel"], input[type="email"], .selectWrap .required{
    font-size: 1.4rem;
}

.confirm .formPart {
    padding: 0 20px;
}

.btnSubmit {
    margin: 0 auto 20px;
    display: block;
}

.complete{
    padding:0 20px;
}


.confirm .formPart dd{
	border-bottom: 1px solid #fff;
}

.complete_en{
    padding: 100px 0 0;
}

.submitSend {
  width: auto;
}


}