@charset "UTF-8";
 :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: 16px;
--radius-small: 4px;
--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;
}
:where(*) {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
line-height: 1.5;
font-weight: var(--font-weight-regular);
color: var(--text-base-color);
font-family: var(--font-family-base);
background: #FBFBFF;
}
main {
min-height: 860px;
background: #EDEDED;
}
@media screen and (min-width: 768px) {
main {
min-height: 98vh;
}
}
:where(a) {
text-decoration: none;
color: inherit;
cursor: pointer;
} .l-steps {
padding: 16px var(--padding-lr);
} .l-lpstep-Container {
margin-inline: auto;
max-width: var(--content-max-width);
width: 100%;
}
.l-lpstepHeader {
padding: 8px 4px;
background: var(--bg-header-color);
}
.l-lpstepFooter {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
padding: 16px var(--padding-lr);
background: var(--bg-blue-color);
}
.-lpstepContents {
background: var(--bg-base-color);
} .l-thanks__container {
padding: 32px var(--padding-lr);
background: var(--bg-base-color);
display: grid;
gap: 40px;
}
.l-thanks__head {
background: var(--bg-blue-color);
}
.p-thanks__head-message {
padding: 24px var(--padding-lr);
}
.p-thanks__head-message p {
text-align: center;
font-weight: var(--font-weight-bold);
line-height: 1.5;
font-size: 16px;
}
.p-thanks__head-message p span {
font-size: 20px;
color: var(--text-primary-color);
}
.p-thanks__head-label {
padding: 8px var(--padding-lr);
background: var(--text-primary-color);
color: var(--text-white-color);
font-size: 14px;
font-weight: var(--font-weight-medium);
} .l-mv img {
width: 100%;
height: auto;
vertical-align: bottom;
} .p-steps__wrap {
background: var(--color-blue-light-gray);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.c-steps {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.c-steps__headline, .c-steps__text {
font-size: 12px;
line-height: 1.2;
font-weight: bold;
text-transform: uppercase;
color: var(--color-blue-secondary);
text-align: center;
}
.c-steps__icon {
background: var(--color-gray);
border-radius: calc(infinity * 1px);
display: flex;
align-items: center;
justify-content: center;
--icon-size: 32px;
width: var(--icon-size);
height: var(--icon-size);
color: var(--color-white);
line-height: 1;
font-size: 18px;
font-weight: bold;
}
.c-steps__icon.is-active {
background: var(--color-blue-primary);
} .l-lpstepHeader .c-siteTitle {
color: var(--text-white-color);
font-size: 14px;
text-align: center;
font-weight: 500;
}
.l-lpstepHeader .c-siteTitle span {
color: var(--color-yellow);
} .c-cvButton {
background: var(--color-green);
border-radius: 16px;
overflow: hidden;
color: var(--text-white-color);
font-size: 18px;
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 8px 16px;
}
.c-cvButton img {
width: 32px;
height: auto;
vertical-align: bottom;
} .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(//ageru-career.com/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);
} .c-pointerImg {
width: 70px;
position: absolute;
z-index: 10;
transition: top 0.5s ease, right 0.5s ease, transform 0.5s ease;
pointer-events: none;
will-change: top, right;
right: 0;
}
.c-pointerImg img {
width: 100%;
height: auto;
vertical-align: bottom;
} .c-fingerImg__container {
position: relative;
}
.c-fingerImg {
width: 80px;
position: absolute;
z-index: 10;
pointer-events: none;
right: -24px;
top: 0;
--finger-duration: 2s;
animation: fingerFloat var(--finger-duration) ease-in-out infinite alternate;
will-change: transform;
}
.c-fingerImg img {
width: 100%;
height: auto;
vertical-align: bottom;
}
@keyframes fingerFloat {
from {
transform: translateY(0);
}
to {
transform: translateY(var(--finger-travel, 0px));
}
} .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;
} .p-form__main section {
position: relative;
}
.p-form {
background: var(--bg-base-color);
}
.p-form * {
box-sizing: border-box;
}
.p-form :where(*) {
margin: 0;
padding: 0;
}
.p-form__item {
display: grid;
gap: 24px;
}
.p-form__item.-birth .p-form__input {
width: 80px;
}
.p-form__item select {
-webkit-appearance: none;
appearance: none;
color: var(--text-base-color);
}
.p-form__item select::-ms-expand {
display: none;
}
.p-form__item .wpcf7-form-control-wrap:has(select)::before {
content: "▼";
color: var(--color-gray);
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.p-form__itemContainer {
background: var(--bg-base-color);
display: grid;
gap: 40px;
padding: 32px var(--padding-lr);
}
.p-form__item-text {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 14px;
line-height: 1.2;
color: var(--color-black-second);
position: relative;
}
.p-form__item-text::before {
content: "";
background: url(//ageru-career.com/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);
}
.p-form__label {
background: var(--color-blue-light);
color: var(--color-blue-secondary);
border-radius: calc(infinity * 1px);
padding: 8px 16px;
text-align: center;
display: block;
width: 100%;
font-size: 18px;
line-height: 1.5;
font-weight: bold;
}
.p-form__label.-color-blue {
background: var(--color-blue-primary);
color: var(--text-white-color);
}
.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-option {
font-size: 16px;
font-weight: 500;
line-height: 1.2;
text-align: center;
}
.p-form__input-wrap {
display: grid;
align-items: center;
}
.p-form__input-wrap.-col2 {
gap: 8px;
grid-template-columns: auto 1fr;
}
.p-form__input-wrap.-birth {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.p-form__birth-input-container {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.p-form__button-wrap {
display: grid;
gap: 16px;
align-items: center;
padding: 0 var(--padding-lr) 32px;
}
.p-form__prev-button {
text-align: center;
display: block;
margin-inline: auto;
padding: 4px 8px;
text-decoration: underline;
font-size: 12px;
color: var(--text-gray-color);
}
@media (any-hover: hover) {
.p-form__prev-button {
transform: 0.2 ease;
}
.p-form__prev-button:hover {
color: var(--text-primary-color);
}
}
.p-form__next-button {
border-radius: calc(infinity * 1px);
overflow: hidden;
padding: 20px 16px;
color: var(--text-white-color);
background: var(--color-red);
width: 100%;
max-width: 280px;
margin-inline: auto;
font-size: 16px;
font-weight: var(--font-weight-medium);
text-decoration: none;
text-align: center;
border: none;
}
.p-form__next-button[disabled] {
cursor: not-allowed;
pointer-events: none;
background: var(--color-gray);
animation: none !important;
}
@media (any-hover: hover) {
.p-form__next-button {
transition: 0.2s ease;
}
.p-form__next-button:hover {
background: var(--color-blue-secondary);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.4) inset;
transform: translateY(2px);
}
}
.p-form__next-button[type=submit] {
max-width: 320px;
padding: 24px;
font-size: 18px;
font-weight: var(--font-weight-bold);
animation: poyopoyo 2s ease-out infinite;
}
form[data-status=submitting] .p-form__next-button[type=submit] {
cursor: not-allowed;
pointer-events: none;
animation: none !important;
background: #818181;
}
.p-form__balloon-wrap {
overflow: hidden;
border-radius: 16px;
border: 1px solid var(--color-blue-light);
background: var(--bg-base-color);
padding: 24px;
gap: 16px;
display: grid;
grid-template-columns: 56px 1fr;
}
.p-form__balloon-wrap.-accent {
background: var(--bg-blue-color);
border: 2px solid var(--color-blue-secondary);
}
.p-form__balloon-wrap.-accent p > span {
color: var(--color-red);
font-weight: var(--font-weight-bold);
}
.p-form__balloon-tel {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 20px;
font-weight: 500;
color: var(--text-gray-color);
margin-block-start: 8px;
}
.p-form__balloon-img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.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 input[type=radio] {
opacity: 0;
visibility: hidden;
position: absolute;
}
.p-form__radio .wpcf7-list-item-label {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 16px;
height: 80px;
z-index: 1;
font-weight: 500;
text-align: center;
font-size: 14px;
line-height: 1.2;
white-space: break-spaces;
}
.p-form__radio .wpcf7-list-item-label::before {
box-sizing: border-box;
display: block;
content: "";
border-radius: 16px;
border: 2px solid var(--color-blue-light);
background: var(--bg-base-color);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 2px solid var(--color-blue-light);
background: var(--bg-base-color);
display: flex;
align-items: center;
z-index: -1;
transition: 0.2s ease;
}
@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 {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 8px 16px 8px 136px;
height: 80px;
z-index: 1;
font-weight: 500;
text-align: center;
}
.p-form__radio-col1 .wpcf7-list-item-label::before {
box-sizing: border-box;
display: block;
content: "";
border-radius: 16px;
border: 2px solid var(--color-blue-light);
background: var(--bg-base-color);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 2px solid var(--color-blue-light);
background: var(--bg-base-color);
display: flex;
align-items: center;
z-index: -1;
}
.p-form__radio-col1 .wpcf7-list-item-label::after {
content: "▶︎";
color: var(--text-secondary-color);
}
.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 {
background: url(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-announce_a.png) no-repeat center center/cover;
}
.p-form__radio-col1 .wpcf7-list-item.last::before {
background: url(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-announce_b.png) no-repeat center center/cover;
}
.p-form__radio-col2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.p-form__radio-col2 .wpcf7-list-item-label {
width: 100%;
height: 120px;
display: grid;
grid-template-rows: 56px 1fr;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px;
}
.p-form__radio-col2.-step1 .wpcf7-list-item-label::after, .p-form__radio-col2.-step2-1 .wpcf7-list-item-label::after, .p-form__radio-col2.-step2-2 .wpcf7-list-item-label::after {
content: "";
display: block;
width: 56px;
height: 56px;
pointer-events: none;
grid-row: 1/2;
margin-inline: auto;
}
.p-form__radio-col2.-step1 .wpcf7-list-item:nth-of-type(1) .wpcf7-list-item-label::after {
background: url(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_a.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-women_a.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_f.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-women_f.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_g.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_b.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_c.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_d.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-men_e.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-women_b.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-women_c.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-women_d.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(//ageru-career.com/wp-content/themes/ageru-career-media/lpstep/assets/img/icon-women_e.png) no-repeat center center/cover;
}
@keyframes scaleBounce {
0% {
transform: scale(1);
}
50% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
.js-animate {
animation: scaleBounce 0.3s ease;
}
.is-hidden {
display: none !important;
}
.wpcf7-submit:disabled {
cursor: not-allowed;
pointer-events: none;
background: var(--color-gray);
}
.wpcf7-not-valid-tip {
display: none;
}
.wpcf7-response-output {
border: none !important;
font-size: 14px;
color: var(--color-red);
font-weight: bold;
margin: 0 !important;
padding: 16px !important;
background: var(--bg-base-color);
text-decoration: underline;
}
.p-form__globalMask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 6;
}
.wpcf7-form {
position: relative;
} .wpcf7-form.is-cta-focus > .p-form__globalMask {
opacity: 1;
} .p-form__button-wrap {
position: relative;
z-index: 20;
}
.c-pointerImg {
position: absolute;
z-index: 21; } .l-lpstepFooter .p-footer__nav {
text-align: center;
font-size: 14px;
}
.l-lpstepFooter .p-footer__copyWrite small {
text-align: center;
font-size: 12px;
color: var(--text-gray-color);
} .p-thanks__section {
display: grid;
gap: 24px;
}
.p-thanks__interview {
display: grid;
gap: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-blue-light);
}
.p-thanks__interview-title {
font-weight: var(--font-weight-bold);
font-size: 16px;
color: var(--text-primary-color);
}
.p-thanks__interview-block {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
}
.p-thanks__interview-img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.p-thanks__interview__answer {
display: grid;
gap: 8px;
}
.p-thanks__interview__answer p {
font-weight: var(--font-weight-medium);
color: var(--text-gray-color);
font-size: 14px;
}
.p-thanks__interview__answer p strong {
font-size: 16px;
color: var(--text-base-color);
}
.p-thanks__flow {
display: grid;
gap: 24px;
}
.p-thanks__flow-title {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: var(--text-primary-color);
text-align: center;
font-size: 18px;
font-weight: var(--font-weight-bold);
}
.p-thanks__flow-title span {
font-size: 12px;
text-transform: uppercase;
}
.p-thanks__flow-text {
font-weight: var(--font-weight-medium);
font-size: 14px;
}
.p-thanks__flow-img {
width: 100%;
height: auto;
vertical-align: bottom;
border-radius: 16px;
} .p-cvCard {
border-radius: 16px;
overflow: hidden;
background: var(--bg-base-color);
border: 1px solid var(--color-blue-secondary);
display: grid;
padding: 24px;
}
.p-cvCard p {
text-align: center;
font-size: 14px;
font-weight: var(--font-weight-medium);
}
.p-cvCard p strong {
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-green);
}
.p-cvCard p.-txt-primary {
color: var(--text-secondary-color);
font-weight: var(--font-weight-bold);
}
.p-cvCard p:nth-of-type(n+2) {
margin-block-start: 8px;
}
.p-cvCard__button {
margin-block-start: 16px;
animation: poyopoyo 2s ease-out infinite;
}
@media (any-hover: hover) {
.p-cvCard__button {
transition: 0.2s ease;
}
.p-cvCard__button:hover {
background: #0AA00A;
}
}
@keyframes poyopoyo {
0%, 40%, 60%, 80% {
transform: scale(1);
}
50%, 70% {
transform: scale(0.95);
}
} .p-timerex__wrap {
display: grid;
gap: 24px;
} .form__privacy {
margin: 20px 0;
text-align: center;
font-size: 13px;
}
.privacy-label {
cursor: pointer;
display: block;
align-items: center;
}
.privacy-label input {
margin-right: 8px!important;
transform: scale(1.2)!important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px;
height: 18px;
border: 2px solid #bbb; border-radius: 4px;
background: transparent; cursor: pointer;
}
.privacy-label a {
color: #1643f8ff;
text-decoration: underline;
}
input[type="checkbox"]:checked {
background-color: #ff9800;
border-color: #ff9800;
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin: 2px auto;
}
.ttlow {
font-size: 20px !important;
font-weight: 700;
color: #FC0047;
}
.p-thanks__head-message {
background-color: #ffeff7;
}
.lpcontentsow {
background-color: #ffe0e0;
}
.thanks_red3 {
color: #00C300;
}