@charset "UTF-8";
/* ==========================================================================
   事業承継 実践ガイドブック 書籍CTA 共通スタイル
   版数：v1.1（2026-07-31）
   対象：コーポレートサイト（mitsukijapan.com）／M&Aサービスサイト（/ma/）
   接頭辞：.mkgb（MiTSUKi GuideBook）— 全ルールを .mkgb 配下に限定
   JavaScript 不使用／グラデーション・アニメーション不使用
   ========================================================================== */

.mkgb {
  /* 配色（LP https://mitsukijapan.com/ma/business-succession-guide/ と同値） */
  --mkgb-orange: #e96d08;        /* ボタン地色。白文字とのコントラスト3.16:1 → 19px太字以上でのみ使用 */
  --mkgb-orange-dark: #c95700;   /* ボタン hover/focus */
  --mkgb-green: #2a8f0f;         /* 罫のみ。文字色には使用しない */
  --mkgb-green-deep: #0f4a08;    /* 見出し・ラベル・テキストリンク（白地10.48:1） */
  --mkgb-stage: #f4f8f0;         /* 書籍区画の地色 */
  --mkgb-ink: #171717;
  --mkgb-muted: #575757;
  --mkgb-line: #d6dad3;
  --mkgb-white: #ffffff;
  --mkgb-shadow: 0 6px 18px rgba(15, 74, 8, 0.07);
  --mkgb-radius: 2px;
  --mkgb-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mkgb-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  box-sizing: border-box;
  margin: 40px 0;
  color: var(--mkgb-ink);
  font-family: var(--mkgb-sans);
  font-size: 16px;
  line-height: 1.75;
}

.mkgb *,
.mkgb *::before,
.mkgb *::after { box-sizing: border-box; }

.mkgb img { display: block; max-width: 100%; height: auto; }
.mkgb p { margin: 0; }
.mkgb ul { margin: 0; padding: 0; list-style: none; }

/* コーポレートサイト用スキン（アイボリー基調・影なし） */
.mkgb--corp {
  --mkgb-shadow: none;
  --mkgb-stage: #f6f5f0;
}

/* --------------------------------------------------------------------------
   ブロック全体クリック（stretched link／JavaScript不使用）
   .mkgb__clickarea を基準に、ボタンの擬似要素を全面へ広げる。
   ブロック内の他のリンクは z-index で前面に置き、個別に機能させる。
   -------------------------------------------------------------------------- */

.mkgb__clickarea { position: relative; }

.mkgb__clickarea .mkgb__btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* クリック領域内ではブロック全面がリンクになるため、カーソルを明示する */
.mkgb__clickarea { cursor: pointer; }

/* ブロック内の個別リンク（監修者プロフィール／Amazon等）を前面へ */
.mkgb__clickarea a:not(.mkgb__btn) { position: relative; z-index: 2; }

/* ブロックのどこにカーソルを置いてもボタンが反応する */
.mkgb__clickarea:hover .mkgb__btn { background: var(--mkgb-orange-dark); }

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */

/* ラベル（経営者限定・1社1冊を贈呈）
   塗りつぶしのバッジではなく、短い罫を添えた組版的な見出しとして扱う */
.mkgb__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--mkgb-green-deep);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.mkgb__label::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  background: var(--mkgb-green);
}

