@charset "UTF-8";

:root {
  --color-primary: #00246E;
  --color-text: #011429;
  --section-gap: 150px;
  --section-gap-sp: 64px;
  --entry-body-width: 976px;
}

/* -----------------------------------
    RECRUIT
------------------------------------ */
.recruitSection {
  margin-top: var(--section-gap);
}

.recruitSection+.recruitSection {
  margin-top: var(--section-gap);
}

@media (max-width: 767px) {
  .recruitSection {
    margin-top: var(--section-gap-sp);
  }

  .recruitSection+.recruitSection {
    margin-top: var(--section-gap-sp);
  }

  .recruitSection.recruitMessage {
    margin-top: 40px;
  }

  .recruitSection.recruitInterview {
    margin-top: 48px;
  }

  .recruitSection.recruitWorkstyle {
    margin-top: 48px;
  }

  .recruitSection.recruitEntry {
    margin-top: 48px;
  }
}

.recruitTtl {
  display: grid;
  place-items: center;
  gap: 8px;
}

.recruitTtl span.en {
  font-weight: 700;
  font-size: clamp(40px, 5.55vw, 80px);
  line-height: 1.2em;
  font-family: "Jost", sans-serif;
  color: var(--color-primary);
}

.recruitTtl span.jp {
  font-weight: 700;
  font-size: clamp(24px, 2.22vw, 32px);
  line-height: 1.5;
}

.recruitSection.recruitMessage .cH1n02 {

  font-size: clamp(24px, 2.22vw, 32px);
  font-weight: 700;
  line-height: 1.5em;
  color: var(--color-text);
  margin: 0;
  padding-top: 64px;
  text-align: center;
}

@media (max-width: 767px) {
  .recruitSection.recruitMessage .cH1n02 {
    padding-top: 32px;
  }
}

.recruitPhilosophyCont {
  background: #F4FCFF;
  padding-bottom: 150px;
  margin-top: 150px;
}

@media (max-width: 767px) {
  .recruitPhilosophyCont {
    padding-bottom: 48px;
    margin-top: 48px;
  }
}

.recruitSection.mission {
  padding-top: 150px;
}

@media (max-width: 767px) {
  .recruitSection.mission {
    padding-top: 48px;
  }
}

.recruitMessageList dt {
  font-weight: 700;

  font-size: clamp(18px, 1.66vw, 24px);
  line-height: 1.5em;
  text-align: center;
  color: var(--color-text);
  padding-top: 64px;
}

@media (max-width: 767px) {
  .recruitMessageList dt {
    font-size: 18px;
    padding-top: 48px;
  }
}

.recruitMessageList dd {
  font-size: 18px;
  line-height: 1.8em;
  text-align: center;
  color: #333333;
  padding-top: 24px;
}

@media (max-width: 767px) {
  .recruitMessageList dd {
    font-size: 16px;
    padding-top: 16px;
    text-align: left;
  }
}

.recruitMessage .name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5em;
  padding-top: 64px;
  text-align: center;
}

@media (max-width: 767px) {
  .recruitMessage .name {
    font-size: 21px;
    padding-top: 48px;
  }
}

.recruitMessage .name span {
  font-size: 16px;
  display: inline-block;
  padding-right: 24px;
}

@media (max-width: 767px) {
  .recruitMessage .name span {
    font-size: 14px;
  }
}

.recruitSection .missionTtl {
  font-family: "Jost", sans-serif;
  font-size: clamp(32px, 4.166vw, 60px);
  line-height: 1.5em;
  color: var(--color-primary);
  display: block;
  text-align: center;
}

.recruitSection .missionSub {
  font-size: clamp(18px, 1.66vw, 24px);
  line-height: 1.5em;
  display: block;
  text-align: center;
}

.recruitSection .missionTxt {
  font-size: clamp(24px, 2.22vw, 32px);
  line-height: 1.5em;
  color: #333333;
  text-align: center;
  padding-top: 64px;
  display: block;
}

