@charset "utf-8";

/**************************************************************
* g-contact
**************************************************************/


/* c-head-container.--g-contact
**************************************************************/
@media all and (min-width: 768px) {
  .c-head-container.--g-contact {

  }
}
@media all and (max-width: 767px) {
  .g-contact {}
}

/* c-head-vl-2
********************************/
.c-head-container.--g-contact .c-head-vl-2 {
	color: #fff;
}
@media all and (min-width: 768px) {
  
}
@media all and (max-width: 767px) {
  .g-contact {}
}

/* c-head-vl-2__ttl
********************************/
@media all and (min-width: 768px) {
  .g-contact .c-head-vl-2__tt-txt {
    font-size: 32px;
  }
  .g-contact .c-head-vl-2__ttl {
    font-size: 16px;
  }
}



/* g-contact-contents
**************************************************************/


/* g-contact-frame
********************************/
.g-contact-frame {
	margin: 0 auto;
}
.g-contact-frame .--input,
.g-contact-frame .--confirm,
.g-contact-frame .--thanks
{
	display: none;
}

.g-contact-frame.--input .--input {
	display: block;
}
.g-contact-frame.--confirm .--confirm {
	display: block;
}
.g-contact-frame.--thanks .--thanks {
	display: block;
}
@media all and (min-width: 768px) {
	.g-contact-frame {
		max-width: 100rem;
	}
}
@media all and (max-width: 767px) {
  .g-contact-frame {
	}
}


/* g-contact-lead
**************************************************************/
.g-contact-lead {

}

/* g-contact-lead-txt
********************************/
.g-contact-lead-txt {
	text-align: center;
	line-height: 1.666;
}
@media all and (min-width: 768px) {
	.g-contact-lead-txt {
		margin-top: 80px;
		font-size: 18px;
	}
}
@media all and (max-width: 767px) {
	.g-contact-lead-txt {
		margin-top: 40px;
		font-size: 14px;
	}
}


/* g-contact-form-container
**************************************************************/
.g-contact-frame.--thanks .g-contact-form-container {
	display: none;
}
@media all and (min-width: 768px) {
	.g-contact-form-container {
		margin-top: 80px;
	}
}

