@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");

/* 全公開ページ共通の文字と操作領域。 */
:root {
  --site-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --body-font: var(--site-font);
  --heading-font: var(--site-font);
}

/* 本文・数値・操作部品・メニュー内まで、例外なく同じ書体に揃える。 */
html,
html body,
html body * {
  font-family: var(--site-font) !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--heading-font);
  font-weight: 700 !important;
}

html body h1 strong,
html body h2 strong,
html body h3 strong,
html body h4 strong,
html body h5 strong,
html body h6 strong {
  font-weight: 700 !important;
}

/* 金額や回数も同じ書体のまま、桁だけを揃える。 */
.range-value,
.res-yen,
.res-num,
.diff-yen,
.q-yen,
.result-amount,
.result-value,
.result-main,
.result-direction,
.difference-amount,
.primary-result-number,
.big-number,
.stat-value,
.chart-value,
.fact-value,
.average-result strong,
.number-card strong {
  font-family: var(--body-font);
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* スマホで押しやすい操作領域を保つ。 */
header a[href],
footer a[href] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ============================================================
   Career Choice Lab / anime visual system
   トップで決めた「明るいアニメ×公的データ」の世界観を各ページへ通す。
   既存ページ固有の計算レイアウトを壊さず、最後に見た目だけを統一する。
   ============================================================ */
.ccl-page {
  --ccl-accent: #258f7c;
  --ccl-accent-2: #79b8d3;
  --ccl-soft: #eef9f6;
  --ccl-soft-2: #eef7fc;
  --ccl-line: #cfe8e2;
  --ccl-shadow: 0 18px 48px rgba(49, 83, 105, .10);
  color: #25323a;
  background:
    radial-gradient(circle at 7% 14%, color-mix(in srgb, var(--ccl-accent-2) 12%, transparent) 0 88px, transparent 89px),
    linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--ccl-soft-2) 42%, white) 46%, #ffffff 100%);
}

.ccl-reha {
  --ccl-accent: #2f83b5;
  --ccl-accent-2: #63bfa9;
  --ccl-soft: #eef8fd;
  --ccl-soft-2: #edf9f5;
  --ccl-line: #cfe6ef;
}

.ccl-nurse {
  --ccl-accent: #d86579;
  --ccl-accent-2: #74afd0;
  --ccl-soft: #fff1f4;
  --ccl-soft-2: #eef7fc;
  --ccl-line: #f0d2da;
}

.ccl-pharmacist {
  --ccl-accent: #258f7c;
  --ccl-accent-2: #8b79ca;
  --ccl-soft: #eef9f6;
  --ccl-soft-2: #f3effb;
  --ccl-line: #cfe8e2;
}

.ccl-comparison {
  --ccl-accent: #5a8fa8;
  --ccl-accent-2: #b7789a;
  --ccl-soft: #eff8fa;
  --ccl-soft-2: #fff1f5;
  --ccl-line: #d8e4ea;
}

.ccl-page :is(.site-head, .topbar) {
  border-bottom-color: color-mix(in srgb, var(--ccl-line) 70%, white) !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 8px 30px rgba(65, 91, 108, .055);
  backdrop-filter: blur(14px);
}

/* ページごとに異なっていたヘッダー幅を、TOPと同じ中央軸へ揃える。 */
.ccl-page :is(.site-head-inner, .head-inner, .topbar-inner),
.ccl-page .topbar > .container {
  display: flex !important;
  width: min(1040px, calc(100% - 32px)) !important;
  min-height: 68px !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-inline: auto !important;
}

.ccl-page :is(.site-logo, .brand, .topbar-home) img {
  display: block;
  width: 172px !important;
  height: auto;
}

.ccl-page .ccl-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 6% 12%, rgba(255, 255, 255, .92) 0 52px, transparent 53px),
    linear-gradient(135deg, color-mix(in srgb, var(--ccl-soft-2) 74%, white), #fff 50%, color-mix(in srgb, var(--ccl-soft) 78%, white));
  box-shadow: none;
}

.ccl-page .ccl-hero::before,
.ccl-page .ccl-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

.ccl-page .ccl-hero::before {
  top: -74px;
  right: 38%;
  width: 160px;
  height: 160px;
  background: color-mix(in srgb, var(--ccl-accent-2) 12%, transparent);
}

