@charset "UTF-8";

/* =============================================================
   1. BASE
   ============================================================= */

/* ---------- resetCss ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: baseline;
}
*, *::before, *::after {
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }
ol, ul { list-style: none; }
address { font-style: normal; }
a { text-decoration: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
input {
  margin: 0;
  background-color: transparent;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
}


/* ---------- :root ---------- */
:root {
  /* design-locked: 値はAI版カンプ（dist/styles.css）の実測 */
  --color-main:       #b41467;
  --color-main-line:  #dda4bf;
  --color-text:       #20232a;
  --color-text-muted: #626973;
  --color-reverse:    #ffffff;
  --color-bk:         #fff3f8;
  --color-bk-sub:     #f4f7f8;
  --color-border:     #e1e4e8;

  --font-base: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en:   Arial, "Helvetica Neue", sans-serif;
  --font-num:  Georgia, "Times New Roman", serif;
  --fz-main:   16px;
  --lh-main:   1.9;

  --space-band:   75px;
  --space-bandSp: 48px;

  --shadow-card: 0 8px 24px rgba(32, 35, 42, 0.07);

  --transition: 0.2s;

  --bp-md: 768px;
  --bp-sm: 599px;
}


/* ---------- base styles ---------- */
html {
  scroll-behavior: smooth;
  /* sticky ヘッダーの高さぶん、アンカー移動先が隠れないようにする */
  scroll-padding-top: 135px;
}
@media screen and (max-width: 768px) {
  html {
    scroll-padding-top: 220px;
  }
}
@media screen and (max-width: 599px) {
  html {
    scroll-padding-top: 100px;
  }
}
body {
  color: var(--color-text);
  background: var(--color-reverse);
  font-family: var(--font-base);
  font-size: var(--fz-main);
  font-weight: 400;
  line-height: var(--lh-main);
}
h1, h2, h3 {
  /* 見出しを文節の切れ目で折り返す（Chromium のみ対応。非対応環境は通常の折り返し） */
  word-break: auto-phrase;
}
a {
  color: inherit;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-main);
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-main);
  outline-offset: 5px;
}


/* =============================================================
   2. LAYOUT (l_)
   ============================================================= */

/* ---------- l_cont ---------- */
/* design-locked: カンプは画面幅に追従する流体幅。PC保護の min-width は持たせない */
.l_cont {
  margin-inline: auto;
  /* l_grid--gutterLg の負マージン（26px）が左右余白（24px）を越える幅で横スクロールを出さないため。clip はスクロールコンテナを作らず sticky を壊さない */
  overflow-x: clip;
}
.l_cont__inner {
  width: calc(100% - 48px);
  max-width: 1060px;
  margin-inline: auto;
}
@media screen and (max-width: 599px) {
  .l_cont__inner {
    width: calc(100% - 36px);
  }
}


.l_cont__inner--narrow790 {
  max-width: 790px;
}


/* ---------- l_grid ---------- */
.l_grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.l_grid__item {
  display: flex;
}
.l_grid__inner {
  display: block;
  width: 100%;
}
.l_grid--alignCenter {
  align-items: center;
}

/* design-locked: カンプ実測 26px（768以下 19px） */
.l_grid--gutterMd {
  margin-top: -26px;
  margin-inline: -13px;
}
.l_grid--gutterMd > .l_grid__item {
  padding-top: 26px;
  padding-inline: 13px;
}
@media screen and (max-width: 768px) {
  .l_grid--gutterMd {
    margin-top: -19px;
    margin-inline: -9.5px;
  }
  .l_grid--gutterMd > .l_grid__item {
    padding-top: 19px;
    padding-inline: 9.5px;
  }
}

/* design-locked: カンプ実測 18px（拠点ボックス） */
.l_grid--gutterSm {
  margin-top: -18px;
  margin-inline: -9px;
}
.l_grid--gutterSm > .l_grid__item {
  padding-top: 18px;
  padding-inline: 9px;
}

/* design-locked: 列間のみ 28px（599以下 20px）。行間は中身の罫線と padding で取る */
.l_grid--gutterInline {
  margin-inline: -14px;
}
.l_grid--gutterInline > .l_grid__item {
  padding-inline: 14px;
}
@media screen and (max-width: 599px) {
  .l_grid--gutterInline {
    margin-inline: -10px;
  }
  .l_grid--gutterInline > .l_grid__item {
    padding-inline: 10px;
  }
}

