@charset "UTF-8";
/* ==========================================================================
   トップページ 改修セクション用スタイル（リバイス版）
   版数：v1.0（2026-08-03）
   対象：https://mitsukijapan.com/ トップページ
   内容：①エンティティ定義帯（.mc-def）②業種別M&Aのコンパクト化（.mc-ind）
        ③「流れで学ぶM&A」のコンパクト化（.mc-flw）
   注意：本ファイルは /custom/css/style.css の後に読み込むこと。
        既存の .mc-ind 系ルールを上書きします（マージする場合は style.css 末尾へ追記）。
   JavaScript不使用／グラデーション・アニメーション不使用
   ========================================================================== */

.mc-def,
.mc-ind,
.mc-flw {
  --mc-green: #2A8F0F;
  --mc-green-d: #206C0B;
  --mc-ink: #2B2A27;
  --mc-body: #333333;
  --mc-muted: #6E6E68;
  --mc-line: #E7E4DB;
  --mc-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* --------------------------------------------------------------------------
   ① エンティティ定義帯
   ヒーロー直下に置く、罫線のみの静かな帯。塗り・影・アイコンを使わない。
   -------------------------------------------------------------------------- */

.mc-def {
  border-bottom: 1px solid var(--mc-line);
  padding: 2.25rem 0;
}

.mc-def__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1rem 3rem;
  align-items: baseline;
}

.mc-def__lead {
  margin: 0;
  padding-left: 1em;
  border-left: 2px solid var(--mc-green);
  font-family: var(--mc-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.75;
  color: var(--mc-ink);
}

.mc-def__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--mc-muted);
}

/* --------------------------------------------------------------------------
   ② 業種別M&A（コンパクト版）
   大2枚＋小12枚の2階層を廃し、14枚を均等グリッドで並べる。
   見出しとリード文を横並びにして、縦積みによる高さの増加を抑える。
   -------------------------------------------------------------------------- */

.mc-ind { padding: 3.25rem 0; }

.mc-ind__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.mc-ind__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 2.5rem;
  margin-bottom: 1.4rem;
}

.mc-ind__eyebrow {
  margin: 0 0 .2rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--mc-green);
  text-transform: uppercase;
}

.mc-ind__h2 {
  margin: 0;
  font-family: var(--mc-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--mc-ink);
  text-align: left;
}

.mc-ind__desc {
  margin: 0;
  max-width: 36em;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mc-muted);
  text-align: left;
}

.mc-ind__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.mc-ind__item { margin: 0; }

.mc-ind__card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #DDDCD6;
  text-decoration: none;
}

.mc-ind__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文字の可読性のための減光。装飾目的のグラデーションではない */
.mc-ind__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 52%);
}

.mc-ind__name {
  position: absolute;
  left: .85rem;
  bottom: .6rem;
  z-index: 1;
  margin: 0;
  font-family: var(--mc-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: #FFFFFF;
}

.mc-ind__card:focus-visible {
  outline: 2px solid var(--mc-green);
  outline-offset: 2px;
}

@media screen and (max-width: 1024px) {
  .mc-ind__grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 640px) {
  .mc-ind { padding: 2.5rem 0; }
  .mc-ind__h2 { font-size: 22px; }
  .mc-ind__grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .mc-ind__name { font-size: 13px; left: .65rem; bottom: .45rem; }
}

/* --------------------------------------------------------------------------
   ③ 流れで学ぶM&A（コンパクト版）
   縦1列＋大きな塗りボックスの構成を廃し、3列グリッドへ。
   罫線とタイポグラフィの階層のみで段階を表現する。
   -------------------------------------------------------------------------- */

.mc-flw {
  background: #FCFBF8;
  padding: 3.25rem 0;
}

.mc-flw__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.mc-flw__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 2.5rem;
  margin-bottom: 1.5rem;
}

.mc-flw__eyebrow {
  margin: 0 0 .2rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--mc-green);
  text-transform: uppercase;
}

.mc-flw__h2 {
  margin: 0;
  font-family: var(--mc-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--mc-ink);
  text-align: left;
}

.mc-flw__desc {
  margin: 0;
  max-width: 36em;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mc-muted);
}

.mc-flw__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2.75rem;
}

.mc-flw__step {
  border-top: 1px solid var(--mc-line);
  padding: 1.15rem 0 1.4rem;
}

.mc-flw__num {
  margin: 0 0 .35rem;
  font-family: var(--mc-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--mc-green);
}

.mc-flw__t {
  margin: 0 0 .4rem;
  font-family: var(--mc-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--mc-ink);
}

.mc-flw__d {
  margin: 0 0 .65rem;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--mc-body);
}

.mc-flw__read {
  margin: 0 0 .55rem;
  font-size: 13.5px;
  line-height: 1.7;
}

.mc-flw__read a {
  color: var(--mc-green-d);
  text-decoration: none;
}

.mc-flw__read a::after { content: " \2192"; }
.mc-flw__read a:hover { text-decoration: underline; }

.mc-flw__terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .9rem;
}

.mc-flw__terms li { position: relative; }

.mc-flw__terms li + li::before {
  content: "";
  position: absolute;
  left: -.48rem;
  top: .65em;
  width: 1px;
  height: .9em;
  background: var(--mc-line);
}

.mc-flw__terms a {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--mc-muted);
  text-decoration: none;
}

.mc-flw__terms a:hover {
  color: var(--mc-green-d);
  text-decoration: underline;
}

.mc-flw a:focus-visible {
  outline: 2px solid var(--mc-green);
  outline-offset: 2px;
}

@media screen and (max-width: 900px) {
  .mc-flw__list { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
}

@media screen and (max-width: 640px) {
  .mc-def { padding: 1.75rem 0; }
  .mc-def__inner { grid-template-columns: 1fr; }
  .mc-def__lead { font-size: 17px; }
  .mc-flw { padding: 2.5rem 0; }
  .mc-flw__h2 { font-size: 22px; }
  .mc-flw__list { grid-template-columns: 1fr; }
  .mc-flw__step { padding: 1rem 0 1.15rem; }
}

/* 書籍CTA（パーツD）の左右余白をページの他セクションと揃える */
.mkgb-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}