@charset "utf-8";
/* --------------------------------------------------
	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;
}
:root {
  --base-fs: min(0.06vw, 0.1rem);
}
.wrap {
  --wrap-width: var(--main-width);
  width: 100%;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}
ol.abc {
  list-style: lower-alpha;
}
.btn {
  --link: var(--white);
  --visited: var(--link);
  --bg: var(--confirm);
  --hover: var(--white);
  --hover-bg: var(--accent);
  --fs: calc(var(--base-fs) * 18);
  --arrow-size: 11px;
  --arrow-weight: 3px;
  max-width: 106.66vw;
  height: -moz-fit-content;
  height: fit-content;
  padding: calc(var(--m) * 1) calc(var(--m) * 1.5);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--m) * 1.5);
  font-size: var(--fs);
  font-weight: bold;
}
.btn::after {
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-weight) solid var(--color);
  border-bottom: var(--arrow-weight) solid var(--color);
  transform: rotate(-45deg);
}
@media (hover: hover) {
  .btn,
  [class*="btn-"] {
    cursor: pointer;
  }
}
.pagination {
  --parent-bg: var(--main-color);
  --parent-color: var(--white);
  --bg: var(--parent-bg);
  --color: var(--parent-color);
  --gap: 24px;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--gap);
  margin: 60px auto 0;
  background-color: var(--bg);
  position: relative;
  z-index: 11;
}
.pagination .page-num {
  --color: var(--parent-color);
  display: block;
  font-size: 1.2rem;
  color: var(--color);
  text-align: center;
}
.pagination .page-num::after {
  --bg: var(--parent-color);
  display: block;
  width: 45px;
  height: 2px;
  background-color: var(--bg);
  margin: var(--gap) auto;
}
.pagination .pagers {
  display: flex;
  justify-content: center;
  align-items: center;
  --column-gap: var(--gap);
}
.pagination a.pager {
  --link: var(--color);
  --visited: var(--color);
  --hover: var(--parent-color);
  --hover-bg: var(--parent-bg);
}
.pagination a.pager:hover {
  box-shadow: inset 0 0 0 1px var(--hover);
}
.pagination span.pager {
  color: inherit;
}
.pagination .pager {
  --size: 36px;
  --bg: var(--parent-color);
  --color: var(--parent-bg);
  display: block;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  text-align: center;
  letter-spacing: 0;
}
.pagination .pager.current {
  --bg: transparent;
  --color: var(--parent-color);
  --hover: var(--parent-bg);
  --hover-bg: var(--parent-color);
  box-shadow: inset 0 0 0 1px var(--color);
}
.pagination .pager.prev,
.pagination .pager.next {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 12px;
  font-size: 1.35rem;
}
body:is(.recruitment) .cta {
  margin-top: calc(var(--m) * 10);
  padding-block: calc(var(--m) * 10);
  background: url('../imgs/cta-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
body:is(.recruitment) .cta .btn {
  --bg: var(--emerald);
  --color: var(--white);
  display: block;
  width: 400px;
  padding-block: var(--m);
  padding-inline: calc(var(--m) * 3) calc(var(--m) * 2);
  margin-right: 0;
  margin-left: 0;
  background: var(--bg);
  color: var(--color);
  font-size: calc(var(--base-fs) * 21);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0 24px;
  position: relative;
  z-index: 1;
  transition: var(--transition);
}
body:is(.recruitment) .cta .btn::before,
body:is(.recruitment) .cta .btn::after {
  display: block;
  transition: var(--transition);
}
body:is(.recruitment) .cta .btn::before {
  width: 13px;
  height: 13px;
  border-top: 1px solid var(--color);
  border-right: 1px solid var(--color);
  position: absolute;
  top: 50%;
  right: calc(var(--m) * 2);
  transform: translateY(-50%);
  transform: translateY(-50%) rotate(45deg);
}
body:is(.recruitment) .cta .btn::after {
  flex-grow: 1;
  width: auto !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--color);
  transform: none;
}
@media (hover: hover) {
  body:is(.recruitment) .cta .btn:hover {
    --bg: var(--blue);
    --color: var(--white);
  }
}
body:is(.recruitment) .cta .nav-guideline {
  --bg: var(--light-navy);
}
body:is(#recruitment-index) .billboard {
  width: 100%;
  height: 41.5625svw;
  position: relative;
  z-index: 1;
  margin-right: auto;
  margin-left: auto;
}
body:is(#recruitment-index) .billboard .inner {
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
body:is(#recruitment-index) .billboard video {
  margin-top: -1px;
  margin-left: -2px;
  width: calc(100% + 4px);
  aspect-ratio: 1600 / 665;
  border: 0;
  background: transparent;
  filter: drop-shadow(0px 0px #000);
}
body:is(#recruitment-index) .philosophy {
  margin-top: calc(var(--m) * 10);
  width: 100%;
  height: 43.75svw;
  min-height: 600px;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
body:is(#recruitment-index) .philosophy .wrap {
  padding-left: 8svw;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  body:is(#recruitment-index) .philosophy .wrap {
    writing-mode: horizontal-tb;
    padding-left: 8svw;
  }
}
body:is(#recruitment-index) .philosophy .headings {
  margin-top: 120px;
  min-width: 190px;
  height: -moz-fit-content;
  height: fit-content;
  margin-left: 0;
  display: flex;
  position: relative;
}
body:is(#recruitment-index) .philosophy .headings .title {
  width: 100%;
  padding-bottom: var(--m);
  border-bottom: 1px solid var(--black);
  margin-bottom: var(--m);
  font-weight: 700;
  letter-spacing: 0.5ex;
  text-align: left;
  position: absolute;
  bottom: 100%;
  right: 0;
}
body:is(#recruitment-index) .philosophy .headings .headline {
  align-self: end;
  margin-left: 0;
  font-size: calc(var(--base-fs) * 42);
}
@media screen and (max-width: 1024px) {
  body:is(#recruitment-index) .philosophy .headings {
    margin-left: 0;
  }
  body:is(#recruitment-index) .philosophy .headings .title {
    text-align: left;
  }
  body:is(#recruitment-index) .philosophy .headings .headline {
    margin-left: 0;
  }
}
body:is(#recruitment-index) .philosophy .text {
  line-height: 1.75;
  margin-top: calc(var(--m) * 5);
  padding-block: var(--m);
  padding-right: var(--m);
  background: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 1024px) {
  body:is(#recruitment-index) .philosophy .text {
    line-height: 1.75;
    margin-top: calc(var(--m) * 5);
    padding-block: var(--m);
    padding-right: var(--m);
    background: rgba(255, 255, 255, 0.8);
  }
}
body:is(#recruitment-index) .philosophy .text p {
  -webkit-margin-after: 1lh;
          margin-block-end: 1lh;
}
body:is(#recruitment-index) .philosophy .backgrounds {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}
body:is(#recruitment-index) .overview {
  margin-top: calc(var(--m) * 20);
  width: 100%;
  height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
body:is(#recruitment-index) .overview .wrap {
  padding-left: 700px;
  position: relative;
  z-index: 1;
}
body:is(#recruitment-index) .overview .headline {
  margin-bottom: calc(var(--m) * 3);
  font-size: calc(var(--base-fs) * 39);
}
body:is(#recruitment-index) .overview .image {
  width: 510px;
  position: absolute;
  top: 0;
  left: 0;
}
body:is(#recruitment-index) .overview .backgrounds {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}
body:is(#recruitment-index) .information {
  margin-top: calc(var(--m) * 10);
  position: relative;
}
body:is(#recruitment-index) .information .headings {
  width: -moz-fit-content;
  width: fit-content;
  transform: translateY(47.5%);
  position: relative;
  z-index: 1;
}
body:is(#recruitment-index) .information .headings .title {
  width: -moz-max-content;
  width: max-content;
  font-size: calc(var(--base-fs) * 24);
  line-height: 1.25;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  transform: translateY(-100%);
}
body:is(#recruitment-index) .information .headings .title span {
  display: block;
  font-size: calc(var(--base-fs) * 42);
}
body:is(#recruitment-index) .information .headings .label {
  writing-mode: vertical-lr;
  color: rgba(194, 194, 194, 0.5);
  font-size: calc(var(--base-fs) * 184);
  font-weight: 700;
  line-height: 1;
}
body:is(#recruitment-index) .information .slide {
  --width: var(--main-width);
  --height: 700px;
  --swiper-button-height: 150px;
  --swiper-pagination-height: 48px;
  --swiper-pagination-color: var(--deep-navy);
  --swiper-pagination-bullet-inactive-color: var(--gray02);
  --swiper-scrollbar-size: 12px;
  --swiper-scrollbar-border-radius: 0px;
  --swiper-scrollbar-bg: #f5f5f5;
  --swiper-scrollbar-drag-bg-color: var(--deep-navy);
  padding-bottom: 60px;
  position: relative;
  z-index: 0;
}
body:is(#recruitment-index) .information .slide::before {
  display: block;
  width: max( calc( (100svw - var(--width)) / 2 ), 0px );
  height: 101%;
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
body:is(#recruitment-index) .information .slide .swiper-wrapper {
  height: var(--height);
}
body:is(#recruitment-index) .information .slide .swiper-slide {
  display: flex;
  justify-content: center;
}
body:is(#recruitment-index) .information .slide .swiper-slide img {
  display: block;
  width: var(--width);
}
body:is(#recruitment-index) .information .slide .swiper-pagination {
  height: var(--swiper-pagination-height);
  bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  --swiper-pagination-bullet-horizontal-gap: 8px;
  --swiper-pagination-bullet-size: 9px;
}
body:is(#recruitment-index) .information .slide :is(.swiper-button-next, .swiper-button-prev) {
  display: block;
  width: 60px;
  height: var(--swiper-button-height);
  background: var(--deep-navy);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  z-index: 30;
  transform: translateY(-50%);
  transition: var(--transition);
}
body:is(#recruitment-index) .information .slide :is(.swiper-button-next, .swiper-button-prev)::before {
  --arrow-weight: 4px;
  display: block;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
}
body:is(#recruitment-index) .information .slide :is(.swiper-button-next, .swiper-button-prev)[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
@media (hover: hover) {
  body:is(#recruitment-index) .information .slide :is(.swiper-button-next, .swiper-button-prev):hover {
    background: var(--blue);
  }
}
body:is(#recruitment-index) .information .slide .swiper-button-next {
  right: 0;
}
body:is(#recruitment-index) .information .slide .swiper-button-next::before {
  margin-left: -25%;
  border-top: var(--arrow-weight) solid var(--white);
  border-right: var(--arrow-weight) solid var(--white);
}
body:is(#recruitment-index) .information .slide .swiper-button-prev {
  left: 0;
}
body:is(#recruitment-index) .information .slide .swiper-button-prev::before {
  margin-right: -25%;
  border-bottom: var(--arrow-weight) solid var(--white);
  border-left: var(--arrow-weight) solid var(--white);
}
body:is(#recruitment-index) .information .slide .swiper-scrollbar {
  width: 100%;
  left: 0;
}
@media (hover: hover) {
  body:is(#recruitment-index) .information .slide .swiper-scrollbar-drag:hover {
    --swiper-scrollbar-drag-bg-color: var(--blue);
  }
}
body:is(#recruitment-index) .information .slide .backgrounds {
  width: var(--width);
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
body:is(#recruitment-index) .interview {
  --movie-height: 27.5vw;
  margin-top: calc(var(--m) * 10);
  position: relative;
}
body:is(#recruitment-index) .interview .headings {
  width: -moz-fit-content;
  width: fit-content;
  transform: translateY(47.5%);
  position: relative;
  z-index: 1;
}
body:is(#recruitment-index) .interview .headings .title {
  width: -moz-max-content;
  width: max-content;
  font-size: calc(var(--base-fs) * 24);
  line-height: 1.25;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  transform: translateY(-100%);
}
body:is(#recruitment-index) .interview .headings .title span {
  display: block;
  font-size: calc(var(--base-fs) * 42);
}
body:is(#recruitment-index) .interview .headings .label {
  writing-mode: vertical-lr;
  color: rgba(194, 194, 194, 0.2);
  font-size: calc(var(--base-fs) * 184);
  font-weight: 700;
  line-height: 1;
}
body:is(#recruitment-index) .interview .movie {
  width: 100%;
  height: var(--movie-height);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
body:is(#recruitment-index) .interview .movie video {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body:is(#recruitment-index) .interview .container {
  padding-top: calc(var(--m) * 10);
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 5);
}
body:is(#recruitment-index) .interview a.block {
  --hover: var(--link);
  display: flex;
  align-items: center;
  -moz-column-gap: 115px;
       column-gap: 115px;
  position: relative;
}
body:is(#recruitment-index) .interview a.block::after {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(231, 236, 255, 0.3);
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: 0.3s 0s ease-in-out;
}
body:is(#recruitment-index) .interview a.block:nth-of-type(odd)::after {
  top: 0;
  left: 0;
}
body:is(#recruitment-index) .interview a.block:nth-of-type(even) {
  flex-direction: row-reverse;
}
body:is(#recruitment-index) .interview a.block:nth-of-type(even)::after {
  top: 0;
  right: 0;
}
body:is(#recruitment-index) .interview a.block:nth-of-type(even) .image .tag {
  left: auto;
  right: -60px;
}
body:is(#recruitment-index) .interview a.block .image {
  width: 500px;
  position: relative;
}
body:is(#recruitment-index) .interview a.block .image > picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
body:is(#recruitment-index) .interview a.block .image > picture img {
  transition: 0.3s 0s ease-in-out;
}
body:is(#recruitment-index) .interview a.block .image .tag-image {
  width: 250px;
  position: absolute;
  top: 60%;
  left: -60px;
  z-index: 1;
}
body:is(#recruitment-index) .interview a.block .btn-more {
  --bg: var(--white);
  --color: var(--black);
  width: 168px;
  height: 38px;
  padding-inline: 24px var(--m);
  background: var(--bg);
  color: var(--color);
  font-size: calc(var(--base-fs) * 10);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0 24px;
  position: absolute;
  bottom: calc(var(--m) * 3);
  right: 0;
  z-index: 1;
  transition: var(--transition);
}
body:is(#recruitment-index) .interview a.block .btn-more::before,
body:is(#recruitment-index) .interview a.block .btn-more::after {
  display: block;
  transition: var(--transition);
}
body:is(#recruitment-index) .interview a.block .btn-more::before {
  width: 13px;
  height: 13px;
  border-top: 1px solid var(--color);
  border-right: 1px solid var(--color);
  position: absolute;
  top: 50%;
  right: var(--m);
  transform: translateY(-50%);
  transform: translateY(-50%) rotate(45deg);
}
body:is(#recruitment-index) .interview a.block .btn-more::after {
  flex-grow: 1;
  height: 1px;
  background: var(--color);
}
body:is(#recruitment-index) .interview a.block .body {
  --phrase-bg: var(--deep-navy);
  --tag-color: var(--deep-navy);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
body:is(#recruitment-index) .interview a.block .body .headline {
  order: 2;
  font-size: calc(var(--base-fs) * 30);
  font-weight: 400;
}
body:is(#recruitment-index) .interview a.block .body .headline :is(.phrase, .tag) {
  font-size: calc(var(--base-fs) * 42);
}
body:is(#recruitment-index) .interview a.block .body .headline .phrase {
  padding: 6px;
  background: var(--phrase-bg);
  color: var(--white);
  font-family: YuMincho, /* Macの游明朝 */ 'Yu Mincho', /* Windowsの游明朝 */ 'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */ serif;
  transition: var(--transition);
}
body:is(#recruitment-index) .interview a.block .body .headline .tag {
  color: var(--tag-color);
  font-weight: 700;
  transition: var(--transition);
}
body:is(#recruitment-index) .interview a.block .body .headline .tag::before,
body:is(#recruitment-index) .interview a.block .body .headline .tag::after {
  display: inline;
  font-weight: 400;
}
body:is(#recruitment-index) .interview a.block .body .headline .tag::before {
  content: "「";
  margin-right: 0.25em;
}
body:is(#recruitment-index) .interview a.block .body .headline .tag::after {
  content: "」";
  margin-left: 0.25em;
}
body:is(#recruitment-index) .interview a.block .body .profile {
  order: 1;
  padding-bottom: calc(var(--m) * 2);
  border-bottom: 1px solid var(--black);
  margin-bottom: calc(var(--m) * 2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px var(--m);
}
body:is(#recruitment-index) .interview a.block .body .profile .joined {
  flex-shrink: 0;
  width: 100%;
}
body:is(#recruitment-index) .interview a.block .body .profile .name {
  font-size: calc(var(--base-fs) * 30);
}
@media (hover: hover) {
  body:is(#recruitment-index) .interview a.block:hover::after {
    opacity: 1;
  }
  body:is(#recruitment-index) .interview a.block:hover:nth-of-type(odd)::after {
    top: calc(var(--m) * 2);
    left: calc(var(--m) * 5);
  }
  body:is(#recruitment-index) .interview a.block:hover:nth-of-type(even)::after {
    top: calc(var(--m) * 2);
    right: calc(var(--m) * 5);
  }
  body:is(#recruitment-index) .interview a.block:hover .image > picture img {
    transform: scale(1.07);
  }
  body:is(#recruitment-index) .interview a.block:hover .btn-more {
    --bg: var(--blue);
    --color: var(--white);
  }
  body:is(#recruitment-index) .interview a.block:hover .body {
    --phrase-bg: var(--blue);
    --tag-color: var(--blue);
  }
}
body:is(#recruitment-interview) .billboard {
  width: 100%;
  height: 41.5625svw;
  min-height: 665px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
body:is(#recruitment-interview) .billboard::before,
body:is(#recruitment-interview) .billboard::after {
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
}
body:is(#recruitment-interview) .billboard::before {
  opacity: 0.9;
  position: absolute;
  top: 0;
  right: -45.5%;
  z-index: 1;
  transform: rotate(-80deg);
}
body:is(#recruitment-interview) .billboard::after {
  opacity: 0.76;
  position: absolute;
  top: 0;
  right: -48%;
  z-index: 2;
  transform: rotate(60deg);
}
body:is(#recruitment-interview) .billboard .wrap {
  height: 100%;
  padding-left: min(39.6875svw, 635px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}
body:is(#recruitment-interview) .billboard .label {
  padding: 12px;
  margin-bottom: calc(var(--m) * 2);
  color: var(--white);
  font-size: calc(var(--base-fs) * 15);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
body:is(#recruitment-interview) .billboard .label::before {
  display: block;
  width: calc(100% + (100svw - var(--main-width)) / 2);
  min-width: 100%;
  height: 100%;
  background: url('../imgs/label-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
body:is(#recruitment-interview) .billboard .tagline {
  font-feature-settings: "palt";
  font-size: calc(var(--base-fs) * 33);
  font-weight: 400;
}
body:is(#recruitment-interview) .billboard :is(.phrase, .tag) {
  font-size: calc(var(--base-fs) * 48);
}
body:is(#recruitment-interview) .billboard :is(.phrase, .marker) {
  background: var(--white);
}
body:is(#recruitment-interview) .billboard .phrase {
  padding: 9px 12px;
  font-family: YuMincho, /* Macの游明朝 */ 'Yu Mincho', /* Windowsの游明朝 */ 'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */ serif;
}
body:is(#recruitment-interview) .billboard .marker {
  margin-top: var(--m);
  padding-inline: 12px;
  display: inline-block;
}
body:is(#recruitment-interview) .billboard .tag {
  margin-top: 9px;
  display: inline-block;
  color: var(--deep-navy);
  font-weight: 700;
  line-height: 1;
}
body:is(#recruitment-interview) .billboard .profile {
  margin-top: calc(var(--m) * 3);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 350px;
  padding: calc(var(--m) * 2) calc(var(--m) * 3);
  background: var(--white);
  display: flex;
  flex-direction: column;
}
body:is(#recruitment-interview) .billboard .profile .joined {
  padding-bottom: calc(var(--m) * 2);
  border-bottom: 1px solid var(--black);
  margin-bottom: calc(var(--m) * 2);
}
body:is(#recruitment-interview) .billboard .profile .name {
  margin-bottom: calc(var(--m) * 2);
  font-size: calc(var(--base-fs) * 24);
  font-weight: 700;
}
body:is(#recruitment-interview) .billboard .tag-image {
  width: 250px;
  position: absolute;
  bottom: calc(var(--m) * 3);
  left: 0;
}
body:is(#recruitment-interview) .billboard .backgrounds {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}
body:is(#recruitment-interview) .billboard .backgrounds::before,
body:is(#recruitment-interview) .billboard .backgrounds::after {
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
}
body:is(#recruitment-interview) .billboard .backgrounds::before {
  opacity: 0.9;
  position: absolute;
  top: -50%;
  left: -75%;
  z-index: 2;
  transform: rotate(145deg);
}
body:is(#recruitment-interview) .billboard .backgrounds::after {
  opacity: 0.76;
  position: absolute;
  top: 23%;
  left: -75%;
  z-index: 3;
  transform: rotate(60deg);
}
body:is(#recruitment-interview) .billboard .backgrounds .mask {
  display: none;
  width: 100%;
  height: 100%;
  background: var(--white);
  mix-blend-mode: saturation;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
body:is(#recruitment-interview) .billboard .backgrounds :is(picture, img) {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
body:is(#recruitment-interview) .interviews {
  margin-top: calc(var(--m) * 10);
}
body:is(#recruitment-interview) .interviews .container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 10);
}
body:is(#recruitment-interview) .interviews .block {
  --wrap-width: var(--main-width);
  width: 100%;
  max-width: var(--wrap-width);
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--m) * 6);
}
body:is(#recruitment-interview) .interviews .block:nth-of-type(odd) {
  flex-direction: row-reverse;
}
body:is(#recruitment-interview) .interviews .block:nth-of-type(odd) .image {
  margin-left: 0;
  margin-right: min(calc(-1 * (100svw - var(--main-width)) / 2 ), 0px);
}
body:is(#recruitment-interview) .interviews .block .image {
  width: 46.875svw;
  min-width: 600px;
  margin-left: min(calc(-1 * (100svw - var(--main-width)) / 2 ), 0px);
}
body:is(#recruitment-interview) .interviews .block .headline {
  margin-bottom: calc(var(--m) * 3);
  font-size: calc(var(--base-fs) * 33);
}
body:is(#recruitment-interview) .interviews .block .question {
  margin-bottom: calc(var(--m) * 2);
  font-weight: 700;
}
body:is(#recruitment-interview) .interviews .block .text p:not(:last-child) {
  margin-bottom: calc(var(--m) * 2);
}
body:is(#recruitment-interview) .workflow {
  margin-top: calc(var(--m) * 10);
  width: 100%;
  overflow-x: clip;
}
body:is(#recruitment-interview) .workflow .wrap {
  width: calc(var(--main-width) + (100svw - var(--main-width)) / 2);
  max-width: unset;
  margin-right: 0;
}
body:is(#recruitment-interview) .workflow .headline {
  padding: 3px 12px;
  background: var(--deep-navy);
  color: var(--white);
  font-size: calc(var(--base-fs) * 21);
}
body:is(#recruitment-interview) .workflow .container {
  padding: var(--m) calc(var(--m) * 5);
  background: var(--light-blue);
}
body:is(#recruitment-interview) .workflow .block {
  padding-block: calc(var(--m) * 3);
  display: flex;
  position: relative;
}
body:is(#recruitment-interview) .workflow .block:not(:last-of-type, .joint) {
  border-bottom: 1px dotted var(--navy);
}
body:is(#recruitment-interview) .workflow .block :is(.time, .title, .text) {
  flex-shrink: 0;
}
body:is(#recruitment-interview) .workflow .block :is(.time, .title) {
  padding-right: calc(var(--m) * 3);
}
body:is(#recruitment-interview) .workflow .block .time {
  width: 15.625vw;
  color: var(--deep-navy);
  font-size: calc(var(--base-fs) * 24);
  font-weight: 700;
}
body:is(#recruitment-interview) .workflow .block .title {
  width: 15.625vw;
  color: var(--rich-black);
  font-size: calc(var(--base-fs) * 24);
}
body:is(#recruitment-interview) .workflow .block .text {
  width: 31.25vw;
  max-width: 500px;
}
body:is(#recruitment-interview) .workflow .block .image {
  width: min(17.5svw, 280px);
  position: absolute;
  top: 0;
  left: 65svw;
  z-index: 1;
}
body:is(#recruitment-interview) .workflow .block :is(.image02, .image04, .image06, .image08, .image10) {
  transform: translate(20%);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard {
  width: 100%;
  height: 28.125svw;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard::before,
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard::after {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard::before {
  opacity: 0.9;
  position: absolute;
  top: 0;
  right: -45.5%;
  z-index: 1;
  transform: rotate(-80deg);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard::after {
  opacity: 0.76;
  position: absolute;
  top: 0;
  right: -48%;
  z-index: 2;
  transform: rotate(60deg);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .heading {
  width: -moz-fit-content;
  width: fit-content;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard :is(.label, .tagline) {
  min-width: 300px;
  position: relative;
  z-index: 1;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard :is(.label, .tagline)::before {
  display: block;
  width: calc(100% + (100svw - var(--main-width)) / 2);
  min-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .label {
  width: 100%;
  padding: 12px;
  margin-bottom: calc(var(--m) * 2);
  color: var(--white);
  font-size: calc(var(--base-fs) * 15);
  font-weight: 700;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .label::before {
  background: url('../imgs/label-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .tagline {
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 10px;
  font-family: YuMincho, /* Macの游明朝 */ 'Yu Mincho', /* Windowsの游明朝 */ 'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */ serif;
  font-size: calc(var(--base-fs) * 48);
  font-weight: 400;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .tagline::before {
  background: var(--white);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds::before,
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds::after {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds::before {
  opacity: 0.9;
  position: absolute;
  top: 0;
  left: -85%;
  z-index: 2;
  transform: rotate(145deg);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds::after {
  opacity: 0.76;
  position: absolute;
  top: 23%;
  left: -67%;
  z-index: 3;
  transform: rotate(60deg);
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds .mask {
  display: none;
  width: 100%;
  height: 100%;
  background: var(--white);
  mix-blend-mode: saturation;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
body.recruitment:not(#recruitment-index, #recruitment-interview) .billboard .backgrounds :is(picture, img) {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-position: bottom center;
     object-position: bottom center;
}
body:is(#recruitment-faq) .general {
  margin-top: calc(var(--m) * 10);
}
body:is(#recruitment-faq) .general > .title {
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: calc(var(--m) * 3);
  font-size: calc(var(--base-fs) * 30);
  text-align: center;
}
body:is(#recruitment-faq) .general .container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 3);
}
body:is(#recruitment-faq) .general details:where(.block) {
  box-shadow: inset 0 0 0 1px var(--black);
}
@media (hover: hover) {
  body:is(#recruitment-faq) .general details:where(.block) summary {
    cursor: pointer;
  }
  body:is(#recruitment-faq) .general details:where(.block):hover {
    background: var(--light-blue);
  }
  summarybody:is(#recruitment-faq) .general details:where(.block):hover::after {
    background: var(--blue);
  }
}
body:is(#recruitment-faq) .general details:where(.block) summary {
  min-height: 60px;
  box-sizing: content-box;
  padding: calc(var(--m) * 2) max(calc(var(--m) * 7), 60px);
  display: flex;
  align-items: center;
  font-size: calc(var(--base-fs) * 18);
  position: relative;
}
body:is(#recruitment-faq) .general details:where(.block) summary::-webkit-details-marker {
  display: none;
}
body:is(#recruitment-faq) .general details:where(.block) summary::before {
  --size: max(3.75svw, 30px);
  content: "Q";
  color: var(--white);
  font-size: calc(var(--base-fs) * 27);
  font-weight: 700;
  width: var(--size);
  height: var(--size);
  background: url('../imgs/question-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: calc(var(--m) * 2);
  transform: translateY(-50%);
}
body:is(#recruitment-faq) .general details:where(.block) summary::after {
  --size: max(1.3125svw, 21px);
  content: "＋";
  color: var(--white);
  font-size: calc(var(--base-fs) * 18);
  font-weight: 700;
  width: var(--size);
  height: var(--size);
  border-radius: var(--size);
  background: var(--deep-navy);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: calc(var(--m) * 2);
  transform: translateY(-50%);
}
body:is(#recruitment-faq) .general details:where(.block)[open] summary::after {
  content: "ー";
}
body:is(#recruitment-faq) .general details:where(.block) .detail {
  margin: calc(var(--m) * 2);
  border-top: 1px solid var(--gray);
  padding-top: calc(var(--m) * 2);
}
body:is(#recruitment-guideline) main.main {
  background: rgba(231, 236, 255, 0.3);
}
body:is(#recruitment-guideline) .guideline-index {
  margin-top: calc(var(--m) * 10);
  padding: calc(var(--m) * 5);
  background: var(--white);
}
body:is(#recruitment-guideline) .guideline-index > .headline {
  color: var(--deep-navy);
  font-size: calc(var(--base-fs) * 30);
  text-align: center;
  margin-bottom: calc(var(--m) * 3);
}
body:is(#recruitment-guideline) .guideline-index .container {
  width: -moz-max-content;
  width: max-content;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--m) * 2);
}
body:is(#recruitment-guideline) .guideline-index .container > a {
  --hover: var(--white);
  --hover-bg: var(--blue);
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px var(--m);
  border-radius: 6px;
  background: var(--deep-navy);
  color: var(--white);
  font-size: calc(var(--base-fs) * 18);
  text-decoration: none;
}
body:is(#recruitment-guideline) .general {
  margin-top: calc(var(--m) * 10);
  padding: calc(var(--m) * 5);
  background: var(--white);
}
body:is(#recruitment-guideline) .general > .headline {
  color: var(--deep-navy);
  font-size: calc(var(--base-fs) * 42);
  text-align: center;
  margin-bottom: calc(var(--m) * 3);
}
body:is(#recruitment-guideline) .general > .title {
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: calc(var(--m) * 3);
  font-size: calc(var(--base-fs) * 30);
  text-align: center;
}
body:is(#recruitment-guideline) .general .container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 3);
}
body:is(#recruitment-guideline) .general .block {
  padding-block: calc(var(--m) * 3);
  display: flex;
  gap: calc(var(--m) * 3);
}
body:is(#recruitment-guideline) .general .block.incomplete {
  --title: var(--gray);
  color: var(--gray);
  display: none;
}
body:is(#recruitment-guideline) .general .block:not(:last-of-type) {
  border-bottom: 1px dotted var(--black);
}
body:is(#recruitment-guideline) .general .block .title {
  width: 280px;
  padding-right: calc(var(--m) * 2);
  flex-shrink: 0;
  font-size: calc(var(--base-fs) * 18);
}
body:is(#recruitment-entry) .general {
  margin-top: calc(var(--m) * 10);
}
body:is(#recruitment-entry) .general .headline {
  color: var(--deep-navy);
  font-size: calc(var(--base-fs) * 30);
  text-align: center;
  margin-bottom: calc(var(--m) * 3);
}
body:is(#recruitment-entry) .general .headline + p {
  text-align: center;
}
#contact-form .table .not-required {
  color: var(--gray02);
  border: solid 1px var(--gray02);
  border-radius: 2px;
  font-size: 14px;
  padding: 2px 8px;
}
#contact-form .table .notice {
  margin-top: var(--m);
  color: var(--gray02);
  font-size: calc(var(--base-fs) * 13.5);
  font-weight: 400;
}
#contact-form .table input[type=checkbox] {
  display: inline;
  accent-color: #BA0015;
}
#contact-form .agree {
  display: flex;
  align-items: baseline;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: 5px;
}
#contact-form .agree input[type=checkbox] + span {
  margin-left: 5px;
}
#contact-form .flex-between {
  flex-wrap: nowrap;
  align-items: flex-start;
}
#contact-form .flex-between > *:first-child {
  width: 180px;
  word-break: auto-phrase;
}
#contact-form select {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 150px;
  padding: 7px;
  border: solid 1px #b3b3b3;
  border-radius: 2px;
}
#contact-form input[type="file"] {
  margin-block: 7px;
}
#contact-form button[type="submit"] {
  width: -moz-fit-content;
  width: fit-content;
}
#contact-form .btn::after {
  display: none;
}