@charset "UTF-8";

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

@font-face {
  font-family: Local Noto Sans JP;
  src: local('Noto Sans JP');
}

@font-face {
  font-family: 'Local Noto Serif JP';
  src: local('Noto Serif JP');
}

:root {
  --header-block-size: 54px;
  --max-section-size-basic: 1080px;
  --max-section-size-max: 1280px;
  --max-section-size-form: 900px;
  --global-gutter: 20px;
  --breakpoints-header: 1200px;
  --font-noto-sans: 'Local Noto Sans JP', 'Noto Sans JP', sans-serif;
  --font-noto-serif: 'Local Noto Serif JP', 'Noto Serif JP', serif;
  --font-roboto-condensed: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
  --jia-primary: #df0615;
  --jlps-primary: #0086bf;
  --gradient-jia-param: #df0615 0%, #ff5d07 100%;
  --gradient-jlps-param: #0086bf 0%, #168ba5 100%;
  --z-index-header: 200;
  --z-index-header-logo: 180;
  --z-index-header-sm: 170;
  --z-index-floating-entry: 100;
}

@media (width>=768px) {
  :root {
    --global-gutter: clamp(20px, calc(20px + (100vw - 768px) * (20 / (1280 - 768))), 40px);
  }
}

@media (width>=1200px) {
  :root {
    --header-block-size: 80px;
  }
}

html {
  block-size: 100%;
  scroll-padding-top: var(--header-block-size);
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

body {
  position: relative;
  block-size: 100%;
  font-family: var(--font-noto-sans);
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.625;
  letter-spacing: 0.02em;
  color: #2f464e;
  overflow-x: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: 'palt';
}

a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  color: #2f464e;
}

@media (hover: hover) {
  a:where(:any-link, :enabled, summary):hover {
    text-decoration: none;
  }
}

:where(button, [type='button'], [type='reset'], [type='submit']) {
  touch-action: manipulation;
}

:where(dialog) {
  inline-size: unset;
  max-inline-size: unset;
  block-size: unset;
  max-block-size: unset;
  margin: unset;
  padding: unset;
  color: unset;
  border: unset;
  background-color: unset;
  overflow: unset;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.container {
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-noto-sans);
  font-optical-sizing: auto;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.625;
  letter-spacing: 0.02em;
  color: #2f464e;
  overflow-x: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  border-radius: 0;
  border: 0;
  background: #fff;
}

.container a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  color: inherit;
}

@media (hover: hover) {
  .container a:where(:any-link, :enabled, summary):hover {
    text-decoration: none;
  }
}

