@charset "UTF-8";
/* ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
# .vscodeファイル内に、Live Sass Compilerの設定を記述しています。
# VScodeのプラグイン、Live Sass Compiler を有効にすることでこのファイルのscssが lpstep/assets/css/style.css にコンパイルされます。
# このファイルにより生成されるcssは、function.phpに記述の.  lpstep-style で読み込みファイルを指定しています。
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ */
:root {
  --color-white: #FFF;
  --color-black: #121212;
  --color-black-second: #5D5A69;
  --color-blue-primary: #26227C;
  --color-blue-secondary: #2E29A8;
  --color-blue-light: #DFDFF0;
  --color-blue-light-gray: #F1F3F9;
  --color-red: #FC0047;
  --color-green: #00C300;
  --color-gray: #D9D9D9;
  --color-yellow: #FFED4D;
  --bg-base-color: var(--color-white);
  --bg-blue-color: var(--color-blue-light-gray);
  --bg-header-color: var(--color-black-second);
  --text-base-color: var(--color-black);
  --text-white-color: var(--color-white);
  --text-primary-color: var(--color-blue-primary);
  --text-secondary-color: var(--color-blue-secondary);
  --text-gray-color: var(--color-black-second);
  --content-max-width: 430px;
  --padding-lr: 24px;
  --radius-medium: 10px;
  --radius-small: 10px;
  --shadow-primary: 0px 0px 20px 0px rgba(215, 136, 114, 0.25);
  --font-family-base: "Inter", "Noto Sans JP", serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}

/* ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
# .vscodeファイル内に、Live Sass Compilerの設定を記述しています。
# VScodeのプラグイン、Live Sass Compiler を有効にすることでこのファイルのscssが lpstep/assets/css/style.css にコンパイルされます。
# このファイルにより生成されるcssは、function.phpに記述の.  lpstep-style で読み込みファイルを指定しています。
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ */
.l-lpstepHeader {
  padding: 0;
  background: #fff;
}

.l-lpstepHeader__inner {
  border-bottom: 2px solid var(--color-blue-primary);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-lpstepHeader__inner img {
  width: 38px;
  height: auto;
}

.p-lpstepHeader__heading {
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  flex: 1;
}
.p-lpstepHeader__heading span {
  color: var(--color-red);
}

.p-lpstepHeader__text {
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}

.l-lpstepFooter {
  background: var(--color-blue-light);
}

/* ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
# .vscodeファイル内に、Live Sass Compilerの設定を記述しています。
# VScodeのプラグイン、Live Sass Compiler を有効にすることでこのファイルのscssが lpstep/assets/css/style.css にコンパイルされます。
# このファイルにより生成されるcssは、function.phpに記述の.  lpstep-style で読み込みファイルを指定しています。
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ */
.l-lpstepHeader .c-siteTitle {
  color: var(--text-base-color);
  font-weight: 400;
}

/* ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
# .vscodeファイル内に、Live Sass Compilerの設定を記述しています。
# VScodeのプラグイン、Live Sass Compiler を有効にすることでこのファイルのscssが lpstep/assets/css/style.css にコンパイルされます。
# このファイルにより生成されるcssは、function.phpに記述の.  lpstep-style で読み込みファイルを指定しています。
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ */
.c-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-black-second);
  position: relative;
}
.c-announce::before {
  content: "";
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-check-box.svg) no-repeat center center/cover;
  display: block;
  --check-icon-size: 16px;
  width: var(--check-icon-size);
  height: var(--check-icon-size);
}

/* ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
# .vscodeファイル内に、Live Sass Compilerの設定を記述しています。
# VScodeのプラグイン、Live Sass Compiler を有効にすることでこのファイルのscssが lpstep/assets/css/style.css にコンパイルされます。
# このファイルにより生成されるcssは、function.phpに記述の.  lpstep-style で読み込みファイルを指定しています。
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ */
.c-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text-base-color);
  position: relative;
}
.c-text.-center {
  text-align: center;
}

/* ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
# .vscodeファイル内に、Live Sass Compilerの設定を記述しています。
# VScodeのプラグイン、Live Sass Compiler を有効にすることでこのファイルのscssが lpstep/assets/css/style.css にコンパイルされます。
# このファイルにより生成されるcssは、function.phpに記述の.  lpstep-style で読み込みファイルを指定しています。
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ */
.p-form__label {
  background: transparent;
  color: #000;
  border-radius: 0;
  padding: 0;
}