/* design-locked: カンプ実測 52px（768以下 30px） */
.l_grid--gutterLg {
  margin-top: -52px;
  margin-inline: -26px;
}
.l_grid--gutterLg > .l_grid__item {
  padding-top: 52px;
  padding-inline: 26px;
}
@media screen and (max-width: 768px) {
  .l_grid--gutterLg {
    margin-top: -30px;
    margin-inline: -15px;
  }
  .l_grid--gutterLg > .l_grid__item {
    padding-top: 30px;
    padding-inline: 15px;
  }
}


/* =============================================================
   3. MODULE (m_)
   ============================================================= */

/* -------------------------------------------------------------
   3b. 共通汎用系
   ------------------------------------------------------------- */

/* ---------- m_skipLink ---------- */
.m_skipLink {
  position: absolute;
  top: 20px;
  left: -999px;
  z-index: 1000;
  background: var(--color-reverse);
}
.m_skipLink:focus {
  left: 20px;
}


/* ---------- m_btn ---------- */
.m_btn {
  display: flex;
}
.m_btn__target {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 12px 21px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.m_btn__target::after {
  content: "↗";
  content: "↗" / "";
  font-size: 18px;
}
.m_btn--primary .m_btn__target {
  border-color: var(--color-main);
  background: var(--color-bk);
  color: var(--color-main);
}
.m_btn--sub .m_btn__target {
  border-color: var(--color-text);
  background: var(--color-reverse);
  color: var(--color-text);
}
.m_btn--sub .m_btn__target:hover {
  background: var(--color-bk);
  color: var(--color-main);
}
@media screen and (max-width: 599px) {
  .m_btn--equal .m_btn__target {
    flex: 1;
  }
}


/* ---------- m_moreLink ---------- */
.m_moreLink {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-main-line);
  color: var(--color-main);
  font-size: 14px;
  font-weight: 700;
  vertical-align: top;
}


/* ---------- m_heading ---------- */
.m_heading {}
.m_heading__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_heading__ttl {
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_heading__msg {
  max-width: 750px;
  color: var(--color-text-muted);
}

.m_heading--primary {
  margin-bottom: 34px;
}
.m_heading--primary .m_heading__ttl {
  font-size: 30px;
}
.m_heading--primary .m_heading__sub + .m_heading__ttl {
  margin-top: 10px;
}
.m_heading--primary .m_heading__ttl + .m_heading__msg {
  margin-top: 34px;
}
@media screen and (max-width: 599px) {
  .m_heading--primary .m_heading__ttl {
    font-size: 25px;
  }
}

/* 画像横に置く見出し（m_intro 内） */
.m_heading--media .m_heading__ttl {
  font-size: 30px;
}
.m_heading--media .m_heading__sub + .m_heading__ttl {
  margin-top: 18px;
}
/* design-locked: 画像横の半幅に置くため、1行目「自ら開発し、実践する。」が割れない大きさまで段階的に落とす（実測値） */
@media screen and (max-width: 950px) {
  .m_heading--media .m_heading__ttl {
    font-size: 26px;
  }
}
@media screen and (max-width: 768px) {
  .m_heading--media .m_heading__ttl {
    font-size: 22px;
  }
}
@media screen and (max-width: 599px) {
  .m_heading--media .m_heading__ttl {
    font-size: 25px;
  }
}


/* ---------- m_breadcrumb ---------- */
.m_breadcrumb {
  color: var(--color-text-muted);
  font-size: 12px;
}
.m_breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
}
.m_breadcrumb__item {}
.m_breadcrumb__item + .m_breadcrumb__item::before {
  content: "/";
  padding-inline: 0.4em;
}
.m_breadcrumb__link {}


