/*===========================================================================
unique
単一ページで使用するCSS
接頭辞【.u-】

【予測変換用 _base.css記述】
:root {
	--font-color-base: #000;
	--font-family-base: "Noto Sans JP", sans-serif;
	--back-color-base: #fff;
	--design-size-pc: 1400;
	--design-size-sp: 750;
}
===========================================================================*/
.u-panel {
  margin: 80rem var(--negative-margin) 0;
  padding: 120rem abs(var(--negative-margin)) 0;
  border-top: 1px solid #c4cedc;
}
.u-panel > *:first-child {
  margin-top: 0;
}


input[type="text"],
textarea {
  font-family: var(--font-family-base);
}



.u-formStep + * {
  margin-top: 64rem;
}
.u-formStep__wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 152rem;
}
.u-formStep__wrap::before {
  content: " ";
  position: absolute;
  top: 7rem;
  left: 50%;
  width: 440rem;
  height: 1rem;
  background: #c4cedc;
  transform: translateX(-50%);
}
.u-formStep__wrap li {
  position: relative;
  box-sizing: border-box;
  padding-top: 32rem;
  color: #c4cedc;
  font-size: 14rem;
  line-height: 1.5;
}
.u-formStep__wrap li::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16rem;
  height: 16rem;
  border-radius: 100%;
  background: #c4cedc;
  transform: translateX(-50%);
}
.u-formStep__wrap li.u-active {
  color: var(--font-color-main);
}
.u-formStep__wrap li.u-active::before {
  background-color: var(--back-color-main);
}

/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-formStep__wrap {
    gap: 72rem;
  }
  .u-formStep__wrap::before {
    top: 7rem;
    width: 272rem;
  }
}



/*====================================
フォーム
====================================*/
.u-formWrap {
  box-sizing: border-box;
  margin-top: 64rem;
  padding: 20rem 64rem 64rem;
  border-radius: 8rem;
  background: #f7f7f7;
}
.u-formLine {
  display: flex;
  gap: 24rem;
  box-sizing: border-box;
  padding: 64rem 0;
  border-bottom: 1px solid #ddd;
}
.u-formLine__ttl {
  position: relative;
  box-sizing: border-box;
  width: 274rem;
  padding-right: 100rem;
  font-weight: bold;
  line-height: 1.5;
}
.u-formLine__ttl::after {
  position: absolute;
  top: 50%;
  right: 0;
  box-sizing: border-box;
  padding: 2rem 8rem 4rem;
  border-radius: 4rem;
  font-size: 12rem;
  transform: translateY(-50%);
}
.u-formLine__ttl.any::after {
  content: "任意";
  background: #e3e9f4;
  color: var(--font-color-main);
}
.u-formLine__ttl.must::after {
  content: "必須";
  background-color: var(--back-color-main);
  color: #fff;
}
.u-note {
  position: relative;
  margin-top: 4rem;
  padding-left: 1.2em;
  font-size: 14rem;
  font-weight: 400;
}
.u-note::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}
.u-formLine__cts {
  flex: 1;
}
.u-consent {
  margin-top: 40rem;
}
.u-consent__inr {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.u-consent__txt {
  font-weight: bold;
  letter-spacing: 0.02em;
}
.u-consent__txt a {
  color: var(--font-color-main);
}
.errorPlace {
  margin-top: 10rem;
  color: #ea0000;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-formWrap {
    margin-top: 32rem;
    padding: 40rem 20rem 80rem;
    border-radius: 4rem;
  }
  .u-formLine {
    flex-direction: column;
    gap: 8rem;
    padding: 40rem 0;
  }
  .u-formLine__ttl {
    width: 100%;
    padding-right: 0;
  }
  .u-formLine__ttl::after {
    top: 0;
    transform: translateY(0);
  }
  .u-note {
    margin-top: 8rem;
  }
  .u-formLine__cts {
    width: 100%;
  }
  .u-consent__txt {
    font-size: 15rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: center;
  }
}




.u-confirmLine {
  display: flex;
  gap: 24rem;
  box-sizing: border-box;
  padding: 32rem 0;
  border-bottom: 1px solid #ddd;
}
.u-confirmLine:last-child {
  padding: 32rem 0 0 ;
  border-bottom: none;
}
.u-formLine__cell:not(:first-child) {
  margin-top: 22rem;
}
.u-formLine__cell p {
  line-height: 1.8;
  letter-spacing: 0.08em;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-confirmLine {
    flex-direction: column;
    gap: 8rem;
    padding: 20rem 0;
    border-bottom: 1px solid #ddd;
  }
}





