@charset "UTF-8";
/* 社員紹介（一覧・詳細）。デザインはFigmaイシュー確定までのプレースホルダー */
:root {
  --mr-navy: #1b2c5e;
  --mr-navy-dark: #12204a;
  --mr-blue-pale: #eef4fb;
  --mr-border: #c9d6e8;
  --mr-text: #333;
  --mr-filter-navy: #002c66;
  --mr-filter-pale: #f1f7fe;
  --mr-filter-border: #c4c4c4;
  --mr-filter-bg: #edf3fc;
}

.mr-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
}

/* 採用ページ共通のコンテンツ幅（CLAUDE.md参照）: 外側1080px+左右40pxで、内側は実質1000px */
.mr-section {
  max-width: 1080px;
  padding-inline: 40px;
  margin-inline: auto;
}

/* base.css（既存流用）の固定幅（#wrapper 1200px / .inner1000・1150）を
   新規ページ群では解除し、中間幅でも横スクロールを出さない */
body.work {
  overflow-x: clip;
}

body.work #wrapper {
  min-width: 0;
}

@media screen and (min-width: 768px) {
  body.work .inner1000,
  body.work .inner1150 {
    width: auto;
  }

  body.work .inner1000 {
    max-width: min(1000px, 100% - 50px);
  }

  body.work .inner1150 {
    max-width: min(1150px, 100% - 50px);
  }
}

/* base.css（既存流用）の body.child 縞背景・セクション余白をこのページでは無効化。
   上paddingは固定ヘッダー高（PC80px/SP45px）に合わせる */
body.child main.person-main {
  padding-top: 80px;
  padding-bottom: 120px;
}

/* 一覧・詳細とも全面 #edf3fc */
body.child main.person-main {
  background: var(--mr-filter-bg);
}

body.child main.person-main section,
body.child main.person-main section:nth-of-type(odd) {
  background: none;
  padding: 0;
}

.person-main {
  display: block;
}

.person-hero {
  position: relative;
  overflow: hidden;
}

.person-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

.person-hero__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 49px;
  text-align: center;
}

.person-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.person-hero__en {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.person-hero__shape {
  display: flex;
  width: 48px;
  height: 4px;
}

.person-hero__shape-yellow,
.person-hero__shape-green {
  width: 24px;
  height: 4px;
}

.person-hero__shape-yellow {
  background: #f7de00;
}

.person-hero__shape-green {
  background: #118240;
}

.person-hero__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.person-filter {
  margin-top: 104px;
}

body.child main.person-main section.person-filter {
  background: var(--mr-filter-bg);
}

.person-filter__island {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
}

.person-filter__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.person-filter__list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.person-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.person-filter__btn {
  appearance: none;
  font-family: inherit;
  border: 1px solid var(--mr-filter-border);
  background: var(--mr-filter-pale);
  color: var(--mr-filter-navy);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 24px;
  border-radius: 48px;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.person-filter__btn:hover {
  background: #dce8f7;
}

.person-filter__btn.is-active {
  background: var(--mr-filter-navy);
  border-color: var(--mr-filter-navy);
  color: #fff;
}

.person-group {
  margin-top: 104px;
}

body.child main.person-main section.person-group {
  background: var(--mr-filter-bg);
  padding-bottom: 64px;
}

.person-group[hidden] {
  display: none;
}

.person-group__head {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.person-group__bar {
  display: block;
  width: 2px;
  background: var(--mr-filter-navy);
  flex-shrink: 0;
}

.person-group__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.person-group__eyebrow {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--mr-filter-navy);
}

.person-group__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.person-group__gridwrap {
  position: relative;
  margin-top: 104px;
}

.person-group__gridwrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(100% - 8vw);
  height: calc(100% - 360px);
  min-height: 200px;
  background: #fff;
  border-radius: 32px 0 0 32px;
  pointer-events: none;
}

.person-group__content {
  position: relative;
  z-index: 1;
}

.person-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 80px 32px;
}

.person-card {
  display: block;
}

.person-card a {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: inherit;
  text-decoration: none;
}