@media (max-width: 767px) {
  .recruitSection .missionTxt {
    font-size: clamp(24px, 2.22vw, 32px);
    padding: 32px 24px 0;
    text-align: left;
  }
}

.recruitSection.vision {
  margin-top: 120px;
}

@media (max-width: 767px) {
  .recruitSection.vision {
    margin-top: 48px;
  }
}

.recruitSection .visionTtl {
  font-family: "Jost", sans-serif;
  font-size: clamp(32px, 4.166vw, 60px);
  line-height: 1.5em;
  color: var(--color-primary);
  display: block;
  text-align: center;
}

.recruitSection .visionSub {
  font-size: clamp(18px, 1.66vw, 24px);
  line-height: 1.5em;
  display: block;
  text-align: center;
}

.recruitSection .visionTxt {
  font-size: clamp(24px, 2.22vw, 32px);
  line-height: 1.5em;
  color: #333333;
  text-align: center;
  padding-top: 64px;
  display: block;
}

@media (max-width: 767px) {
  .recruitSection .visionTxt {
    font-size: clamp(24px, 2.22vw, 32px);
    padding: 32px 24px 0;
    text-align: left;
  }
}

.recruitSection.split {
  margin-top: 120px;
}

@media (max-width: 767px) {
  .recruitSection.split {
    margin-top: 48px;
  }

}

.recruitSection .splitTtl {
  font-family: "Jost", sans-serif;
  font-size: clamp(32px, 4.166vw, 60px);
  line-height: 1.5em;
  color: var(--color-primary);
  display: block;
  text-align: center;
}

.recruitSection .splitSub {
  font-size: clamp(18px, 1.66vw, 24px);
  line-height: 1.5em;
  display: block;
  text-align: center;
}

.recruitSection .splitTxt {
  font-size: 18px;
  line-height: 1.8em;
  color: #333333;
  text-align: center;
  padding-top: 16px;
  display: block;
}

@media (max-width: 767px) {
  .recruitSection .splitTxt {
    font-size: 16px;
    padding: 16px 24px 0;
    text-align: left;
  }
}

.splitCont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin: 0 auto;
  padding-top: 64px;
}

@media (max-width: 767px) {
  .splitCont {
    grid-template-columns: 1fr;
  }
}

.splitCont dl {
  margin: 0;
  padding: 0;
}

.splitCont> :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: 50%;
}

@media (max-width: 767px) {
  .splitCont> :last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
}

.splitCont dt {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8em;
  color: var(--color-text);
  text-align: center;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .splitCont dt {
    font-size: 18px;
    grid-auto-flow: inherit;
  }
}

.splitCont dt span {
  font-family: "Jost", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.8em;
  display: inline-block;
  color: var(--color-primary);
  padding-right: 12px;
}

@media (max-width: 767px) {
  .splitCont dt span {
    font-size: 24px;
    display: block;
    padding-right: 0;
  }
}

.splitCont dd {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8em;
  color: #333333;
  text-align: center;
  padding-top: 8px;
}

@media (max-width: 767px) {
  .splitCont dd {
    font-size: 16px;
    text-align: left;
    padding: 8px 24px 0;
  }
}

.recruitInterviewCont {
  padding-top: 64px;
}

