/**
 * File page-company.css
 * Usage: page-company.php（会社案内）のスタイル（モバイルファースト）。
 * Design: figma「まーける様 / 会社案内」
*/

/* ================================================
  共通
================================================ */
.ly_company {
  background: #fff;
  color: var(--c-dark);
  /* clip でないと <main> がスクロールコンテナになりホイールを奪う（main.css .ly_top 参照）*/
  overflow-x: hidden;
  overflow-x: clip;
}

.ly_company .ly_cont {
  padding-inline: 20px;
}

/* セクション間の余白 */
.bl_coIntro,
.bl_coConcept,
.bl_coGreet,
.bl_coBoard,
.bl_coDirector,
.bl_coMvv,
.bl_coInfo {
  padding-block: 56px;
}

/* トップページから #board で飛んできた時に追従ヘッダーへ隠れないようにする */
#board {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.ly_company .bl_secHead {
  margin-bottom: 32px;
}

/* セクションラベル（○ + 和文）: 24px / ○ 18px */
.ly_company .bl_secHead_label {
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

.ly_company .el_dot {
  width: 18px;
  height: 18px;
  border-width: 3px;
}

/* ================================================
  ページヒーロー（COMPANY）※ el_subpTitle は subp.css で定義
================================================ */
.bl_coHero {
  padding-block: 40px 8px;
}

/* ================================================
  まーけるとは
================================================ */
.bl_coIntro_ttl {
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2.125rem);
  font-weight: 700;
  line-height: 1.7;
}

/* 冒頭「まーけるとは」だけ少し大きく */
.bl_coIntro_ttlLead {
  display: inline-block;
  margin-bottom: 0.1em;
  font-size: clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem);
}

.bl_coIntro_body {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  color: rgba(0, 0, 0, 0.4);
  /* 本文は40%グレー。和文本文なので Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-size: 18px;
  /* SP */
  font-weight: 700;
  line-height: 2;
  /* 200% */
  letter-spacing: 0.04em;
  /* PC 26px時 = 1.04px */
}

/* リード（冒頭の一文だけ濃く） */
.bl_coIntro_lead {
  color: #000;
}

/* ================================================
  CONCEPT
================================================ */
.bl_coConcept {
  position: relative;
  text-align: center;
}

.bl_coConcept .ly_cont {
  position: relative;
}

.bl_coConcept_mark {
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translateX(-50%);
  height: 112%;
  z-index: 0;
  pointer-events: none;
}

.bl_coConcept_mark img {
  height: 100%;
  width: auto;
  opacity: 0.06;
  /* 薄いウォーターマーク（img は currentColor を継承しないため） */
}

/* コンテンツはウォーターマークより前面へ（markは除外して背面に残す） */
.bl_coConcept>.ly_cont>*:not(.bl_coConcept_mark) {
  position: relative;
  z-index: 1;
}

.bl_coConcept_label {
  justify-content: center;
}

.bl_coConcept_ttl {
  margin-top: 20px;
  font-size: clamp(1.375rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
}

.bl_coConcept_en {
  font-family: var(--font-en);
}

.bl_coConcept_txt {
  margin-top: 24px;
  line-height: 2;
  color: #4a453f;
}

.bl_coConcept_txt strong {
  font-weight: 700;
}

/* ================================================
  人物（GREETINGS / BOARD 共通）
================================================ */
.bl_coPerson {
  display: flex;
  flex-direction: column;
}

.bl_coPerson_photo {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: var(--c-soft);
}

.bl_coPerson_photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 22%;
     object-position: center 22%;
}

/* 名前キャプション（白背景・写真右下） */
.bl_coPerson_cap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 12px;
  background: #fff;
  color: var(--c-dark);
  text-align: right;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

/* 直接の子だけを対象にする（子要素に .hp_en を入れ子で使っても巻き込まないため） */
.bl_coPerson_cap > span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* PROFILEボックス（グレー背景・写真下） */
.bl_coPerson_profile {
  background: var(--c-soft);
  font-weight: 500;
  border-radius: 0 0 12px 12px;
  padding: 20px;
}

.bl_coPerson_profileTtl {
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-dark);
}

/* ================================================
  GREETINGS
================================================ */
.bl_coGreet_body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  line-height: 1.6;
}