.person-card__photo {
  position: relative;
  aspect-ratio: 312 / 392;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #dbe6f5 0%, #b8cbe6 100%);
}

.person-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.person-card a:hover .person-card__photo img {
  transform: scale(1.1);
}

.person-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.person-card__info {
  min-width: 0;
}

/* 職種名の文字数で入社年の行がずれないよう、1行目＝職種、2行目＝入社年＋氏名に固定する */
.person-card__meta {
  display: grid;
  /* 2列目を1frにすると、1行目のピルが長くても2行目のトラック幅が広がらず、入社年と氏名の間隔が一定になる */
  grid-template-columns: max-content 1fr;
  grid-template-areas:
    "pill pill"
    "role name";
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.person-card__pill {
  grid-area: pill;
  justify-self: start;
  display: inline-block;
  background: var(--mr-filter-bg);
  border: 0.636px solid var(--mr-filter-navy);
  color: var(--mr-filter-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  padding: 7.636px 15.273px;
  border-radius: 30.545px;
}

.person-card__role {
  grid-area: role;
  font-size: 14px;
  font-weight: 400;
  color: var(--mr-filter-navy);
  white-space: nowrap;
}

.person-card__name {
  grid-area: name;
  font-size: 18px;
  font-weight: 700;
  color: var(--mr-filter-navy);
  white-space: nowrap;
}

.person-card__headline {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 座談会は参加者が横一列に並ぶ集合写真のため、全員が入る横長比率で見せる */
.person-card--talk .person-card__photo {
  aspect-ratio: 872 / 364;
}

/* 座談会カードは氏名の代わりに号数を置くため、pill とタイトルを縦積みにする */
.person-card--talk .person-card__meta {
  grid-template-columns: 1fr;
  grid-template-areas:
    "pill"
    "name";
}

.person-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--mr-filter-border);
  color: var(--mr-filter-border);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.person-card a:hover .person-card__arrow {
  background: var(--mr-filter-navy);
  border-color: var(--mr-filter-navy);
  color: #fff;
}

.person-card__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* 詳細ページ: ヒーロー（メイン画像＋カテゴリ／コピー／プロフィール） */
.mr-hero {
  position: relative;
  width: 100%;
}

.mr-hero__imgwrap {
  position: relative;
  z-index: 1;
  width: calc(100% - clamp(56px, 13.889vw, 200px));
  margin-left: auto;
}

.mr-hero__imgwrap::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 250px;
  border-bottom-left-radius: 48px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
  pointer-events: none;
}

.mr-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom-left-radius: 48px;
}

/* ヒーロー画像のフェードイン。読み込みが遅れて文字より後にパッと出る違和感を軽減する。
   html.mr-anim のガードは .mr-reveal と同じ考え方（JS無効時は常時表示のまま） */
html.mr-anim .mr-hero__imgwrap {
  opacity: 0;
  transition: opacity 0.5s ease;
}

html.mr-anim .mr-hero__imgwrap.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.mr-anim .mr-hero__imgwrap {
    opacity: 1;
    transition: none;
  }
}

/* 背景写真が暗い・情報量が多いページでもネイビーの文字が沈まないよう白く縁取る */
.mr-hero__category {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
  position: absolute;
  z-index: 2;
  top: clamp(16px, 2.222vw, 32px);
  left: clamp(20px, 3.194vw, 46px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.111vw, 16px);
}

.mr-hero__category-main {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.111vw, 16px);
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 500;
  color: var(--mr-filter-navy);
  white-space: nowrap;
}

.mr-hero__category-hash {
  font-size: clamp(22px, 4.167vw, 60px);
  line-height: 1;
}

.mr-hero__category-word {
  font-size: clamp(32px, 7.222vw, 104px);
  line-height: 1;
}

.mr-hero__category-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.389vw, 20px);
  line-height: 1.2;
  color: #000;
}

.mr-hero__copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(20px, 11.667vw, 168px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.667vw, 24px);
  max-width: calc(100% - clamp(20px, 11.667vw, 168px) - clamp(16px, 2.778vw, 40px));
}

