/* ==========================================================================
   記事の「顔」（試験導入）— 和紙 × 大胆なタイポグラフィ × 余白
   適用範囲：<section class="article-hero cover …"> の内側のみ。
   ・宅建業免許の新規申請（.cover--guide）
   ・宅建業の免許換え（.cover--journal）
   他のページには影響しない。色は既存トークン（--ink / --charcoal / --kinari / --washi / --line）を使い、
   朱色（--shu）だけをこの範囲で追加する。
   ========================================================================== */

.article-hero.cover {
  --shu: #B03A2E;
  --shu-soft: rgba(176, 58, 46, 0.12);
  padding: 136px 0 64px;
  word-break: normal;
  word-break: auto-phrase;
  line-break: strict;
}
.cover .article-crumb { margin-bottom: 34px; }

/* ---- レイアウト：非対称2カラム（本文側を広く、線画は添える程度） ---- */
.cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  align-items: center;
}
.cover-main { min-width: 0; }

/* ---- 小さな英字ラベル ---- */
.cover-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 22px;
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.cover-label::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--shu);
}
.cover .article-tag {
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-jp-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--charcoal);
}
.cover .article-tag::before { content: "／"; margin-right: 12px; color: var(--shu); }

/* ---- タイトル（H1。文字は必ずHTMLテキスト） ---- */
.cover .cover-title {
  max-width: none;
  margin: 0 0 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.cover .cover-title > span { display: block; }
.cover-title-sep {  /* 「｜」は読み上げ・検索用に残し、見た目だけ隠す */
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cover-title-sub {
  display: flex !important;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  font-family: var(--font-jp-body);
  font-size: clamp(14px, 1.4vw, 16.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.8;
  color: var(--charcoal);
}
.cover-title-sub::before {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: var(--shu);
}

/* ---- 補足文 ---- */
.cover-lede {
  max-width: 34em;
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--charcoal);
}

/* ---- 依頼できること（カードではなく罫線で区切る） ---- */
.cover-scope {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 660px;
  margin: 0 0 26px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.cover-scope li {
  padding: 13px 18px 13px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--charcoal);
}
.cover-scope li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.cover-scope strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-jp-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cover-scope .d { display: block; }
.cover-scope .n {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--shu);
}

/* ---- 問い合わせ導線（ファーストビュー内） ---- */
.cover-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.cover-cta-note {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--charcoal);
}
.cover .article-meta { margin-top: 32px; color: var(--charcoal); }
.cover .cover-note { margin: 0 0 4px; font-size: 13.5px; color: var(--charcoal); }
.cover .cover-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--shu); text-underline-offset: 4px; }