.p-form__next-button {
  border-radius: 10px;
  position: relative;
}
.p-form__next-button::after {
  content: "＞";
  font-size: 14px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translate(0, -50%);
  z-index: 1;
}
.p-form__next-button[type=submit] {
  max-width: 280px;
  padding: 16px 20px;
  font-size: 17px;
}

.p-form__prev-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid var(--color-black-second);
}
@media (any-hover: hover) {
  .p-form__prev-button {
    transform: 0.2 ease;
  }
  .p-form__prev-button:hover {
    color: var(--text-primary-color);
  }
}

.p-form__balloon-wrap {
  border-radius: 10px;
  border: 2px solid var(--color-blue-light);
  grid-template-columns: 60px 1fr;
}

.p-form__item-text {
  gap: 24px;
}
.p-form__item-text::before {
  --check-icon-size: 18px;
}

.p-form__item {
  display: grid;
  gap: 24px;
}
.p-form__item select {
  -webkit-appearance: none;
  appearance: none;
  color: var(--text-base-color);
  border-radius: 10px;
}
.p-form__item select::-ms-expand {
  display: none;
}

.p-form__itemContainer {
  background: var(--bg-base-color);
  display: grid;
  gap: 40px;
  padding: 32px var(--padding-lr);
}

.p-form__input {
  background: var(--color-white);
  border: 2px solid var(--color-blue-light);
  padding: 16px 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  border-radius: var(--radius-small);
  width: 100%;
  display: block;
}

.p-form__input-wrap {
  display: grid;
  align-items: center;
}

.p-form__balloon-text {
  font-size: 14px;
}
.p-form__balloon-text span:not(.js-namae) {
  font-weight: var(--font-weight-bold);
  color: var(--color-red);
}

.p-form__radio .wpcf7-list-item-label::before {
  border-radius: 10px;
  border: 2px solid var(--color-blue-light);
}
@media (any-hover: hover) {
  .p-form__radio .wpcf7-list-item-label:hover::before {
    background: #FFFEF4;
  }
}
.p-form__radio input[type=radio]:checked + .wpcf7-list-item-label::before {
  background: var(--bg-blue-color);
  border: 2px solid var(--color-blue-secondary);
}

.p-form__radio-col1 {
  display: grid;
  gap: 16px;
}
.p-form__radio-col1 .wpcf7-list-item-label {
  padding: 24px;
  border-radius: 10px;
}
.p-form__radio-col1 .wpcf7-list-item-label::before {
  border: 1px solid var(--color-blue-secondary);
  background: var(--color-blue-light-gray);
}
.p-form__radio-col1 .wpcf7-list-item-label::after {
  color: var(--color-black);
}
.p-form__radio-col1 .wpcf7-list-item {
  width: 100%;
  position: relative;
}
.p-form__radio-col1 .wpcf7-list-item::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  border: none;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.p-form__radio-col1 .wpcf7-list-item.first::before {
  content: none;
}
.p-form__radio-col1 .wpcf7-list-item.last::before {
  content: none;
}
.p-form__radio-col1 input[type=radio]:checked + .wpcf7-list-item-label {
  color: #fff;
  font-weight: 700;
}
.p-form__radio-col1 input[type=radio]:checked + .wpcf7-list-item-label::before {
  background: var(--color-blue-secondary);
}
.p-form__radio-col1 input[type=radio]:checked + .wpcf7-list-item-label::after {
  color: #fff;
}

.p-form__radio-col2.-step1 .wpcf7-list-item:last-of-type {
  grid-column: 1/3;
}

.p-form__radio-col2.-step1 .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_01.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step1 .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_02.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step1 .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_03.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step1 .wpcf7-list-item:nth-of-type(4) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_04.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step1 .wpcf7-list-item:nth-of-type(5) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_05.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-1 .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_06.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-1 .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_07.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-1 .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_08.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-1 .wpcf7-list-item:nth-of-type(4) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_09.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-2 .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_10.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-2 .wpcf7-list-item:nth-of-type(2) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_11.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-2 .wpcf7-list-item:nth-of-type(3) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_12.png) no-repeat center center/cover;
}
.p-form__radio-col2.-step2-2 .wpcf7-list-item:nth-of-type(4) .wpcf7-list-item-label::after {
  background: url(/wp-content/themes/ageru-career-media/lpstep/assets/v2/img/icon-person_13.png) no-repeat center center/cover;
}/*# sourceMappingURL=style.css.map */