.mr-hero__copy-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.556vw, 8px);
  background: var(--mr-filter-navy);
  color: #fff;
  padding: clamp(5px, 0.556vw, 8px) clamp(10px, 1.111vw, 16px);
  white-space: nowrap;
}

.mr-hero__copy-role {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.25vw, 18px);
}

.mr-hero__copy-name {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.528vw, 22px);
}

.mr-hero__copy-lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.667vw, 24px);
  max-width: 100%;
}

.mr-hero__copy-line {
  display: inline-block;
  max-width: 100%;
  background: #fff;
  color: var(--mr-filter-navy);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.875vw, 27px);
  line-height: 1.8;
  padding: clamp(4px, 0.556vw, 8px) clamp(8px, 1.111vw, 16px);
}

.mr-hero__foot {
  z-index: 2;
}

.mr-hero__profile {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 18.333vw, 264px);
  bottom: clamp(16px, 3.889vw, 56px);
  max-width: calc(100% - clamp(20px, 18.333vw, 264px) - clamp(16px, 2.778vw, 40px));
}

.mr-hero__profile-title {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.528vw, 22px);
  color: var(--mr-filter-navy);
}

.mr-hero__profile-text {
  margin-top: clamp(4px, 0.556vw, 8px);
  max-width: 720px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 1.111vw, 16px);
  line-height: 1.8;
  color: var(--mr-filter-navy);
}

/* 768〜1079px は PC レイアウトのまま画像だけ縮み、コピーが顔に掛かるため幅を抑える。
   画像が低くなりコピーとプロフィールが重なるため、SP と同じくプロフィールは画像の下に流す */
@media (min-width: 768px) and (max-width: 1079px) {
  .mr-hero {
    display: grid;
  }

  .mr-hero__imgwrap {
    grid-area: 1 / 1;
  }

  .mr-hero__foot {
    display: contents;
  }

  .mr-hero__copy {
    position: relative;
    grid-area: 1 / 1;
    align-self: center;
    top: auto;
    left: auto;
    transform: none;
    margin-left: clamp(20px, 11.667vw, 168px);
    max-width: 54%;
  }

  .mr-hero__profile {
    position: static;
    grid-area: 2 / 1;
    margin: 24px clamp(16px, 2.778vw, 40px) 0 clamp(56px, 13.889vw, 200px);
    max-width: none;
  }
}

/* 詳細ページ: ムービーセクション（YouTube埋め込み。動画到着まではダミー動画） */
.mr-movie {
  margin-top: 80px;
}

.mr-movie__title {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.4;
  color: var(--mr-filter-navy);
  text-align: center;
}

.mr-movie__frame {
  margin-top: 32px;
  aspect-ratio: 1000 / 576;
  overflow: hidden;
}

.mr-movie__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 詳細ページ: ワークスタイルセクション（画像あり項目はA/B交互の見切れ配置、
   画像なし項目（--plain）は中央1000px幅・1080px未満は1カラム化） */
.mr-workstyle__item {
  margin-top: 100px;
}

.mr-workstyle__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "image" "body";
  gap: 40px;
}

.mr-workstyle__title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mr-workstyle__title-jp {
  margin: 0;
  display: flex;
  align-items: stretch;
  gap: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.8;
  color: var(--mr-filter-navy);
}

.mr-workstyle__label {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: var(--mr-filter-navy);
}

/* 折り返しは文節（.mr-seg）の境界だけで起こす。文節の途中で改行させないため */
.mr-seg {
  white-space: nowrap;
}

.mr-workstyle__title-jp::before {
  content: "";
  display: block;
  width: 2px;
  flex-shrink: 0;
  background: var(--mr-filter-navy);
}

.mr-workstyle__image {
  grid-area: image;
}

.mr-workstyle__image img {
  display: block;
  width: 100%;
  height: auto;
}

.mr-workstyle__body {
  grid-area: body;
}

.mr-workstyle__body p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.8;
  color: #000;
}

.mr-workstyle__body p:last-child {
  margin-bottom: 0;
}

/* タイムスケジュール（04・05・06）。字下げを全角スペースではなくCSSで揃える */
.mr-schedule__lead {
  font-weight: 700;
}

