@charset "utf-8";
:root {
  --base-fs: min(0.26vw, 0.1rem);
}
/* --------------------------------------------------
	destyle.css
-------------------------------------------------- */
/* --------------------------------------------------
	end of destyle.css
-------------------------------------------------- */
/*  CSS Custom Properties Around Colors  */
:root {
  /*  Elemental color  */
  --light-blue: #e7ecff;
  --blue: #2041bf;
  --light-navy: #6d9bcb;
  --navy: #115686;
  --deep-navy: #1c2a60;
  --dark-navy: #061224;
  --emerald: #61b7a5;
  --red: #b50900;
  --white: #fff;
  --gray01: #c2c2c2;
  --gray02: #767676;
  --gray03: #494949;
  --gray: var(--gray01, #9a9a9a);
  --black: #061224;
  --rich-black: #000;
  /*  Role color  */
  --main: var(--deep-navy);
  --accent: var(--emerald);
  --title: var(--rich-black);
  --text: var(--black);
  --link: var(--black);
  --visited: var(--link);
  --hover: var(--blue);
  --focus: var(--blue);
  --alert: var(--red);
  --error: var(--alert);
  --notice: var(--emerald);
  --marker: rgba(0, 135, 249, 0.3);
  --shadow: rgba(0, 0, 0, 0.6);
  --confirm: var(--link);
  --submit: var(--blue);
}
:root::-moz-selection {
  color: var(--black);
  background-color: var(--marker);
}
:root::selection {
  color: var(--black);
  background-color: var(--marker);
}
@font-face {
  font-style: normal;
  font-display: swap;
}
ol {
  list-style: decimal;
}
video,
picture,
img,
iframe,
input,
textarea {
  vertical-align: top;
}
iframe,
picture,
img {
  width: auto;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
img {
  width: auto;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: black;
}
picture {
  display: block;
  line-height: 0;
}
iframe {
  aspect-ratio: 560 / 315;
}
*::before,
*::after {
  content: "";
  display: none;
}
@media screen and (min-width: (736px + 1px)) {
  br[sp] {
    display: none;
  }
  br[pc],
  br[pc][sp] {
    display: inline;
  }
}
@media screen and (max-width: 736px) {
  br[pc] {
    display: none;
  }
  br[sp],
  br[pc][sp] {
    display: inline;
  }
}
:is(a, button) {
  background: var(--bg);
  color: var(--color);
  text-decoration: none;
  transition: var(--transition);
}
:is(a, button):not([class]) {
  text-decoration: underline;
}
a:link {
  --color: var(--link);
  --bg: transparent;
}
a:visited {
  --color: var(--visited);
  --bg: transparent;
}
@media (hover: hover) {
  :is(a, button):hover {
    --color: var(--hover);
    --bg: var(--hover-bg);
    color: var(--color) !important;
    background-color: var(--bg) !important;
  }
}
:root {
  font-size: 62.5%;
  --root-fs: 1.5rem;
  --root-bg: transparent;
  --root-color: var(--text);
  --root-fw: normal;
  --root-fst: normal;
  --root-lh: 1.75;
  --root-ls: 0;
  --root-align: left;
  --root-transition: 0.3s 0s ease;
  --radius1st: 8px;
  --radius2nd: 6px;
  --radius3rd: 4px;
  --radius4th: 3px;
  --radius-min: 2px;
}
@media screen and (min-width: 737px) {
  :root {
    --main-width: 1200px;
    --header-height: 72px;
    --recruitment-navigation-height: 100px;
    --m: min(0.9375svw, 15px);
    --g: min(9.375svw, 15px);
  }
}
@media screen and (max-width: 736px) {
  :root {
    --main-width: 100%;
    --header-height: 72px;
    --recruitment-navigation-height: 100px;
    --m: min(4svw, 15px);
    --g: min(4svw, 15px);
  }
}
body:is(.recruitment) main.main {
  --bg: var(--root-bg);
  --color: var(--root-color);
  --fs: var(--root-fs);
  --fw: var(--root-fw);
  --fst: var(--root-fst);
  --lh: var(--root-lh);
  --ls: var(--root-ls);
  --align: var(--root-align);
  --transition: var(--root-transition);
  background-color: var(--bg);
  font-size: var(--fs);
  font-weight: var(--fw);
  font-style: var(--fst);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  text-align: var(--align);
  color: var(--color);
  overflow-x: clip;
  position: relative;
}
:is(.headline, .title, .caption, summary) {
  color: var(--title);
  font-weight: 700;
}
.wrap {
  padding-inline: calc(var(--m) * 2);
  margin-right: 0;
  margin-left: 0;
}
body:is(.recruitment) .cta {
  margin-top: 0;
  padding-block: calc(var(--m) * 6);
  padding-inline: calc(var(--m) * 2);
  flex-direction: column;
}
body:is(.recruitment) .cta .btn {
  width: 100%;
  padding-block: calc(var(--m) * 1.5);
  padding-inline: calc(var(--m) * 2);
  border-radius: calc(var(--m) * 3);
  font-size: calc(var(--base-fs) * 18);
}
body:is(#recruitment-index) {
  --wrap-padding-wide: calc(var(--m) * 4);
  --wrap-padding-narrow: calc(var(--m) * 2);
}
body:is(#recruitment-index) .billboard {
  height: 160svw;
}
body:is(#recruitment-index) .billboard .inner {
  max-height: 100%;
}
body:is(#recruitment-index) .billboard video {
  aspect-ratio: 750 / 1200;
}
body:is(#recruitment-index) .philosophy {
  margin-top: 0;
  height: auto;
  min-height: unset;
}
body:is(#recruitment-index) .philosophy .wrap {
  padding-left: var(--wrap-padding-wide);
  padding-right: var(--wrap-padding-narrow);
}
body:is(#recruitment-index) .philosophy .headings {
  margin-top: calc(var(--m) * 7);
  width: -moz-fit-content;
  width: fit-content;
  min-width: unset;
}
body:is(#recruitment-index) .philosophy .headings .title {
  border-bottom: 0;
  margin-bottom: calc(var(--m) * 1.25);
  font-size: calc(var(--base-fs) * 15);
  text-align: center;
  right: auto;
  left: 0;
}
body:is(#recruitment-index) .philosophy .headings .title::before {
  display: block;
  width: calc(100% + var(--wrap-padding-wide));
  height: 1px;
  background: var(--black);
  position: absolute;
  bottom: 0;
  right: 0;
}
body:is(#recruitment-index) .philosophy .headings .headline {
  writing-mode: vertical-rl;
  font-size: calc(var(--base-fs) * 27);
}
body:is(#recruitment-index) .philosophy .text {
  margin-top: calc(var(--m) * 3);
  padding-block: 0;
  padding-right: 0;
}
body:is(#recruitment-index) .philosophy .text p:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
body:is(#recruitment-index) .overview {
  margin-top: calc(var(--m) * 5);
  padding-top: calc(var(--m) * 17);
  height: auto;
}
body:is(#recruitment-index) .overview .wrap {
  padding-left: var(--wrap-padding-narrow);
  padding-right: var(--wrap-padding-wide);
}
body:is(#recruitment-index) .overview .headline {
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-index) .information {
  margin-top: calc(var(--m) * 7);
}
body:is(#recruitment-index) .information .headings {
  margin-bottom: calc(var(--m) * 2);
  transform: none;
}
body:is(#recruitment-index) .information .headings .title {
  top: auto;
  bottom: 0;
  transform: none;
  font-size: calc(var(--base-fs) * 21);
}
body:is(#recruitment-index) .information .headings .title span {
  font-size: calc(var(--base-fs) * 36);
}
body:is(#recruitment-index) .information .headings .label {
  font-size: calc(var(--base-fs) * 81);
}
body:is(#recruitment-index) .information .slide {
  --height: 550px;
  --swiper-button-height: 40px;
  --swiper-pagination-height: 0px;
  --swiper-scrollbar-size: 9px;
  --swiper-scrollbar-drag-bg-color: var(--blue);
  padding-bottom: calc(var(--swiper-button-height) + var(--swiper-pagination-height) + var(--swiper-scrollbar-size));
}
body:is(#recruitment-index) .information .slide .swiper-pagination {
  display: none;
}
body:is(#recruitment-index) .information .slide :is(.swiper-button-next, .swiper-button-prev) {
  width: 30%;
  background: var(--black);
  top: auto;
  bottom: 0;
  transform: none;
}
body:is(#recruitment-index) .information .slide :is(.swiper-button-next, .swiper-button-prev)::before {
  --arrow-weight: 1px;
  width: 12px;
  height: 12px;
  margin-inline: 0;
}
body:is(#recruitment-index) .information .slide .swiper-scrollbar {
  bottom: calc(var(--swiper-button-height) + var(--swiper-pagination-height));
}
body:is(#recruitment-index) .interview {
  --movie-height: 300px;
  margin-top: calc(var(--m) * 7);
}
body:is(#recruitment-index) .interview .headings {
  margin-bottom: calc(var(--m) * 2);
  transform: none;
}
body:is(#recruitment-index) .interview .headings .title {
  top: auto;
  bottom: 0;
  transform: none;
  font-size: calc(var(--base-fs) * 30);
}
body:is(#recruitment-index) .interview .headings .title span {
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-index) .interview .headings .label {
  color: rgba(194, 194, 194, 0.5);
  font-size: calc(var(--base-fs) * 81);
}
body:is(#recruitment-index) .interview .container {
  padding-top: calc(var(--m) * 2);
  padding-bottom: calc(var(--m) * 4);
  gap: calc(var(--m) * 10);
}
body:is(#recruitment-index) .interview a.block {
  flex-direction: column !important;
  -moz-column-gap: 0;
       column-gap: 0;
}
body:is(#recruitment-index) .interview a.block .image {
  width: 100%;
  position: static;
}
body:is(#recruitment-index) .interview a.block .image .tag-image {
  width: 50%;
  top: 25%;
  left: calc(-1 * var(--m));
}
body:is(#recruitment-index) .interview a.block .btn-more {
  --bg: var(--black);
  --color: var(--white);
  width: calc(40% + calc(var(--m) * 2));
  height: 40px;
  left: auto !important;
  right: calc(-1 * calc(var(--m) * 2)) !important;
  bottom: auto;
  top: 100%;
}
body:is(#recruitment-index) .interview a.block .body .headline {
  padding-bottom: var(--m);
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-index) .interview a.block .body .headline :is(.phrase, .tag) {
  font-size: calc(var(--base-fs) * 30);
}
body:is(#recruitment-index) .interview a.block .body .profile {
  padding-block: var(--m);
  margin-bottom: var(--m);
}
body:is(#recruitment-index) .interview a.block .body .profile .joined {
  font-size: calc(var(--base-fs) * 15);
}
body:is(#recruitment-index) .interview a.block .body .profile .name {
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-interview) .billboard {
  height: auto;
}
body:is(#recruitment-interview) .billboard::before {
  top: -72%;
  right: -10%;
  transform: rotate(286deg);
}
body:is(#recruitment-interview) .billboard::after {
  top: 40%;
  right: -48%;
  transform: rotate(78deg);
}
body:is(#recruitment-interview) .billboard .wrap {
  padding-top: calc(var(--m) * 2);
  padding-inline: calc(var(--m) * 2) 0;
  justify-content: flex-start;
}
body:is(#recruitment-interview) .billboard .label {
  margin-bottom: 90svw;
  font-size: calc(var(--base-fs) * 15);
}
body:is(#recruitment-interview) .billboard .label::before {
  background-size: 100% 100%;
}
body:is(#recruitment-interview) .billboard .tagline {
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-interview) .billboard :is(.phrase, .tag) {
  font-size: calc(var(--base-fs) * 30);
}
body:is(#recruitment-interview) .billboard .profile {
  margin-top: calc(var(--m) * 2);
  width: 100%;
  min-width: unset;
  padding: calc(var(--m) * 2) 0;
}
body:is(#recruitment-interview) .billboard .profile .joined {
  padding-bottom: var(--m);
  margin-bottom: var(--m);
  font-size: calc(var(--base-fs) * 15);
}
body:is(#recruitment-interview) .billboard .profile .name {
  margin-bottom: var(--m);
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-interview) .billboard .tag-image {
  width: 50%;
  left: auto;
  right: 6px;
  bottom: 52%;
}
body:is(#recruitment-interview) .billboard .backgrounds {
  height: 160svw;
}
body:is(#recruitment-interview) .billboard .backgrounds::before {
  top: -90%;
  transform: rotate(156deg);
}
body:is(#recruitment-interview) .billboard .backgrounds::after {
  top: 75%;
  left: -105%;
}
body:is(#recruitment-interview) .interviews {
  margin-top: 0;
}
body:is(#recruitment-interview) .interviews .container {
  gap: calc(var(--m) * 5);
}
body:is(#recruitment-interview) .interviews .block {
  flex-direction: column !important;
  gap: 0;
}
body:is(#recruitment-interview) .interviews .block:nth-of-type(odd) .body {
  margin-inline: calc(var(--m) * 2) 0;
}
body:is(#recruitment-interview) .interviews .block .image {
  width: 100%;
  min-width: unset;
  margin-inline: 0 !important;
}
body:is(#recruitment-interview) .interviews .block .body {
  margin-top: calc(-1 * calc(var(--m) * 4));
  margin-inline: 0 calc(var(--m) * 2);
  padding: calc(var(--m) * 2);
  background: var(--white);
}
body:is(#recruitment-interview) .interviews .block .headline {
  margin-bottom: calc(var(--m) * 2);
  color: var(--deep-navy);
  font-size: calc(var(--base-fs) * 21);
}
body:is(#recruitment-interview) .workflow {
  margin-top: calc(var(--m) * 5);
}
body:is(#recruitment-interview) .workflow .wrap {
  padding-inline: 0;
}
body:is(#recruitment-interview) .workflow .headline {
  padding-inline: calc(var(--m) * 2);
}
body:is(#recruitment-interview) .workflow .container {
  padding-inline: calc(var(--m) * 2);
}
body:is(#recruitment-interview) .workflow .block {
  padding-block: calc(var(--m) * 4);
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
body:is(#recruitment-interview) .workflow .block.joint {
  padding-block: calc(var(--m) * 2);
}
body:is(#recruitment-interview) .workflow .block :is(.time, .title) {
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 0;
}
body:is(#recruitment-interview) .workflow .block .time {
  padding-inline: 6px;
  margin-right: var(--m);
  font-size: calc(var(--base-fs) * 18);
  color: var(--white);
  background: var(--deep-navy);
}
body:is(#recruitment-interview) .workflow .block .time:empty {
  display: none;
}
body:is(#recruitment-interview) .workflow .block .title .note {
  font-size: calc(var(--base-fs) * 12);
}
body:is(#recruitment-interview) .workflow .block .text {
  margin-top: var(--m);
  width: 100%;
}
body:is(#recruitment-interview) .workflow .block .image {
  width: 40%;
  top: -10%;
  left: 55svw;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard {
  height: 66.666svw;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard::before {
  top: -120%;
  right: -40%;
  transform: rotate(286deg);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard::after {
  top: 105%;
  right: -70%;
  transform: rotate(57deg);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .label {
  margin-bottom: var(--m);
  font-size: calc(var(--base-fs) * 15);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .label::before {
  background-size: 100% 100%;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .tagline {
  font-size: calc(var(--base-fs) * 30);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds::before {
  top: -55%;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds::after {
  top: 95%;
  left: -40%;
  transform: rotate(18deg);
}
body:is(#recruitment-faq) .billboard {
  margin-bottom: calc(var(--m) * 3);
}
body:is(#recruitment-faq) .general {
  margin-top: 0;
  padding-bottom: calc(var(--m) * 6);
  border-bottom: 1px solid var(--gray);
  margin-bottom: calc(var(--m) * 4);
}
body:is(#recruitment-faq) .general > .title {
  margin-bottom: calc(var(--m) * 3);
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-faq) .general .container {
  gap: calc(var(--m) * 7);
}
body:is(#recruitment-faq) .general details:where(.block) {
  position: relative;
}
body:is(#recruitment-faq) .general details:where(.block) summary {
  padding: 0 calc(var(--m) * 2) calc(var(--m) * 3);
  flex-direction: column;
  position: static;
}
body:is(#recruitment-faq) .general details:where(.block) summary::before {
  --size: 40px;
  font-size: calc(var(--base-fs) * 18);
  position: static;
}
body:is(#recruitment-faq) .general details:where(.block) summary::after {
  --size: 40px;
  font-size: calc(var(--base-fs) * 24);
  font-weight: 400;
  top: 100%;
  right: 50%;
  transform: translate(50%, -50%);
}
body:is(#recruitment-faq) .general details:where(.block) .detail {
  margin-top: calc(-1 * calc(var(--m) * 2));
  padding-top: var(--m);
}
body:is(#recruitment-guideline) main.main {
  background: rgba(231, 236, 255, 0.6);
}
body:is(#recruitment-guideline) .guideline-index {
  margin-top: 0;
  padding: calc(var(--m) * 3) calc(var(--m) * 2);
  margin-bottom: calc(var(--m) * 3);
}
body:is(#recruitment-guideline) .guideline-index > .headline {
  font-size: calc(var(--base-fs) * 21);
}
body:is(#recruitment-guideline) .guideline-index .container {
  width: 100%;
  justify-content: center;
  gap: calc(var(--m) * 2) var(--m);
}
body:is(#recruitment-guideline) .guideline-index .container > a {
  padding: 12px calc(var(--m) * 2);
  font-size: calc(var(--base-fs) * 15);
}
body:is(#recruitment-guideline) .general {
  margin-top: 0;
  margin-bottom: calc(var(--m) * 5);
  width: auto;
  margin-inline: calc(var(--m) * 2);
  padding: calc(var(--m) * 2) 0 0;
}
body:is(#recruitment-guideline) .general > .headline {
  margin-inline: calc(var(--m) * 2);
  padding-bottom: calc(var(--m) * 2);
  border-bottom: 1px solid var(--gray);
  margin-bottom: 0;
  font-size: calc(var(--base-fs) * 21);
}
body:is(#recruitment-guideline) .general .container {
  gap: 0;
}
body:is(#recruitment-guideline) .general .block {
  padding: calc(var(--m) * 2);
  border-bottom: 0 !important;
  flex-direction: column;
  gap: 0;
}
body:is(#recruitment-guideline) .general .block:nth-of-type( even ) {
  background: rgba(231, 236, 255, 0.3);
}
body:is(#recruitment-guideline) .general .block .title {
  width: -moz-fit-content;
  width: fit-content;
  padding: 1px 9px;
  border-radius: 3px;
  background: var(--deep-navy);
  margin-bottom: 12px;
  font-size: calc(var(--base-fs) * 13.5);
  letter-spacing: 0.5ex;
  color: var(--white);
}
body:is(#recruitment-entry) .general {
  margin-top: calc(var(--m) * 3);
}
body:is(#recruitment-entry) .general .headline {
  font-size: calc(var(--base-fs) * 21);
}
body:is(#recruitment-entry) .mw_wp_form_complete {
  padding-bottom: calc(var(--m) * 5);
}
body:is(#recruitment-entry) #contact-form {
  padding-top: 0;
}
body:is(#recruitment-entry) #contact-form .contents-inner {
  padding-inline: 0;
}
body:is(#recruitment-entry) #contact-form table {
  border-top: 0;
}
#contact-form .flex-between > *:first-child {
  width: 260px;
}
#contact-form select {
  width: 100%;
}