.recruitInterviewCont .ttlCont,
.recruitWorkstyleCont .ttlCont,
.recruitEntryCont .ttlCont {
  padding: 24px 32px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.recruitEntryCont .ttlCont {
  border-radius: 16px;
}

@media (max-width: 767px) {
  .recruitInterviewCont .ttlCont,
  .recruitWorkstyleCont .ttlCont,
  .recruitEntryCont .ttlCont {
    padding: 16px;
  }
}

.recruitInterviewCont .ttlCont span,
.recruitWorkstyleCont .ttlCont span,
.recruitEntryCont .ttlCont span {
  display: block;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5em;
  color: #fff;
}

.recruitWorkstyleCont {
  padding-top: 64px;
}

.recruitEntryCont {
  padding-top: 64px;
}

@media (max-width: 767px) {
  .recruitEntryCont {
    padding-top: 48px;
  }
}

/* -----------------------------------
    RECRUIT DETAIL
------------------------------------ */
.recruitdetailSection {
  margin-top: var(--section-gap);
}

.recruitdetailSection+.recruitdetailSection {
  margin-top: var(--section-gap);
}

@media (max-width: 767px) {
  .recruitdetailSection {
    margin-top: var(--section-gap-sp);
  }

  .recruitdetailSection+.recruitdetailSection {
    margin-top: var(--section-gap-sp);
  }

  .recruitdetailSection.intro {
    margin-top: 40px;
  }

  .recruitdetailSection.recruitEntry {
    margin-top: 48px;
  }
}

.recruitdetailSection .date {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5em;
  color: var(--color-text);
  padding-top: 24px;
  display: block;
}

@media (max-width: 767px) {
  .recruitdetailSection .date {
    font-size: 18px;
  }
}

.recruitdetailSection .staffListBox {
  position: relative;
}

.recruitdetailSection .staffListBox a {
  position: relative;
  -webkit-transition: -webkit-filter 0.4s ease 0s;
  transition: -webkit-filter 0.4s ease 0s;
  transition: filter 0.4s ease 0s;
  transition: filter 0.4s ease 0s, -webkit-filter 0.4s ease 0s;
}

@media (min-width: 992px) {
  .recruitdetailSection .staffListBox a:hover::before {
    width: 100%;
  }
}

.recruitdetailSection .staffListBox a::before {
  content: "";
  width: 0;
  height: 2px;
  background: var(--color-primary);
  position: absolute;
  bottom: -8px;
  left: 0;
  -webkit-transition: width 0.4s ease 0s;
  transition: width 0.4s ease 0s;
}

/* -----------------------------------
    動画埋め込み
------------------------------------ */
.recruitMovie {
  padding-top: 64px;
  text-align: center;
}
.recruitMovie iframe {
  display: block;
  width: 100%;
  max-width: 935px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto;
  border: 0;
}
@media (max-width: 767px) {
  .recruitMovie {
    padding-top: 32px;
  }
}

/* -----------------------------------
    一覧カード画像
------------------------------------ */
.recruitInterviewCont figure img,
.recruitWorkstyleCont figure img {
  width: 100%;
  aspect-ratio: 416 / 254;
  object-fit: cover;
}

/* -----------------------------------
    関連情報
------------------------------------ */
.recruitRelatedWrap {
  background: #F5F5F5;
  border-radius: 16px;
  padding: 48px;
}
.recruitRelatedHead {
  font-size: clamp(24px, 2.22vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-primary);
}
.recruitRelatedWrap .recruitMovie {
  padding-top: 40px;
}
.recruitRelatedWrap .recruitMovie iframe {
  max-width: 600px;
}
.recruitRelatedTtl {
  margin-top: 40px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.recruitRelatedTxt {
  margin-top: 16px;
  text-align: center;
  line-height: 1.8;
}
.recruitRelatedTxt a {
  text-decoration: underline;
}
@media (max-width: 767px) {

  .recruitRelated .inner01 {
    width: 100%;
  }
  .recruitRelatedWrap {
    border-radius: 0;
    padding: 32px 5%;
  }
  .recruitRelatedWrap .recruitMovie {
    padding-top: 24px;
  }
  .recruitRelatedWrap .recruitMovie iframe {
    max-width: none;
  }
  .recruitRelatedTtl {
    margin-top: 24px;
    text-align: left;
  }
  .recruitRelatedTxt {
    text-align: left;
  }
}

/* -----------------------------------
    一覧カード（タブレット）
------------------------------------ */
@media (min-width: 768px) and (max-width: 991px) {
  .recruitInterviewCont .colBox4,
  .recruitWorkstyleCont .colBox4,
  .recruitEntryCont .colBox4 {
    width: 48.2142857143%;
  }
}

@media (min-width: 992px) and (max-width: 1179px) {
  .recruitInterviewCont .ttlCont,
  .recruitWorkstyleCont .ttlCont,
  .recruitEntryCont .ttlCont {
    padding: 24px 16px;
  }
  .recruitInterviewCont .ttlCont span,
  .recruitWorkstyleCont .ttlCont span,
  .recruitEntryCont .ttlCont span {
    font-size: 16px;
  }
}

/* -----------------------------------
    記事本文（ブロックエディタ出力）
------------------------------------ */
.recruitdetailSection.intro .inner01 {
  max-width: var(--entry-body-width);
}

#entry-body {
  width: 100%;
  max-width: var(--entry-body-width);
  margin: 0 auto;
}
#entry-body p.mt-be-image {
  padding: 80px 0 80px;
  margin: 0;
  text-align: center;
}
#entry-body p.mt-be-image img,
#entry-body figure.mt-figure img {

  max-width: 100%;
  height: auto;
}
#entry-body h2 {
  font-size: clamp(24px, 3.125vw, 40px);
  line-height: 1.5em;
  border-left: 6px solid var(--color-primary);
  padding: 16px 32px;
  margin: 0;
  color: var(--color-text);
}
#entry-body h2 span,
#entry-body h2 strong {
  font-weight: inherit;
}
#entry-body p {
  font-size: 18px;
  line-height: 1.8em;
  padding-top: 48px;
}
@media (max-width: 767px) {
  #entry-body p.mt-be-image {
    padding: 48px 0 48px;
  }
  #entry-body p {
    font-size: 16px;
    padding-top: 32px;
  }
}