.mr-workstyle__body .mr-schedule__time {
  margin-bottom: 8px;
  font-weight: 700;
}

.mr-workstyle__body .mr-schedule__time + .mr-schedule__desc,
.mr-workstyle__body .mr-schedule__desc + .mr-schedule__desc {
  margin-bottom: 8px;
  padding-left: 1em;
}

.mr-workstyle__body .mr-schedule__desc + .mr-schedule__time,
.mr-workstyle__body .mr-schedule__time + .mr-schedule__time {
  margin-top: 24px;
}

.mr-workstyle__body .mr-schedule__note {
  margin-top: 24px;
}

/* 2つのスケジュール群の間に挟む文は、時刻行の間隔より広く空けて群の切れ目を見せる */
.mr-workstyle__body .mr-schedule__time + .mr-schedule__note,
.mr-workstyle__body .mr-schedule__note + .mr-schedule__lead {
  margin-top: 40px;
}

.mr-workstyle--plain .mr-workstyle__grid {
  grid-template-areas: "title" "body";
}

@media screen and (min-width: 1080px) {
  .mr-workstyle--a .mr-workstyle__pattern,
  .mr-workstyle--b .mr-workstyle__pattern {
    max-width: none;
    width: calc(1000px + ((100% - 1000px) / 2));
    padding-inline: 0;
  }

  .mr-workstyle--a .mr-workstyle__pattern {
    margin-left: 0;
    margin-right: auto;
  }

  .mr-workstyle--b .mr-workstyle__pattern {
    margin-left: auto;
    margin-right: 0;
  }

  .mr-workstyle--a .mr-workstyle__grid {
    grid-template-columns: 1fr 607px;
    grid-template-areas: ". title" "image body";
  }

  .mr-workstyle--b .mr-workstyle__grid {
    grid-template-columns: 607px 1fr;
    grid-template-areas: "title ." "body image";
  }

  .mr-workstyle--a .mr-workstyle__image img {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  .mr-workstyle--b .mr-workstyle__image img {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }

  .mr-workstyle__grid {
    gap: 70px;
  }
}

.mr-others {
  margin-top: 104px;
  margin-bottom: 104px;
}

.mr-others__head {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.mr-others__bar {
  display: block;
  width: 2px;
  flex-shrink: 0;
  background: var(--mr-filter-navy);
}

.mr-others__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mr-others__eyebrow {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--mr-filter-navy);
}

.mr-others__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.mr-others__cards {
  margin-top: 100px;
  display: flex;
  gap: 80px 32px;
}

.mr-others__cards .person-card {
  flex: 1 1 280px;
  min-width: 0;
}

.person-backlink {
  margin-top: 72px;
  text-align: center;
}

.person-backlink a {
  display: inline-block;
  border: 1px solid var(--mr-navy);
  color: var(--mr-navy);
  font-weight: 700;
  text-decoration: none;
  padding: 16px 56px;
  border-radius: 9999px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.person-backlink a:hover {
  background: var(--mr-navy);
  color: #fff;
}

@media only screen and (max-width: 767px) {
  /* SP時のガターは左右20px（CLAUDE.md準拠） */
  .mr-inner,
  .mr-section {
    padding-inline: 20px;
  }

  body.child main.person-main {
    padding-top: 45px;
    padding-bottom: 72px;
  }

  .mr-hero {
    --mr-sp-hero-img-height: 460px;
  }

  /* 幅に応じた自動高さだけだと縦積みコンテンツ量に対して画像が低すぎる場合があるため下限のみ確保 */
  .mr-hero__imgwrap {
    min-height: var(--mr-sp-hero-img-height);
    width: calc(100% - 30px);
    margin-left: auto;
  }

  .mr-hero__imgwrap::after {
    display: none;
  }

  .mr-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 40px;
  }

  /* SPはプロフィール文量が増えるため、コピーだけ画像に重ね、プロフィールは画像下に流す */
  .mr-hero__foot {
    display: contents;
  }

  .mr-hero__copy {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 316px;
    transform: translateY(-50%);
    max-width: 100%;
  }

  /* 03 はサムネ流用の SP ヒーローで顔が大きく、コピーを顎の下まで下げる。
     画像の高さは幅によらず固定なので、コピーの下端を画像の下端に揃えて行数や幅が変わってもはみ出さないようにする */
  .mr-hero__copy--low {
    top: calc(var(--mr-sp-hero-img-height) - 12px);
    transform: translateY(-100%);
  }

  .mr-hero__profile {
    position: static;
    margin: 24px 20px 0 30px;
    max-width: calc(100% - 50px);
  }

  .mr-hero__profile-text {
    font-size: 14px;
  }

  .mr-movie {
    margin-top: 40px;
  }

  .person-hero__body {
    gap: 16px;
  }

  .person-hero__head {
    gap: 10px;
  }

  .person-hero__en {
    font-size: 36px;
  }

  .person-hero__shape {
    width: 32px;
  }

  .person-hero__shape-yellow,
  .person-hero__shape-green {
    width: 16px;
  }

  .person-hero__title {
    font-size: 16px;
  }

  .person-filter {
    margin-top: 56px;
  }

  .person-filter__island {
    padding: 24px;
  }

  .person-filter__title {
    font-size: 18px;
  }

  .person-filter__list {
    margin-top: 20px;
    gap: 10px;
  }

  .person-filter__row {
    gap: 8px;
  }

  .person-filter__btn {
    font-size: 13px;
    padding: 10px 18px;
  }

  .person-group {
    margin-top: 80px;
  }

  body.child main.person-main section.person-group {
    padding-bottom: 40px;
  }

  .person-group__head {
    gap: 16px;
  }

  .person-group__heading {
    gap: 8px;
  }

  .person-group__eyebrow {
    font-size: 16px;
  }

  .person-group__title {
    font-size: 20px;
  }

  .person-group__gridwrap {
    margin-top: 40px;
  }

  .person-group__gridwrap::before {
    display: none;
  }

  .person-list {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .person-card__headline {
    font-size: 16px;
  }

  .person-card__pill {
    font-size: 11px;
    padding: 6px 12px;
  }

  .person-card__role {
    font-size: 13px;
  }

  .person-card__name {
    font-size: 16px;
  }

  .mr-movie__title {
    font-size: 28px;
  }

  .mr-movie__frame {
    margin-top: 20px;
  }

  .mr-workstyle__item {
    margin-top: 64px;
  }

  .mr-workstyle__grid {
    gap: 24px;
  }

  .mr-workstyle__image img {
    border-radius: 8px;
  }

  .mr-workstyle__title {
    gap: 12px;
  }

  .mr-workstyle__title-jp {
    gap: 16px;
    font-size: 18px;
  }

  .mr-workstyle__label {
    font-size: 16px;
  }

  .mr-workstyle__body p {
    font-size: 15px;
  }

  .mr-others {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .mr-others__head {
    gap: 16px;
  }

  .mr-others__heading {
    gap: 8px;
  }

  .mr-others__eyebrow {
    font-size: 16px;
  }

  .mr-others__title {
    font-size: 20px;
  }

  .mr-others__cards {
    margin-top: 56px;
    flex-direction: column;
    gap: 56px;
  }
}

/* 出現アニメーション。html.mr-anim はheadのインラインスクリプトが付与する
   （JS無効時に .mr-reveal を隠したままにしないためのガード）。
   transform を使う要素と衝突しないよう translate プロパティで動かす */
html.mr-anim .mr-reveal {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity 0.75s cubic-bezier(0.39, 0.575, 0.565, 1),
    translate 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: var(--mr-reveal-delay, 0s);
}

html.mr-anim .mr-reveal.is-inview {
  opacity: 1;
  translate: 0 0;
}

.mr-reveal--d1 {
  --mr-reveal-delay: 0.15s;
}

.mr-reveal--d2 {
  --mr-reveal-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  html.mr-anim .mr-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

@media (max-width: 374px) {
  .mr-workstyle__title-jp {
    font-size: 17px;
  }
}

/* 359px 以下は文節を守るより溢れを防ぐ */
@media (max-width: 359px) {
  .mr-seg {
    white-space: normal;
  }

  .mr-workstyle__title-jp > span {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}