@charset "UTF-8";
/*----------------------------------------

	CONTACT FORM CSS

-----------------------------------------*/
/*----------------------------------------
	- STEP（共通）
-----------------------------------------*/
.step-list {
  display: grid;
  grid-template-columns: auto 1fr auto;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .step-list {
    width: min(424px, 90%);
  }
}
@media screen and (max-width: 768px) {
  .step-list {
    padding-inline: 5vw;
  }
}
.step-list li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .step-list li {
    gap: 5px;
  }
}
@media screen and (max-width: 768px) {
  .step-list li {
    gap: 1.25vw;
  }
}
.step-list li span:nth-of-type(1) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-flashwhite);
  border-radius: 50%;
  margin-inline: auto;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .step-list li span:nth-of-type(1) {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 768px) {
  .step-list li span:nth-of-type(1) {
    width: 7.5vw;
    height: 7.5vw;
  }
}
.step-list li span:nth-of-type(1)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  height: 40%;
  transform: translate(-50%, -50%);
  background-color: var(--color-platinum);
  border-radius: 50%;
}
.step-list li .font16_16 {
  font-weight: var(--font-medium);
  text-align: center;
  line-height: 2;
  color: var(--color-silver);
}
.step-list li.is-current span:nth-of-type(1)::before {
  background-color: var(--color-primarydefault);
}
.step-list li.is-current .font16_16 {
  color: var(--color-blackolive);
}
.step-list li:nth-of-type(1)::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 50%;
  height: 2px;
  background-color: var(--color-platinum);
}
@media screen and (min-width: 769px) {
  .step-list li:nth-of-type(1)::before {
    top: 14px;
  }
}
@media screen and (max-width: 768px) {
  .step-list li:nth-of-type(1)::before {
    top: calc(3.75vw - 1px);
  }
}
.step-list li:nth-of-type(2)::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-platinum);
}
@media screen and (min-width: 769px) {
  .step-list li:nth-of-type(2)::before {
    top: 14px;
  }
}
@media screen and (max-width: 768px) {
  .step-list li:nth-of-type(2)::before {
    top: calc(3.75vw - 1px);
  }
}
.step-list li:nth-of-type(3)::before {
  content: "";
  position: absolute;
  right: 50%;
  width: 50%;
  height: 2px;
  background-color: var(--color-platinum);
}
@media screen and (min-width: 769px) {
  .step-list li:nth-of-type(3)::before {
    top: 14px;
  }
}
@media screen and (max-width: 768px) {
  .step-list li:nth-of-type(3)::before {
    top: calc(3.75vw - 1px);
  }
}

