/* CSS Document */
body {
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  color: #4E4E4E;
}

#loading {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
}

#user_wrapper {
  max-width: 940px;
  width: 100%;
  margin: 0 auto;
}

.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

#header {
  max-width: 940px;
  width: 100%;
}
#header .header-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
#header .header-inner:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/header-bar.svg") no-repeat;
  background-size: 100%;
  width: 100svw;
  height: 5px;
}
#header .header-inner img {
  width: min(317px, 33.7234042553svw);
  margin-top: min(34px, 3.6170212766svw);
}
#header .header-inner ul {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#header .header-inner ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: min(24px, 2.5531914894svw);
  line-height: 1;
  color: #fff;
  text-shadow: -2px 2px 2px rgba(0, 0, 0, 0.16);
  width: min(210px, 22.3404255319svw);
  height: min(73px, 7.7659574468svw);
  border-radius: 3px;
  background: #02246a;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.16);
  text-decoration: none;
  transition: filter 0.3s;
}
#header .header-inner ul li a.blue {
  background: #02246a;
}
#header .header-inner ul li a.red {
  background: #e00e52;
}
#header .header-inner ul li a:hover {
  filter: brightness(140%);
}

h1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  font-size: min(47px, 5svw);
  line-height: 1.212;
  text-align: left;
  color: #222;
  margin-top: min(52px, 5.5319148936svw);
}
h1.ls-fix {
  letter-spacing: 0.03em;
}
h1:before, h1:after {
  content: "";
  width: min(49.15px, 5.2287234043svw);
  height: 1px;
  background-color: #707070;
}
h1:before {
  margin-right: min(41px, 4.3617021277svw);
}
h1:after {
  margin-left: min(8px, 0.8510638298svw);
}
h1 .h1-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  white-space: nowrap;
}
h1 .h1-inner .addimg {
  display: flex;
  flex-direction: row;
  align-items: center;
}
h1 .h1-inner .addimg:after {
  content: "";
  margin-left: min(15px, 1.5957446809svw);
  margin-right: min(20px, 2.1276595745svw);
  margin-top: min(4px, 0.4255319149svw);
  background: url("../img/h1-biginner.png") no-repeat;
  background-size: contain;
  width: min(39.9px, 4.2446808511svw);
  height: min(55.93px, 5.95svw);
}

#qa {
  width: 100%;
}
#qa .q {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: min(14px, 1.4893617021svw);
  padding-bottom: min(14px, 1.4893617021svw);
  padding-left: min(44px, 4.6808510638svw);
  margin-top: min(22px, 2.3404255319svw);
}
#qa .q:after {
  content: "";
  background-color: #468cc7;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100svw;
  height: 100%;
}
#qa .q svg {
  width: min(57px, 6.0638297872svw);
  height: auto;
  margin-right: min(21px, 2.2340425532svw);
}
#qa .q span {
  font-weight: 700;
  font-size: min(31px, 3.2978723404svw);
  line-height: 1.29;
  color: #fff;
}
#qa .q .yellow {
  color: #FDF26D;
}
#qa .a {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: min(29px, 3.085106383svw);
  margin-left: min(44px, 4.6808510638svw);
  margin-bottom: max(-17px, -1.8085106383svw);
}
#qa .a svg {
  width: min(57px, 6.0638297872svw);
  height: auto;
}
#qa .a span {
  font-weight: 700;
  font-size: min(28px, 2.9787234043svw);
  letter-spacing: 0.6em;
  color: #d2d2d2;
  margin-left: min(18px, 1.914893617svw);
}
#qa img {
  width: min(892px, 94.8936170213svw);
}
@media print, screen and (max-width: 1050px) {
  #qa img {
    width: 100%;
  }
}
#qa .scroll-indicator {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: max(-17px, -1.8085106383svw);
  margin-bottom: min(8px, 0.8510638298svw);
}
#qa .scroll-indicator p {
  font-size: min(17px, 1.8085106383svw);
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: #222;
  margin-bottom: min(8px, 0.8510638298svw);
}
#qa .scroll-indicator .round {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(6px, 0.6382978723svw);
  height: min(6px, 0.6382978723svw);
  border-radius: 50%;
  background: #31383e;
}
#qa .scroll-indicator .round:after {
  content: "";
  position: absolute;
  bottom: max(-50px, -5.3191489362svw);
  left: 50%;
  height: min(50px, 5.3191489362svw);
  width: 1px;
  background: #31383e;
  animation: expand 2s linear infinite;
  transform-origin: top;
}
@keyframes expand {
  0% {
    transform-origin: top;
    transform: scale(1, 0) translateX(-50%);
    opacity: 1;
  }
  50% {
    transform-origin: top;
    transform: scale(1, 1) translateX(-50%);
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scale(1, 0) translateX(-50%);
    opacity: 0;
  }
}

