@charset "UTF-8";
.bg_white {
  background-color: #fff !important;
}

.bg_black {
  background-color: #333 !important;
}

.bg_blue {
  background-color: #004bb1 !important;
}

.bg_darkBlue {
  background-color: #003f8c !important;
}

.bg_red {
  background-color: #db2828 !important;
}

.bg_green {
  background-color: #1ba049 !important;
}

.bg_darkGreen {
  background-color: #12622c !important;
}

.bg_gray {
  background-color: #707070 !important;
}

.bg_lightGray {
  background-color: #e0e0e0 !important;
}

.bg_yellow {
  background-color: #ffffc0 !important;
}

.bg_orange {
  background-color: #ee7800 !important;
}

.bg_darkOrange {
  background-color: #a75300 !important;
}

.bg_violet {
  background-color: #5a4498 !important;
}

.bg_darkViolet {
  background-color: #412555 !important;
}

.bg_lightseagreen {
  background-color: #20b2aa !important;
}

.bg_hotPink {
  background-color: #ff69b4 !important;
}

.red {
  color: #db2828;
}

.blue {
  color: #004bb1;
}

.green {
  color: #1ba049;
}

.gray {
  color: #707070;
}

.lightGray {
  color: #e0e0e0;
}

.violet {
  color: #5a4498;
}

.darkViolet {
  color: #412555;
}

.black {
  color: #333;
}