#entry-body h3 {
  font-size: clamp(24px, 3.125vw, 40px);
  line-height: 1.5em;
  color: var(--color-text);
  padding-top: 48px;
}
#entry-body h4,
#entry-body h5,
#entry-body h6 {
  font-size: 18px;
  line-height: 1.5em;
  font-weight: 700;
  color: var(--color-text);
  padding-top: 32px;
}
#entry-body h2 + p,
#entry-body h3 + p,
#entry-body h4 + p,
#entry-body h5 + p,
#entry-body h6 + p {
  padding-top: 24px;
}
#entry-body h2 + h3,
#entry-body h2 + h4,
#entry-body h3 + h4 {
  padding-top: 24px;
}
#entry-body h2 + h2 {
  margin-top: 24px;
}
#entry-body p:not(.mt-be-image) + h2,
#entry-body div + h2,
#entry-body ul + h2,
#entry-body ol + h2 {
  margin-top: 48px;
}

/* -----------------------------------
    記事本文 写真キャプション
------------------------------------ */
#entry-body figure.mt-figure {

  display: table;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  vertical-align: top;
  margin: 80px 0;
  padding: 0;
}
#entry-body figure.mt-figure img {
  display: block;
}
#entry-body figure.mt-figure figcaption {
  position: relative;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: left;
  z-index: 0;
}
#entry-body figure.mt-figure figcaption::after {

    content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-primary);
  z-index: -1;
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* data-inv は recruit.js が付与し、.inview は common.js の checkInView() が付与する */
#entry-body figure.mt-figure figcaption[data-inv]:not(.inview)::after {
  transform: scaleX(0);
}
#entry-body figure.mt-figure figcaption[data-inv] {

  transition: color 0.7s ease 0.35s;
}
#entry-body figure.mt-figure figcaption[data-inv]:not(.inview) {
  color: transparent;
}

#entry-body figure.mt-figure:not(.mt-figure-center) figcaption {
  display: block;
  width: 620px;
  max-width: 100%;
  margin: -35px 0 0 auto;
  font-size: 14px;
  line-height: 1.8em;
  padding: 2em 2.6em;
}
#entry-body figure.mt-figure:not(.mt-figure-center) figcaption::before {
  content: "PROFILE";
  display: block;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.3em;
  line-height: 1em;
  margin-bottom: 0.8em;
}

