@charset "UTF-8";
/*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) ***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg*, symbol*)) {
  all: unset;
  display: revert;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a, button {
  cursor: revert;
}

ol, ul, menu {
  list-style: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
  appearance: revert;
}

:where(pre) {
  all: revert;
}

::-moz-placeholder {
  color: unset;
}

::-webkit-input-placeholder {
  color: unset;
}

:-ms-input-placeholder {
  color: unset;
}

::-ms-input-placeholder {
  color: unset;
}

::placeholder {
  color: unset;
}

::marker {
  content: initial;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
}

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

img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

/* Typesqu  are-font */
.pc-only {
  display: none;
}

@media screen and (min-width: 992px) {
  .pc-only {
    display: block;
  }
}
@media screen and (min-width: 992px) {
  .sp-only {
    display: none;
  }
}
.content-inner {
  max-width: 1000px;
  padding: 0 10px;
  margin: 0 auto;
}

.content-inner .mv-text__button-alert {
  padding: 0 10%;
}

body {
  font-family: "Gothic MB101 Medium", sans-serif;
  background-color: rgb(164, 227, 200);
}

.header {
  z-index: 10;
  width: 100%;
  background-color: #fff;
}

.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 62.5rem;
  padding: 0.5rem;
  margin-inline: auto;
}

@media screen and (min-width: 1200px) {
  .header__inner {
    padding: 0.625rem 0;
  }
}
.header__button {
  display: none;
}

@media screen and (min-width: 992px) {
  .header__button {
    display: block;
  }
}
.header-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
}

.header-logo__text {
  color: #888888;
  font-size: 0.625rem;
}

.header-logo__image {
  display: block;
  margin-top: 0.1875rem;
  width: 6.25rem;
}

.conversion-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #1bb977;
  color: #fff;
  font-family: "Gothic MB101 Bold", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  position: relative;
  padding: 1.25rem;
  vertical-align: middle;
  text-decoration: none;
  line-height: 1;
  gap: 15px;
  -webkit-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.25);
          box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.25);
  border-radius: 45px;
  width: 75%;
  margin: 0 auto;
}

.conversion-button.is-disabled {
  pointer-events: none;
  background-color: #8B8B8B;
  color: #BCBCBC;
}

.conversion-button::before {
  content: url(/img/mini-robo.png);
}

.conversion-button.is-disabled::before {
  color: #BCBCBC;
  opacity: 0.4;
}

.conversion-button::before__small {
  font-size: 1.0625rem;
}

.mv-text__button-alert {
  margin-top: 15px;
  font-size: 12px;
  color: #FE4E4E;
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
}

@media (max-width: 767px) {
  .is-pc {
    display: none !important;
  }
  .mv-text__button-alert {
    font-size: 11px;
    line-height: 2;
    padding: 0 8.6%;
    word-break: auto-phrase;
  }
}
.mv {
  background-image: url(/img/mv-bg.png);
  background-size: cover;
  background-color: #282828;
  padding: 75px 0 50px;
}

.mv__inner {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mv-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 43vw;
}

.mv-lead-top {
  border-bottom: #fff solid 2px;
  color: #fff;
  font-size: clamp(0.688rem, 0.021rem + 1.39vw, 1.063rem);
}

.mv-lead-top__diagnose {
  font-size: clamp(0.875rem, 0.097rem + 1.62vw, 1.313rem);
}

.mv-lead-bottom {
  color: #fff27b;
}

.attention {
  color: #fff;
  font-size: 10px;
}

.under-mv__attention {
  text-align: right;
  font-size: 9px;
  color: rgb(17, 124, 79);
}

.worries {
  padding: 90px 150px;
}

.worries__heading {
  text-align: center;
  color: rgb(40, 40, 40);
  font-size: clamp(1.375rem, 0.819rem + 1.16vw, 1.688rem);
  font-weight: 700;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  background-image: url(/キャリアパス診断/img/PROBLEM.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  line-height: 60px;
  margin-bottom: 100px;
}

.worries-speech {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 25px;
}

.worries-speech__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 35px;
  width: 33%;
}

.worries-speech__item .worries-speech__bubble {
  position: relative;
}

.worries-speech__item .worries-problem {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: "makinas-4-flat", sans-serif;
}

.worries-speech__item .worries-speech__worry {
  color: rgb(40, 40, 40);
  font-size: clamp(0.525rem, 1.09vw, 0.875rem);
  letter-spacing: 0.7px;
  font-weight: 500;
}

.worries-speech__profiles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  color: rgb(40, 40, 40);
}

.worries-speech__profiles .worries-speech__profile {
  font-size: clamp(0.637rem, 1.33vw, 1.063rem);
}

.worries-speech__profiles img {
  width: 100%;
}

.worries-speech__profiles .worries-speech__underline {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, yellow));
  background: linear-gradient(transparent 70%, yellow 70%);
  margin-bottom: 5px;
}

.resolution {
  background-color: #fff;
  padding: 90px 0;
}