.container a[target='_blank']:after {
  content: '';
  display: inline flow-root;
  inline-size: 14px;
  aspect-ratio: 1;
  margin-inline-start: 4px;
  vertical-align: middle;
  background-color: currentColor;
  background: url(https://www.jia-ltd.com/recruit/assets/img/common/icon_external.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 12px;
}

.container a[href^='tel:'] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

.container em,
.container strong {
  font-weight: 600;
}

.container input,
.container button,
.container textarea,
.container select {
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 1em;
}

.container .label {
  display: block flex;
  align-items: center;
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}

@media (width>=768px) {
  .container .label {
    min-block-size: 48px;
  }
}

.container .label:has(.badge) {
  inline-size: fit-content;
}

.container .label:has(.badge-required):after {
  content: '*';
  display: inline flow-root;
  margin-inline-start: 2px;
  color: #df0615;
}

.container .label:has(.badge-required) .badge-required {
  display: none;
  padding: 0;
  inline-size: 0;
  font-size: 0;
}

.container .help-block {
  font-size: 0.75em;
}

.container .description-block {
  margin: 0;
  color: #2f464e;
}

.container .form-column {
  margin: 0;
  padding-block: 16px;
}

.container input[type='text'],
.container input[type='email'],
.container input[type='tel'],
.container input[type='url'] {
  max-inline-size: initial;
  inline-size: 100%;
  block-size: 48px;
  padding-inline: 16px;
  border: none;
  border-radius: 5px;
  background-color: #edf1f2;
}

.container input[type='text']::placeholder,
.container input[type='email']::placeholder,
.container input[type='tel']::placeholder,
.container input[type='url']::placeholder {
  color: #598493;
}

.container textarea {
  max-inline-size: initial;
  inline-size: 100%;
  block-size: 48px;
  min-block-size: 12em;
  padding: 12px 16px;
  border: none;
  border-radius: 5px;
  background-color: #edf1f2;
  resize: vertical;
}

.container textarea::placeholder {
  color: #598493;
}

.container input[type='date'] {
  position: relative;
  max-inline-size: 100%;
  inline-size: 100%;
  block-size: 48px;
  padding-inline: 16px;
  color: #598493;
  border: 1px solid #80a3af;
  border-radius: 5px;
  background-color: #fff;
}

.container input[type='date']::placeholder {
  color: #598493;
}

.container input[type='date']::-webkit-calendar-picker-indicator {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 48px;
  block-size: 100%;
  background: transparent;
  cursor: pointer;
}

.container input[type='date']:after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  block-size: 100%;
  aspect-ratio: 1;
  background-color: #80a3af;
  pointer-events: none;
  background: url(https://www.jia-ltd.com/recruit/assets/img/common/icon_calendar.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.container input[type='file'] {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 48px;
  padding-inline: 16px;
  padding-block: 10px;
  font-size: 14px;
  border: 1px solid #80a3af;
  border-radius: 5px;
  background-color: #fff;
}

.container input[type='file']::placeholder {
  color: #598493;
}

.container input[type='file']::file-selector-button {
  display: inline flex;
  align-items: center;
  block-size: 26px;
  margin-inline-end: 16px;
  padding-inline: 12px;
  font-size: 11px;
  color: #598493;
  border: 1px solid #80a3af;
  border-radius: 3px;
  background-color: #edf1f2;
  cursor: pointer;
}

.container select {
  max-inline-size: 100%;
  inline-size: 100%;
  block-size: 48px;
  padding-inline-start: 16px;
  padding-inline-end: 46px;
  color: #598493;
  border: 1px solid #80a3af;
  border-radius: 5px;
  background-color: #fff;
}

.container .form-page {
  display: block grid;
  align-content: start;
}

.container .form-column-text,
.container .form-column-textarea,
.container .form-column-select,
.container .form-column-calendar,
.container .form-column-radio,
.container .form-column-email,
.container .form-column-tel,
.container .form-column-zip-code-jp,
.container .form-column-file {
  display: block grid;
  align-items: start;
  row-gap: 10px;
  column-gap: 32px;
}

@media (width>=768px) {
  .container .form-column-text,
  .container .form-column-textarea,
  .container .form-column-select,
  .container .form-column-calendar,
  .container .form-column-radio,
  .container .form-column-email,
  .container .form-column-tel,
  .container .form-column-zip-code-jp,
  .container .form-column-file {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

.container .form-column-select:has(select) {
  position: relative;
}

.container .form-column-select:has(select):after {
  content: '';
  position: absolute;
  inset-block-start: 69px;
  inset-inline-end: 16px;
  inline-size: 10px;
  block-size: 10px;
  background-color: #80a3af;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
}

@media (width>=768px) {
  .container .form-column-select:has(select):after {
    inset-block-start: 34px;
  }
}

.container .form-column-radio fieldset {
  display: contents;
  border: none;
}

.container .form-column-radio .label {
  min-block-size: initial;
}

.container .form-column-radio .input-group {
  display: block flex;
  align-items: center;
  column-gap: 20px;
}

.container .form-column-radio .input-group .option {
  --_check_opacity: 0;
  position: relative;
  display: block flex;
  align-items: center;
  cursor: pointer;
}

.container .form-column-radio .input-group .option:has(:checked) {
  --_check_opacity: 1;
}

.container .form-column-radio .input-group .option input[type='radio'] {
  position: absolute;
  opacity: 0;
}

.container .form-column-radio .input-group .option .option-text {
  position: relative;
  display: block flex;
  align-items: center;
  column-gap: 8px;
  block-size: 22px;
  font-size: 15px;
}

.container .form-column-radio .input-group .option .option-text:before {
  content: '';
  display: block grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border: 1px solid #598493;
  border-radius: calc(infinity * 1px);
}

.container .form-column-radio .input-group .option .option-text:after {
  content: '';
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 5px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: calc(infinity * 1px);
  background-color: #80a3af;
  opacity: var(--_check_opacity);
}

.container .form-column-zip-code-jp .input-group input:first-child {
  inline-size: 110px;
}

.container .form-column-zip-code-jp .input-group input:last-child {
  inline-size: 110px;
}

.container .form-column-zip-code-jp .input-group input.zip-code-jp {
  inline-size: 220px;
}

.container .form-column-textarea:has(.description-block) .description-block {
  font-size: 13px;
  text-align: end;
  color: #598493;
}

@media (width>=768px) {
  .container .form-column-textarea:has(.description-block) .description-block {
    grid-area: 2/2/3/3;
  }
}

.container .form-column-file:has(.restriction) .restriction {
  display: none;
}

.container .form-column-file .description-block {
  font-size: 13px;
  color: #598493;
}

@media (width>=768px) {
  .container .form-column-file .description-block {
    grid-area: 2/2/3/3;
  }
}

.container .form-column-checkbox {
  margin-block-start: 20px;
}

@media (width>=768px) {
  .container .form-column-checkbox {
    margin-block-start: 50px;
  }
}

.container .form-column-checkbox fieldset {
  display: block grid;
  border: none;
}

.container .form-column-checkbox fieldset .label {
  order: 1;
  inline-size: 100%;
  margin-block-end: 20px;
  padding-block-end: 20px;
  border-block-end: 1px solid #80a3b0;
}

.container .form-column-checkbox fieldset .input-group {
  order: 3;
  margin-block-start: 48px;
}

.container .form-column-checkbox fieldset .description-block {
  order: 2;
  display: block grid;
  align-content: start;
  row-gap: 0.5lh;
  font-size: 13px;
}

.container .form-column-checkbox fieldset .option {
  --_check_opacity: 0;
  position: relative;
  display: block flex;
  align-items: center;
  inline-size: fit-content;
  margin-inline: auto;
  cursor: pointer;
}

.container .form-column-checkbox fieldset .option:has(:checked) {
  --_check_opacity: 1;
}

.container .form-column-checkbox fieldset .option input[type='radio'] {
  position: absolute;
  opacity: 0;
}

.container .form-column-checkbox fieldset .option .option-text {
  position: relative;
  display: block flex;
  align-items: center;
  column-gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.container .form-column-checkbox fieldset .option .option-text:before {
  content: '';
  display: block grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  border: 1px solid #598493;
  border-radius: 3px;
}

.container .form-column-checkbox fieldset .option .option-text:after {
  content: '';
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 4px;
  inline-size: 10px;
  block-size: 7px;
  border-block-end: 2px solid #80a3af;
  border-inline-start: 2px solid #80a3af;
  rotate: -45deg;
  opacity: var(--_check_opacity);
}

.container .button-group {
  display: block grid;
  justify-content: center;
  row-gap: 16px;
  margin-block-start: 36px;
}

@media (width>=768px) {
  .container .button-group:has(button:not(:is(.hidden)) + button:not(:is(.hidden))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }

  .container .button-group:has(button:not(:is(.hidden)) + button:not(:is(.hidden))) button:first-child {
    justify-self: end;
  }

  .container .button-group:has(button:not(:is(.hidden)) + button:not(:is(.hidden))) button:last-child {
    justify-self: start;
  }
}

.container .button-group .help-block {
  text-align: center;
}

@media (width>=768px) {
  .container .button-group .help-block {
    grid-area: 2/1/3/3;
  }
}

.container .button-confirm,
.container .button-submit,
.container .button-back {
  --_bg_color: #598493;
  --_bg_color_hover: #598493e6;
  --_translate: 0 -50%;
}

.container .button-confirm[data-tf-type='back'],
.container .button-submit[data-tf-type='back'],
.container .button-back[data-tf-type='back'] {
  --_bg_color: #80a3af;
  --_bg_color_hover: #80a3afe6;
}

.container .button-confirm,
.container .button-submit,
.container .button-back {
  position: relative;
  display: block grid;
  place-items: center;
  inline-size: 254px;
  block-size: 52px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border-radius: 5px;
  background-color: var(--_bg_color);
  transition: background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (hover: hover) {
  .container .button-confirm:where(:any-link, :enabled, summary):hover,
  .container .button-submit:where(:any-link, :enabled, summary):hover,
  .container .button-back:where(:any-link, :enabled, summary):hover {
    --_bg_color: var(--_bg_color_hover);
    --_translate: 4px -50%;
  }
}

.container .button-confirm:before,
.container .button-submit:before,
.container .button-back:before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 16px;
  inline-size: 8px;
  block-size: 8px;
  border-block-start: 1.5px solid #fff;
  border-inline-end: 1.5px solid #fff;
  rotate: 45deg;
  translate: var(--_translate);
  transition: translate 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.container .button-confirm:is(.hidden),
.container .button-submit:is(.hidden),
.container .button-back:is(.hidden) {
  display: none;
}

.container .button-confirm:has(.icon) .icon,
.container .button-submit:has(.icon) .icon,
.container .button-back:has(.icon) .icon {
  display: none;
}

.container .message-block-error {
  display: block grid;
  align-content: start;
  row-gap: 12px;
  margin-block-end: 32px;
}

.container .message-block-error ul {
  display: block grid;
  align-content: start;
  row-gap: 6px;
  font-size: 15px;
}

.container .message-block-confirmation {
  padding-block-start: 20px;
}

@media (width>=768px) {
  .container .message-block-confirmation {
    padding-block-start: 0;
  }
}

.container .form-column-recaptcha {
  margin-block-start: 20px;
}

.container .grecaptcha-badge {
  margin-inline: auto;
}

.content-confirmation .form-column {
  border-block-end: 1px solid rgba(128, 163, 175, 0.2509803922);
}

.content-confirmation .preview-block {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

@media (width>=768px) {
  .content-confirmation .preview-block {
    display: block flex;
    align-items: center;
    min-block-size: 48px;
  }
}

@media (width>=768px) {
  .content-confirmation .form-column-radio {
    align-items: center;
  }
}

.content-confirmation .form-column-textarea .description-block,
.content-confirmation .form-column-file .description-block {
  display: none;
}

.content-confirmation .form-column-checkbox:has(fieldset) {
  display: none;
}