.white {
  color: #fff;
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

/* A Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html {
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  color: #333;
}

input::placeholder {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  color: #888;
}
input:-ms-input-placeholder {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  color: #888;
}
input::-ms-input-placeholder {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  color: #888;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.radioBox-black, .radioBox-blue, .radioBox-red, .radioBox-green, .radioBox-gray, .radioBox-orange, .radioBox-violet, .radioBox-yellow {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
.radioBox-black:checked + .labelBox-black {
  background-color: #333;
  color: #fff;
  font-weight: 700;
}
.radioBox-blue:checked + .labelBox-blue {
  background-color: #004bb1;
  color: #fff;
  font-weight: 700;
}
.radioBox-red:checked + .labelBox-red {
  background-color: #db2828;
  color: #fff;
  font-weight: 700;
}
.radioBox-green:checked + .labelBox-green {
  background-color: #1ba049;
  color: #fff;
  font-weight: 700;
}
.radioBox-gray:checked + .labelBox-gray {
  background-color: #707070;
  color: #fff;
  font-weight: 700;
}
.radioBox-orange:checked + .labelBox-orange {
  background-color: #ee7800;
  color: #fff;
  font-weight: 700;
}
.radioBox-violet:checked + .labelBox-violet {
  background-color: #5a4498;
  color: #fff;
  font-weight: 700;
}
.radioBox-yellow:checked + .labelBox-yellow {
  background-color: #ffffc0;
  color: #fff;
  font-weight: 700;
}

.labelBox-black, .labelBox-blue, .labelBox-red, .labelBox-green, .labelBox-gray, .labelBox-yellow, .labelBox-orange, .labelBox-violet {
  display: block;
  width: 100%;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  padding: 8px;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.labelBox-black {
  color: #333;
  border: 1px solid #333;
  background-color: #fff;
}
.labelBox-blue {
  color: #004bb1;
  border: 1px solid #004bb1;
  background-color: #f0f0ff;
}
.labelBox-red {
  color: #db2828;
  border: 1px solid #db2828;
  background-color: #fff0f0;
}
.labelBox-green {
  color: #1ba049;
  border: 1px solid #1ba049;
  background-color: #f0fff0;
}
.labelBox-gray {
  color: #707070;
  border: 1px solid #707070;
  background-color: #f8f8f8;
}
.labelBox-yellow {
  color: #ffffc0;
  border: 1px solid #ffffc0;
  background-color: #f8f8f8;
}
.labelBox-orange {
  color: #ee7800;
  border: 1px solid #ee7800;
  background-color: #f8f8f8;
}
.labelBox-violet {
  color: #5a4498;
  border: 1px solid #5a4498;
  background-color: #f8f8f8;
}
.labelBox-medium {
  width: auto;
  display: inline-block;
}
.labelBox-tiny {
  width: auto;
  display: inline-block;
  padding: 2px;
}

.textArea,
.inputArea {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  line-height: 1.5;
}
.textArea-black,
.inputArea-black {
  color: #333;
  border: 1px solid #333;
  background-color: #fff;
}
.textArea-blue,
.inputArea-blue {
  color: #333;
  border: 1px solid #004bb1;
  background-color: #fff;
}
.textArea-red,
.inputArea-red {
  color: #333;
  border: 1px solid #db2828;
  background-color: #fff;
}
.textArea-green,
.inputArea-green {
  color: #333;
  border: 1px solid #1ba049;
  background-color: #fff;
}
.textArea-gray,
.inputArea-gray {
  color: #333;
  border: 1px solid #707070;
  background-color: #fff;
}
.textArea-lightGray,
.inputArea-lightGray {
  color: #333;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}
.textArea-yellow,
.inputArea-yellow {
  color: #333;
  border: 1px solid #ffffc0;
  background-color: #fff;
}
.textArea-orange,
.inputArea-orange {
  color: #333;
  border: 1px solid #ee7800;
  background-color: #fff;
}
.textArea-violet,
.inputArea-violet {
  color: #333;
  border: 1px solid #5a4498;
  background-color: #fff;
}

.inputArea {
  height: 38px;
}
.inputArea-base {
  text-align: center;
  font-size: 16px;
}
.inputArea-micro {
  width: 40px;
}
.inputArea-mini {
  width: 80px;
}
.inputArea-tiny {
  width: 120px;
}
.inputArea-medium {
  width: 180px;
}
.inputArea-zero {
  pointer-events: none;
}

.selectArea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  padding: 8px;
  background-image: url("../../images/icn_select_down.png");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px auto;
  outline: none;
  margin: 1px 0;
}
.selectArea-tiny {
  width: 60px;
}
.selectArea-small {
  width: 96px;
}
.selectArea-medium {
  width: 160px;
}
.selectArea-full {
  width: 100%;
}
.selectArea-calender, .selectArea-full {
  width: 120px;
  padding: 0 4px;
  color: #333;
  border: 1px solid #707070;
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.selectArea-full {
  width: 100%;
}
.selectArea-black {
  color: #333;
  border: 1px solid #333;
  background-color: #fff;
}
.selectArea-black:focus {
  border: 2px solid #333;
}
.selectArea-gray {
  color: #707070;
  border: 1px solid #707070;
  background-color: #fff;
}
.selectArea-gray:focus {
  border: 2px solid #707070;
}

.modal,
.modal2 {
  display: none;
}
.modal-body,
.modal2-body {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.95);
  overflow: auto;
  padding: 0 8px;
  height: 100%;
}
.modal-close,
.modal2-close {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 101;
}

.modal2-body {
  background-color: rgb(255, 255, 255);
  padding-bottom: 16px;
}

#Loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  justify-content: center;
  align-items: center;
}

.close-btn {
  display: inline-block;
  vertical-align: middle;
  transition: all 0.4s;
  box-sizing: border-box;
  position: relative;
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
}
.close-btn span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 4px;
  background-color: #fff;
  text-align: center;
  border-radius: 2px;
}
.close-btn span:nth-of-type(1) {
  top: 7px;
  transform: translateY(10px) rotate(-315deg);
}
.close-btn span:nth-of-type(2) {
  top: 27px;
  transform: translateY(-10px) rotate(315deg);
}
.close-btn--black span {
  background-color: #333;
}

.dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 4000;
}
.dialog-block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  background-color: rgba(0, 0, 0, 0.5);
}
.dialog-body {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.dialog-body__ttl {
  border-radius: 4px 4px 0 0;
  background-color: #2563eb;
  padding: 8px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.dialog-body__msg {
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
.dialog-btn {
  padding: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 0 0 4px 4px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  font-size: 16px;
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.btn-tiny, .btn-medium {
  font-size: 12px;
  height: 24px;
  width: auto;
  padding: 0 8px;
  margin: 0 2px;
  border-radius: 4px;
}
.btn--h32 {
  height: 32px;
}
.btn-block80 {
  width: 88px;
  font-size: 11px;
  height: 24px;
  margin: 2px 0;
  padding: 0 2px;
  border-radius: 4px;
  text-align: center;
}
.btn-block80--double {
  height: 40px;
}
.btn-medium {
  font-size: 14px;
  height: 32px;
}
.btn-large {
  font-size: 18px;
  height: 48px;
  padding: 0 16px;
}
.btn-attached {
  border: 1px solid #004bb1;
  border-bottom: 2px solid #555;
  background-color: #004bb1;
  font-size: 11px;
  color: #fff;
  padding: 0 2px;
  width: auto;
  height: auto;
  border-radius: 2px;
}
.btn-attached:active {
  border-bottom: 1px solid #aaa;
}
.btn--blue {
  background-color: #004bb1;
}
.btn--blueReverse {
  border: 2px solid #004bb1;
  color: #004bb1;
  background-color: #fff;
}
.btn--lightseagreen {
  background-color: #20b2aa;
}
.btn--lightseagreenReverse {
  border: 2px solid #20b2aa;
  color: #20b2aa;
  background-color: #fff;
}
.btn--gray {
  background-color: #707070;
}
.btn--grayReverse {
  border: 2px solid #707070;
  color: #707070;
  background-color: #fff;
}
.btn--red {
  background-color: #db2828;
}
.btn--redReverse {
  border: 2px solid #db2828;
  color: #db2828;
  background-color: #fff;
}
.btn--green {
  background-color: #1ba049;
}
.btn--greenReverse {
  border: 2px solid #1ba049;
  color: #1ba049;
  background-color: #fff;
}
.btn--black {
  background-color: #333;
}
.btn--blackReverse {
  border: 2px solid #333;
  color: #333;
  background-color: #fff;
}
.btn--orange {
  background-color: #ee7800;
}
.btn--orangeReverse {
  border: 2px solid #ee7800;
  color: #ee7800;
  background-color: #fff;
}
.btn--violet {
  background-color: #5a4498;
}
.btn--violetReverse {
  border: 2px solid #5a4498;
  color: #5a4498;
  background-color: #fff;
}
.btn--hotPink {
  background-color: #ff69b4;
}
.btn--hotPinkReverse {
  border: 2px solid #ff69b4;
  color: #ff69b4;
  background-color: #fff;
}
.btn--bdWhite {
  border: 1px solid #fff;
}

.loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.vat {
  vertical-align: top;
}

.vam {
  vertical-align: middle;
}

.vab {
  vertical-align: bottom;
}

.dn {
  display: none;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right;
}

.tal {
  text-align: left;
}

.taj {
  text-align: justify;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700 !important;
}

.fz-10 {
  font-size: 10px;
}

.fz-11 {
  font-size: 11px;
}

.fz-12 {
  font-size: 12px;
}

.fz-14 {
  font-size: 14px;
}

.fz-16 {
  font-size: 16px;
}

.fz-18 {
  font-size: 18px;
}

.fz-20 {
  font-size: 20px;
}

.fz-24 {
  font-size: 24px;
}

.lh-12 {
  line-height: 1.2;
}

.lh-15 {
  line-height: 1.5;
}

.lh-18 {
  line-height: 1.8;
}

.ml-a {
  margin-left: auto;
}

.mr-a {
  margin-right: auto;
}

.mt-4 {
  margin-top: 4px;
}

.mr-4 {
  margin-right: 4px;
}

.ml-4 {
  margin-left: 4px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.ml-8 {
  margin-left: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-64 {
  margin-top: 64px;
}

.mb-64 {
  margin-bottom: 64px;
}

.pd-16 {
  padding: 16px;
}

.p-4 {
  padding: 4px;
}

.pl-4 {
  padding-left: 4px;
}

.pb-4 {
  padding-bottom: 4px;
}

.pt-8 {
  padding-top: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.pr-8 {
  padding-right: 8px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pt-16 {
  padding-top: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pl-16 {
  padding-left: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-24 {
  padding-left: 24px;
}

.pt-48 {
  padding-top: 48px;
}

.pb-48 {
  padding-bottom: 48px;
}

.mwd-100\% {
  max-width: 100%;
}

.mwd-1280 {
  max-width: 1280px;
}

.mwd-1024 {
  max-width: 1024px;
}

.mwd-800 {
  max-width: 800px;
}

.mwd-640 {
  max-width: 640px;
}

.mwd-320 {
  max-width: 320px;
}

.mwd-400 {
  max-width: 400px;
}

.w-100\% {
  width: 100%;
}

.w-40\% {
  width: 40%;
}

.w-50\% {
  width: 50%;
}

.w-60\% {
  width: 60%;
}

.bw-1 {
  border-width: 1px;
}

.bw-2 {
  border-width: 2px;
}

.bw-3 {
  border-width: 3px;
}

.bc-gray {
  border-color: #707070;
}

.bc-red {
  border-color: #db2828;
}

.br-8 {
  border-radius: 8px;
}

.br-16 {
  border-radius: 16px;
}

.h-32 {
  height: 32px;
}

.h-104 {
  height: 104px;
}

.flex-between {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table01 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-left: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}
.table01 th, .table01 td {
  padding: 8px;
  font-size: 16px;
  line-height: 1.5;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.table01 th {
  width: 25%;
}
.table01 td {
  width: 75%;
}

.table02 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-left: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}
.table02 td {
  padding: 8px;
  line-height: 1.5;
  text-align: left;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}

.label {
  display: inline-block;
  padding: 4px;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.label-ro {
  background-color: #333;
  color: #fff;
}
.label-small {
  font-size: 11px;
  padding: 2px;
  margin: 2px;
}
.label-large {
  font-size: 16px;
  padding: 8px;
  margin: 8px;
}
.label-full {
  width: 100%;
  padding: 8px;
  font-size: 16px;
}
.label--blue {
  border: 1px solid #004bb1;
  color: #004bb1;
}
.label--blue-ro {
  background-color: #004bb1;
  color: #fff;
}
.label--gray {
  border: 1px solid #707070;
  color: #707070;
}
.label--gray-ro {
  background-color: #707070;
  color: #fff;
}
.label--black {
  border: 1px solid #333;
  color: #333;
}
.label--black-ro {
  background-color: #333;
  color: #fff;
}
.label--red {
  border: 1px solid #db2828;
  color: #db2828;
}
.label--red-ro {
  background-color: #db2828;
  color: #fff;
}
.label--green {
  border: 1px solid #1ba049;
  color: #1ba049;
}
.label--green-ro {
  background-color: #1ba049;
  color: #fff;
}
.label--violet {
  border: 1px solid #5a4498;
  color: #5a4498;
}
.label--violet-ro {
  background-color: #5a4498;
  color: #fff;
}
.label--orange {
  border: 1px solid #ee7800;
  color: #ee7800;
}
.label--orange-ro {
  background-color: #ee7800;
  color: #fff;
}
.label--hotPink {
  border: 1px solid #ff69b4;
  color: #ff69b4;
}
.label--hotPink-ro {
  background-color: #ff69b4;
  color: #fff;
}

.feedbackBtn {
  z-index: 1000;
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 108px;
  height: 40px;
  background-color: #00a;
  color: #fff;
  font-weight: 700;
  border-radius: 16px;
  line-height: 0;
  box-shadow: 0 0 4px rgb(0, 0, 0);
  cursor: pointer;
}

.feedbackModal {
  display: none;
}
.feedbackModal-body {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  z-index: 1001;
  background-color: rgba(255, 255, 255, 0.95);
  overflow: auto;
  padding: 0 8px;
  height: 100%;
}

.feedbackForm {
  position: relative;
  max-width: 640px;
  width: 100%;
  margin: 64px auto;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.feedbackForm--320 {
  max-width: 320px;
}
.feedbackForm-title {
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}
.feedbackForm-req {
  margin-top: 8px;
  font-weight: 700;
  font-size: 12px;
  text-align: right;
}
.feedbackForm-section {
  margin-top: 16px;
}
.feedbackForm-section--tac {
  text-align: center;
}
.feedbackForm input,
.feedbackForm textarea {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid #888;
}
.feedbackForm-submit, .feedbackForm-close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  margin: 0 2px;
  font-size: 16px;
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  background-color: #004bb1;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.feedbackForm-submit:active, .feedbackForm-close:active {
  transform: translateY(2px);
  box-shadow: none;
}
.feedbackForm-close {
  background-color: #707070;
}
.feedbackForm-text1 {
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-size: 14px;
}
.feedbackForm-cover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  color: #004bb1;
}
.feedbackForm .tac {
  text-align: center;
}
.feedbackForm .msg {
  color: red;
  font-weight: 700;
  font-size: 12px;
}

.register {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  line-height: 1.8;
}
.register-birthday {
  margin-top: 4px;
  display: flex;
  align-items: center;
}
.register-hr {
  border: none;
  border-top: 1px solid #ccc;
  height: 0;
  margin: 48px 0;
}

.login {
  max-width: 300px;
  margin: 16px auto;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.home {
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 8px;
}
@media only screen and (max-width: 640px) {
  .home {
    padding: 0 1.25vw;
  }
}
.home--center {
  justify-content: center;
}
.home-item {
  margin-top: 32px;
  position: relative;
  width: 296px;
  height: 296px;
  border: 2px solid #707070;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.home-item--green {
  background-color: #e1fbea;
}
.home-item--gray {
  background-color: #e0e0e0;
}
.home-item:active {
  transform: translateY(2px);
  box-shadow: none;
}
.home-item img {
  margin-top: -16px;
  display: block;
  width: 96px;
  height: auto;
}
.home-item p {
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  font-size: 24px;
  text-align: center;
  font-weight: 700;
}
.home-item a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 640px) {
  .home-item {
    margin-top: 5vw;
    width: 46.25vw;
    height: 46.25vw;
    border: 0.3125vw solid #707070;
    border-radius: 2.5vw;
    box-shadow: 0 0.625vw 0.625vw 0 rgba(0, 0, 0, 0.1);
  }
  .home-item img {
    margin-top: -2.5vw;
    width: 15vw;
  }
  .home-item p {
    top: 31.25vw;
    font-size: 3.75vw;
  }
}

.setting {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}
.setting-btn {
  margin: 24px auto 0 auto;
  max-width: 320px;
  width: 100%;
}

.selection {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}
.selection-group {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.selection-group__item {
  width: 50%;
  padding: 8px;
}
.selection-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background-color: #e0e0e0;
}
.selection-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-left: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fff;
}
.selection-table th, .selection-table td {
  padding: 8px;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.selection-block {
  width: 100%;
  padding: 16px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f8f8f8;
}

.answer {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 8px;
  background-color: #fff;
}
.answer-wrap {
  margin: 64px auto 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.answer-wrap__btn {
  width: 49%;
  display: flex;
  justify-content: center;
}
.answer-progress {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.answer-progress__text {
  font-size: 12px;
  margin-right: 4px;
}
.answer-progress__bar {
  width: 180px;
  border: 1px solid #1ba049;
  height: 16px;
  background-image: url("../../images/progress_green.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 0;
}

.answerView {
  width: 100%;
  display: flex;
  border: 1px solid #707070;
  border-bottom: none;
}
.answerView:last-child {
  border-bottom: 1px solid #707070;
}
.answerView-question {
  width: 70%;
  padding: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.answerView-answer {
  width: 30%;
  padding: 8px;
  border-left: 1px dotted #707070;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
@media only screen and (max-width: 640px) {
  .answerView {
    display: block;
  }
  .answerView-question {
    width: 100%;
  }
  .answerView-answer {
    width: 100%;
    border-left: none;
    border-top: 1px dotted #707070;
  }
}
.answerView--wide {
  display: block;
}
.answerView--wide .answerView-question {
  width: 100%;
}
.answerView--wide .answerView-answer {
  width: 100%;
  border-left: none;
  border-top: 1px dotted #707070;
}

.age {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 32px 16px;
  background-color: #fff;
  border-radius: 8px;
}
.age-item {
  width: 100%;
  margin: 24px auto 0 auto;
  padding: 8px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.age-block {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.age-block__btn {
  width: 49%;
}

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