/* g-contact-form-contents
**************************************************************/
.g-contact-form-contents {
	display: grid;
	grid-template-areas:
        "areaA"
        "areaB"
        "areaC"
        "areaD"
        "areaE"
        "areaF"
        "areaG"
        "areaH"
        "areaI";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* g-contact-form-blk
**************************************************************/
.g-contact-frame.--confirm .g-contact-form-blk.--privacy-policy {
	margin-top: 0;
}
@media all and (min-width: 768px) {
	.g-contact-form-blk {
    display: flex;
    flex-wrap: wrap;
		width: 100%;
		margin: 60px auto 0;
	}
	.g-contact-form-blk.--type {
		grid-area: areaA;
	}
	.g-contact-form-blk.--name {
		grid-area: areaB;
	}
	.g-contact-form-blk.--tel {
		grid-area: areaC;
	}
	.g-contact-form-blk.--email {
		grid-area: areaD;
	}
	.g-contact-form-blk.--message {
		grid-area: areaE;
	}
	.g-contact-form-blk.--privacy-policy {
		grid-area: areaF;
		width: 100%;
	}
	.g-contact-form-blk.--privacy-agree {
		grid-area: areaG;
	}
	.g-contact-form-blk.--submit-area.--input {
		grid-area: areaH;
	}
	.g-contact-form-blk.--submit-area.--confirm {
		grid-area: areaI;
	}
}
@media all and (max-width: 767px) {
	.g-contact-form-blk {
		margin-top: 40px;
	}
}

/* form-blk-lbl
********************************/
.form-blk-lbl {
	display: flex;
	align-items: center;
  position: relative;
}
@media all and (min-width: 768px) {
  .form-blk-lbl {
    flex-wrap: wrap;
    width: 226px;
  }
}

/* form-blk-lbl-name
********************************/
.form-blk-lbl-name {
  padding-left: 18px;
	line-height: 1.5;
}
@media all and (min-width: 768px) {
	.form-blk-lbl-name {
		font-size: 16px;
	}
}
@media all and (max-width: 767px) {
	.form-blk-lbl-name {
		font-size: 14px;
	}
}

/* form-blk-lbl-status
********************************/
.form-blk-lbl-status {
	display: block;
  position: absolute;
  top: 50%;
  left: 0;
	width: 10px;
  margin: auto 0 auto 0;
	color: #fff;
	text-align: center;
  border-radius: 100%;
  transform: translate(0, -50%);
}
.form-blk-lbl-status.--required {
  background-color: #fff;
}
.form-blk-lbl-status.--free {
	background-color: #2254c4;
}
@media all and (min-width: 768px) {
	.form-blk-lbl-status {
    padding: 5px 0;
		font-size: 0;
	}
}
@media all and (max-width: 767px) {
	.form-blk-lbl-status {
    padding: 5px 0;
		font-size: 0;
	}
}


/* form-blk-input__inner
********************************/
.form-blk-input__inner {
	display: flex;
  align-items: center;
}
.form-blk-input__inner:nth-child(n + 2) {
  margin-top: 10px;
}
.g-contact-form-blk .form-blk-input__inner label {
	display: flex;
  align-items: center;
}


/* form-blk-input
********************************/
.form-blk-input {

}


/* form-blk-input-field
********************************/
.form-blk-input-field {
	width: 100%;
	padding: 10px;
  color: #000;
  border-radius: 10px;
	background-color: #fff;
}
@media all and (min-width: 768px) {
	.form-blk-input {
    width: calc(100% - 226px);
	}
  .--privacy-agree .form-blk-input,
  .--submit-area .form-blk-input
  {
    width: 100%;
  }
	.form-blk-input-field {
    height: 64px;
		font-size: 16px;
	}
  .g-contact-form-blk.--privacy-policy .form-blk-input {
    width: 100%;
  }
}
@media all and (max-width: 767px) {
	.form-blk-input {
		margin-top: 20px;
	}
	.form-blk-input-field {
		height: 44px;
		font-size: 16px;
	}
}


/* form-blk-textarea-field
********************************/
.form-blk-textarea-field {
	width: 100%;
	padding: 14px;
  border-radius: 10px;
  color: #000;
	background-color: #fff;
}
.form-blk-textarea-field.privacy-policy {
  color: #fff;
	line-height: 1.66;
	border: 1px solid #fff;
	background-color: transparent;
}
@media all and (min-width: 768px) {
	.form-blk-textarea-field {
		height: 128px;
		font-size: 16px;
	}
	.form-blk-textarea-field.privacy-policy {
		font-size: 14px;
	}
}
@media all and (max-width: 767px) {
	.form-blk-textarea-field {
		height: 132px;
		margin-top: 20px;
		font-size: 16px;
	}
	.form-blk-textarea-field.privacy-policy {
		font-size: 12px;
	}
}


/* form-blk-radio-field
********************************/
.form-blk-radio-field {
	
}
.form-blk-input-name {
	margin-left: 16px;
}
@media all and (min-width: 768px) {
	.form-blk-input-name {
		font-size: 16px;
	}
}
@media all and (max-width: 767px) {
	.form-blk-input-name {
		font-size: 14px;
	}
}


/* form-blk-checkbox-field
********************************/
.form-blk-checkbox-field {
	
}
.g-contact-form-blk.--privacy-agree .form-blk-input__inner {
	justify-content: center;
}
@media all and (min-width: 768px) {
	.form-blk-checkbox-field {
		width: 20px;
		height: 20px;
	}
	.form-blk-input-name {
		font-size: 16px;
	}
}


/* form-blk-confirm
********************************/
.form-blk-confirm {
	width: 100%;
  padding: 10px;
  background-color: transparent;
}
@media all and (min-width: 768px) {
	.form-blk-confirm {
		height: 44px;
    font-size: 16px;
	}
}
@media all and (max-width: 767px) {
	.form-blk-confirm {
		height: 44px;
    font-size: 16px;
	}
}


/* form-blk-input-err
********************************/
.form-blk-input-err {
  margin-top: 10px;
  color: #AD2D27;
}
.--privacy-agree .form-blk-input-err {
  text-align: center;
}
@media all and (min-width: 768px) {
	.form-blk-input-err {
    font-size: 16px;
	}
}
@media all and (max-width: 767px) {
	.form-blk-input-err {
    font-size: 14px;
	}
}