.ccl-page .ccl-hero::after {
  right: -52px;
  bottom: -92px;
  width: 220px;
  height: 220px;
  background: color-mix(in srgb, var(--ccl-accent) 10%, transparent);
}

.ccl-page .ccl-hero > .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .94fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
  box-sizing: border-box;
  padding-top: clamp(30px, 4.2vw, 58px) !important;
  padding-bottom: clamp(30px, 4.2vw, 58px) !important;
}

.ccl-page .ccl-hero > .container > .ccl-hero-copy {
  grid-column: 1;
}

.ccl-page .ccl-hero-direct {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .94fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(20px, 3vw, 34px) !important;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
  padding: clamp(26px, 4vw, 48px) !important;
  border-radius: 34px !important;
}

.ccl-page .ccl-hero-direct > .ccl-hero-copy {
  grid-column: 1;
}

.ccl-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ccl-page .ccl-hero :is(.hero-mark, .hero-line-icon, .hero-comparison-art, .hero-figure) {
  display: none !important;
}

.ccl-page .ccl-hero h1 {
  position: relative;
  z-index: 1;
  color: #25323a !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

/* 見出しの答えになる語句だけを、TOPと同じ淡い黄色のマーカーで強調する。 */
.ccl-page .ccl-hero h1 :is(.h1-main, .hero-title-emphasis, .h1-part:last-child),
.ccl-article .article-hero h1 .h1-part:last-child {
  text-decoration-line: underline !important;
  text-decoration-color: rgba(255, 225, 103, .72) !important;
  text-decoration-thickness: clamp(10px, .3em, 16px) !important;
  text-underline-offset: -.19em !important;
  text-decoration-skip-ink: none !important;
}

.ccl-page .ccl-hero h1 .h1-line {
  display: block;
}

.ccl-page .ccl-hero h1 .h1-part,
.ccl-article .article-hero h1 .h1-part {
  display: block;
}

.ccl-page .ccl-hero :is(.lead, .hero-answer) {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  color: #556975 !important;
}

.ccl-page .ccl-hero :is(.ux-category, .hero-kicker, .kicker, .category-label) {
  color: var(--ccl-accent) !important;
}

.ccl-page .ccl-hero :is(.ux-category b, .role-mark, .cluster-mark, .category-mark) {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ccl-accent), var(--ccl-accent-2)) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ccl-accent) 22%, transparent);
}

.ccl-page .ccl-hero .accent,
.ccl-page .ccl-hero :is(em, .h1-accent),
.ccl-article .article-hero .h1-accent {
  color: var(--ccl-accent) !important;
  font-style: normal;
  white-space: nowrap;
}

.ccl-page-visual {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
  margin: 0;
  aspect-ratio: 40 / 21;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.ccl-page-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccl-page main h2:not(.card-title)::before {
  content: "";
  display: inline-block;
  position: static !important;
  inset: auto !important;
  width: .58em;
  height: .58em;
  margin-right: .45em;
  border-radius: 45% 55% 62% 38%;
  background: linear-gradient(135deg, var(--ccl-accent), var(--ccl-accent-2));
  box-shadow: 0 3px 9px color-mix(in srgb, var(--ccl-accent) 18%, transparent);
  vertical-align: .06em;
  transform: none !important;
}

.ccl-page :is(.tool-shell, .tool-form, .input-panel, .field-block, .side-card, .res-card, .result-card, .difference-card, .q-card, .fact-card, .stat-card) {
  border-radius: 24px !important;
  border-color: color-mix(in srgb, var(--ccl-line) 88%, white) !important;
  box-shadow: 0 13px 34px rgba(52, 84, 104, .075) !important;
}

.ccl-page :is(.tool-shell, .tool-form) {
  background:
    radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--ccl-accent-2) 9%, transparent) 0 62px, transparent 63px),
    #fff !important;
}

.ccl-page :is(input, select, textarea) {
  border-color: color-mix(in srgb, var(--ccl-line) 92%, #bfcdd4) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ccl-page :is(input, select, textarea):focus {
  border-color: var(--ccl-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ccl-accent) 15%, transparent) !important;
}

.ccl-page button {
  border-radius: 14px;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}

.ccl-page button:hover {
  transform: translateY(-1px);
}