#job {
  position: relative;
  padding-top: min(98px, 10.4255319149svw);
  padding-bottom: min(116px, 12.3404255319svw);
}
#job .job-deco {
  position: absolute;
  left: min(5px, 0.5319148936svw);
  top: min(110px, 11.7021276596svw);
  width: min(87px, 9.2553191489svw);
}
#job h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  color: #222222;
  margin-bottom: min(20px, 2.1276595745svw);
}
#job h2 .line1 {
  font-size: min(28px, 2.9787234043svw);
  letter-spacing: 0.03em;
  margin-bottom: min(18px, 1.914893617svw);
}
#job h2 .line2 span:nth-of-type(1) {
  font-size: min(66px, 7.0212765957svw);
  letter-spacing: 0.03em;
  color: #468CC7;
}
#job h2 .line2 span:nth-of-type(2) {
  font-size: min(50px, 5.3191489362svw);
}
#job h2 svg {
  margin-top: min(29px, 3.085106383svw);
  width: min(632px, 67.2340425532svw);
  height: auto;
}
#job .job-desc {
  padding: 0 min(60px, 6.3829787234svw);
  font-size: min(25px, 2.6595744681svw);
  line-height: 1.8;
  margin-bottom: min(61px, 6.4893617021svw);
}
#job .job-desc .yellow {
  background: linear-gradient(transparent 15%, #FDF26D 15%);
}
#job .job-img {
  width: 100%;
}

#rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: min(68px, 7.2340425532svw);
  padding-bottom: min(95px, 10.1063829787svw);
  width: 100%;
}
#rate:after {
  content: "";
  background-color: #FEFDF1;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100svw;
  height: 100%;
}
#rate .rate-deco {
  position: absolute;
  right: min(2px, 0.2127659574svw);
  top: min(40px, 4.2553191489svw);
  width: min(85px, 9.0425531915svw);
}
#rate h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  color: #222222;
  margin-bottom: min(30px, 3.1914893617svw);
}
#rate h2 .line1 {
  font-size: min(34px, 3.6170212766svw);
  letter-spacing: 0.03em;
  margin-bottom: min(20px, 2.1276595745svw);
}
#rate h2 .line2 {
  font-size: min(56px, 5.9574468085svw);
  letter-spacing: 0.03em;
}
#rate h2 svg {
  margin-top: min(29px, 3.085106383svw);
  margin-right: min(20px, 2.1276595745svw);
  width: min(675px, 71.8085106383svw);
  height: auto;
}
#rate .img {
  margin-left: min(72px, 7.6595744681svw);
  width: min(669px, 71.170212766svw);
}