/* ---- 主CTAは朱（重要なCTAに限って使う） ---- */
.cover .cover-cta .btn-primary { background: var(--shu); border-color: var(--shu); color: #fff; }
.cover .cover-cta .btn-primary:hover { background: #8E2C22; border-color: #8E2C22; }
.cover .cover-cta .btn-primary::after { content: "→"; margin-left: 4px; }

/* ---- 線画（装飾。主役にしない） ---- */
.cover-art { color: var(--ink); }
.cover-art svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   A. サービスページ（新規申請）：信頼感・相談導線を重視
   ========================================================================== */
.cover--guide, .cover--hub { background: var(--washi); border-bottom: 1px solid var(--line); }
.cover--guide .cover-title-main {
  font-size: clamp(44px, 6.9vw, 94px);
  letter-spacing: 0.06em;
  line-height: 1.12;
}
.cover--guide .cover-title-sec {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 0.02em;
}
.cover--guide .cover-title-sec .paren {
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 400;
  color: var(--shu);
}
.cover--guide .cover-title-sec .paren:first-child { margin-left: -0.42em; }
.cover--guide .cover-title-sec .new,
.cover--guide .cover-title-sec .big {
  position: relative;
  font-size: clamp(44px, 6.9vw, 94px);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.cover--guide .cover-title-sec .no {
  margin: 0 0.35em;
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600;
}
.cover--guide .cover-title-sec .new::after {  /* 朱の細い罫線 */
  content: "";
  position: absolute;
  left: 0; right: 0.06em;
  bottom: 0.02em;
  height: 2px;
  background: var(--shu);
}
.cover--guide .cover-title-sec .rest {
  margin-left: 0.5em;
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   B. 記事（免許換え）：専門誌の特集ページ
   ========================================================================== */
.cover--journal { border-bottom: 1px solid var(--line); }
.cover-masthead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 52px;
  padding: 12px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--ink);
}
.cover-masthead .article-tag { font-family: var(--font-jp-body); letter-spacing: 0.3em; }
.cover-masthead .article-tag::before { content: none; }
.cover--journal .cover-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; }
.cover--journal .cover-title-pre {
  margin-bottom: 14px;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.36em;
  color: var(--charcoal);
}
.cover--journal .cover-title-line {
  display: flex !important;
  align-items: baseline;
  flex-wrap: nowrap;
}
.cover--journal .cover-title-main {
  font-size: clamp(54px, 9.4vw, 120px);
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.cover--journal .cover-title-main .br {  /* 括弧は小さく、朱で添える */
  display: inline-block;
  font-size: 0.3em;
  font-weight: 400;
  color: var(--shu);
  vertical-align: top;
  position: relative;
  top: 0.2em;
  margin: 0 0.12em;
}
.cover--journal .cover-title-main .br.close { vertical-align: baseline; top: auto; bottom: -0.1em; }
.cover--journal .cover-title-post {
  margin-left: 0.1em;
  font-size: clamp(18px, 2.4vw, 30px);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.cover--journal .cover-lede { margin-top: 0; }

/* ---- 「このページでわかること」（ページ内ナビ。各項目は本文の該当箇所へ移動し、閉じていれば開く） ---- */
.cover-jump {
  display: grid;
  grid-template-columns: 188px repeat(4, minmax(0, 1fr));
  align-items: stretch;
  margin-top: 44px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cover-jump-label {
  align-self: center;
  position: relative;
  padding: 18px 12px 18px 0;
  font-family: var(--font-jp-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.cover-jump-label::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin-top: 10px;
  background: var(--shu);
}
.cover-jump a {
  display: block;
  padding: 18px 18px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.3s var(--ease);
}
.cover-jump a strong {
  display: block;
  font-family: var(--font-jp-heading);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cover-jump a span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--charcoal);
}
.cover-jump a:hover, .cover-jump a:focus-visible { background: var(--kinari); }
.cover-jump a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
#shinki-yoken, #shinki-shorui, #shinki-hiyo, #shinki-nagare,
#hub-bamen, #hub-youken, #hub-support, #hub-column { scroll-margin-top: 110px; }

/* ==========================================================================
   C. 総合ページ（宅建業）：大阪の + 宅建業
   ========================================================================== */
.cover--hub .cover-title-pre {
  margin-bottom: 10px;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: 0.36em;
  color: var(--charcoal);
}
.cover--hub .cover-title-main {
  font-size: clamp(60px, 10.4vw, 140px);
  letter-spacing: 0.06em;
  line-height: 1.08;
}
.cover--hub .cover-title-sub {
  margin-top: 28px;
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ---- 初回表示の動き（控えめ。動きを減らす設定では無効） ---- */
@media (prefers-reduced-motion: no-preference) {
  .cover .cover-label, .cover .cover-masthead, .cover .cover-title > span, .cover .cover-lede,
  .cover .cover-scope, .cover .cover-cta, .cover .cover-note, .cover .cover-art, .cover .cover-jump {
    animation: cover-in 0.9s var(--ease) both;
  }
  .cover .cover-title > span:nth-child(2) { animation-delay: 0.08s; }
  .cover .cover-title > span:nth-child(3) { animation-delay: 0.14s; }
  .cover .cover-title > span:nth-child(4) { animation-delay: 0.2s; }
  .cover .cover-lede { animation-delay: 0.26s; }
  .cover .cover-scope, .cover .cover-note { animation-delay: 0.32s; }
  .cover .cover-cta { animation-delay: 0.38s; }
  .cover .cover-art { animation-delay: 0.3s; }
}
@keyframes cover-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---- 中間幅：線画を外して1カラムに ---- */
@media (max-width: 1100px) {
  .cover-grid, .cover--journal .cover-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cover-art { display: none; }  /* ファーストビューを装飾で占有しない */
}
/* ---- タブレット・スマホ ---- */
@media (max-width: 900px) {
  .article-hero.cover { padding: 124px 0 56px; }
  .cover-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-jump-label { grid-column: 1 / -1; padding: 14px 0 10px; }
  .cover-jump a { border-top: 1px solid var(--line); }
  .cover-jump a:nth-of-type(odd) { border-left: 0; padding-left: 2px; }
  .cover .article-crumb { margin-bottom: 30px; }
  .cover-masthead { margin-bottom: 36px; }
}
@media (max-width: 640px) {
  .article-hero.cover { padding: 108px 0 44px; }
  .cover-label { margin-bottom: 22px; letter-spacing: 0.2em; }
  .cover-title-sub { margin-top: 24px; gap: 12px; letter-spacing: 0.1em; align-items: flex-start; }
  .cover-title-sub::before { width: 26px; margin-top: 0.95em; }
  .cover-lede { font-size: 14.5px; line-height: 1.95; }
  .cover-main { display: flex; flex-direction: column; }
  .cover-cta { order: 4; margin-bottom: 26px; }
  .cover-scope { order: 5; grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
  .cover .article-meta { order: 6; }
  .cover-scope li, .cover-scope li + li { padding: 12px 0; border-left: 0; }
  .cover-scope li + li { border-top: 1px solid var(--line); }
  .cover-scope li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; }
  .cover-scope .n { margin: 0; }
  .cover-scope strong { margin: 0; }
  .cover-scope .d { grid-column: 2; }
  .cover-cta .btn { flex: 1 1 100%; }
  .cover .article-meta { flex-direction: column; gap: 4px; margin-top: 28px; }
  .cover--guide .cover-title-main, .cover--guide .cover-title-sec .new, .cover--guide .cover-title-sec .big { font-size: 40px; letter-spacing: 0.04em; }
  .cover--guide .cover-title-sec .no { margin: 0 0.15em; font-size: 16px; }
  .cover--guide .cover-title-sec .rest { margin-left: 0.2em; font-size: 16px; letter-spacing: 0.04em; }
  .cover--guide .cover-title-sec .paren { font-size: 16px; }
  .cover--journal .cover-title-pre { letter-spacing: 0.24em; }
  .cover-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .cover-jump-label { grid-column: 1 / -1; padding: 14px 0 10px; }
  .cover-jump a { padding: 12px 12px; border-top: 1px solid var(--line); }
  .cover-jump a:nth-of-type(odd) { border-left: 0; padding-left: 2px; }
  .cover-jump a strong { font-size: 14.5px; }
  .cover-jump a span { font-size: 12px; }
  .cover--hub .cover-title-main { font-size: 56px; }
}