@charset "utf-8";

/**************************************************************
* g-contact
**************************************************************/
.g-contact {
  position: relative;
  background-color: var(--contact-bg-color);
}
@media all and (min-width: 768px) {
  .g-contact {
    /* margin-top: 12rem; */
    padding: 10rem 0 0;
  }
}
@media all and (max-width: 767px) {
  .g-contact {
    /* margin-top: 4rem; */
    padding: 8rem 0 4rem;
  }
}

/* c-head-container
**************************************************************/
.g-contact .c-head-container {
  text-align: center;
}

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

/* c-inner
**************************************************************/
.g-contact .c-inner {
  max-width: none;
}
@media all and (min-width: 768px) {
  .g-contact .c-inner {
  }
}

/* g-contact-contents
**************************************************************/
.g-contact-contents {
  background-color: #fff;
}
@media all and (min-width: 768px) {
  .g-contact-contents {
    margin-top: 10rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-contents {
    margin-top: 6rem;
  }
}

/* g-contact-info
**************************************************************/
@media all and (min-width: 768px) {
  .g-contact-info {
    width: 28.571%;
  }
}
@media all and (min-width: 768px) and (max-width: 1366px) {
  .g-contact-info {
    width: 60%;
  }
}
@media all and (max-width: 767px) {
}

/* 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;
}

.g-contact-frame.--thanks {
  justify-content: center;
}

@media all and (min-width: 1367px) {
  .g-contact-frame {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 0;
  }
}
@media all and (min-width: 768px) and (max-width: 1366px) {
  .g-contact-frame {
    width: 100%;
    margin: 0 auto 0;
  }
}
@media all and (max-width: 767px) {
  .g-contact-frame {
    padding: 4rem 0;
  }
}

/* g-contact-lead
**************************************************************/
.g-contact-lead {
}
@media all and (min-width: 768px) and (max-width: 1366px) {
  .g-contact-lead {
    display: flex;
    flex-wrap: wrap;
  }
}

/* g-contact-lead__inner
********************************/
@media all and (min-width: 768px) {
  .g-contact-lead__inner + .g-contact-lead__inner {
    margin-top: 8rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead__inner + .g-contact-lead__inner {
    margin-top: 6rem;
  }
}

/* g-contact-lead-txt
********************************/
.g-contact-lead-txt {
  font-weight: bold;
  color: var(--base-font-color);
  line-height: 1.666;
}
@media all and (min-width: 768px) {
  .g-contact-lead-txt {
    font-size: 1.8rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead-txt {
    font-size: 1.4rem;
  }
}

/* g-contact-lead-des
********************************/
.g-contact-lead-des {
  color: var(--base-font-color);
  line-height: 2;
}
@media all and (min-width: 768px) {
  .g-contact-lead-des {
    margin-top: 2rem;
    font-size: 1.6rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead-des {
    font-size: 1.4rem;
  }
}

/* g-contact-lead-info-tel
********************************/
.g-contact-lead-info-tel {
  color: #168352;
  font-weight: bold;
}
@media all and (min-width: 768px) {
  .g-contact-lead-info-tel {
    font-size: 2.8rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead-info-tel {
    font-size: 2rem;
  }
}

/* g-contact-lead-info
**************************************************************/
.g-contact-lead-info {
  border: 0.1rem solid #e5e5e5;
  border-radius: 1rem;
}
@media all and (min-width: 768px) {
  .g-contact-lead-info {
    margin-top: 6rem;
    padding: 4rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead-info {
    margin-top: 4rem;
    padding: 2rem;
  }
}

/* g-contact-lead-info-list
********************************/

/* list__item
********************************/
.g-contact-lead-info-list .list__item {
  color: var(--base-font-color);
  font-weight: bold;
  line-height: 2;
}
@media all and (min-width: 768px) {
  .g-contact-lead-info-list .list__item {
    font-size: 1.6rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead-info-list .list__item {
    font-size: 1.4rem;
  }
}

/* g-contact-lead-info-note
********************************/
.g-contact-lead-info-note {
  color: var(--base-font-color);
  line-height: 2;
}
@media all and (min-width: 768px) {
  .g-contact-lead-info-note {
    margin-top: 3rem;
    font-size: 1.2rem;
  }
}
@media all and (max-width: 767px) {
  .g-contact-lead-info-note {
    margin-top: 3rem;
    font-size: 1.2rem;
  }
}

/* g-contact-form-container
**************************************************************/
.g-contact-form-container {
  background-color: #f29b871a;
}
.g-contact-frame.--thanks .g-contact-form-container {
  display: none;
}
@media all and (min-width: 768px) {
  .g-contact-form-container {
    width: 61.904%;
    margin-left: 9.523%;
    padding: 8rem 7.142% 12rem;
  }
}
@media all and (min-width: 768px) and (max-width: 1366px) {
  .g-contact-form-container {
    width: 100%;
    margin: 8rem auto 0;
  }
}
@media all and (max-width: 767px) {
  .g-contact-form-container {
    margin: 4rem auto 0;
    padding: 4rem 2rem;
  }
}

/* g-contact-form-contents
**************************************************************/
.g-contact-form-contents {
  display: grid;
  grid-template-areas:
    'areaA'
    'areaB'
    'areaC'
    'areaD'
    'areaE'
    'areaF'
    'areaG'
    'areaH'
    'areaI'
    'areaJ';
  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 {
    width: 100%;
    margin: 4rem auto 0;
  }
  .g-contact-form-blk.--type {
    grid-area: areaA;
  }
  .g-contact-form-blk.--name {
    grid-area: areaB;
  }
  .g-contact-form-blk.--kana {
    grid-area: areaC;
  }
  .g-contact-form-blk.--tel {
    grid-area: areaD;
  }
  .g-contact-form-blk.--email {
    grid-area: areaE;
  }
  .g-contact-form-blk.--message {
    grid-area: areaF;
  }
  .g-contact-form-blk.--privacy-policy {
    grid-area: areaG;
    width: 78.048%;
  }
  .g-contact-form-blk.--privacy-agree {
    grid-area: areaH;
  }
  .g-contact-form-blk.--submit-area.--input {
    grid-area: areaI;
  }
  .g-contact-form-blk.--submit-area.--confirm {
    grid-area: areaJ;
  }
}
@media all and (max-width: 767px) {
  .g-contact-form-blk {
    margin-top: 4rem;
  }
}

/* form-blk-lbl
********************************/
.form-blk-lbl {
  display: flex;
  align-items: center;
}

/* form-blk-lbl-name
********************************/
.form-blk-lbl-name {
  color: var(--contact-font-color);
  line-height: 1.5;
}
@media all and (min-width: 768px) {
  .form-blk-lbl-name {
    font-size: 1.6rem;
  }
}
@media all and (max-width: 767px) {
  .form-blk-lbl-name {
    font-size: 1.4rem;
  }
}

/* form-blk-lbl-status
********************************/
.form-blk-lbl-status {
  display: inline-block;
  width: 4.6rem;
  margin-left: 1rem;
  color: #fff;
  text-align: center;
}
.form-blk-lbl-status.--required {
  background-color: var(--contact-status-required-bg-color);
}
.form-blk-lbl-status.--free {
  background-color: var(--contact-status-free-bg-color);
}
@media all and (min-width: 768px) {
  .form-blk-lbl-status {
    padding: 0.4rem 0;
    font-size: 1.2rem;
  }
}
@media all and (max-width: 767px) {
  .form-blk-lbl-status {
    padding: 0.2rem 0;
    font-size: 1rem;
  }
}

/* form-blk-input__inner
********************************/
.form-blk-input__inner {
  display: flex;
  align-items: center;
}
.form-blk-input__inner {
  margin: 1rem 0 0 1rem;
}
.g-contact-form-blk .form-blk-input__inner label {
  display: flex;
  align-items: center;
}

/* form-blk-input
********************************/
@media all and (min-width: 768px) {
  .g-contact-form-blk.--type #type {
    display: flex;
    flex-wrap: wrap;
  }
}

/* form-blk-input-field
********************************/
.form-blk-input-field {
  width: 100%;
  padding: 1rem;
  color: var(--contact-font-color);
  background-color: var(--contact-field-bg-color);
  box-shadow: 0 0.2rem 0.2rem rgb(0 0 0 / 0.16);
}
@media all and (min-width: 768px) {
  .form-blk-input {
    margin-top: 2rem;
  }
  .form-blk-input-field {
    height: 4.4rem;
    font-size: 1.6rem;
  }
}
@media all and (max-width: 767px) {
  .form-blk-input {
    margin-top: 2rem;
  }
  .form-blk-input-field {
    height: 4.4rem;
    font-size: 1.6rem;
  }
}

/* form-blk-textarea-field
********************************/
.form-blk-textarea-field {
  width: 100%;
  padding: 1rem;
  background-color: var(--contact-field-bg-color);
  box-shadow: 0 0.2rem 0.2rem rgb(0 0 0 / 0.16);
}
.form-blk-textarea-field.privacy-policy {
  line-height: 1.66;
  border: 0.1rem solid #e8e7e1;
  background-color: #fff;
}
@media all and (min-width: 768px) {
  .form-blk-textarea-field {
    height: 13.2rem;
    margin-top: 2rem;
    font-size: 1.6rem;
  }
  .form-blk-textarea-field.privacy-policy {
    height: 20.2rem;
    font-size: 1.4rem;
  }
}
@media all and (max-width: 767px) {
  .form-blk-textarea-field {
    height: 13.2rem;
    margin-top: 2rem;
    font-size: 1.6rem;
  }
  .form-blk-textarea-field.privacy-policy {
    font-size: 1.2rem;
  }
}

/* form-blk-radio-field
********************************/
.form-blk-radio-field {
}
.form-blk-input-name {
  margin-left: 0.5rem;
  color: var(--contact-font-color);
}
@media all and (min-width: 768px) {
  .form-blk-input-name {
    font-size: 1.6rem;
  }
}
@media all and (max-width: 767px) {
  .form-blk-input-name {
    font-size: 1.4rem;
  }
}

/* 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: 2rem;
    height: 2rem;
  }
  .form-blk-input-name {
    font-size: 1.6rem;
  }
}

/* form-blk-confirm
********************************/
.form-blk-confirm {
  word-break: break-all;
  width: 100%;
  padding: 1rem;
  background-color: var(--contact-field-bg-color);
}
@media all and (min-width: 768px) {
  .form-blk-confirm {
    font-size: 1.6rem;
  }
}
@media all and (max-width: 767px) {
  .form-blk-confirm {
    font-size: 1.6rem;
  }
}

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