/*----------------------------------------
	- お問い合わせフォーム
-----------------------------------------*/
.contact .box01 {
  background-color: var(--color-ghostwhite);
}
@media screen and (min-width: 769px) {
  .contact .box01 {
    margin-block-start: 150px;
    padding: 36px 40px;
  }
}
@media screen and (max-width: 768px) {
  .contact .box01 {
    margin-block-start: 20vw;
    padding-block: 6vw;
  }
}
.contact .box01 .font16_14 {
  line-height: 2;
}
.contact .box01 .c-list--dots {
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .contact .box01 .c-list--dots {
    margin-block-start: 12px;
  }
}
@media screen and (max-width: 768px) {
  .contact .box01 .c-list--dots {
    margin-block-start: 2.5vw;
  }
}
.contact .box01 .c-list--dots li::before {
  width: 1em;
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  .contact .box01 .c-list--dots li + li {
    margin-block-start: 4px;
  }
}
@media screen and (max-width: 768px) {
  .contact .box01 .c-list--dots li + li {
    margin-block-start: 1vw;
  }
}
.contact .box01 .font14_11 {
  color: var(--color-smokegray);
}
@media screen and (min-width: 769px) {
  .contact .box01 .font14_11 {
    margin-block-start: 12px;
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .contact .box01 .font14_11 {
    margin-block-start: 2.5vw;
    line-height: 1.5;
  }
}
.contact .box01 .font14_11::before {
  content: "※";
}
@media screen and (min-width: 769px) {
  .contact .box02 {
    margin-block-start: 99px;
  }
}
@media screen and (max-width: 768px) {
  .contact .box02 {
    margin-block-start: 20vw;
  }
}

.form form {
  margin-inline: auto;
  display: grid;
}
@media screen and (min-width: 769px) {
  .form form {
    width: min(780px, 90%);
    margin-block-start: 80px;
  }
}
@media screen and (max-width: 768px) {
  .form form {
    width: 100%;
    margin-block-start: 12.5vw;
  }
}
.form form .column2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 60px;
       column-gap: 60px;
}
@media screen and (max-width: 768px) {
  .form form .column2 {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 769px) {
  .form form fieldset {
    margin-block-start: 36px;
  }
}
@media screen and (max-width: 768px) {
  .form form fieldset {
    margin-block-start: 6vw;
  }
}
.form form fieldset legend {
  font-weight: var(--font-medium);
}
@media screen and (min-width: 769px) {
  .form form fieldset legend {
    line-height: 2;
    margin-block-end: 10px;
  }
}
@media screen and (max-width: 768px) {
  .form form fieldset legend {
    margin-block-end: 1.5vw;
  }
}
@media screen and (min-width: 769px) {
  .form form fieldset .font16_14 {
    line-height: 2;
  }
}
.form form fieldset:has(:required) legend .font16_14, .form form fieldset:has(.required) legend .font16_14 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .form form fieldset:has(:required) legend .font16_14, .form form fieldset:has(.required) legend .font16_14 {
    gap: 0 10px;
  }
}
@media screen and (max-width: 768px) {
  .form form fieldset:has(:required) legend .font16_14, .form form fieldset:has(.required) legend .font16_14 {
    gap: 0 1.5vw;
  }
}
.form form fieldset:has(:required) legend .font16_14::after, .form form fieldset:has(.required) legend .font16_14::after {
  content: "必須";
  background-color: var(--color-primarydark);
  color: var(--color-white);
  line-height: 1;
  font-weight: var(--font-medium);
  border-radius: 10em;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 769px) {
  .form form fieldset:has(:required) legend .font16_14::after, .form form fieldset:has(.required) legend .font16_14::after {
    font-size: 0.625rem;
    padding: 2px 6px;
  }
}
@media screen and (max-width: 768px) {
  .form form fieldset:has(:required) legend .font16_14::after, .form form fieldset:has(.required) legend .font16_14::after {
    font-size: 2.5vw;
    padding: 0.5vw 1.5vw;
  }
}
.form form .notice::before {
  content: "※";
}
.form form .notice.font12_12 {
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .form form .notice.font12_12 {
    margin-block-start: 12px;
  }
}
@media screen and (max-width: 768px) {
  .form form .notice.font12_12 {
    margin-block-start: 1.5vw;
  }
}
.form form .notice.font14_12 {
  font-weight: var(--font-regular);
  line-height: 2;
  color: var(--color-primaryred);
}
@media screen and (min-width: 769px) {
  .form form .notice.font14_12 {
    margin-left: 1em;
  }
}
@media screen and (max-width: 768px) {
  .form form .notice.font14_12 {
    display: block;
  }
}
.form form .addcategory {
  grid-template-columns: 1fr;
}
.form form .addcategory-wrap {
  display: grid;
  transition: grid-template-rows 0.3s;
  grid-template-rows: 1fr;
}
.form form .addcategory-box {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}
.form form .addcategory.disabled .addcategory-wrap {
  transition: grid-template-rows 0.3s;
  grid-template-rows: 0fr;
}
.form form .errform {
  color: var(--color-primaryred);
  line-height: 2;
}
.form form .categorytxt {
  text-align: center;
  font-weight: var(--font-medium);
  line-height: 2;
  border-block-end: 1px solid var(--color-americansilver);
}
@media screen and (min-width: 769px) {
  .form form .categorytxt {
    margin-block: 86px 9px;
    padding-block-end: 15px;
  }
}
@media screen and (max-width: 768px) {
  .form form .categorytxt {
    margin-block: 17vw 5.25vw;
    padding-block-end: 2.5vw;
  }
}
@media screen and (min-width: 769px) {
  .form form .consent {
    margin-block-start: 63px;
  }
}
@media screen and (max-width: 768px) {
  .form form .consent {
    margin-block-start: 8vw;
  }
}
.form form .consent .font15_13 {
  line-height: 2;
  text-align: center;
}
.form form .consent .font15_13 a {
  color: var(--color-primarydefault);
}
.form form .consent .check {
  display: grid;
  grid-template-columns: auto 1fr;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .form form .consent .check {
    gap: 0 12px;
    margin-block-start: 23px;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .form form .consent .check {
    gap: 0 2vw;
    margin-block-start: 5vw;
  }
}
.form form .consent .font16_14 {
  line-height: 2;
}
.form form .consent .errtxt {
  text-align: center;
}
.form form button {
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .form form button {
    margin-block-start: 84px;
  }
}
@media screen and (max-width: 768px) {
  .form form button {
    margin-block-start: 10.5vw;
  }
}
.form form .consent + button {
  pointer-events: unset;
}
.form form .consent + button.disabled {
  pointer-events: none;
  background-color: var(--color-silver);
}
.form form .consent + button.disabled .c-btn-txt__ic::after {
  background-image: url(/asset/img/common/ic-arrow-right-silver.svg);
}

/*----------------------------------------
	- 入力内容の確認
-----------------------------------------*/
@media screen and (min-width: 769px) {
  .confirm .box01 {
    margin-block-start: 149px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .box01 {
    margin-block-start: 20vw;
  }
}
@media screen and (min-width: 769px) {
  .confirm .box02 {
    width: min(780px, 90%);
    margin-block-start: 80px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .box02 {
    margin-block-start: 12.5vw;
  }
}
.confirm .item-list {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 769px) {
  .confirm .item-list {
    gap: 36px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .item-list {
    gap: 6vw;
  }
}
.confirm .item-list .font16_14 {
  font-weight: var(--font-medium);
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 769px) {
  .confirm .item-list .font16_14 {
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .confirm .item-list .font16_14 {
    line-height: 1.5;
  }
}
.confirm .item-list .font18_15 {
  display: block;
  line-height: 2;
}
@media screen and (min-width: 769px) {
  .confirm .item-list .font18_15 {
    margin-block-start: 10px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .item-list .font18_15 {
    margin-block-start: 1.5vw;
  }
}
.confirm .item-list .notice {
  font-weight: var(--font-regular);
  line-height: 2;
  color: var(--color-primaryred);
}
@media screen and (min-width: 769px) {
  .confirm .item-list .notice {
    margin-inline: 1em 0;
  }
}
@media screen and (max-width: 768px) {
  .confirm .item-list .notice {
    display: block;
    margin-block-start: 1.5vw;
  }
}
.confirm .item-list .notice::before {
  content: "※";
}
.confirm .item-list .required .font16_14 {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 769px) {
  .confirm .item-list .required .font16_14 {
    gap: 0 10px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .item-list .required .font16_14 {
    gap: 0 1.5vw;
  }
}
.confirm .item-list .required .font16_14::after {
  content: "必須";
  background-color: var(--color-primarydark);
  color: var(--color-white);
  line-height: 1;
  font-weight: var(--font-medium);
  border-radius: 10em;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 769px) {
  .confirm .item-list .required .font16_14::after {
    font-size: 0.625rem;
    padding: 2px 6px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .item-list .required .font16_14::after {
    font-size: 2.5vw;
    padding: 0.5vw 1.5vw;
  }
}
.confirm .categorytxt {
  text-align: center;
  font-weight: var(--font-medium);
  line-height: 2;
  border-block-end: 1px solid var(--color-americansilver);
}
@media screen and (min-width: 769px) {
  .confirm .categorytxt {
    margin-block: 86px 45px;
    padding-block-end: 15px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .categorytxt {
    margin-block: 15vw 6vw;
    padding-block-end: 2.5vw;
  }
}
.confirm .btn-list {
  display: grid;
}
@media screen and (min-width: 769px) {
  .confirm .btn-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 60px;
    margin-block-start: 84px;
  }
}
@media screen and (max-width: 768px) {
  .confirm .btn-list {
    width: 60vw;
    gap: 7vw;
    margin-block-start: 10.5vw;
    margin-inline: auto;
  }
}
@media screen and (max-width: 768px) {
  .confirm .btn-list .c-btn-txt--black-solid {
    grid-row: 2/3;
  }
}
@media screen and (max-width: 768px) {
  .confirm .btn-list .c-btn-txt--pink-solid {
    grid-row: 1/2;
  }
}

/*----------------------------------------
	- 応募完了
-----------------------------------------*/
@media screen and (min-width: 769px) {
  .complete .box01 {
    margin-block-start: 150px;
  }
}
@media screen and (max-width: 768px) {
  .complete .box01 {
    margin-block-start: 20vw;
  }
}
@media screen and (min-width: 769px) {
  .complete .box02 {
    margin-block-start: 80px;
    width: min(780px, 90%);
  }
}
@media screen and (max-width: 768px) {
  .complete .box02 {
    margin-block-start: 12.5vw;
  }
}
.complete .box02 .font30_20 {
  font-weight: var(--font-medium);
  text-align: center;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .complete .box02 .font30_20 {
    letter-spacing: 0.02em;
  }
}
@media screen and (max-width: 768px) {
  .complete .box02 .font30_20 {
    letter-spacing: 0.03em;
  }
}
.complete .box02 .font16_15 {
  line-height: 2;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .complete .box02 .font16_15 {
    margin-block-start: 60px;
  }
}
@media screen and (max-width: 768px) {
  .complete .box02 .font16_15 {
    margin-block-start: 7.5vw;
  }
}
.complete .box02 .font12_11 {
  text-indent: -1em;
  padding-inline-start: 1em;
}
@media screen and (min-width: 769px) {
  .complete .box02 .font12_11 {
    margin-block-start: 36px;
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .complete .box02 .font12_11 {
    margin-block-start: 6vw;
    line-height: 1.5;
  }
}
@media screen and (min-width: 769px) {
  .complete .box02 .font12_11 + .font12_11 {
    margin-block-start: 4px;
  }
}
@media screen and (max-width: 768px) {
  .complete .box02 .font12_11 + .font12_11 {
    margin-block-start: 0.75vw;
  }
}
.complete .box02 .font12_11::before {
  content: "※";
}
.complete .box02 p:has(a) {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .complete .box02 p:has(a) {
    margin-block-start: 84px;
  }
}
@media screen and (max-width: 768px) {
  .complete .box02 p:has(a) {
    margin-block-start: 10.5vw;
  }
}