#entry-body figure.mt-figure-center figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.6em;
  padding: 1em 3em;
}
@media (max-width: 767px) {
  #entry-body figure.mt-figure {
    margin: 48px 0;
  }
  #entry-body figure.mt-figure:not(.mt-figure-center) figcaption {
    width: 100%;
    margin: 0;
    padding: 1.8em 2.2em;
    font-size: 13px;
  }
  #entry-body figure.mt-figure:not(.mt-figure-center) figcaption::before {
    font-size: 14px;
  }
  #entry-body figure.mt-figure-center figcaption {
    font-size: 12px;
    padding: 0.5em 2em;
  }
}
#entry-body p:empty {
  display: none;
}

/* 見出しブロックで書かれた応募フォームリンクは見出し扱いにしない */
#entry-body h2:has(> a[href*="forms.gle"]) {
  border-left: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5em;
  font-weight: 700;
}
#entry-body ul,
#entry-body ol {
  padding-top: 24px;
}
#entry-body ul li {
  font-size: 16px;
  line-height: 1.5em;
  padding-left: 18px;
  position: relative;
  color: #374151;
}
#entry-body ul li:not(:last-child) {
  margin-bottom: 16px;
}
#entry-body ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333333;
  position: absolute;
  top: 8px;
  left: 0;
}
#entry-body ol li {
  font-size: 16px;
  line-height: 1.5em;
  list-style-type: decimal;
  margin-left: 1.5em;
  padding-left: 0.5em;
  color: #374151;
}
#entry-body ol li:not(:last-child) {
  margin-bottom: 16px;
}
#entry-body ol li::marker {
  font-weight: 600;
}
#entry-body a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
}
#entry-body table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
}
#entry-body table th {
  background: #F9F9F9;
  font-weight: 700;
  font-size: 16px;
  padding: 24px 12px;
  text-align: left;
}
#entry-body table td {
  font-size: 16px;
  padding: 24px 12px;
}
#entry-body table tbody tr:nth-child(odd) td {
  background: #EBEEF2;
}
#entry-body blockquote {
  margin: 24px 0 0;
  padding: 8px 24px;
  border-left: 4px solid var(--color-primary);
  color: #374151;
}
@media (max-width: 767px) {
  #entry-body h3 {
    padding-top: 32px;
  }
  #entry-body h4,
  #entry-body h5,
  #entry-body h6 {
    padding-top: 24px;
  }
  #entry-body h2 + p,
  #entry-body h3 + p,
  #entry-body h4 + p,
  #entry-body h5 + p,
  #entry-body h6 + p {
    padding-top: 16px;
  }
  #entry-body table th,
  #entry-body table td {
    font-size: 14px;
    padding: 16px 8px;
  }
}

/* -----------------------------------
    スタッフ紹介一覧
------------------------------------ */
.recruitdetailSection .staffListWrap .staffListBox {
  gap: 24px 32px;
  flex: 1;
  min-width: 0;
}
.recruitdetailSection .staffListWrap .staffListBox .staffBox figure {
  width: 96px;
}
.recruitdetailSection .staffListWrap .staffListBox .staffBox figure img {
  width: 96px;
  height: 96px;
  object-fit: cover;
}
@media (min-width: 768px) and (max-width: 1440px) {
  .recruitdetailSection .staffListWrap .staffListBox .staffBox {
    width: calc((100% - 32px) / 2);
  }
}
@media (min-width: 1441px) {
  .recruitdetailSection .staffListWrap .staffListBox .staffBox {
    width: calc((100% - 64px) / 3);
  }
}
@media (min-width: 992px) and (max-width: 1023px) {
  .recruitdetailSection .staffListWrap .staffListBox .staffBox .txt {
    font-size: 14px;
  }
}

/* -----------------------------------
    アクセシビリティ
------------------------------------ */
body.recruit :focus-visible,
body.recruitdetail :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce), print {
  #entry-body figure.mt-figure figcaption[data-inv],
  #entry-body figure.mt-figure figcaption::after {
    transition: none;
  }
  #entry-body figure.mt-figure figcaption[data-inv]:not(.inview) {
    color: #fff;
  }
  #entry-body figure.mt-figure figcaption[data-inv]:not(.inview)::after {
    transform: none;
  }
}