.bl_coGreet_msgTtl {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}

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

.bl_coGreet_msg p {
  font-size: 16px;
}

/* ================================================
  BOARD MEMBER
================================================ */
.bl_coBoard_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ================================================
  DIRECTOR
================================================ */
.bl_coDirector_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.bl_coDir_photo {
  aspect-ratio: 335 / 188;
  overflow: hidden;
  background: var(--c-soft);
}

.bl_coDir_photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 22%;
     object-position: center 22%;
}

.bl_coDir_cap {
  margin-top: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-dark);
}

/* 直接の子だけを対象にする（子要素に .hp_en を入れ子で使っても巻き込まないため） */
.bl_coDir_cap > span {
  margin-right: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* 20+ */
.bl_coDir__more {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.bl_coDir_moreLabel {
  font-family: var(--font-en);
  font-size: clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.bl_coDir_moreNum {
  display: inline-flex;
  align-items: center;
  /* 「+」を「20」の中央に揃える（ベースライン落ちを防ぐ）。中身は数字のみ */
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.0714rem + 7.1429vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bl_coDir_moreNum span {
  font-size: clamp(1.5rem, 0.5rem + 5vw, 5rem);
  margin-left: 2px;
}

.bl_coDir_moreTxt {
  font-size: clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem);
  line-height: 1.3;
  font-weight: 500;
}

/* ================================================
  MVV
================================================ */
.bl_coMvv_item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bl_coMvv_item+.bl_coMvv_item {
  margin-top: 56px;
}

/* 番号（黒8%の薄いウォーターマーク）にラベルを重ねる */
.bl_coMvv_head {
  display: grid;
  place-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.bl_coMvv_num {
  grid-area: 1 / 1;
}

.bl_coMvv_num img {
  display: block;
  height: 95px;
  /* SP */
  width: auto;
}

.bl_coMvv_kind {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* MISSION/VISION/VALUES 本体は英字のみ */
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #000;
}

.bl_coMvv_kind small {
  margin-top: 10px;
  /* 括弧内は和文の補足（例: （果たすべき使命））。親の --font-en を打ち消す */
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
}

.bl_coMvv_body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bl_coMvv_lead {
  /* 和文本文なので Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}

.bl_coMvv_body>p {
  /* 和文本文なので Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}

/* VALUES：番号バッジ（黒地・白抜き）＋見出し＋本文 */
.bl_coValues {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bl_coValue {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.bl_coValue_num {
  flex: none;
  background: #000;
  color: #fff;
  /* "01"〜"06" の連番のみ */
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 4px 8px;
}

.bl_coValue_body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bl_coValue_ttl {
  /* 6項目中5つは和文タイトル、1つだけ英語主体（Be Marketer.）。
     Arial 決め打ちは和文側の誤りなので外す（body の Noto Sans JP に委ねる） */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}

.bl_coValue_body p {
  /* 和文本文なので Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}

/* ================================================
  会社概要テーブル（グレー外箱 + 白カード）
================================================ */
.bl_coInfo_box {
  display: flex;
  justify-content: center;
  border-radius: 8px;
  /* SP は外箱の余白・背景なし（白カードのみ）。PCでグレー外箱を付与 */
}

.bl_coInfo_card {
  width: 100%;
  max-width: 644px;
  background: #fff;
  border-radius: 8px;
}

.bl_coInfo_table {
  margin: 0;
}

.bl_coInfo_row {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.bl_coInfo_row:not(:last-child) {
  border-bottom: 1px solid var(--c-soft);
  /* #f5f5f5 の細線 */
}

.bl_coInfo_row dt {
  flex: none;
  width: 120px;
  padding: 10px 0;
  /* SP: インライン余白なし（PCで復帰）。和文ラベルなので Arial 指定は誤り */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}

.bl_coInfo_row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px;
  /* 会社名・住所など和文が主なので Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}

.bl_coInfo_list {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}

.bl_coInfo_list li {
  list-style: disc;
  /* base.css の li{list-style:none} を上書き */
  line-height: 1.6;
}

/* ================================================
  PC（768px〜）
================================================ */
@media screen and (min-width: 768px) {

  .bl_coIntro,
  .bl_coConcept,
  .bl_coGreet,
  .bl_coBoard,
  .bl_coDirector,
  .bl_coMvv,
  .bl_coInfo {
    padding-block: 80px;
  }

  .ly_company .ly_cont {
    max-width: 1160px;
    padding-inline: 20px;
  }

  .ly_company .bl_secHead {
    margin-bottom: 40px;
  }

  .bl_coHero {
    padding-block: 60px 0;
  }

  /* まーけるとは（見出し上・本文下） */
  .bl_coIntro_body {
    margin-top: 20px;
    font-size: clamp(1.5rem, 1.3571rem + 0.2976vw, 1.625rem);
  }

  /* 人物キャプション（PCは大きめ） */
  .bl_coPerson_cap {
    font-size: 24px;
    padding: 8px 14px;
  }

  .bl_coPerson_cap span {
    font-size: 16px;
  }

  .bl_coDir_cap {
    font-size: 1.5rem;
  }

  .bl_coDir_cap span {
    font-size: 1rem;
  }

  /* CONCEPT */
  .bl_coConcept_txt {
    font-size: 1rem;
    max-width: 900px;
    margin-inline: auto;
  }

  /* GREETINGS：写真左・メッセージ右 */
  .bl_coGreet_body {
    flex-direction: row;
    gap: 40px;
    align-items: center;
  }

  .bl_coGreet_body .bl_coPerson {
    flex: none;
    width: 540px;
  }

  /* BOARD：2カラム */
  .bl_coBoard_list {
    flex-direction: row;
    gap: 40px;
  }

  .bl_coBoard_list .bl_coPerson {
    flex: 1;
    min-width: 0;
  }

  /* 本文量が違っても2枚のカード高さを揃える（PROFILEを余白まで伸ばす） */
  .bl_coBoard_list .bl_coPerson_profile {
    flex: 1;
    letter-spacing: 0.03em;
    font-weight: 400;
  }

  /* DIRECTOR：3カラム */
  .bl_coDirector_grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 40px;
  }

  /* MVV：番号+ラベル（240px）｜本文（残り760px）を横並び */
  .bl_coMvv_item {
    flex-direction: row;
    align-items: flex-start;
    font-size: clamp(2rem, -1.4286rem + 7.1429vw, 5rem);
  }

  .bl_coMvv_item+.bl_coMvv_item {
    margin-top: 120px;
  }

  .bl_coMvv_head {
    flex: none;
    width: clamp(8.75rem, -1.25rem + 20.8333vw, 17.5rem);
  }

  .bl_coMvv_body {
    flex: 1;
    min-width: 0;
  }

  .bl_coMvv_num img {
    height: 150px;
  }

  .bl_coMvv_kind {
    font-size: 48px;
  }

  .bl_coMvv_kind small {
    margin-top: 12px;
    font-size: 16px;
  }

  .bl_coMvv_lead {
    font-size: clamp(1.25rem, 0.6786rem + 1.1905vw, 1.75rem);
  }

  .bl_coMvv_body>p {
    font-size: 16px;
  }

  /* VALUES：360px × 2列 */
  .bl_coValues {
    grid-template-columns: repeat(2, 360px);
    gap: clamp(1.5rem, 0.3571rem + 2.381vw, 2.5rem);
  }

  /* 会社概要：PCはグレー外箱＋余白（白カードは644px・中央寄せ） */
  .bl_coInfo_box {
    background: var(--c-soft);
    /* #f5f5f5 */
    padding: 40px 80px;
  }

  .bl_coInfo_row dt {
    padding-inline: 20px;
  }
}

/* ================================================
  タブレット（768〜1023px）
================================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  /* GREETINGS：写真とメッセージを縦積みに戻す（横並びだと窮屈なため） */
  .bl_coGreet_body {
    flex-direction: column;
    align-items: stretch;
  }

  .bl_coGreet_body .bl_coPerson {
    width: auto;
  }

  /* MVV：番号+ラベルを上・本文を下に縦積み（1024pxから横並び） */
  .bl_coMvv_item {
    flex-direction: column;
    gap: 24px;
  }

  .bl_coMvv_item+.bl_coMvv_item {
    margin-top: 64px;
  }

  .bl_coMvv_head {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }

  /* VALUES：狭い幅ではみ出さないよう可変2カラムに */
  .bl_coValues {
    grid-template-columns: repeat(2, 1fr);
  }
}