.ccl-page button:active {
  transform: translateY(1px) scale(.99);
}

.ccl-page button[aria-pressed="true"],
.ccl-page :is(.mode-button.is-on, .chip.is-on, .chip.is-active, .selected) {
  border-color: var(--ccl-accent) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ccl-accent), color-mix(in srgb, var(--ccl-accent) 68%, var(--ccl-accent-2))) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ccl-accent) 24%, transparent) !important;
}

.ccl-page :is(.primary-button, .submit-button, .calc-button, .cta-button, .button-primary, button[type="submit"]) {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ccl-accent), color-mix(in srgb, var(--ccl-accent) 67%, var(--ccl-accent-2))) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ccl-accent) 25%, transparent) !important;
}

.ccl-page :is(.results, #result:not([hidden]), #quick-result:not([hidden]), .result-main-card, .primary-result) {
  border-color: color-mix(in srgb, var(--ccl-accent) 24%, white) !important;
}

.ccl-page details {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ccl-line) 86%, white) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .93) !important;
  box-shadow: 0 10px 26px rgba(52, 84, 104, .06);
}

.ccl-page details > summary {
  min-height: 54px;
  color: #33434d !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ccl-soft) 84%, white), #fff) !important;
}

.ccl-article .article-hero {
  padding-block: clamp(28px, 4vw, 54px) !important;
  background:
    radial-gradient(circle at 9% 12%, rgba(255,255,255,.92) 0 68px, transparent 69px),
    linear-gradient(135deg, var(--ccl-soft-2), #fff 48%, var(--ccl-soft)) !important;
}

.ccl-article .article-hero .article-width {
  display: grid;
  max-width: 1040px;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.ccl-article .article-hero h1 .h1-part {
  display: block;
}

.ccl-article .article-hero h1 .h1-part + .h1-part {
  margin-left: 0;
}

.ccl-article .article-hero .ccl-hero-copy {
  grid-column: 1;
}

.ccl-article .image-slot {
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.94) !important;
  border-radius: 26px !important;
  background-position: center !important;
  box-shadow: 0 16px 38px rgba(58, 84, 108, .13) !important;
}

.ccl-article .image-slot-hero {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  margin: 0 !important;
  aspect-ratio: 40 / 21;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ccl-article .article-hero .answer-card {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* 一覧は「小さな記号」ではなく、場面が一目で分かるサムネイルを主役にする。 */
.article-grid .article-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 350px;
  padding: 0 0 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(44, 76, 96, .10);
}

/* 絞り込みで hidden になったカードは、後段の display 指定より必ず優先する。 */
.article-grid .article-card[hidden] {
  display: none !important;
}

.article-grid .article-card::before {
  z-index: 2;
  height: 5px;
}

.article-grid .article-card .visual {
  order: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--card-soft, #eef7fc);
  box-shadow: none;
}

.article-grid .article-card .visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .28s ease;
}

.article-grid .article-card:hover .visual img {
  transform: scale(1.025);
}

.article-grid .article-card .category-label {
  order: 1;
  display: flex;
  margin: 16px 20px 0;
}

.article-grid .article-card .card-copy {
  order: 2;
  width: auto;
  padding: 10px 40px 0 20px;
}

.article-grid .article-card .card-title {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.38;
}

.article-grid .article-card .card-note {
  -webkit-line-clamp: 3;
}

.article-grid .article-card .card-chevron {
  position: absolute;
  right: 22px;
  bottom: 24px;
}

.article-grid.is-single {
  max-width: 520px !important;
}

.article-grid.is-single .article-card:not([hidden]) {
  display: flex;
  min-height: 350px;
  padding: 0 0 20px;
}

/* PCでは、画像内に設けた余白へコピーを重ねる。
   画像を独立カードにせず、トップと同じ一枚のヒーローとして見せる。 */
@media (min-width: 821px) {
  .ccl-page .ccl-hero > .container {
    position: relative;
    display: flex !important;
    width: min(1440px, calc(100vw - 32px));
    max-width: none !important;
    min-height: 0;
    aspect-ratio: 40 / 21;
    align-items: center;
    margin-inline: auto !important;
    padding-inline: clamp(32px, calc((100vw - 1040px) / 2), 200px) !important;
    padding-top: clamp(42px, 5vw, 68px) !important;
    padding-bottom: clamp(42px, 5vw, 68px) !important;
  }

  .ccl-page .ccl-hero > .container > .ccl-hero-copy {
    z-index: 2;
    flex: 0 0 clamp(340px, 34vw, 480px);
    width: clamp(340px, 34vw, 480px);
    max-width: 480px;
  }

  .ccl-page .ccl-hero > .container > .ccl-hero-copy .hero-top,
  .ccl-page .ccl-hero > .container > .ccl-hero-copy h1 {
    width: 100% !important;
    max-width: none !important;
  }

  .ccl-page .ccl-hero > .container > .ccl-hero-copy h1 {
    min-height: 0 !important;
    padding-right: 0 !important;
  }

  .ccl-page .ccl-hero > .container > .ccl-page-visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ccl-page .ccl-hero-direct {
    position: relative;
    display: flex !important;
    width: min(1440px, calc(100vw - 32px)) !important;
    max-width: none !important;
    min-height: 0;
    aspect-ratio: 40 / 21;
    align-items: center;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
    padding-block: clamp(42px, 5vw, 68px) !important;
    padding-inline: clamp(32px, calc((100vw - 1040px) / 2), 200px) !important;
    border-radius: 0 !important;
  }

  .ccl-page .ccl-hero-direct > .ccl-hero-copy {
    z-index: 2;
    width: min(43%, 560px);
    max-width: 560px;
  }

  .ccl-page .ccl-hero-direct > .ccl-page-visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 夜勤なしページは画像の左側が濃いため、コピーの後ろだけを明るくして可読性を保つ。 */
  .ccl-page.ccl-no-night-shift .ccl-hero-direct > .ccl-page-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(249, 253, 255, .96) 0%,
      rgba(249, 253, 255, .9) 30%,
      rgba(249, 253, 255, .68) 43%,
      rgba(249, 253, 255, .16) 58%,
      transparent 68%
    );
  }

  .ccl-page .ccl-page-visual img {
    object-fit: contain;
    object-position: center;
  }

  .ccl-article .article-hero {
    position: relative;
    overflow: hidden;
  }

  .ccl-article .article-hero .article-width {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: min(1440px, calc(100vw - 32px));
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(414px, calc(52.5vw - 16.8px), 756px) auto;
    padding-inline: 0;
  }

  .ccl-article .article-hero .ccl-hero-copy {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: min(43%, 560px);
    margin-left: max(32px, calc((100% - 1040px) / 2));
  }

  .ccl-article .image-slot-hero {
    position: absolute;
    z-index: 0;
    grid-column: 1 / -1;
    grid-row: 1;
    inset: 0 0 auto;
    width: auto;
    height: clamp(414px, calc(52.5vw - 16.8px), 756px);
    aspect-ratio: auto;
    justify-items: end;
    padding: 24px clamp(28px, 5vw, 72px) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ccl-article .image-slot-hero figcaption {
    max-width: 40%;
  }

  .ccl-article .article-hero .answer-card {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 1040px);
    margin-inline: auto;
  }
}