#questionnaire {
  position: relative;
  padding-top: min(108px, 11.4893617021svw);
  padding-bottom: min(116px, 12.3404255319svw);
  width: 100%;
}
#questionnaire:after {
  content: "";
  background-color: #E5F1FA;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100svw;
  height: 100%;
}
#questionnaire .questionnaire-deco {
  position: absolute;
  left: min(5px, 0.5319148936svw);
  top: min(72px, 7.6595744681svw);
  width: min(87px, 9.2553191489svw);
}
#questionnaire h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
}
#questionnaire h2 .line1 {
  font-size: min(56px, 5.9574468085svw);
  letter-spacing: 0.03em;
  margin-bottom: max(-24px, -2.5531914894svw);
  color: #468cc7;
}
#questionnaire h2 svg {
  margin-left: min(20px, 2.1276595745svw);
  margin-bottom: min(21px, 2.2340425532svw);
  width: min(650px, 69.1489361702svw);
  height: auto;
}
#questionnaire h2 .line2 {
  font-size: min(34px, 3.6170212766svw);
  letter-spacing: 0.03em;
  margin-bottom: min(45px, 4.7872340426svw);
  color: #222;
}
#questionnaire .cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: min(33px, 3.5106382979svw) 0;
}
#questionnaire .cards .card {
  width: calc(100% - min(45px, 4.7872340426svw));
  padding: min(43px, 4.5744680851svw) min(25px, 2.6595744681svw) min(54px, 5.7446808511svw) min(20px, 2.1276595745svw);
  background-color: #fff;
  border-radius: min(9px, 0.9574468085svw);
}
#questionnaire .cards .card .card-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-weight: 700;
  font-size: min(40px, 4.2553191489svw);
  color: #468cc7;
  line-height: 1;
  margin-bottom: min(26px, 2.7659574468svw);
  white-space: nowrap;
}
#questionnaire .cards .card .card-heading:before {
  content: "";
  margin-right: min(20px, 2.1276595745svw);
  background: url("../img/questionnaire-card-heading-icon.svg") no-repeat;
  background-size: contain;
  width: min(56px, 5.9574468085svw);
  min-width: min(56px, 5.9574468085svw);
  height: min(56px, 5.9574468085svw);
}
#questionnaire .cards .card .card-heading.small {
  font-size: min(37px, 3.9361702128svw);
}
#questionnaire .cards .card ol {
  width: 100%;
  gap: min(33px, 3.5106382979svw);
}
#questionnaire .cards .card ol li {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: min(65px, 6.914893617svw);
  padding: min(5px, 0.5319148936svw) 0;
  color: #222;
  font-weight: 500;
  font-size: min(25px, 2.6595744681svw);
}
#questionnaire .cards .card ol li:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: repeating-linear-gradient(90deg, #edebeb, #edebeb 2px, transparent 2px, transparent 4px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
}
#questionnaire .cards .card ol li .rank {
  font-weight: 700;
  width: min(97px, 10.3191489362svw);
  min-width: min(97px, 10.3191489362svw);
  padding-left: min(18px, 1.914893617svw);
  color: #468cc7;
}
#questionnaire .cards .card ol li:first-of-type {
  font-weight: 700;
  font-size: min(30px, 3.1914893617svw);
}
#questionnaire .cards .card ol li:first-of-type:after {
  content: "";
  background-image: repeating-linear-gradient(90deg, #edebeb, #edebeb 2px, transparent 2px, transparent 4px), repeating-linear-gradient(90deg, #edebeb, #edebeb 2px, transparent 2px, transparent 4px);
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 100% 2px, 100% 2px;
}
#questionnaire .cards .card ol li:first-of-type .rank {
  position: relative;
  padding-left: min(15px, 1.5957446809svw);
}
#questionnaire .cards .card ol li:first-of-type .rank span {
  position: relative;
  z-index: 1;
}
#questionnaire .cards .card ol li:first-of-type .rank:after {
  content: "";
  width: min(73px, 7.7659574468svw);
  height: min(13px, 1.3829787234svw);
  position: absolute;
  z-index: 0;
  bottom: min(2px, 0.2127659574svw);
  left: 0.6382978723px;
  background: #fdf26d;
}