/* 書名 */
.mkgb__title {
  margin: 0 0 6px;
  color: var(--mkgb-green-deep);
  font-family: var(--mkgb-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 書名の上段（対象読者への呼びかけ） */
.mkgb__title span {
  display: block;
  margin-bottom: 2px;
  color: var(--mkgb-ink);
  font-family: var(--mkgb-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

/* 著者・監修表記 */
.mkgb__by {
  margin: 0 0 8px;
  color: var(--mkgb-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

/* 説明文 */
.mkgb__lead {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
}

/* 条件・注記 */
.mkgb__note {
  margin: 10px 0 0;
  color: var(--mkgb-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* 申込ボタン
   文字19px・700は WCAG の「大きな文字」（18.66px太字以上）に該当し、
   白文字／オレンジ地の3.16:1でAA適合。19px未満に縮小しないこと。 */
.mkgb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 28px;
  border: 0;
  border-radius: 4px;
  background: var(--mkgb-orange);
  color: var(--mkgb-white);
  font-family: var(--mkgb-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.mkgb__btn::after {
  content: "\203A";
  font-size: 26px;
  line-height: 1;
}

.mkgb__btn:hover,
.mkgb__btn:focus-visible { background: var(--mkgb-orange-dark); color: var(--mkgb-white); }

.mkgb__btn:focus-visible,
.mkgb__link:focus-visible {
  outline: 3px solid var(--mkgb-green-deep);
  outline-offset: 3px;
}

/* テキストリンク（小さな文字にオレンジ・#2A8F0Fは使用しない） */
.mkgb__link {
  color: var(--mkgb-green-deep);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mkgb__link:hover { text-decoration-thickness: 2px; }

/* 表紙画像 */
.mkgb__cover {
  margin: 0;
  flex: 0 0 auto;
}

.mkgb__cover img {
  width: 100%;
  border: 1px solid var(--mkgb-line);
}

/* --------------------------------------------------------------------------
   A. コラム記事用：監修者＋書籍 一体ブロック（/ma/column/ 全記事）
   -------------------------------------------------------------------------- */

.mkgb--column {
  border: 1px solid var(--mkgb-line);
  border-radius: var(--mkgb-radius);
  background: var(--mkgb-white);
  box-shadow: var(--mkgb-shadow);
  overflow: hidden;
}

/* 監修者区画 */
.mkgb__sv {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 26px 20px;
}

.mkgb__sv-photo {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--mkgb-line);
  object-fit: cover;
  object-position: top center;
}

.mkgb__sv-body { min-width: 0; }

.mkgb__sv-role {
  margin: 0 0 4px;
  color: var(--mkgb-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mkgb__sv-name {
  margin: 0 0 4px;
  color: var(--mkgb-ink);
  font-family: var(--mkgb-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}

.mkgb__sv-name span {
  display: inline-block;
  margin-left: 12px;
  color: var(--mkgb-muted);
  font-family: var(--mkgb-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mkgb__sv-bio {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.75;
}

.mkgb__sv-def {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 1px solid var(--mkgb-line);
  color: var(--mkgb-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* 書籍区画（この区画のみがLPへのクリック領域） */
.mkgb__book {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 22px 26px 24px;
  border-top: 1px solid var(--mkgb-line);
  background: var(--mkgb-stage);
}

.mkgb__book .mkgb__cover { width: 156px; }

.mkgb__book-body { min-width: 0; }

.mkgb__bridge {
  margin: 0 0 10px;
  color: var(--mkgb-green-deep);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   B. 大型カード型（/ma/download/ 最上部）
   -------------------------------------------------------------------------- */

.mkgb--card {
  padding: 26px 30px;
  border: 1px solid var(--mkgb-line);
  border-radius: var(--mkgb-radius);
  background: var(--mkgb-white);
  box-shadow: var(--mkgb-shadow);
}

.mkgb--card .mkgb__inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.mkgb--card .mkgb__cover { width: 200px; }

.mkgb--card .mkgb__title { font-size: 26px; }
.mkgb--card .mkgb__title span { font-size: 18px; }

.mkgb__facts {
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.mkgb__facts li {
  position: relative;
  padding-left: 15px;
  color: var(--mkgb-green-deep);
  font-size: 15px;
  font-weight: 700;
}

.mkgb__facts li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--mkgb-green);
}

/* --------------------------------------------------------------------------
   C. 横長バナー型（/ma/ トップ・コーポレートトップ・/succession/）
   -------------------------------------------------------------------------- */

.mkgb--banner {
  display: flex;
  gap: 26px;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid var(--mkgb-line);
  border-radius: var(--mkgb-radius);
  background: var(--mkgb-stage);
}

.mkgb--banner .mkgb__cover { width: 132px; }

.mkgb--banner .mkgb__body { flex: 1 1 auto; min-width: 0; }

.mkgb--banner .mkgb__lead { margin-bottom: 0; }

.mkgb--banner .mkgb__action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.mkgb--banner .mkgb__action .mkgb__note { margin: 0; text-align: center; }

/* D. 小型横長バナー（/company/）＝ C の縮小版 */
.mkgb--mini {
  gap: 20px;
  padding: 14px 20px;
}

.mkgb--mini .mkgb__cover { width: 84px; }
.mkgb--mini .mkgb__title { font-size: 19px; }
.mkgb--mini .mkgb__title span { font-size: 16px; }
.mkgb--mini .mkgb__lead { margin-bottom: 0; font-size: 15px; }
.mkgb--mini .mkgb__btn { min-height: 48px; padding: 10px 20px; font-size: 19px; }

/* --------------------------------------------------------------------------
   E. 書籍紹介カード（/company/ceo/ 著書・監修欄）
   -------------------------------------------------------------------------- */

.mkgb--book-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--mkgb-line);
  border-radius: var(--mkgb-radius);
  background: var(--mkgb-white);
}

.mkgb--book-item .mkgb__cover { width: 108px; }
.mkgb--book-item .mkgb__title { font-size: 20px; }

.mkgb__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   F. アンカー型（/media/ 書籍紹介欄内）
   -------------------------------------------------------------------------- */

.mkgb--anchor {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--mkgb-line);
}

.mkgb--anchor .mkgb__note { margin-top: 12px; }

/* G. テキストリンク（/member/ 神門 剛 紹介文末） */
.mkgb--text {
  margin: 14px 0 0;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   レスポンシブ（920px以下＝1カラム、640px以下＝SP）
   SPでは説明文・注記を16px以上へ戻す（対象読者の可読性を優先）
   -------------------------------------------------------------------------- */

@media screen and (max-width: 920px) {
  .mkgb--card .mkgb__inner,
  .mkgb--banner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  /* タブレット幅ではボタンを内容幅に留める（640px以下で全幅化） */
  .mkgb--banner .mkgb__action { align-items: flex-start; }
  .mkgb--banner .mkgb__action .mkgb__note { text-align: left; }
  .mkgb--card .mkgb__cover,
  .mkgb--banner .mkgb__cover { width: 150px; }
  .mkgb--mini .mkgb__cover { width: 104px; }
}

@media screen and (max-width: 640px) {
  .mkgb { margin: 32px 0; }

  .mkgb__sv,
  .mkgb__book { padding: 20px 18px; }

  .mkgb--card { padding: 22px 18px; }
  .mkgb--banner { padding: 18px; }

  .mkgb__sv { gap: 14px; }
  .mkgb__sv-photo { width: 72px; height: 72px; }
  .mkgb__sv-name { font-size: 19px; }
  .mkgb__sv-name span { display: block; margin-left: 0; }
  .mkgb__sv-bio,
  .mkgb__sv-def { font-size: 16px; }

  .mkgb__book,
  .mkgb--book-item {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .mkgb__book .mkgb__cover,
  .mkgb--card .mkgb__cover,
  .mkgb--banner .mkgb__cover,
  .mkgb--book-item .mkgb__cover { width: 168px; }

  .mkgb__book-body,
  .mkgb--book-item .mkgb__body { width: 100%; }

  .mkgb__title { font-size: 20px; }
  .mkgb--card .mkgb__title { font-size: 22px; }

  /* SPは可読性を優先し、説明文・注記・著者表記を大きく戻す */
  .mkgb__lead,
  .mkgb--mini .mkgb__lead { font-size: 16px; }
  .mkgb__note { font-size: 16px; }
  .mkgb__by { font-size: 15px; }
  .mkgb__link { font-size: 17px; }

  .mkgb__btn,
  .mkgb--mini .mkgb__btn { width: 100%; font-size: 19px; min-height: 56px; }

  .mkgb__actions { flex-direction: column; align-items: stretch; }
  .mkgb__actions .mkgb__link { text-align: center; }
}

@media screen and (max-width: 360px) {
  .mkgb__btn { padding: 12px 14px; letter-spacing: 0.02em; }
}