/* ---------- m_note / m_sources ---------- */
.m_note {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.8;
}
.m_sources {
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.8;
}
.m_sources__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- m_dataTable ---------- */
.m_dataTable {
  width: 100%;
}
.m_dataTable__head,
.m_dataTable__data {
  padding: 19px 15px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.m_dataTable__data {
  font-size: 15px;
}
.m_dataTable__head {
  width: 170px;
  background: var(--color-bk-sub);
  font-size: 14px;
}
.m_dataTable__list {}
.m_dataTable__item {}
.m_dataTable__item + .m_dataTable__item {
  margin-top: 6px;
}
.m_dataTable__link {
  color: var(--color-main);
  text-decoration: underline;
}
@media screen and (max-width: 599px) {
  .m_dataTable__head,
  .m_dataTable__data {
    padding: 15px 9px;
  }
  .m_dataTable__head {
    width: 95px;
  }
}


/* ---------- m_accordionList / m_accordion ---------- */
.m_accordionList {}
.m_accordionList__item {
  border-bottom: 1px solid var(--color-border);
}

.m_accordion {}
.m_accordion__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding-block: 22px;
  font-weight: 700;
  text-align: left;
  transition: color var(--transition);
}
.m_accordion__head:hover {
  color: var(--color-main);
}
.m_accordion__headTtl {}
/* カンプはネイティブ details の三角マーカー（質問文の前）。同じ位置・見た目を border で描く */
.m_accordion__icon {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
  transition: transform var(--transition);
}
.m_accordion__head.is_open .m_accordion__icon {
  transform: rotate(90deg);
}
/* 高さだけ 0 にすると閉じた回答も読み上げられるため visibility も切り替える */
.m_accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--transition), visibility var(--transition);
}
.m_accordion__body.is_open {
  grid-template-rows: 1fr;
  visibility: visible;
}
.m_accordion__bodyInner {
  overflow: hidden;
  min-height: 0;
}
.m_accordion__txt {
  padding: 0 20px 22px;
}


/* ---------- m_card ---------- */
.m_card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  transition: box-shadow var(--transition), transform var(--transition), color var(--transition);
}
.m_card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.m_card__img {
  display: block;
  /* design-locked: カンプは img の height="270" 属性が aspect-ratio より優先され、実表示は高さ 270px 固定 */
  height: 270px;
  line-height: 0;
  background: var(--color-bk-sub);
}
.m_card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m_card__ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 82px;
  padding: 17px 18px;
  font-weight: 700;
  line-height: 1.6;
}
.m_card__ttl::after {
  content: "↗";
  content: "↗" / "";
  flex-shrink: 0;
  color: var(--color-main);
}
.m_card__msg {
  display: block;
  padding: 0 18px 15px;
  color: var(--color-text-muted);
  font-size: 12px;
}
@media screen and (max-width: 599px) {
  .m_card__ttl {
    min-height: 76px;
    padding: 13px 12px;
    font-size: 14px;
  }
  .m_card__msg {
    padding: 0 12px 12px;
  }
}


/* ---------- m_onlyImg ---------- */
.m_onlyImg {
  line-height: 0;
  text-align: center;
}
.m_onlyImg img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
/* design-locked: カンプ実測。画像全体を見せるため cover ではなく contain */
.m_onlyImg--frame img {
  width: 100%;
  height: 330px;
  object-fit: contain;
}
@media screen and (max-width: 599px) {
  .m_onlyImg--frame img {
    height: 270px;
  }
}


/* -------------------------------------------------------------
   3c. ページ固有系
   ------------------------------------------------------------- */