#message {
  position: relative;
  padding-top: min(136px, 14.4680851064svw);
  padding-bottom: min(140px, 14.8936170213svw);
  width: 100%;
}
#message .message-deco {
  position: absolute;
  left: min(5px, 0.5319148936svw);
  top: min(99px, 10.5319148936svw);
  width: min(87px, 9.2553191489svw);
}
#message h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
}
#message h2 .line1 {
  font-size: min(56px, 5.9574468085svw);
  letter-spacing: 0.03em;
  margin-bottom: max(-24px, -2.5531914894svw);
  color: #02246a;
}
#message h2 svg {
  margin-left: min(20px, 2.1276595745svw);
  margin-bottom: min(21px, 2.2340425532svw);
  width: min(712px, 75.7446808511svw);
  height: auto;
}
#message h2 .line2 {
  font-size: min(34px, 3.6170212766svw);
  letter-spacing: 0.03em;
  margin-bottom: min(45px, 4.7872340426svw);
  color: #222;
}
#message .message-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(94px, 10svw) 0;
}
#message .message-items .message-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: min(24px, 2.5531914894svw);
}
#message .message-items .message-item .left {
  width: min(232px, 24.6808510638svw);
  min-width: min(232px, 24.6808510638svw);
}
#message .message-items .message-item .left .img {
  width: 100%;
  height: auto;
}
#message .message-items .message-item .left .line1 {
  font-weight: 700;
  font-size: min(30px, 3.1914893617svw);
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  color: #02246a;
  margin-top: min(28px, 2.9787234043svw);
}
#message .message-items .message-item .left .line2 {
  font-size: min(23px, 2.4468085106svw);
  letter-spacing: 0.03em;
  line-height: 1.565;
  text-align: center;
  color: #222;
  margin-top: min(23px, 2.4468085106svw);
  white-space: nowrap;
}
#message .message-items .message-item .right {
  width: min(644px, 68.5106382979svw);
}
#message .message-items .message-item .right h3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 700;
  font-size: min(30px, 3.1914893617svw);
  letter-spacing: 0.03em;
  color: #fff;
  width: min(644px, 68.5106382979svw);
  height: min(71px, 7.5531914894svw);
  border-radius: min(5px, 0.5319148936svw);
  background: #02246a;
  padding-left: min(20px, 2.1276595745svw);
  width: calc(100% - min(20px, 2.1276595745svw));
}
#message .message-items .message-item .right p {
  padding-left: min(20px, 2.1276595745svw);
  padding-top: min(18px, 1.914893617svw);
  font-size: min(25px, 2.6595744681svw);
  line-height: 1.8;
}
#message .message-items .message-item .right p .yellow {
  background: linear-gradient(transparent 15%, #FDF26D 15%);
}

#links {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-bottom: min(130px, 13.829787234svw);
}
#links .link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 47.77%;
}
#links .link p {
  font-size: min(28px, 2.9787234043svw);
  letter-spacing: 0.03em;
  font-weight: 700;
  line-height: 1;
  margin-bottom: min(18px, 1.914893617svw);
}
#links .link .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: min(34px, 3.6170212766svw);
  line-height: 1;
  color: #fff;
  text-shadow: -2px 2px 2px rgba(0, 0, 0, 0.16);
  border: 1px solid #fff;
  box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.16);
  height: min(109px, 11.5957446809svw);
  width: 100%;
  border-radius: min(3px, 0.3191489362svw);
  text-decoration: none;
  transition: opacity 0.3s;
}
#links .link .btn:hover {
  opacity: 0.7;
}
#links .link.blue p {
  color: #02246a;
}
#links .link.blue .btn {
  background-color: #02246a;
}
#links .link.red p {
  color: #e00e52;
}
#links .link.red .btn {
  background-color: #e00e52;
}

#footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  padding: min(88px, 9.3617021277svw) 20px min(114px, 12.1276595745svw) 20px;
}
#footer:after {
  content: "";
  background-color: #000;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100svw;
  height: 100%;
}
#footer img {
  margin-bottom: min(45px, 4.7872340426svw);
  width: min(98px, 10.4255319149svw);
}
#footer p {
  font-size: min(25px, 2.6595744681svw);
  line-height: 1.4;
  text-align: center;
}/*# sourceMappingURL=user_base.css.map */