.u-confTxt {
  margin-top: 24rem;
  font-size: 14rem;
  line-height: 1.5;
}
.u-confTxt + .u-formLine__txt {
  margin-top: 8rem;
}
.u-formLine__txt input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 56rem;
  padding: 12rem 22rem;
  border-radius: 4rem;
  font-size: 16rem;
  line-height: 1.8;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-confTxt {
    margin-top: 32rem;
  }
  .u-confTxt + .u-formLine__txt {
    margin-top: 10rem;
  }
  .u-formLine__txt input {
    padding: 12rem 16rem;
  }
}


.u-formLine__textarea {
  flex: 1;
  height: 240rem;
}
.u-formLine__textarea textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10rem 22rem;
  border-radius: 4rem;
  font-size: 16rem;
  line-height: 1.8;
  resize: none;
}
.u-formLine__textarea:not(:first-child) {
  margin-top: 8rem;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-formLine__textarea {
    height: 190rem;
  }
  .u-formLine__textarea textarea {
    padding: 10rem 16rem;
  }
  .u-formLine__textarea:not(:first-child) {
    margin-top: 8rem;
  }
}



.u-formLine__radio {
  display: flex;
  flex-wrap: wrap;
  gap: 16rem;
}
.u-formLine__btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 8rem 18rem 8rem 10rem;
  border-radius: 4rem;
  background: #fff;
  font-size: 15rem;
  line-height: 1.8;
  cursor: pointer;
}
/* ラジオボタンのスタイルを復元 */
/* input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
} */
.u-formLine__btn input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.u-radioIcn {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding-left: 28rem;
  font-size: 16rem;
  line-height: 1.6;
}
.u-radioIcn::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  box-sizing: border-box;
  width: 18rem;
  height: 18rem;
  border: 1px solid var(--back-color-main);
  border-radius: 100%;
  transform: translateY(-50%);
}
.u-formLine__btn input[type="radio"]:checked + .u-radioIcn::before {
  border-width: 7rem;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-formLine__radio {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8rem;
  }
  .u-formLine__btn {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 8rem 16rem 8rem 10rem;
  }
  .u-formLine__btn input {
    position: absolute;
    top: 50%;
    left: 12rem;
    width: 20rem;
    height: 20rem;
    margin-top: -10rem;
  }
}



.u-inputCheckbox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rem;
  box-sizing: border-box;
  width: 160rem;
  margin-top: 24rem;
  padding: 14rem 30rem;
  border-radius: 4rem;
  background: #fff;
  cursor: pointer;
}
.u-inputCheckbox input {
  width: 20rem;
  height: 20rem;
  border: 1px solid var(--back-color-main);
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}
.u-inputCheckbox input + span {
  display: block;
  color: var(--font-color-main);
  font-size: 14rem;
  font-weight: 500;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-inputCheckbox {
    margin-top: 40rem;
  }
}





.u-ctsBtnWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--grid-num);
  margin-top: 56rem;
}
.u-ctsBtn {
  position: relative;
  display: inline-block;
  min-width: 240rem;
  padding: 7rem 50rem;
  border: 1px solid var(--back-color-main);
  border-radius: 4rem;
  background-color: var(--back-color-main);
  color: #fff;
  font-size: 14rem;
  font-weight: bold;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s linear;
}
.u-ctsBtn__wt {
  background-color: #fff;
  color: var(--font-color-main);
}
.u-ctsBtn::before {
  content: " ";
  position: absolute;
  top: 50%;
  right: 13rem;
  width: 18rem;
  height: 18rem;
  background-color: #fff;
  mask: url(/common/images/icn_line_arw_wt.svg) no-repeat center / contain;
  transform: translateY(-50%);
  transition: all 0.3s linear;
  -webkit-mask: url(/common/images/icn_line_arw_wt.svg) no-repeat center / contain;
  -webkit-mask: url(/common/images/icn_line_arw_wt.svg) no-repeat center / contain;
  -webkit-mask: url(/common/images/icn_line_arw_wt.svg) no-repeat center / contain;
}
.u-ctsBtn__wt::before {
  right: auto;
  left: 13rem;
  background-color: var(--back-color-main);
  mask: url(/common/images/icn_line_arw_left_wt.svg) no-repeat center / contain;
  -webkit-mask: url(/common/images/icn_line_arw_left_wt.svg) no-repeat center / contain;
}

@media (any-hover: hover) {
  .u-ctsBtn:hover {
    background-color: #fff;
    color: var(--font-color-main);
  }
  .u-ctsBtn:hover::before {
    background-color: var(--back-color-main);
  }
  .u-ctsBtn__wt:hover {
    opacity: 0.7;
  }
  a:hover .u-ctsBtn {
    background-color: #fff;
    color: var(--font-color-main);
  }
  a:hover .u-ctsBtn::before {
    background-color: var(--back-color-main);
  }
}

/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .u-ctsBtnWrap {
    flex-direction: column;
    align-items: center;
    gap: var(--grid-num) 0;
    margin-top: 40rem;
  }
}




.u-thanksTtl {
  font-size: 32rem;
  font-weight: bold;
  line-height: 1.8;
}