/* ---------- m_header / m_headerLogo ---------- */
.m_header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-reverse);
  border-bottom: 1px solid var(--color-border);
}
.m_header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  min-height: 88px;
}
.m_header__logo {
  flex-shrink: 0;
}
.m_header__nav {}
.m_header__menuBtn {}
@media screen and (max-width: 768px) {
  .m_header__inner {
    padding-block: 18px;
  }
  .m_header__nav {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .m_header__inner {
    min-height: 75px;
  }
  .m_header__nav {
    display: none;
  }
  .m_header__nav.is_open {
    display: block;
  }
}

.m_headerLogo {}
.m_headerLogo__link {
  display: block;
}
.m_headerLogo__img {
  width: auto;
  height: 60px;
}
@media screen and (max-width: 599px) {
  .m_headerLogo__img {
    height: 48px;
  }
}


/* ---------- m_gnavList / m_gnav ---------- */
.m_gnavList {
  padding-block: 12px;
}
.m_gnavList__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  font-size: 14px;
  font-weight: 700;
}
.m_gnavList__list + .m_gnavList__list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.m_gnavList__list--sub {
  gap: 20px;
  font-size: 13px;
}
.m_gnavList__item {}
/* エントリーボタンを足した採用系ページのメインナビ */
.m_gnavList__list--entry {}
@media screen and (max-width: 950px) {
  /* 項目が1つ多く、769〜800px でロゴの下へ、600〜635px で3段に折り返すため間隔を詰める */
  .m_gnavList__list--entry {
    gap: 10px;
  }
}
@media screen and (max-width: 768px) {
  .m_gnavList {
    padding-block: 0 6px;
  }
  .m_gnavList__list {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 599px) {
  .m_gnavList {
    padding-block: 10px;
  }
  /* SP の2列は l_grid__item の u_resSmCol6 が担う。% 幅と合算させないため gap を外す */
  .m_gnavList__list {
    justify-content: flex-start;
    gap: 0;
  }
  .m_gnavList__list--sub {
    font-size: 14px;
  }
}

.m_gnav {}
.m_gnav__link {
  display: block;
}
.m_gnav__link.is_current {
  color: var(--color-main);
}
.m_gnav--cta .m_gnav__link,
.m_gnav--entry .m_gnav__link {
  padding: 10px 18px;
  border: 1px solid var(--color-main);
}
.m_gnav--cta .m_gnav__link {
  color: var(--color-main);
}
/* 採用情報は常に主色の文字のため、現在地は is_current の文字色では区別できない。背景で示す */
.m_gnav--cta .m_gnav__link.is_current {
  background: var(--color-bk);
}
/* 採用系の移植ページだけに置く応募ボタン。採用情報（枠線）と区別するため塗りにする */
.m_gnav--entry .m_gnav__link {
  background: var(--color-main);
  color: var(--color-reverse);
  transition: background var(--transition), color var(--transition);
}
.m_gnav--entry .m_gnav__link:hover {
  background: var(--color-bk);
  color: var(--color-main);
}
/* 外部リンク。m_gnav--external の矢印は主色で塗りに埋もれるため、文字色を継ぐ矢印を別に持つ */
.m_gnav--entry .m_gnav__link::after {
  content: " ↗";
  content: " ↗" / "";
}
.m_gnav--external .m_gnav__link::after {
  content: " ↗";
  content: " ↗" / "";
  color: var(--color-main);
}
@media screen and (max-width: 599px) {
  .m_gnav__link {
    padding: 10px;
  }
  .m_gnav--cta .m_gnav__link,
  .m_gnav--entry .m_gnav__link {
    padding: 10px;
  }
}


/* ---------- m_menuBtn ---------- */
/* 開閉の状態（is_open・aria）は HamburgerMenu が付与する。文言の出し分けだけをここで持つ */
.m_menuBtn {
  display: none;
  padding: 8px 13px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  font-size: 13px;
}
.m_menuBtn__label {}
.m_menuBtn__label--close {
  display: none;
}
.m_menuBtn.is_open .m_menuBtn__label--open {
  display: none;
}
.m_menuBtn.is_open .m_menuBtn__label--close {
  display: inline;
}
@media screen and (max-width: 599px) {
  .m_menuBtn {
    display: block;
  }
}


/* ---------- m_hero ---------- */
/* 文章と写真という異種2要素の組み合わせで比率も12分割外のため、l_grid ではなく内部 grid で持つ */
.m_hero {}
.m_hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 460px;
}
.m_hero__cont {
  padding: 64px 25px 42px 0;
}
.m_hero__media {}
.m_hero__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_hero__ttl {
  font-size: clamp(31px, 5.99vw, 46px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.065em;
}
.m_hero__em {
  color: var(--color-main);
  font-style: normal;
}
.m_hero__msg {
  max-width: 480px;
}
.m_hero__note {
  max-width: 480px;
  color: var(--color-text-muted);
  font-size: 14px;
}
.m_hero__sub + .m_hero__ttl {
  margin-top: 22px;
}
.m_hero__ttl + .m_hero__msg,
.m_hero__msg + .m_hero__note {
  margin-top: 22px;
}
/* design-locked: 2カラムの文字欄が狭い 600〜950px では clamp の上限 46px だと4行に割れるため段階的に落とす（950px・33px はカンプ由来、28px は600px幅で2行に収まる実測値） */
@media screen and (max-width: 950px) {
  .m_hero__ttl {
    font-size: 33px;
  }
}
@media screen and (max-width: 768px) {
  .m_hero__ttl {
    font-size: 28px;
  }
}
@media screen and (max-width: 599px) {
  .m_hero__ttl {
    font-size: 31px;
  }
}
.m_hero__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 27px;
}
.m_hero__btn {}
@media screen and (max-width: 768px) {
  .m_hero__cont {
    padding-top: 40px;
  }
}
@media screen and (max-width: 599px) {
  .m_hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
  }
  .m_hero__cont {
    padding: 37px 0;
  }
  .m_hero__btn {
    flex: 1;
  }
  .m_hero__media {
    justify-self: center;
    width: 100%;
    max-width: 430px;
  }
}


