@charset "UTF-8";
/* ==========================================================
   キャリビメディア (Career Vision Media)
   design tokens
========================================================== */
:root {
  --c-blue: #2d51a3;        /* プライマリ（ロイヤルブルー） */
  --c-blue-bright: #3a6fd8; /* リンク・アクセント */
  --c-blue-deep: #1f3c7d;
  --c-navy: #2b3a4d;        /* 見出しテキスト */
  --c-header: #1b2531;      /* ヘッダー・最暗部 */
  --c-sky: #eef3fa;
  --c-sky2: #dbe6f5;
  --c-orange1: #f9a13a;
  --c-orange2: #ee7a1c;
  --c-ink: #333;
  --c-line: #e2e7ee;
  --c-bg: #f0f2f5;
  --grad-orange: linear-gradient(90deg, var(--c-orange1) 0%, var(--c-orange2) 100%);
  --grad-blue: linear-gradient(90deg, #3a6fd8 0%, #2d51a3 100%);
  --grad-navy: linear-gradient(135deg, #2c4a80 0%, #1e3050 100%);
  --shadow-card: 0 2px 10px rgba(27, 37, 49, 0.08);
  --radius: 8px;
  --font-num: "Montserrat", sans-serif;
  --mv-w: min(640px, 46vw);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; border: none; background: none; cursor: pointer; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.8;
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-orange1);
  outline-offset: 2px;
}

.inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.is-sp { display: none; }
.hover-op { transition: opacity 0.2s; }
.hover-op:hover { opacity: 0.75; }

/* ==========================================================
   header
========================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-header);
  color: #fff;
}
.header-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 22px;
}
.header-logo { flex-shrink: 0; }
.header-logo a { display: block; transition: opacity 0.2s; }
.header-logo a:hover { opacity: 0.8; }
.header-logo .catch {
  font-size: 10px; color: #aab6c6; letter-spacing: 0.08em; line-height: 1.3; margin-bottom: 2px;
}
.header-logo .logo-text {
  display: flex; align-items: baseline; gap: 6px;
  font-weight: 900; font-size: 22px; letter-spacing: 0.02em; color: #fff; line-height: 1.2;
}
.header-logo .logo-text small {
  font-family: var(--font-num); font-size: 9px; font-weight: 600; color: #8fa0b5; letter-spacing: 0.14em;
}
.header-nav ul { display: flex; }
.header-nav li { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.header-nav li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.22); }
.header-nav a {
  display: block; text-align: center; padding: 2px 16px;
  font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  transition: opacity 0.2s;
}
.header-nav a:hover { opacity: 0.7; }
.header-nav a span {
  display: block; font-family: var(--font-num); font-size: 10px; font-weight: 500;
  color: #8fa0b5; letter-spacing: 0.06em;
}
@media (max-width: 1240px) {
  .header-nav a { font-size: 12.5px; padding: 2px 10px; }
  .header-nav a span { display: none; }
}
.header-search-toggle {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'%20fill='none'%20stroke='%23fff'%20stroke-width='2'/%3E%3Cpath%20d='M15.5%2015.5l5%205'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: opacity 0.2s;
}
.header-search-toggle:hover { opacity: 0.7; }
.header-search-toggle[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%205l14%2014M19%205L5%2019'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
.header-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: auto; flex-shrink: 0; }
.header-service-link { font-size: 11px; color: #dfe6ef; text-decoration: underline; text-underline-offset: 2px; }
.header-service-link:hover { color: #fff; }
.header-cta-buttons { display: flex; gap: 10px; }
.btn-entry {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--grad-orange); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 26px; border-radius: 5px; white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-entry:hover { opacity: 0.85; }
.btn-entry .micro {
  font-size: 10px; background: #fff; color: var(--c-orange2); font-weight: 700;
  border-radius: 99px; padding: 1px 8px; white-space: nowrap;
}
.btn-jobs {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 9px 24px; border-radius: 5px; white-space: nowrap; transition: background 0.2s;
}
.btn-jobs:hover { background: rgba(255, 255, 255, 0.14); }

/* 検索ドロップダウン */
.header-cover {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #24344a;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.header-cover-inner { max-width: 860px; margin: 0 auto; padding: 34px 24px 40px; }
.search-freeword > p, .search-tags > p { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.search-tags > p span { color: #f9a13a; }
.search-freeword form { display: flex; background: #fff; border-radius: 5px; overflow: hidden; }
.search-freeword input {
  flex: 1; border: none; font: inherit; font-size: 14px; padding: 13px 16px; outline: none;
}
.search-freeword button {
  width: 60px;
  background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'%20fill='none'%20stroke='%232d51a3'%20stroke-width='2'/%3E%3Cpath%20d='M15.5%2015.5l5%205'%20stroke='%232d51a3'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 22px;
}
.search-tags { margin-top: 24px; }
.search-tags ul { display: flex; flex-wrap: wrap; gap: 8px; }
.search-tags li a {
  display: block; font-size: 12px; font-weight: 500; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; padding: 5px 12px;
  transition: background 0.2s;
}
.search-tags li a:hover { background: rgba(255, 255, 255, 0.14); }
.search-tags li a span { color: #f9a13a; margin-right: 2px; }

/* SP menu */
.menu-toggle { display: none; }
@media (max-width: 980px) {
  .header-inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .header-nav { order: 5; flex-basis: 100%; display: none; }
  .header.is-open .header-nav { display: block; }
  .header-nav ul { flex-direction: column; }
  .header-nav li { border: none !important; }
  .header-nav a { text-align: left; display: flex; align-items: baseline; gap: 10px; padding: 10px 8px; border-top: 1px solid rgba(255,255,255,0.15); }
  .header-nav a span { display: block; }
  .header-cta { flex-direction: row; align-items: center; }
  .header-service-link { display: none; }
  .btn-jobs { display: none; }
  .btn-entry { font-size: 12px; padding: 8px 14px; }
  .header-search-toggle { margin-left: auto; }
  .header-cta { margin-left: 0; }
  .menu-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px;
  }
  .menu-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .header.is-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================
   メインビジュアル（センターモードカルーセル）
========================================================== */
.column-mv {
  position: relative; overflow: hidden;
  padding: 36px 0 26px;
  background:
    radial-gradient(720px 420px at 78% -20%, rgba(58, 111, 216, 0.35), transparent 70%),
    radial-gradient(560px 360px at 12% 120%, rgba(45, 81, 163, 0.45), transparent 72%),
    #202b3a;
}
.column-mv__viewport { overflow: hidden; }
.column-mv__track {
  display: flex; gap: 24px;
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
.column-mv__track.no-anim { transition: none; }
.column-mv__slide {
  flex: 0 0 var(--mv-w); display: block;
  transition: opacity 0.2s;
}
.column-mv__slide:hover { opacity: 0.85; }
.column-mv__slide .eyecatch {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.column-mv__slide .eyecatch strong { font-size: clamp(15px, 4.6cqw, 30px); }
.mv-arrow {
  position: absolute; top: calc(50% - 18px); transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat; background-position: center; background-size: 12px;
  transition: opacity 0.2s;
}
.mv-arrow:hover { opacity: 0.8; }
.mv-arrow--prev {
  left: calc(50% - var(--mv-w) / 2 - 66px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15%204l-8%208%208%208'%20fill='none'%20stroke='%23222'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mv-arrow--next {
  right: calc(50% - var(--mv-w) / 2 - 66px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%204l8%208-8%208'%20fill='none'%20stroke='%23222'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.column-mv__dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 22px;
}
.column-mv__dots button {
  display: block; width: 34px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.35); padding: 0;
  transition: background 0.2s;
  font-size: 0; color: transparent;
}
.column-mv__dots li.is-active button { background: #7ba3e8; }
@media (max-width: 700px) {
  :root { --mv-w: 82vw; }
  .column-mv { padding: 20px 0 16px; }
  .column-mv__track { gap: 12px; }
  .mv-arrow { display: none; }
}

/* ==========================================================
   layout
========================================================== */
.l-contents { padding: 34px 0 0; }
.column-layout { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
@media (max-width: 980px) {
  .column-layout { grid-template-columns: 1fr; }
}

/* ==========================================================
   thumb — 記事サムネイル画像
========================================================== */
.thumb {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: #e8edf4;
}
.column-mv__slide .thumb {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.large-card .thumb { height: 100%; border-radius: 0; }
.column-card .thumb, .mini-card .thumb, .dense-card .thumb { border-radius: 0; }
.rank-thumb .thumb { aspect-ratio: 1 / 1; border-radius: 4px; }
.article-hero .thumb { border-radius: 8px; }
.article-list-item .thumb { border-radius: 6px; }

/* ==========================================================
   eyecatch — 旧タイポグラフィ製サムネイル（後方互換）
========================================================== */
.eyecatch {
  position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  contain: paint;
  display: flex; flex-direction: column; justify-content: center; padding: 7% 8%;
  color: #fff;
  background-image: var(--illu, none), var(--grad, var(--grad-navy));
  background-repeat: no-repeat;
  background-position: right 4% bottom -12%, 0 0;
  background-size: auto 96%, cover;
}
.eyecatch::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 90% at 108% -18%, rgba(255, 255, 255, 0.13), transparent 68%),
    radial-gradient(42% 70% at -8% 118%, rgba(255, 255, 255, 0.09), transparent 70%);
}
.eyecatch--knowhow { --illu: url("../img/eyecatch-knowhow.svg"); --grad: linear-gradient(135deg, #1673d6 0%, #07498f 100%); }
.eyecatch--daini { --illu: url("../img/eyecatch-daini.svg"); --grad: linear-gradient(135deg, #0a8f8f 0%, #0f5e63 100%); }
.eyecatch--kisotsu { --illu: url("../img/eyecatch-kisotsu.svg"); --grad: linear-gradient(135deg, #7a56c9 0%, #4d3488 100%); }
.eyecatch--mensetsu { --illu: url("../img/eyecatch-mensetsu.svg"); --grad: linear-gradient(135deg, #e07f1f 0%, #b5540a 100%); }
.eyecatch--voice { --illu: url("../img/eyecatch-voice.svg"); --grad: linear-gradient(135deg, #d6566d 0%, #96324a 100%); }
.rank-thumb .eyecatch { background-image: var(--grad, var(--grad-navy)); }
.eyecatch__tag {
  position: relative; z-index: 1; align-self: flex-start;
  font-size: clamp(9px, 3.2cqw, 11px); font-weight: 700; letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.2); border-radius: 99px; padding: 2px 10px; margin-bottom: 5%;
}
.eyecatch strong {
  position: relative; z-index: 1; max-width: 68%;
  font-size: clamp(13px, 5.8cqw, 23px); font-weight: 900; line-height: 1.42; letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(7, 30, 55, 0.45);
}
.eyecatch strong small { display: block; font-size: 0.58em; font-weight: 700; color: rgba(255, 255, 255, 0.82); margin-top: 5px; letter-spacing: 0.04em; }
.column-card, .large-card, .mini-card, .dense-card, .ranking-item, .column-mv__slide, .article-hero, .rank-thumb { container-type: inline-size; }
.rank-thumb .eyecatch::after, .rank-thumb .eyecatch::before { display: none; }

/* ==========================================================
   section
========================================================== */
.section-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 34px 30px 38px; margin-bottom: 30px;
}
.section-card--gray { background: #f4f6f9; }
.section-title { position: relative; text-align: left; padding-left: 16px; margin-bottom: 26px; }
.section-title::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 6px; width: 4px;
  background: var(--c-blue);
}
.section-title .caption {
  font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--c-blue); text-transform: uppercase; line-height: 1.4;
}
.section-title h2 { font-size: 26px; font-weight: 900; color: var(--c-navy); line-height: 1.35; }
.section-title--small { margin-bottom: 16px; padding-left: 12px; }
.section-title--small::before { top: 3px; bottom: 3px; width: 3px; }
.section-title--small .caption { font-size: 10px; }
.section-title--small h2, .section-title--small h3 { font-size: 16px; font-weight: 900; color: var(--c-navy); }

/* ==========================================================
   article cards
========================================================== */
.hp-stack { display: flex; flex-direction: column; gap: 20px; }

.large-card { position: relative; }
.large-card a {
  display: grid; grid-template-columns: 55% 1fr;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; transition: opacity 0.2s;
}
.section-card--gray .large-card a { border-color: transparent; box-shadow: var(--shadow-card); }
.large-card a:hover { opacity: 0.78; }
.large-card .eyecatch { border-radius: 0; height: 100%; }
.large-card .card-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.card-title { font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--c-navy); }
.card-date { font-family: var(--font-num); font-size: 12px; color: #8a94a3; }
.chip {
  font-size: 11px; font-weight: 500; color: #55637a;
  background: #eef1f5; border-radius: 4px; padding: 2px 9px; white-space: nowrap;
}
.section-card--gray .chip { background: #e4e9f0; }
.chip-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
@media (max-width: 700px) {
  .large-card a { grid-template-columns: 1fr; }
  .large-card .card-body { padding: 14px 16px; }
}

.large-card--new { margin-bottom: 24px; }
.badge-new {
  position: absolute; top: -14px; right: -12px; z-index: 3;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffb254, #ee7a1c 70%);
  color: #fff; font-family: var(--font-num); font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(8deg);
  box-shadow: 0 4px 10px rgba(238, 122, 28, 0.4);
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
}
.column-card a {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
  transition: opacity 0.2s;
}
.column-card a:hover { opacity: 0.78; }
.column-card .eyecatch { border-radius: 0; }
.column-card .card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.column-card .card-title { font-size: 14px; }
.card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }

.section-more-text { text-align: right; margin-top: 18px; }
.section-more-text a {
  font-size: 13px; font-weight: 500; color: var(--c-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.section-more-text a:hover { color: var(--c-blue-bright); }

.section-more { text-align: center; margin-top: 28px; }
.section-more a {
  display: inline-block; min-width: 280px; padding: 13px 30px;
  background: #fff; border: 1px solid #c9d1dc; border-radius: 99px;
  color: var(--c-navy); font-weight: 700; font-size: 14px;
  transition: opacity 0.2s;
}
.section-more a:hover { opacity: 0.7; }

/* ==========================================================
   ワイドバナー（相談CTA）
========================================================== */
.wide-banner {
  position: relative; display: block; overflow: hidden;
  background:
    radial-gradient(420px 240px at 90% -20%, rgba(58, 111, 216, 0.25), transparent 70%),
    linear-gradient(100deg, #dfeafd 0%, #f2f7ff 60%, #e8f0fc 100%);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 34px 40px; margin-bottom: 30px;
  transition: opacity 0.2s;
}
.wide-banner:hover { opacity: 0.85; }
.wide-banner__copy { position: relative; z-index: 1; }
.wb-catch { font-size: 13px; font-weight: 700; color: var(--c-blue); letter-spacing: 0.04em; }
.wb-title { font-size: 26px; font-weight: 900; color: #22314a; line-height: 1.55; margin: 6px 0 16px; }
.wb-title .hl { background: linear-gradient(transparent 62%, #ffe86b 62%); padding: 0 2px; }
.wb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--grad-orange); color: #fff; font-size: 15px; font-weight: 700;
  border-radius: 99px; padding: 13px 36px;
  box-shadow: 0 4px 14px rgba(238, 122, 28, 0.35);
}
.wb-btn::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%205l7%207-7%207'%20fill='none'%20stroke='%23ee7a1c'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px;
}
.wide-banner__bubble {
  position: absolute; top: 24px; right: 36px; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-blue); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 1.3; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.wide-banner__bubble::after {
  content: ""; position: absolute; bottom: -6px; left: 14px;
  border: 7px solid transparent; border-top-color: var(--c-blue); border-bottom: none;
  transform: rotate(24deg);
}
@media (max-width: 700px) {
  .wide-banner { padding: 24px 20px; }
  .wb-title { font-size: 20px; }
  .wide-banner__bubble { top: 12px; right: 14px; width: 52px; height: 52px; font-size: 11px; }
}

/* ==========================================================
   ミニカード（PICK UP）
========================================================== */
.mini-carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.mini-card a {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); transition: opacity 0.2s;
}
.mini-card a:hover { opacity: 0.78; }
.mini-card .eyecatch { border-radius: 0; }
.mini-card__body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mini-card__lead { font-size: 13px; font-weight: 700; line-height: 1.55; color: var(--c-navy); }
@media (max-width: 700px) {
  .mini-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .mini-card { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ==========================================================
   ranking
========================================================== */
.ranking-range { display: flex; margin-bottom: 16px; }
.ranking-range li, .ranking-tabs button {
  flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: #8a94a3;
  padding: 8px 0; cursor: pointer; border-bottom: 2px solid var(--c-line);
  transition: color 0.2s, border-color 0.2s;
}
.ranking-range li.is-select, .ranking-tabs button.is-active {
  color: var(--c-blue); border-color: var(--c-blue); font-weight: 700;
}
.ranking-tabs { display: flex; margin-bottom: 16px; }
.ranking-tabs button { background: none; }
.ranking-list { display: none; }
.ranking-list.is-show { display: block; }
.ranking-item { counter-increment: rank; }
.ranking-item a {
  display: flex; align-items: center; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--c-line); transition: opacity 0.2s;
}
.ranking-item a:hover { opacity: 0.75; }
.ranking-item:last-child a { border-bottom: none; }
.ranking-item .rank-thumb { position: relative; flex-shrink: 0; width: 60px; }
.ranking-item .rank-thumb .eyecatch { aspect-ratio: 1 / 1; border-radius: 4px; padding: 10% 10%; justify-content: center; }
.ranking-item .rank-thumb::before {
  content: counter(rank); position: absolute; top: -7px; left: -7px; z-index: 2;
  width: 21px; height: 21px; border-radius: 50%;
  background: #8a6d4b; color: #fff;
  font-family: var(--font-num); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ranking-item:nth-child(1) .rank-thumb::before { background: #d3a625; }
.ranking-item:nth-child(2) .rank-thumb::before { background: #9aa5b1; }
.ranking-item:nth-child(3) .rank-thumb::before { background: #b1703c; }
.ranking-item .rank-thumb .eyecatch strong { font-size: 9px; max-width: none; text-align: center; }
.ranking-item .rank-thumb .eyecatch strong small, .ranking-item .rank-thumb .eyecatch__tag { display: none; }
.ranking-item p { font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--c-ink); }

/* ==========================================================
   tags
========================================================== */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
  font-size: 12px; font-weight: 500; color: #45536b;
  background: #eef1f5; border-radius: 4px; padding: 5px 12px;
  transition: opacity 0.2s;
}
.tag-cloud a::before { content: "# "; color: var(--c-blue-bright); }
.tag-cloud a:hover { opacity: 0.7; }

/* ==========================================================
   sidebar
========================================================== */
.sidebar { display: flex; flex-direction: column; gap: 26px; }
.sidebar-section, .sidebar-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 20px; }
.sidebar-section--plain { background: transparent; box-shadow: none; padding: 0; }
.banner-stack { display: flex; flex-direction: column; gap: 14px; }
.banner-link, .sidebar-banner {
  display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  background: var(--grad-blue); color: #fff; padding: 22px 20px; text-align: center;
  transition: opacity 0.2s;
}
.banner-link:hover, .sidebar-banner:hover { opacity: 0.85; }
.banner-link--orange, .sidebar-banner--orange { background: var(--grad-orange); }
.banner-link--blue { background: var(--grad-blue); }
.banner-link .bn-catch, .sidebar-banner .bn-catch { font-size: 12px; font-weight: 700; opacity: 0.92; }
.banner-link .bn-title, .sidebar-banner .bn-title { font-size: 19px; font-weight: 900; line-height: 1.4; margin: 4px 0 12px; }
.banner-link .bn-btn, .sidebar-banner .bn-btn {
  display: inline-block; background: #fff; color: var(--c-blue-deep); font-size: 13px; font-weight: 700;
  border-radius: 99px; padding: 7px 22px;
}
.banner-link--orange .bn-btn, .sidebar-banner--orange .bn-btn { color: var(--c-orange2); }

.inquiry-stack { display: flex; flex-direction: column; gap: 12px; }
.inquiry-card {
  display: flex; align-items: stretch; overflow: hidden;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.inquiry-card__icon {
  flex-shrink: 0; width: 62px; background: var(--c-header);
  background-repeat: no-repeat; background-position: center; background-size: 26px;
}
.inquiry-card__icon--article {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='18'%20rx='2'%20fill='none'%20stroke='%23fff'%20stroke-width='1.8'/%3E%3Cpath%20d='M8%208h8M8%2012h8M8%2016h5'%20stroke='%23fff'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
.inquiry-card__icon--job {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='3'%20y='7'%20width='18'%20height='13'%20rx='2'%20fill='none'%20stroke='%23fff'%20stroke-width='1.8'/%3E%3Cpath%20d='M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2012h18'%20fill='none'%20stroke='%23fff'%20stroke-width='1.8'/%3E%3C/svg%3E");
}
.inquiry-card__text { padding: 13px 14px; font-size: 12px; line-height: 1.7; color: var(--c-ink); }
.inquiry-card__text a { color: var(--c-blue-bright); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
@media (max-width: 980px) { .sidebar { position: static; } }

/* ==========================================================
   体験談バンド
========================================================== */
.interview-band {
  background: var(--c-blue);
  color: #fff;
  margin-top: 20px;
  padding: 52px 0 48px;
}
.interview-band__inner {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center;
}
.ib-caption {
  font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.65);
}
.ib-title { font-size: 22px; font-weight: 900; margin-bottom: 18px; }
.ib-lead { font-size: 19px; font-weight: 900; line-height: 1.7; margin-bottom: 12px; }
.ib-body { font-size: 13px; line-height: 1.9; color: #d5dff3; }
.interview-band__carousel {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 6px 4px 14px;
}
.interview-band__carousel::-webkit-scrollbar { height: 6px; }
.interview-band__carousel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 3px; }
.interview-band__carousel::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.dense-card { flex: 0 0 236px; scroll-snap-align: start; }
.dense-card a {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border-radius: var(--radius); overflow: hidden; color: var(--c-ink);
  transition: opacity 0.2s;
}
.dense-card a:hover { opacity: 0.82; }
.dense-card .eyecatch { border-radius: 0; }
.dense-card__body { padding: 12px 13px 13px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dense-card__lead { font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--c-navy); }
.dense-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.interview-band__action { text-align: center; margin-top: 26px; padding: 0 20px; }
.interview-band__action a {
  display: inline-block; min-width: 280px; background: #fff; color: var(--c-blue);
  font-size: 14px; font-weight: 700; border-radius: 99px; padding: 13px 30px;
  transition: opacity 0.2s;
}
.interview-band__action a:hover { opacity: 0.85; }
@media (max-width: 900px) {
  .interview-band__inner { grid-template-columns: 1fr; gap: 22px; }
}

/* ==========================================================
   おすすめ求人特集
========================================================== */
.recommend { padding: 0 0 38px; overflow: hidden; margin: 36px 0 0; }
.recommend-heading {
  background: var(--c-header); color: #fff; text-align: center;
  padding: 13px 20px; margin-bottom: 28px;
}
.recommend-heading h3 { font-size: 17px; font-weight: 900; letter-spacing: 0.04em; }
.recommend-title { text-align: center; margin: 0 30px 22px; }
.recommend-title p { font-size: 14px; font-weight: 700; color: var(--c-navy); line-height: 1.7; }
.recommend-title .strong { font-size: 21px; font-weight: 900; }
.recommend-title .hl { color: var(--c-orange2); font-size: 1.15em; }
.recommend-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 30px;
}
@media (max-width: 900px) { .recommend-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .recommend-list { grid-template-columns: 1fr; } }
.recommend-link {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: 6px; color: #fff; text-align: center;
  transition: opacity 0.2s;
}
.recommend-link:hover { opacity: 0.82; }
.recommend-link::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 110% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(rgba(20, 28, 44, 0.24), rgba(20, 28, 44, 0.24));
}
.recommend-link--daini { background: linear-gradient(120deg, #0e8f8a 0%, #0d5c66 100%); }
.recommend-link--kisotsu { background: linear-gradient(120deg, #7a56c9 0%, #4a3187 100%); }
.recommend-link--mikeiken { background: linear-gradient(120deg, #2a7fd8 0%, #17498f 100%); }
.recommend-link--it { background: linear-gradient(120deg, #33475f 0%, #1b2836 100%); }
.recommend-link--yasumi { background: linear-gradient(120deg, #4f9c3f 0%, #2c6a2a 100%); }
.recommend-link--income { background: linear-gradient(120deg, #e08a1e 0%, #ad5a0a 100%); }
.rl-en {
  position: absolute; left: 8px; bottom: 0; z-index: 0;
  font-family: var(--font-num); font-size: 40px; font-weight: 800; line-height: 1.1;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.15); white-space: nowrap;
  text-transform: uppercase;
}
.rl-body { position: relative; z-index: 1; font-size: 13px; font-weight: 700; line-height: 1.5; }
.rl-body--large { font-size: 21px; font-weight: 900; }
p.rl-body .rl-body--large { font-size: 1.6em; }

/* ==========================================================
   breadcrumb
========================================================== */
.breadcrumb { padding: 14px 0 0; font-size: 12px; color: #7c8b9b; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; color: #b0bcc8; }
.breadcrumb a { color: var(--c-blue-bright); }
.breadcrumb a:hover { text-decoration: underline; }

/* ==========================================================
   article page
========================================================== */
.article-main { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 36px 40px 48px; }
@media (max-width: 700px) { .article-main { padding: 24px 18px 36px; } }
.article-header .chip-container { margin-bottom: 12px; }
.article-header h1 { font-size: 26px; font-weight: 900; line-height: 1.5; color: var(--c-navy); }
@media (max-width: 700px) { .article-header h1 { font-size: 21px; } }
.article-meta { display: flex; align-items: center; gap: 16px; margin: 10px 0 20px; font-size: 12px; color: #8a99a8; }
.article-meta time { font-family: var(--font-num); }
.article-hero { margin-bottom: 26px; }
.article-lead { font-size: 15px; color: #4a5a6a; margin-bottom: 24px; }

/* 会話ふきだし */
.talk { display: flex; gap: 12px; margin: 18px 0; align-items: flex-start; }
.talk-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-sky) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.4'%20r='4'%20fill='%236a89ad'/%3E%3Cpath%20d='M3.5%2022c0-4.7%203.8-8.1%208.5-8.1s8.5%203.4%208.5%208.1z'%20fill='%236a89ad'/%3E%3C/svg%3E") no-repeat center 58% / 56%;
  border: 2px solid var(--c-sky2);
}
.talk--advisor .talk-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.4'%20r='4'%20fill='%23ee6a0c'/%3E%3Cpath%20d='M3.5%2022c0-4.7%203.8-8.1%208.5-8.1s8.5%203.4%208.5%208.1z'%20fill='%23ee6a0c'/%3E%3C/svg%3E");
}
.talk-body {
  position: relative; background: var(--c-sky); border-radius: 12px; padding: 12px 16px;
  font-size: 14px; flex: 1; box-shadow: 0 2px 8px rgba(22, 57, 95, 0.06);
}
.talk-body::before {
  content: ""; position: absolute; left: -8px; top: 18px;
  border: 6px solid transparent; border-right-color: var(--c-sky); border-left: none;
}
.talk--advisor .talk-icon { background-color: #fff3e2; border-color: #ffe0b8; }
.talk--advisor .talk-body { background: #fff3e2; }
.talk--advisor .talk-body::before { border-right-color: #fff3e2; }
.talk-name { display: block; font-size: 10px; font-weight: 700; color: #8a99a8; margin-bottom: 2px; }

/* 目次 */
.toc { background: #f6f9fc; border: 1px solid var(--c-line); border-radius: 8px; padding: 20px 24px; margin: 28px 0; }
.toc-title { font-size: 15px; font-weight: 900; color: var(--c-navy); margin-bottom: 10px; }
.toc-title::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--c-blue); border-radius: 2px; margin-right: 8px;
}
.toc ol { counter-reset: toc; }
.toc ol li { counter-increment: toc; font-size: 14px; padding: 4px 0; }
.toc ol li::before {
  content: counter(toc); font-family: var(--font-num); font-weight: 700; color: var(--c-blue-bright);
  margin-right: 10px;
}
.toc a { color: var(--c-ink); }
.toc a:hover { color: var(--c-blue-bright); text-decoration: underline; }

/* 本文 */
.article-body h2 {
  font-size: 21px; font-weight: 900; color: var(--c-navy); line-height: 1.5;
  border-left: 5px solid var(--c-blue); background: #f4f6fa;
  padding: 12px 16px; border-radius: 0 6px 6px 0;
  margin: 44px 0 20px;
}
.article-body h3 {
  font-size: 17px; font-weight: 900; color: var(--c-navy);
  border-bottom: 2px solid var(--c-sky2); padding-bottom: 8px;
  margin: 32px 0 16px;
}
.article-body p { margin: 14px 0; }
.article-body ul:not([class]), .article-body ol:not([class]) { margin: 14px 0 14px 4px; }
.article-body ul:not([class]) li {
  padding-left: 20px; position: relative; margin: 6px 0;
}
.article-body ul:not([class]) li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--c-blue);
}
.article-body ol:not([class]) { list-style: decimal; padding-left: 24px; }
.article-body ol:not([class]) li { margin: 6px 0; }
.article-body strong { color: var(--c-blue-deep); font-weight: 700; }
.article-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.article-body th, .article-body td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; }
.article-body th { background: var(--c-sky); color: var(--c-navy); font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* 本音→面接用の変換ビフォーアフター */
.convert { margin: 18px 0; }
.convert-before, .convert-after { border-radius: 10px; padding: 14px 18px; font-size: 14px; }
.convert-before { background: #f2f4f6; border: 1px dashed #c3ccd6; color: #5a6b7d; }
.convert-after { background: var(--c-sky); border-left: 4px solid var(--c-blue); }
.article-body .convert p { margin: 6px 0 0; }
.cv-label { display: inline-block; font-size: 11px; font-weight: 900; border-radius: 99px; padding: 1px 12px; }
.convert-before .cv-label { background: #dde3e9; color: #5a6b7d; }
.convert-after .cv-label { background: var(--c-blue); color: #fff; }
.convert-arrow {
  width: 0; margin: 8px auto;
  border: 10px solid transparent; border-top: 12px solid var(--c-orange1); border-bottom: none;
}

/* 用語・比較のリストカード（表の代わり） */
.term-list { margin: 16px 0; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #fbfdff; }
.term { display: flex; gap: 14px; padding: 13px 16px; align-items: baseline; }
.term + .term { border-top: 1px solid var(--c-line); }
.term-name {
  flex-shrink: 0; min-width: 104px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--c-blue-deep);
  background: var(--c-sky); border-radius: 6px; padding: 3px 10px;
}
.article-body .term p { margin: 0; font-size: 14px; }
@media (max-width: 600px) {
  .term { flex-direction: column; gap: 6px; }
  .term-name { align-self: flex-start; }
}

/* ポイントボックス */
.point-box { background: #f6f9fc; border: 1px solid var(--c-sky2); border-radius: 8px; padding: 18px 22px; margin: 20px 0; }
.point-box .box-title { font-size: 14px; font-weight: 900; color: var(--c-blue); margin-bottom: 8px; }
.point-box .box-title::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%232d51a3'/%3E%3Cpath%20d='M6.5%2012.5l3.6%203.6L17.5%208.5'%20fill='none'%20stroke='%23fff'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.point-box ul li { padding-left: 18px; position: relative; margin: 4px 0; font-size: 14px; }
.point-box ul li::before { content: "・"; position: absolute; left: 0; color: var(--c-blue); font-weight: 700; }

/* 監修者コメント */
.editor-comment { border: 2px solid #ffe0b8; border-radius: 10px; margin: 28px 0; overflow: hidden; }
.editor-comment .ec-head {
  background: #fff3e2; padding: 10px 18px; font-size: 13px; font-weight: 900; color: #b5540a;
  display: flex; align-items: center; gap: 8px;
}
.editor-comment .ec-head::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--grad-orange);
}
.editor-comment .ec-body { padding: 16px 20px; font-size: 14px; }
.editor-comment .ec-body p { margin: 8px 0; }
.editor-comment .ec-author { display: flex; align-items: center; gap: 10px; padding: 0 20px 14px; }
.editor-comment .ec-author .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff3e2 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.4'%20r='4'%20fill='%23ee6a0c'/%3E%3Cpath%20d='M3.5%2022c0-4.7%203.8-8.1%208.5-8.1s8.5%203.4%208.5%208.1z'%20fill='%23ee6a0c'/%3E%3C/svg%3E") no-repeat center 58% / 56%;
  border: 2px solid #ffe0b8;
}
.editor-comment .ec-author .name { font-size: 12px; font-weight: 700; color: var(--c-navy); }
.editor-comment .ec-author .role { font-size: 11px; color: #8a99a8; }

/* CTA (記事内) */
.cta-box {
  position: relative; overflow: hidden;
  background:
    radial-gradient(360px 190px at 92% -8%, rgba(249, 161, 58, 0.24), transparent 70%),
    radial-gradient(300px 180px at 2% 112%, rgba(58, 111, 216, 0.30), transparent 70%),
    var(--grad-navy);
  border-radius: 12px; padding: 32px 28px; margin: 36px 0;
  text-align: center; color: #fff;
}
.cta-box .cta-catch { font-size: 13px; font-weight: 700; color: #ffd9a8; }
.cta-box .cta-title { font-size: 22px; font-weight: 900; line-height: 1.5; margin: 6px 0 4px; }
.cta-box .cta-text { font-size: 13px; color: #cfe0f1; margin-bottom: 18px; }
.cta-box .btn-entry { font-size: 16px; padding: 14px 40px; }
.cta-box .cta-note { font-size: 11px; color: #9fbbd8; margin-top: 10px; }

/* FAQ */
.faq-item { border: 1px solid var(--c-line); border-radius: 8px; margin: 12px 0; overflow: hidden; }
.faq-q {
  display: flex; gap: 10px; align-items: baseline; padding: 14px 18px;
  background: #f6f9fc; font-weight: 700; color: var(--c-navy); font-size: 15px;
}
.faq-q::before { content: "Q."; font-family: var(--font-num); font-weight: 700; color: var(--c-blue-bright); }
.faq-a { display: flex; gap: 10px; align-items: baseline; padding: 14px 18px; font-size: 14px; }
.faq-a::before { content: "A."; font-family: var(--font-num); font-weight: 700; color: var(--c-orange2); }

/* 著者・監修者ボックス */
.author-box { display: flex; gap: 18px; background: #f6f9fc; border-radius: 10px; padding: 22px; margin: 36px 0 0; }
.author-box .avatar {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fda22b'/%3E%3Cstop%20offset='1'%20stop-color='%23ee6a0c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='64'%20height='64'%20rx='14'%20fill='url(%23g)'/%3E%3Cpath%20d='M44%2022a14%2014%200%201%200%200%2020'%20fill='none'%20stroke='%23fff'%20stroke-width='7'%20stroke-linecap='round'/%3E%3Ccircle%20cx='47'%20cy='47'%20r='6'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 58%;
  border: 2px solid var(--c-sky2);
}
.author-box .label { font-size: 10px; font-weight: 700; color: var(--c-blue); letter-spacing: 0.1em; }
.author-box .name { font-size: 15px; font-weight: 900; color: var(--c-navy); margin-bottom: 4px; }
.author-box p { font-size: 13px; color: #5a6b7d; }

/* 関連記事 */
.related { margin-top: 44px; }
.related h2 { font-size: 18px; font-weight: 900; color: var(--c-navy); margin-bottom: 16px; }
.related .column-card a { border: 1px solid var(--c-line); }

/* ==========================================================
   category page
========================================================== */
.category-header { text-align: center; padding: 36px 20px 8px; }
.category-header .en {
  font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.25em;
  color: var(--c-blue); text-transform: uppercase;
}
.category-header h1 { font-size: 28px; font-weight: 900; color: var(--c-navy); }
.category-header p { font-size: 14px; color: #5a6b7d; max-width: 640px; margin: 8px auto 0; }
.article-list { display: flex; flex-direction: column; gap: 18px; }
.article-list-item a {
  display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 18px; transition: opacity 0.2s;
}
.article-list-item a:hover { opacity: 0.78; }
.article-list-item .card-title { font-size: 17px; }
.article-list-item .excerpt { font-size: 13px; color: #5a6b7d; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-list-item .eyecatch { padding: 5% 8%; }
.article-list-item .eyecatch__tag { display: none; }
.article-list-item .eyecatch strong { font-size: 17px; }
.article-list-item .eyecatch strong small { font-size: 11px; }
@media (max-width: 700px) {
  .article-list-item a { grid-template-columns: 1fr; }
  .article-list-item .eyecatch strong { font-size: 22px; }
}

/* ==========================================================
   entry page
========================================================== */
.entry-wrap { max-width: 720px; margin: 0 auto; }
.entry-hero { text-align: center; padding: 40px 20px 10px; }
.entry-hero .en { font-family: var(--font-num); font-size: 12px; font-weight: 700; letter-spacing: 0.25em; color: var(--c-blue); }
.entry-hero h1 { font-size: 26px; font-weight: 900; color: var(--c-navy); line-height: 1.5; }
.entry-hero p { font-size: 14px; color: #5a6b7d; margin-top: 8px; }
.entry-merits { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.entry-merits li {
  background: #fff; border: 1px solid var(--c-sky2); color: var(--c-blue-deep);
  font-size: 12px; font-weight: 700; border-radius: 99px; padding: 6px 16px;
}
.entry-form { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 32px 30px; margin-bottom: 60px; }
.form-step-title { font-size: 15px; font-weight: 900; color: var(--c-navy); margin: 22px 0 10px; }
.form-step-title .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--c-blue); color: #fff;
  font-family: var(--font-num); font-size: 12px; margin-right: 8px;
}
.status-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .status-choices { grid-template-columns: 1fr; } }
.status-choices label { position: relative; }
.status-choices input { position: absolute; opacity: 0; }
.status-choices .choice {
  display: block; text-align: center; padding: 14px 8px; border: 2px solid var(--c-line);
  border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.status-choices .choice small { display: block; font-size: 10px; font-weight: 500; color: #8a99a8; }
.status-choices input:checked + .choice { border-color: var(--c-blue); background: var(--c-sky); color: var(--c-blue-deep); }
.status-choices input:focus-visible + .choice { outline: 3px solid var(--c-orange1); outline-offset: 2px; }
.entry-form .field { margin: 14px 0; }
.entry-form label.field-label { display: block; font-size: 13px; font-weight: 700; color: var(--c-navy); margin-bottom: 6px; }
.entry-form .req {
  font-size: 10px; background: var(--c-orange2); color: #fff; border-radius: 4px;
  padding: 1px 6px; margin-left: 6px; vertical-align: 2px;
}
.entry-form input[type="text"], .entry-form input[type="email"], .entry-form input[type="tel"], .entry-form select, .entry-form textarea {
  width: 100%; border: 1px solid var(--c-line); border-radius: 6px; padding: 12px 14px;
  font: inherit; background: #fbfdff;
}
.entry-form input:focus, .entry-form select:focus, .entry-form textarea:focus {
  outline: 2px solid var(--c-blue); border-color: var(--c-blue);
}
.entry-submit { text-align: center; margin-top: 26px; }
.entry-submit button {
  background: var(--grad-orange); color: #fff; font-size: 17px; font-weight: 900;
  border-radius: 99px; padding: 16px 60px; box-shadow: 0 6px 18px rgba(238, 106, 12, 0.35);
  transition: opacity 0.2s;
}
.entry-submit button:hover { opacity: 0.85; }
.entry-submit .note { font-size: 11px; color: #8a99a8; margin-top: 10px; }
.entry-done { text-align: center; padding: 40px 20px; display: none; }
.entry-done.is-show { display: block; }
.entry-done .icon {
  width: 64px; height: 64px; margin: 0 auto;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20fill='%232d51a3'/%3E%3Cpath%20d='M6.5%2012.5l3.6%203.6L17.5%208.5'%20fill='none'%20stroke='%23fff'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.entry-done h2 { font-size: 20px; font-weight: 900; color: var(--c-navy); margin: 10px 0; }

/* ==========================================================
   チャット型追従バナー
========================================================== */
.float-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(27, 37, 49, 0.3);
  width: 320px; overflow: hidden;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform 0.3s, opacity 0.3s;
}
.float-cta.is-show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.float-cta .fc-head {
  background: var(--c-blue); color: #fff; font-size: 13px; font-weight: 900;
  padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.float-cta .fc-head .em { color: #ffe86b; }
.float-cta .fc-close { color: #cfdaf2; font-size: 15px; line-height: 1; padding: 4px; flex-shrink: 0; }
.float-cta .fc-body { padding: 14px 14px 4px; display: flex; gap: 10px; align-items: flex-start; }
.float-cta .fc-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: #eef3fa url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.4'%20r='4'%20fill='%232d51a3'/%3E%3Cpath%20d='M3.5%2022c0-4.7%203.8-8.1%208.5-8.1s8.5%203.4%208.5%208.1z'%20fill='%232d51a3'/%3E%3C/svg%3E") no-repeat center 58% / 56%;
  border: 2px solid var(--c-sky2);
}
.float-cta .fc-text {
  position: relative; flex: 1;
  background: #f0f2f5; border-radius: 10px; padding: 10px 12px;
  font-size: 12px; line-height: 1.6;
}
.float-cta .fc-text::before {
  content: ""; position: absolute; left: -7px; top: 14px;
  border: 6px solid transparent; border-right-color: #f0f2f5; border-left: none;
}
.float-cta .fc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.float-cta .fc-btns a {
  display: block; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.5;
  border-radius: 6px; padding: 9px 4px; color: #fff;
  transition: opacity 0.2s;
}
.float-cta .fc-btns a:hover { opacity: 0.85; }
.float-cta .fc-btns .lg { font-size: 14px; font-weight: 900; }
.float-cta .fc-btns .primary { background: var(--grad-orange); }
.float-cta .fc-btns .secondary { background: var(--c-blue); border: none; color: #fff; }
@media (max-width: 700px) {
  .float-cta {
    right: 0; bottom: 0; left: 0; width: auto; border-radius: 8px 8px 0 0;
  }
  .float-cta .fc-body { display: none; }
  .float-cta .fc-btns { padding: 12px; }
}

/* ==========================================================
   トップに戻る
========================================================== */
.to-top {
  position: fixed; right: 22px; bottom: 210px; z-index: 80;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(43, 58, 77, 0.85) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2014l7-7%207%207'%20fill='none'%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.to-top.is-show { opacity: 1; pointer-events: auto; }
.to-top:hover { background-color: rgba(43, 58, 77, 1); }
@media (max-width: 700px) { .to-top { display: none; } }

/* ==========================================================
   footer
========================================================== */
.footer { background: var(--c-blue); color: #c6d3ec; margin-top: 64px; }
.footer-links { max-width: 1120px; margin: 0 auto; padding: 54px 20px 36px; }
.footer-links__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
}
.footer-links__grid--second {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
@media (max-width: 980px) { .footer-links__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-links__grid, .footer-links__grid--second { grid-template-columns: 1fr; } }
.footer-links dt { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-links dt a:hover { text-decoration: underline; }
.footer-links dd { font-size: 12px; margin: 9px 0; line-height: 1.8; }
.footer-links dd a:hover { color: #fff; text-decoration: underline; }
/* 旧マークアップ（.footer-links 直下の dl）フォールバック */
.footer-links > dl { margin-bottom: 24px; }
.footer-bottom { background: var(--c-header); }
.footer-bottom-inner {
  max-width: 1120px; margin: 0 auto; padding: 24px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-logo { font-size: 17px; font-weight: 900; color: #fff; line-height: 1.3; }
.footer-logo small { display: block; font-family: var(--font-num); font-size: 8px; font-weight: 600; color: #8fa0b5; letter-spacing: 0.14em; }
.footer-bottom-nav { display: flex; gap: 20px; }
.footer-bottom-nav a { font-size: 12px; color: #aab6c6; }
.footer-bottom-nav a:hover { color: #fff; text-decoration: underline; }
.footer-copy { font-family: var(--font-num); font-size: 11px; color: #8fa0b5; margin-left: auto; }