@media (max-width: 820px) {
  .ccl-page :is(.site-head-inner, .head-inner, .topbar-inner),
  .ccl-page .topbar > .container {
    width: calc(100% - 24px) !important;
    min-height: 64px !important;
  }

  .ccl-page :is(.site-logo, .brand, .topbar-home) img {
    width: 160px !important;
  }

  .ccl-page .ccl-hero > .container,
  .ccl-page .ccl-hero-direct,
  .ccl-article .article-hero .article-width {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ccl-page .ccl-hero > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ccl-page .ccl-hero-direct {
    margin-inline: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .ccl-page .ccl-hero > .container > .ccl-hero-copy,
  .ccl-page .ccl-hero-direct > .ccl-hero-copy,
  .ccl-article .article-hero .ccl-hero-copy {
    display: contents;
  }

  .ccl-page-visual,
  .ccl-article .image-slot-hero {
    position: relative;
    z-index: 0;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin-top: 0 !important;
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none;
  }

  .ccl-page-visual::after,
  .ccl-article .image-slot-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(250, 253, 255, .04) 12%,
      rgba(250, 253, 255, .18) 42%,
      rgba(250, 253, 255, .82) 72%,
      rgba(250, 253, 255, .98) 100%
    );
  }

  .ccl-article .image-slot-hero figcaption {
    display: none !important;
  }

  .ccl-page .ccl-hero .ccl-hero-copy > :is(.ux-category, .hero-kicker, .kicker, .category-label),
  .ccl-article .article-hero .ccl-hero-copy > :is(.kicker, .category-label) {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin: 16px 16px 0 !important;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(5px);
  }

  .ccl-page .ccl-hero .ccl-hero-copy > :is(h1, .hero-top),
  .ccl-article .article-hero .ccl-hero-copy > h1 {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px 18px 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .92);
  }

  .ccl-page .ccl-hero h1:has(.h1-mobile-break) .h1-main,
  .ccl-article .article-hero h1 {
    font-size: clamp(28px, 8vw, 34px) !important;
  }

  .ccl-page .ccl-hero h1 .h1-main:has(.h1-question-line) {
    font-size: clamp(28px, 8.8vw, 36px) !important;
  }

  .ccl-page .ccl-hero h1 .h1-question-line {
    white-space: nowrap;
  }

  .ccl-page .ccl-hero .ccl-hero-copy > :is(.lead, .hero-answer),
  .ccl-article .article-hero .ccl-hero-copy > .lead {
    z-index: 2;
    grid-column: 1;
    grid-row: 2;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 15px 18px 0;
  }

  .ccl-page .ccl-hero .ccl-hero-copy > .hero-meta {
    z-index: 2;
    grid-column: 1;
    grid-row: 3;
    box-sizing: border-box;
    margin: 12px 18px 0 !important;
  }

  .ccl-page-visual img {
    object-position: 65% center;
  }

  .ccl-article .article-hero .answer-card {
    grid-column: 1;
    grid-row: auto;
    margin-top: 20px;
  }

  .ccl-page .ccl-hero :is(h1, .lead, .hero-answer) {
    max-width: none;
  }

  .ccl-article .article-hero h1 .h1-part {
    display: block;
  }

  .ccl-article .article-hero h1 .h1-part + .h1-part {
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .article-grid .article-card,
  .article-grid.is-single .article-card:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(112px, 38%) minmax(0, 1fr) 18px;
    grid-template-rows: auto 1fr;
    min-height: 154px;
    padding: 0;
    border-radius: 22px;
  }

  .article-grid .article-card .visual {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .article-grid .article-card .visual img {
    object-position: 66% center;
  }

  .article-grid .article-card .category-label {
    grid-column: 2;
    grid-row: 1;
    margin: 15px 0 0 14px;
  }

  .article-grid .article-card .category-label > span:last-child {
    display: none;
  }

  .article-grid .article-card .card-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding: 8px 4px 16px 14px;
  }

  .article-grid .article-card .card-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .article-grid .article-card .card-note {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.48;
    -webkit-line-clamp: 2;
  }

  .article-grid .article-card .card-chevron {
    position: static;
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    margin-right: 12px;
  }
}

@media (max-width: 390px) {
  .ccl-page .ccl-hero-direct { padding: 18px !important; }
  .article-grid .article-card,
  .article-grid.is-single .article-card:not([hidden]) {
    grid-template-columns: 108px minmax(0, 1fr) 14px;
  }
  .article-grid .article-card .category-label { gap: 4px; margin-left: 10px; }
  .article-grid .article-card .card-copy { padding-left: 10px; }
  .article-grid .article-card .content-type-badge { padding-inline: 5px; font-size: 10px; }
  .article-grid .article-card .category-symbol { display: none; }
}

/* ヒーロー画像の地色をページ背景へ短く溶かし、四角い画像の境目を消す。 */
.ccl-page .ccl-page-visual,
.ccl-article .image-slot-hero {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}

.ccl-page .ccl-page-visual img {
  mix-blend-mode: multiply;
}

.ccl-article .image-slot-hero {
  background-blend-mode: multiply, normal;
}

@media (prefers-reduced-motion: reduce) {
  .ccl-page button,
  .ccl-page :is(input, select, textarea),
  .article-grid .article-card .visual img {
    transition: none !important;
  }
  .article-grid .article-card:hover .visual img { transform: none; }
}