/* ---------- m_heroPhoto（採用ページのヒーロー写真） ---------- */
.m_heroPhoto {
  position: relative;
  height: 100%;
  min-height: 440px;
}
.m_heroPhoto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% center;
}
.m_heroPhoto__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 18px;
  background: var(--color-reverse);
  font-size: 12px;
}
@media screen and (max-width: 599px) {
  .m_heroPhoto {
    height: 290px;
    min-height: 0;
  }
}


/* design-locked: 採用ページの h1 は1行目が10字あり、トップより文字欄に対して長いため上限を 40px にし段階的に落とす（各幅で2行に収まる実測値） */
.m_hero--sub .m_hero__ttl {
  font-size: clamp(31px, 5.21vw, 40px);
}
@media screen and (max-width: 950px) {
  .m_hero--sub .m_hero__ttl {
    font-size: 30px;
  }
}
@media screen and (max-width: 768px) {
  .m_hero--sub .m_hero__ttl {
    font-size: 24px;
  }
}
@media screen and (max-width: 599px) {
  .m_hero--sub .m_hero__ttl {
    font-size: 31px;
  }
}
/* 採用ページ：写真を上下いっぱいに敷くため中央揃えではなく伸長、比率はカンプの 52:48 */
.m_hero--sub .m_hero__inner {
  grid-template-columns: 52% 48%;
  align-items: stretch;
  gap: 0;
}
@media screen and (max-width: 599px) {
  .m_hero--sub .m_hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .m_hero--sub .m_hero__media {
    max-width: none;
  }
}

/* ---------- m_photoSlider ---------- */
.m_photoSlider {
  width: 100%;
  background: var(--color-bk-sub);
}
.m_photoSlider__list {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1080 / 1536;
}
.m_photoSlider__item {
  width: 100%;
  height: 100%;
}
.m_photoSlider__item:not([hidden]) {
  animation: m_photoSliderReveal 0.65s ease-out;
}
.m_photoSlider__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.m_photoSlider__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: var(--color-reverse);
  border-bottom: 1px solid var(--color-border);
}
.m_photoSlider__dots {
  display: flex;
  gap: 8px;
}
.m_photoSlider__btn {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.m_photoSlider__btn:hover {
  background: var(--color-bk);
}
.m_photoSlider__btn[aria-pressed="true"] {
  border-color: var(--color-main);
  background: var(--color-bk);
  color: var(--color-main);
}
.m_photoSlider__btn--pause {
  padding-inline: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-base);
  font-size: 12px;
}
@keyframes m_photoSliderReveal {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}
@media screen and (max-width: 599px) {
  .m_photoSlider__controls {
    gap: 12px;
  }
}