.resolution__heading {
  text-align: center;
  color: rgb(40, 40, 40);
  font-size: clamp(1.375rem, 0.819rem + 1.16vw, 1.688rem);
  font-weight: 700;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  background-image: url(/キャリアパス診断/img/PROBLEM.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  line-height: 60px;
  margin-bottom: 100px;
}

.resolution-button {
  width: 40vw;
  margin: 0 auto;
}

.resolution__robo-bubble {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  color: rgb(40, 40, 40);
  font-size: clamp(0.675rem, 1.41vw, 1.125rem);
}

.resolution__robo-bubble img {
  width: 9%;
}

.resolution__robo-bubble__chat {
  background-color: #fffce3;
  padding: 22px 48px;
  border: solid rgb(40, 40, 40) 2px;
  text-align: center;
}

.relosution__merits-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 110px;
  gap: 25px;
}

.relosution__merits-container .relosution__merit {
  width: 33%;
  position: relative;
  background: #f2f6fa;
  -webkit-box-shadow: 4px 4px 15px rgba(146, 146, 146, 0.16);
          box-shadow: 4px 4px 15px rgba(146, 146, 146, 0.16);
  border-radius: 5px;
}

.relosution__merits-container .relosution__merit .merit-number {
  position: absolute;
  top: 0;
  left: 10%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.img-box {
  height: 300px;
  position: relative;
}

.img-box::after {
  background-image: url(../img/merit1.png);
  position: absolute;
  background-size: contain;
  top: 10%;
  left: 10%;
}

.flow {
  border: 2px solid rgb(40, 40, 40);
  margin-top: 70px;
  padding: 75px;
  position: relative;
}

.flow h2 {
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 0 35px;
  color: rgb(40, 40, 40);
}

.flow-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flow-container .flow-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  text-align: center;
  line-height: 27px;
}

.flow-container .flow-item__step {
  background-color: #fff;
  font-size: clamp(0.563rem, 1.17vw, 0.938rem);
  color: rgb(40, 40, 40);
}

.flow-container .flow-item__dot {
  height: 28px;
  width: 6px;
  margin: 6px 0;
}

.flow-container .flow-item__icon {
  height: 85px;
}

.flow-container .step1 {
  background-image: url(/キャリアパス診断/img/01.png);
  background-size: contain;
  background-position-x: center;
  background-repeat: no-repeat;
}

.flow-container .step2 {
  background-image: url(/キャリアパス診断/img/02.png);
  background-size: contain;
  background-position-x: center;
  background-repeat: no-repeat;
}

.flow-container .step3 {
  background-image: url(/キャリアパス診断/img/03.png);
  background-size: contain;
  background-position-x: center;
  background-repeat: no-repeat;
}

.flow-container .step4 {
  background-image: url(/キャリアパス診断/img/04.png);
  background-size: contain;
  background-position-x: center;
  background-repeat: no-repeat;
}

.l-section {
  background: #e3ecf8;
}

.heading-1 {
  color: #fff;
  background: #2c8dff;
  text-align: center;
  width: 100%;
  padding: 12px 0 10px;
}

.form__item {
  margin-bottom: 10px;
}

.form__label {
  font-size: 1.3rem;
  font-weight: bold;
  font-family: "A1 Gothic B", sans-serif;
  letter-spacing: 0.03em;
  line-height: 2;
  margin-bottom: 3px;
  display: block;
}

.form__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.form__agree {
  font-size: 1.1rem;
  line-height: 1.45;
  text-align: center;
  margin-bottom: 13px;
}

.form__button-wrap {
  position: relative;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  -webkit-box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.2);
}

.form__button {
  background: #ff005c;
  width: 100%;
  border: none;
  border-radius: 6px;
  height: 65px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.form__button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  font-family: "A1 Gothic B", sans-serif;
  letter-spacing: 0.07em;
  color: #ffffff;
  width: 100%;
  text-align: center;
  pointer-events: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.form__button-text::before {
  content: "";
  width: 21px;
  height: 15px;
  display: inline-block;
  background: url(../img/arrow_form_button.svg) no-repeat center/contain;
  margin-right: 11px;
}

.input {
  border: none;
  border-radius: 3px;
  height: 60px;
  padding: 0 17px;
  width: 100%;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

.input::-moz-placeholder {
  color: rgba(51, 60, 89, 0.2);
  letter-spacing: 0.1em;
}

.input::-webkit-input-placeholder {
  color: rgba(51, 60, 89, 0.2);
  letter-spacing: 0.1em;
}

.input:-ms-input-placeholder {
  color: rgba(51, 60, 89, 0.2);
  letter-spacing: 0.1em;
}

.input::-ms-input-placeholder {
  color: rgba(51, 60, 89, 0.2);
  letter-spacing: 0.1em;
}

.input::placeholder {
  color: rgba(51, 60, 89, 0.2);
  letter-spacing: 0.1em;
}

.input--sm {
  width: 48.6%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.input--sm:not(:last-child) {
  margin-right: 2.8%;
}

.form-note {
  background: #d5e9fb;
  padding: 11px 10px;
}

.form-note__text {
  font-size: 1rem;
  line-height: 1.3;
}

.form-note__text sup {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  display: inline-block;
  margin-right: -0.2em;
  vertical-align: top;
  font-family: "A1 Gothic R", sans-serif;
} /*# sourceMappingURL=top.css.map */