@charset "UTF-8";
:root {
  --borderColorL:rgb(128, 128, 128);
  --borderColorM:rgb(102.4, 102.4, 102.4);
}

/* 【入力エリア】（共用） */
.inputArea {
  display: grid;
  --inputAreaGridColumns1: calc((100vw - var(--main-width)) / 2 + var(--space2) * 2);
  --inputAreaGridColumns2: calc(var(--main-width) - var(--space2) * 4);
  --inputAreaGridColumns3: calc((100vw - var(--main-width)) / 2 + var(--space2) * 2);
  grid-template-columns: var(--inputAreaGridColumns1) var(--inputAreaGridColumns2) var(--inputAreaGridColumns3);
  grid-template-rows: auto auto;
  margin: 3vw 0 3vw 0;
  position: relative;
}

.title {
  grid-column: 2;
  grid-row: 1;
  background-color: rgb(209, 204, 255);
  padding: calc(var(--space2) / 2);
  padding-left: var(--space2);
  font-size: var(--h7);
  border-radius: 5px 5px 0 0;
  border: 1px solid var(--borderColorL);
}

.inputCont {
  grid-column: 2;
  grid-row: 2;
  background-color: white;
  padding: var(--space2);
  font-size: var(--h7);
  border-radius: 0 0 5px 5px;
  border-right: 1px solid var(--borderColorL);
  border-bottom: 1px solid var(--borderColorL);
  border-left: 1px solid var(--borderColorL);
  box-sizing: border-box;
}
.inputCont textarea {
  width: calc(var(--main-width) - var(--space2) * 2 - var(--space2) * 4);
  height: auto;
  font-size: var(--h7);
  padding: calc(var(--space2) / 2);
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid var(--borderColorM);
}
.inputCont textarea::-webkit-scrollbar {
  display: none;
}

input[type=text] {
  width: calc(var(--main-width) - var(--space2) * 2 - var(--space2) * 4);
  height: calc(var(--h7) + var(--space2));
  font-size: var(--h7);
  padding: calc(var(--space2) / 2);
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid var(--borderColorM);
}

.justifyContent {
  justify-content: center;
  text-align: center;
}

.submit,
button {
  border: 0;
  background-color: white;
  font-size: var(--h7);
  border-radius: 5px;
  padding: 0.5vw 1vw 0.5vw 1vw;
  user-select: none;
  border: 1px solid var(--borderColorM);
  position: relative;
}

a:hover,
button:hover {
  margin: 0.1vw -0.1vw -0.1vw 0.1vw;
  background-color: #aaa;
}

.sendMaillCodeBtn {
  padding-left: var(--space2);
  padding-right: var(--space2);
  border: 1px solid var(--borderColorM);
}

.addInput {
  display: flex;
  justify-content: center;
  align-items: center;
}

.garbage {
  width: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.addImg {
  width: 1vw;
  transition: width 0.2s;
}

.addImg:hover {
  width: 1.3vw;
}

.submit {
  padding: 1.5vw 2vw 1.5vw 2vw;
  text-decoration: none;
  color: black;
}

.popUpArea {
  width: 100vw;
  position: fixed;
  top: calc(var(--space2) * -1);
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 97;
  font-size: var(--h5);
  /* 定義名 */
  animation-name: popUpAreaAction;
  /* 開始終了時の状態指定 */
  animation-fill-mode: forwards;
  /* アニメーション時間 */
  animation-duration: 0.2s;
  /* 進行具合 */
  animation-timing-function: ease;
  /* 初動遅延 */
  animation-delay: 0s;
  /* 再生の向き */
  animation-direction: normal;
}

.popUp {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 232, 242);
  border-radius: 10px;
  margin-top: var(--space2);
  padding: calc(var(--space2) / 2);
  position: relative;
}

@keyframes popUpAreaAction {
  0% {
    top: -5vw;
  }
  100% {
    top: 0vw;
  }
}
.popUpSuccess {
  background-color: rgb(173, 230, 255);
  position: relative;
}

.endMsgArea {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--h7);
  margin: 3vw 0 3vw 0;
}

.endMsg {
  padding: 3vw 6vw 3vw 6vw;
  background-color: rgb(173, 230, 255);
  border-radius: 1vw;
  text-align: center;
}

.flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--h6);
  padding: var(--space2);
}

.flexTB {
  display: flex;
  align-items: center;
}

.sns {
  margin: 0 calc(var(--space2) / 2) 0 calc(var(--space2) / 2);
  padding: calc(var(--space2) / 2);
  background-color: #fefefe;
  border-radius: 0.5vw;
  transition: all 0.03s;
  border: 1px solid var(--borderColorM);
}

.snsSelect {
  margin: 0.1vw 0.4vw -0.1vw 0.6vw;
  background-color: rgb(173, 230, 255);
}

.sns:hover {
  font-size: var(--h7);
}

button {
  font-size: var(--h6);
  border: 1px solid aqua;
}

vtamago-apply-radio-contents {
  position: relative;
  display: flex;
  justify-content: center;
}
vtamago-apply-radio-contents vtamago-apply-radio-check-area {
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
  width: calc(var(--h5) * 2);
  padding: calc(var(--h7) / 2);
  box-sizing: border-box;
}
vtamago-apply-radio-contents vtamago-apply-radio-check-area vtamago-apply-radio-check-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--h5);
  height: var(--h5);
  border-radius: 100%;
  border: calc(var(--h5) / 10) solid black;
  box-sizing: border-box;
  overflow: hidden;
}
vtamago-apply-radio-contents vtamago-apply-radio-check-area vtamago-apply-radio-check-circle::before {
  display: absolute;
  content: "";
  width: calc(var(--h5) * 0);
  height: calc(var(--h5) * 0);
  background-color: orange;
  border-radius: 100%;
  box-sizing: border-box;
  transition: all 0.1s;
}
vtamago-apply-radio-contents vtamago-apply-radio-check-area vtamago-apply-radio-check-circle:hover {
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
}
vtamago-apply-radio-contents vtamago-apply-radio-check-area .vtamago-apply-radio-check-circle-checked::before {
  display: absolute;
  content: "";
  width: calc(var(--h5) * 0.6);
  height: calc(var(--h5) * 0.6);
  background-color: #313277;
  border-radius: 100%;
  box-sizing: border-box;
}
vtamago-apply-radio-contents vtamago-apply-radio-text-area {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: calc(100% - var(--h5) * 2);
  padding: calc(var(--h7) / 2);
  box-sizing: border-box;
}

/*# sourceMappingURL=FR06_apply.css.map */