/* ---------- m_factList / m_fact ---------- */
.m_factList {
  background: var(--color-bk-sub);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.m_factList__item {
  padding: 24px 28px 24px 0;
}
.m_factList__item + .m_factList__item {
  padding-left: 28px;
  border-left: 1px solid var(--color-border);
}
@media screen and (max-width: 599px) {
  .m_factList__item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .m_factList__item + .m_factList__item {
    padding-left: 0;
    border-left: none;
  }
}

.m_fact {
  font-size: 14px;
}
.m_fact__num {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.m_fact__unit {
  font-size: 14px;
}
.m_fact__txt {}
@media screen and (max-width: 599px) {
  .m_fact__num {
    display: inline;
    margin-right: 15px;
    font-size: 22px;
  }
  .m_fact__txt {
    display: inline;
  }
}


/* ---------- m_band ---------- */
/* 背景帯が隙間なく連続するため、節間余白は l_section の margin ではなく帯の padding で持つ */
.m_band {
  padding-block: var(--space-band);
}
.m_band--quiet {
  background: var(--color-bk-sub);
}
.m_band--accent {
  background: var(--color-bk);
}
.m_band__footer {
  margin-top: 18px;
}
/* sources / story は帯の本文の後ろに必ず置く末尾要素なので、__footer と同じく margin-top を単独で持つ */
.m_band__sources {
  margin-top: 35px;
}
.m_band__story {
  margin-top: 45px;
}
.m_band__nav {}
.m_band__cont {}
.m_band__nav + .m_band__cont {
  margin-top: 30px;
}
@media screen and (max-width: 599px) {
  .m_band {
    padding-block: var(--space-bandSp);
  }
}


/* ---------- m_feature ---------- */
.m_feature {
  padding: 23px 0 15px;
  border-top: 2px solid var(--color-main);
}
.m_feature__num {
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 35px;
  line-height: 1.2;
}
.m_feature__ttl {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_feature__msg {
  color: var(--color-text-muted);
}
.m_feature__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_feature__sub + .m_feature__ttl {
  margin-top: 22px;
}
.m_feature__msg + .m_feature__note {
  margin-top: 25px;
}
.m_feature__num + .m_feature__ttl {
  margin-top: 20px;
}
.m_feature__ttl + .m_feature__msg {
  margin-top: 15px;
}
.m_feature__footer {
  margin-top: 18px;
}


/* ---------- m_intro ---------- */
.m_intro {}
.m_intro__heading {
  margin-bottom: 22px;
}
.m_intro__msg {}
.m_intro__footer {
  margin-top: 18px;
}


/* ---------- m_cta ---------- */
.m_cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.m_cta__body {}
.m_cta__ttl {
  font-size: 29px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_cta__ttl + .m_cta__msg {
  margin-top: 14px;
}
.m_cta__footer {
  flex-shrink: 0;
}
@media screen and (max-width: 599px) {
  .m_cta {
    display: block;
  }
  .m_cta__ttl {
    font-size: 25px;
  }
  .m_cta__body + .m_cta__footer {
    margin-top: 30px;
  }
}


/* ---------- m_pageHero ---------- */
/* カンプはパンくずをタイトル帯の中に置くため、DESIGN §7-5 の独立 nav ではなく帯の Element として Mixes する */
.m_pageHero {
  padding-block: 50px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bk-sub);
}
.m_pageHero__breadcrumb {
  margin-bottom: 25px;
}
.m_pageHero__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_pageHero__ttl {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_pageHero__msg {
  max-width: 800px;
}
.m_pageHero__sub + .m_pageHero__ttl {
  margin-top: 14px;
}
.m_pageHero__ttl + .m_pageHero__msg {
  margin-top: 18px;
}
@media screen and (max-width: 599px) {
  .m_pageHero {
    padding-block: 33px;
  }
  .m_pageHero__ttl {
    font-size: 29px;
  }
}


/* ---------- m_article ---------- */
.m_article {}
.m_article__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_article__ttl {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_article__msg {
  line-height: 2.2;
}
.m_article__sub + .m_article__ttl {
  margin-top: 22px;
}
.m_article__msg + .m_article__ttl {
  margin-top: 45px;
}
.m_article__ttl + .m_article__msg {
  margin-top: 22px;
}
.m_article__msg + .m_article__msg {
  margin-top: 1.3em;
}
.m_article__signature {
  text-align: right;
}
.m_article__msg + .m_article__signature {
  margin-top: 35px;
}
.m_article__name {
  display: block;
  font-size: 26px;
}
.m_article__link {}
.m_article__msg + .m_article__link {
  margin-top: 18px;
}
.m_article__sources {}
.m_article__signature + .m_article__sources {
  margin-top: 35px;
}
/* 帯の中に置く補助記事。SP でセクション見出し（h2・25px）より大きくならないよう落とす */
.m_article--inBand {}
@media screen and (max-width: 599px) {
  .m_article--inBand .m_article__ttl {
    font-size: 22px;
  }
}


/* ---------- m_textBlock ---------- */
.m_textBlock {}
.m_textBlock__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_textBlock__ttl {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_textBlock__sub + .m_textBlock__ttl {
  margin-top: 22px;
}
.m_textBlock__ttl + .m_textBlock__msg,
.m_textBlock__msg + .m_textBlock__msg {
  margin-top: 22px;
}
.m_textBlock__footer {
  margin-top: 18px;
}
.m_textBlock__sources {}
.m_textBlock__footer + .m_textBlock__sources {
  margin-top: 35px;
}


/* ---------- m_office ---------- */
.m_office {
  padding: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
}
.m_office__ttl {
  color: var(--color-main);
  font-size: 23px;
  font-weight: 700;
}
.m_office__msg {
  font-size: 14px;
}


/* ---------- m_stepList / m_step ---------- */
/* 番号は並び順そのものなので、HTML に書かず CSS の連番で振る */
.m_stepList {
  counter-reset: m_step;
}
.m_stepList__item {}

.m_step {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.m_step::before {
  counter-increment: m_step;
  content: "0" counter(m_step);
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 28px;
}
.m_step__ttl {
  margin-top: 15px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_step__msg {
  color: var(--color-text-muted);
  font-size: 14px;
}
.m_step__ttl + .m_step__msg {
  margin-top: 13px;
}


/* ---------- m_month ---------- */
.m_month {
  padding-block: 25px;
  border-top: 1px solid var(--color-border);
}
.m_month__num {
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 33px;
  line-height: 1.5;
}
.m_month__unit {
  font-family: var(--font-base);
  font-size: 14px;
}
.m_month__ttl {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_month__tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}
.m_month__msg {
  color: var(--color-text-muted);
  font-size: 14px;
}
.m_month__series {
  padding: 10px 13px;
  background: var(--color-bk-sub);
  font-size: 13px;
}
/* design-locked: カンプはタグ（inline-block）の上下 margin 4px が前後の要素の margin と重ならずに足されるため 17px / 14px */
.m_month__num + .m_month__ttl {
  margin-top: 13px;
}
.m_month__ttl + .m_month__tag {
  margin-top: 17px;
}
.m_month__tag + .m_month__msg {
  margin-top: 14px;
}
.m_month__msg + .m_month__series {
  margin-top: 14px;
}
@media screen and (max-width: 599px) {
  .m_month__ttl {
    font-size: 16px;
  }
}


/* ---------- m_readingGroup / m_readingCard ---------- */
.m_readingGroup {}
.m_readingGroup__heading {
  margin-bottom: 18px;
}
.m_readingGroup__sub {
  display: block;
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_readingGroup__sub + .m_readingGroup__ttl {
  margin-top: 22px;
}
.m_readingGroup__ttl {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_readingGroup__item + .m_readingGroup__item {
  margin-top: 48px;
}

/* リンクだけをカード下端に揃えるため、中身を縦並びの flex にする（SP の縦積み切替ではない） */
.m_readingCard {
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--color-border);
}
.m_readingCard__sub {
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_readingCard__ttl {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_readingCard__msg {
  color: var(--color-text-muted);
  font-size: 14px;
}
.m_readingCard__sub + .m_readingCard__ttl {
  margin-top: 34px;
}
.m_readingCard__ttl + .m_readingCard__msg {
  margin-top: 13px;
}
.m_readingCard__footer {
  margin-top: auto;
  padding-top: 17px;
}
@media screen and (max-width: 599px) {
  .m_readingCard {
    padding: 22px;
  }
}


/* ---------- m_genreNav / m_genre ---------- */
.m_genreNav {}
.m_genreNav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.m_genreNav__item {}
.m_genreNav__link {
  display: block;
  padding: 8px 15px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}

.m_genre {}
.m_genre__ttl {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-main);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_genre__body {}
.m_genre__ttl + .m_genre__body {
  margin-top: 25px;
}
.m_genre__msg {
  margin-top: 20px;
}
.m_genre__footer {
  margin-top: 18px;
}

.m_genreList {}
.m_genreList__item + .m_genreList__item {
  margin-top: 55px;
}


/* ---------- m_jobList / m_job ---------- */
.m_jobList {}
.m_jobList__item {}

/* 英字ラベル列が固定幅のため、l_grid ではなく部品内の grid で持つ */
.m_job {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 22px;
  padding-block: 26px;
  border-top: 1px solid var(--color-border);
}
.m_job__sub {
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
}
.m_job__body {}
.m_job__ttl {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
.m_job__ttl + .m_job__msg {
  margin-top: 10px;
}
.m_job__msg {
  color: var(--color-text-muted);
  font-size: 14px;
}
.m_job__footer {}
@media screen and (max-width: 768px) {
  .m_job {
    grid-template-columns: 110px 1fr;
  }
  .m_job__footer {
    grid-column: 2;
    justify-self: start;
  }
}
@media screen and (max-width: 599px) {
  .m_job {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .m_job__footer {
    grid-column: 1;
  }
}


/* ---------- m_policy（個人情報保護方針） ---------- */
/* 条文・箇条書き・窓口の枠が任意の順で並ぶ法務文書のため、隣接セレクタの組み合わせではなく gap で縦の間隔を持つ */
.m_policy {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.m_policy__part {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.m_policy__ttl {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.045em;
}
/* 条項は必ず見出し（__ttl）の後に来る。条項の切れ目を本文の行間より広く取るため、gap に上乗せする */
.m_policy__clause {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
}
.m_policy__clauseTtl {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
}
.m_policy__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m_policy__groupTtl {
  font-weight: 700;
}
.m_policy__msg {}
/* 「・」「※」で始まる注記の行。記号のぶん字下げし、折り返しを本文の頭に揃える */
.m_policy__note,
.m_policy__item {
  padding-left: 1em;
  text-indent: -1em;
}
/* 「１.」は全角数字＋半角ピリオドで約 1.3 文字ぶんになる */
.m_policy__item--numbered {
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.m_policy__list {}
.m_policy__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px;
  background: var(--color-bk-sub);
}
.m_policy__sign {
  align-self: flex-end;
}
/* 文面に URL をそのまま載せているため、狭い画面でははみ出さないよう途中で折り返す */
.m_policy__link {
  color: var(--color-main);
  text-decoration: underline;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 599px) {
  .m_policy {
    gap: 56px;
  }
  .m_policy__ttl {
    font-size: 22px;
  }
  .m_policy__clauseTtl {
    font-size: 17px;
  }
  .m_policy__box {
    padding: 18px;
  }
}


/* ---------- m_footer / m_footerCompany / m_footerNav ---------- */
.m_footer {
  padding-block: 46px 24px;
  border-top: 1px solid var(--color-border);
}
/* 会社情報とリンク群という異種2領域の配置のため、l_grid ではなく内部 grid で持つ */
.m_footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.m_footer__company {}
.m_footer__nav {}
.m_footer__inner + .m_footer__copy {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .m_footer__inner {
    display: block;
  }
  .m_footer__company + .m_footer__nav {
    margin-top: 40px;
  }
}

.m_footerCompany {}
.m_footerCompany__name {
  font-weight: 700;
}
.m_footerCompany__address {
  color: var(--color-text-muted);
  font-size: 13px;
}
.m_footerCompany__name + .m_footerCompany__address {
  margin-top: 18px;
}

.m_footerNav {}
.m_footerNav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 23px;
  font-size: 14px;
}
.m_footerNav__item {}

.m_copyright {
  color: var(--color-text-muted);
  font-size: 12px;
}


/* =============================================================
   4. STATE (js_ / .is_)
   ============================================================= */

/* ScrollLock が付与する。トップでは HamburgerMenu を scrollLock:false で使うため未使用だが、モーダル等の追加時に備えて残す */
html.is_scrollLock {
  overflow: hidden;
}


/* =============================================================
   5. UTILITY (u_)
   ============================================================= */

/* --- 横幅(%) --- */
.u_col3  { width: 25%; }
.u_col4  { width: 33.333%; }
.u_col6  { width: 50%; }

@media screen and (max-width: 768px) {
  .u_resMdCol6  { width: 50%; }
}

@media screen and (max-width: 599px) {
  .u_resSmCol6  { width: 50%; }
  .u_resSmCol12 { width: 100%; }
}


/* --- 文字・表示制御 --- */
/* 見出しの区切り（、。）以外で改行させない */
.u_phrase {
  display: inline-block;
}
.u_srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}