@charset "UTF-8";
/* =========================================================
   キャリアAIプラザ株式会社 コーポレートサイト
   Design concept : 信頼の余白 (Trust through Whitespace)
   Palette        : Navy #0B3D5C / Gold #C9A961 / Cream #F5F1E8
   このファイルは全ページ共通の土台です。
========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1A1A1A;
  background: #FAFAF7;
  line-height: 1.9;
  font-size: 15px;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote, table { margin: 0; padding: 0; }
ul, ol { list-style: none; padding: 0; }
input, textarea, select, button { font-family: inherit; }

/* ---------- Variables ---------- */
:root {
  --primary: #0B3D5C;
  --primary-dark: #061F30;
  --secondary: #1F6F8B;
  --gold: #C9A961;
  --gold-dark: #B8860B;
  --base: #FAFAF7;
  --cream: #F5F1E8;
  --white: #FFFFFF;
  --text: #1A1A1A;
  --sub: #5C5C5C;
  --border: #E5E2D9;
  --accent-blue: #1F6F8B;

  /* ボタン配色（配色確認で切替） */
  --btn-primary-bg: #C9A961;
  --btn-primary-bg-hover: #B8860B;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #C9A961;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-bg-hover: #C9A961;
  --btn-secondary-text-hover: #061F30;

  /* 主要CTAアクセント（確定版・既定オレンジ／ページ別に body.theme-xxx で上書き） */
  --accent: #f28c28;
  --accent-dark: #e67612;
  --accent-soft: rgba(242, 140, 40, 0.12);
  --accent-shadow: rgba(242, 140, 40, 0.28);

  --serif: "Noto Serif JP", "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  --sans: "Noto Sans JP", "游ゴシック体", "Yu Gothic", sans-serif;
  --inter: "Inter", -apple-system, sans-serif;

  --header-h: 64px;
}

/* ---------- Utilities ---------- */
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.u-sp-only { display: inline; }
.u-pc-only { display: none; }

@media (min-width: 900px) {
  .u-sp-only { display: none; }
  .u-pc-only { display: inline; }
}

/* =========================================================
   Header / Global Navigation
========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--header-h);
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 16px;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header__logo-mark {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  font-family: var(--inter);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
}
.header__logo-text {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--primary);
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* ---- Desktop nav ---- */
.gnav { display: none; }
.gnav__list { display: flex; align-items: center; gap: 4px; }
.gnav__link {
  display: inline-block;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.04em;
  position: relative;
  transition: color 0.2s ease;
}
.gnav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.gnav__link:hover::after { transform: scaleX(1); }
/* お知らせ追加でメニューが7項目になったため、PCナビの余白を最小限だけ詰める */
@media (min-width: 900px) {
  .gnav__list { gap: 2px; }
  .gnav__link { padding-left: 9px; padding-right: 9px; }
  .gnav__link::after { left: 9px; right: 9px; }
}

/* dropdown */
.gnav__item--has-child { position: relative; }
.gnav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.04em;
}
.gnav__toggle-arrow {
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--gold-dark);
  border-bottom: 1.5px solid var(--gold-dark);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}
.gnav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  box-shadow: 0 16px 40px rgba(6,31,48,0.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.gnav__item--has-child:hover .gnav__dropdown,
.gnav__item--has-child:focus-within .gnav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.gnav__item--has-child:hover .gnav__toggle-arrow,
.gnav__item--has-child:focus-within .gnav__toggle-arrow {
  transform: rotate(-135deg) translateY(2px);
}
.gnav__dropdown a {
  display: block;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--primary);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}
.gnav__dropdown a:last-child { border-bottom: none; }
.gnav__dropdown a:hover { background: var(--cream); }
.gnav__dropdown a span {
  display: block;
  font-size: 11px;
  color: var(--sub);
  margin-top: 2px;
}

.header__cta {
  display: none;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 12px 18px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(184,134,11,0.22);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.header__cta:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* hamburger */
.header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-shrink: 0;
}
.header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--primary);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.is-open span:nth-child(2) { opacity: 0; }
.header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .header__logo-text { font-size: 17px; }
  .gnav { display: block; }
  .header__cta { display: inline-block; }
  .header__burger { display: none; }
}

/* ---- Mobile drawer ---- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6,31,48,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(84%, 360px);
  height: 100%;
  background: var(--white);
  padding: calc(var(--header-h) + 16px) 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__nav a {
  display: block;
  padding: 15px 0;
  font-size: 15px;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
}
.drawer__group-label {
  display: block;
  margin-top: 18px;
  padding-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  font-weight: 700;
}
.drawer__nav a.drawer__sub {
  padding: 12px 0 12px 16px;
  font-size: 13.5px;
  color: var(--sub);
}
.drawer__cta {
  display: block;
  margin-top: 28px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  text-align: center;
  font-weight: 600;
  padding: 16px;
  letter-spacing: 0.04em;
}
@media (min-width: 900px) { .drawer { display: none; } }

/* =========================================================
   Buttons
========================================================= */
.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 16px 28px;
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn--block { display: block; width: 100%; }
.btn--large { padding: 18px 32px; font-size: 15px; }
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}
.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.20);
}
.btn--secondary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary);
}
.btn--secondary:hover { background: var(--primary); color: var(--white); }
.btn--ghost {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--ghost:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-bg-hover);
}

/* =========================================================
   Section commons
========================================================= */
.section { padding-top: 64px; padding-bottom: 64px; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--base { background: var(--base); }

.section__eyebrow {
  font-family: var(--inter);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--gold-dark);
  text-align: center;
  margin-bottom: 12px;
}
.section__title {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--primary);
  font-size: 23px;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin-bottom: 28px;
}
.section__lead {
  text-align: center;
  font-size: 15px;
  color: var(--sub);
  line-height: 1.95;
  margin-bottom: 36px;
}
.section__visual {
  margin: 0 auto 36px;
  max-width: 1280px;
  overflow: hidden;
}
.section__visual img { width: 100%; height: auto; }

@media (min-width: 768px) {
  .section { padding-top: 96px; padding-bottom: 96px; }
  .section__visual { margin-bottom: 56px; padding: 0 32px; }
}
@media (min-width: 900px) {
  .section__title { font-size: 31px; }
  .section__lead { font-size: 15px; }
}

/* =========================================================
   Hero (Top page)
========================================================= */
.hero { position: relative; background: var(--primary-dark); color: var(--white); overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,31,48,0.82) 0%, rgba(11,61,92,0.78) 60%, rgba(6,31,48,0.9) 100%);
}
.hero__content {
  position: relative;
  padding-top: 64px;
  padding-bottom: 72px;
  max-width: 760px;
}
.hero__eyebrow {
  font-family: var(--inter);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 18px;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 22px;
}
.hero__lead {
  font-size: 14.5px;
  line-height: 2;
  opacity: 0.9;
  margin-bottom: 36px;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .hero__content { padding-top: 104px; padding-bottom: 116px; }
  .hero__title { font-size: 46px; line-height: 1.45; }
  .hero__lead { font-size: 16px; }
  .hero__actions { flex-direction: row; }
  .hero__actions .btn { min-width: 240px; }
}

/* =========================================================
   Page hero (lower / sub pages)
========================================================= */
.page-hero {
  position: relative;
  background: var(--primary-dark);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,31,48,0.8) 0%, rgba(11,61,92,0.82) 100%);
}
.page-hero__inner {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  text-align: center;
}
.page-hero__eyebrow {
  font-family: var(--inter);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 14px;
}
.page-hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 14px;
}
.page-hero__lead {
  font-size: 14px;
  opacity: 0.88;
  line-height: 1.95;
  max-width: 680px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .page-hero__inner { padding-top: 88px; padding-bottom: 88px; }
  .page-hero__title { font-size: 38px; }
  .page-hero__lead { font-size: 15px; }
}

/* ---- Breadcrumb ---- */
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--border); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
  font-size: 11.5px;
  color: var(--sub);
}
.breadcrumb__list li::after { content: "›"; margin-left: 6px; color: var(--border); }
.breadcrumb__list li:last-child::after { content: ""; }
.breadcrumb__list a:hover { color: var(--primary); text-decoration: underline; }

/* =========================================================
   Trust bar
========================================================= */
.trust { background: var(--primary); color: var(--white); padding: 24px 0; }
.trust__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 8px;
  text-align: center;
}
.trust__item dt { font-size: 10px; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 4px; }
.trust__item dd { font-family: var(--serif); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  .trust { padding: 30px 0; }
  .trust__inner { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .trust__item dt { font-size: 11px; }
  .trust__item dd { font-size: 16px; }
}

/* =========================================================
   Problems (lead-in concern list)
========================================================= */
.problems__list { border-top: 1px solid var(--border); max-width: 880px; margin: 0 auto; }
.problems__item { padding: 22px 0 22px 36px; border-bottom: 1px solid var(--border); position: relative; }
.problems__item::before {
  content: ""; position: absolute; left: 4px; top: 32px;
  width: 16px; height: 1px; background: var(--gold);
}
.problems__item-title {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--primary); line-height: 1.6; margin-bottom: 6px;
}
.problems__item-text { font-size: 14.5px; color: var(--sub); line-height: 1.9; }
@media (min-width: 768px) {
  .problems__item { padding: 28px 0 28px 56px; }
  .problems__item::before { left: 8px; top: 42px; width: 32px; }
  .problems__item-title { font-size: 18px; }
  .problems__item-text { font-size: 14.5px; }
}

/* =========================================================
   Solution (navy band)
========================================================= */
.solution { background: var(--primary); color: var(--white); }
.solution .section__title { color: var(--white); }
.solution .section__lead { color: rgba(255,255,255,0.82); margin-bottom: 0; }

/* =========================================================
   Service cards (top + services page)
========================================================= */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 28px 24px;
}
.service-card__num {
  font-family: var(--inter); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; color: var(--gold-dark); margin-bottom: 10px;
}
.service-card__title {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--primary); line-height: 1.5; margin-bottom: 12px;
}
.service-card__text { font-size: 14.5px; color: var(--sub); line-height: 1.95; margin-bottom: 16px; }
.service-card__meta { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 18px; }
.service-card__meta dt {
  font-size: 11px; letter-spacing: 0.06em; color: var(--gold-dark);
  font-weight: 700; margin-bottom: 4px;
}
.service-card__meta dd { font-size: 13px; color: var(--text); line-height: 1.8; margin-bottom: 12px; }
.service-card__meta dd:last-child { margin-bottom: 0; }
.service-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: gap 0.2s ease;
}
.service-card__link:hover { gap: 14px; }
.service-card__link::after {
  content: "→"; color: var(--gold-dark);
}
@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Merit grid (icon-less feature cards)
========================================================= */
.merit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.merit__card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 26px 22px;
}
.merit__num {
  font-family: var(--inter); font-weight: 700; font-size: 26px;
  color: var(--gold); line-height: 1; margin-bottom: 12px;
}
.merit__title {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--primary); line-height: 1.6; margin-bottom: 10px;
}
.merit__text { font-size: 14.5px; color: var(--sub); line-height: 1.9; }
.merit__media { margin: -26px -22px 18px; aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .merit__grid { grid-template-columns: repeat(3, 1fr); }
  .merit__title { font-size: 18px; }
  .merit__text { font-size: 14.5px; }
  .merit__media { margin: -32px -24px 20px; }
}

/* =========================================================
   Link cards (導線: 事例 / FAQ など)
========================================================= */
.linkcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.linkcard {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.linkcard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6,31,48,0.1); }
.linkcard__eyebrow {
  font-family: var(--inter); font-weight: 600; font-size: 11px;
  letter-spacing: 0.2em; color: var(--gold-dark); margin-bottom: 10px;
}
.linkcard__title {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--primary); margin-bottom: 8px;
}
.linkcard__text { font-size: 14.5px; color: var(--sub); line-height: 1.9; margin-bottom: 14px; }
.linkcard__more { font-size: 13px; font-weight: 600; color: var(--gold-dark); }
.linkcard__more::after { content: " →"; }
@media (min-width: 768px) {
  .linkcards { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Flow steps (導入までの流れ)
========================================================= */
.flow__list { border-top: 1px solid var(--border); max-width: 760px; margin: 0 auto; }
.flow__item { padding: 24px 0 24px 84px; border-bottom: 1px solid var(--border); position: relative; }
.flow__step {
  position: absolute; left: 0; top: 26px;
  font-family: var(--inter); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; color: var(--gold-dark);
}
.flow__title { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--primary); margin-bottom: 6px; line-height: 1.6; }
.flow__text { font-size: 14.5px; color: var(--sub); line-height: 1.9; }
@media (min-width: 768px) {
  .flow__item { padding: 28px 0 28px 110px; }
  .flow__step { top: 32px; font-size: 12px; }
  .flow__title { font-size: 18px; }
  .flow__text { font-size: 14.5px; }
}

/* =========================================================
   Feature list (chips)
========================================================= */
.featurelist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
.featurelist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.8;
}
.featurelist li::before {
  content: "✓";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: rgba(201,169,97,0.16);
  border: 1px solid rgba(201,169,97,0.55);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .featurelist { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Plain grid (curriculum / target / 学べる内容)
========================================================= */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  max-width: 900px;
  margin: 0 auto;
}
.tilegrid__item { background: var(--white); padding: 22px 12px; text-align: center; }
.tilegrid__item h3 { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--primary); margin-bottom: 4px; }
.tilegrid__item p { font-size: 11px; color: var(--sub); line-height: 1.7; }
@media (min-width: 768px) {
  .tilegrid { grid-template-columns: repeat(4, 1fr); }
  .tilegrid__item { padding: 28px 14px; }
  .tilegrid__item h3 { font-size: 15px; }
  .tilegrid__item p { font-size: 12px; }
}

/* =========================================================
   Price / Subsidy table
========================================================= */
.priceblock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.subsidy__card { background: var(--white); border: 1px solid var(--border); border-top: 2px solid var(--gold); padding: 24px 20px; }
.subsidy__card-title {
  font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--primary);
  text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.subsidy__table { width: 100%; border-collapse: collapse; }
.subsidy__table th, .subsidy__table td {
  padding: 16px 4px; text-align: left; border-bottom: 1px solid var(--border);
  font-weight: 500; font-size: 14px; color: var(--text); vertical-align: baseline;
}
.subsidy__table td { text-align: right; }
.subsidy__num { font-family: var(--inter); font-weight: 700; font-size: 22px; color: var(--primary); }
.subsidy__unit { font-size: 13px; color: var(--text); margin-left: 4px; }
.subsidy__minus .subsidy__num { color: var(--sub); }
.subsidy__total-row th, .subsidy__total-row td {
  border-bottom: none; padding-top: 20px;
  font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--primary);
}
.subsidy__num--total { color: var(--gold-dark); font-size: 32px; }
.subsidy__unit--total { font-size: 14px; }
.subsidy__note { font-size: 11px; color: var(--sub); line-height: 1.8; margin-top: 16px; }
@media (min-width: 768px) {
  .subsidy__card { padding: 32px 28px; }
  .subsidy__num { font-size: 24px; }
  .subsidy__num--total { font-size: 38px; }
}

/* =========================================================
   Model cases (導入事例 / モデルケース)
========================================================= */
.modelcase__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.modelcase {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 24px 22px;
}
.modelcase__tag {
  display: inline-block;
  background: var(--cream);
  color: var(--gold-dark);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; margin-bottom: 12px; letter-spacing: 0.04em;
}
.modelcase__title { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--primary); margin-bottom: 10px; line-height: 1.6; }
.modelcase__text { font-size: 14.5px; color: var(--sub); line-height: 1.95; }
@media (min-width: 768px) {
  .modelcase__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   FAQ accordion
========================================================= */
.faq__list { border-top: 1px solid var(--border); max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: block;
  font-family: var(--serif); font-weight: 500; color: var(--primary);
  font-size: 15px; padding: 22px 44px 22px 0; line-height: 1.7;
  cursor: pointer; position: relative; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--inter); font-weight: 400; font-size: 24px;
  color: var(--gold-dark); line-height: 1; transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 0 24px; }
.faq__a p { font-size: 14.5px; color: var(--sub); line-height: 1.9; }
@media (min-width: 768px) {
  .faq__q { font-size: 16px; padding: 26px 48px 26px 0; }
  .faq__a p { font-size: 14.5px; }
}

/* =========================================================
   Company table
========================================================= */
.company__list { border-top: 1px solid var(--border); max-width: 760px; margin: 0 auto; }
.company__row { display: grid; grid-template-columns: 110px 1fr; padding: 16px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.company__row dt { font-size: 12px; color: var(--sub); letter-spacing: 0.04em; }
.company__row dd { font-size: 13px; color: var(--text); line-height: 1.8; }
@media (min-width: 768px) {
  .company__row { grid-template-columns: 180px 1fr; padding: 20px 0; }
  .company__row dd { font-size: 14px; }
}

/* =========================================================
   Demo / Contact CTA (navy w/ image bg)
========================================================= */
.democta {
  position: relative;
  padding: 64px 0 72px;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.democta__bg { position: absolute; inset: 0; z-index: -1; }
.democta__bg img { width: 100%; height: 100%; object-fit: cover; }
.democta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,31,48,0.94) 0%, rgba(11,61,92,0.96) 100%);
}
.democta__inner { position: relative; text-align: center; }
.democta__eyebrow {
  font-family: var(--inter); font-weight: 600; font-size: 12px;
  letter-spacing: 0.25em; color: var(--gold); margin-bottom: 12px;
}
.democta__title {
  font-family: var(--serif); font-weight: 700; font-size: 24px;
  letter-spacing: 0.03em; line-height: 1.6; margin-bottom: 16px;
}
.democta__lead { font-size: 15px; opacity: 0.88; margin-bottom: 32px; line-height: 1.95; }
.democta__actions {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 460px; margin: 0 auto 24px;
}
.democta__tel { font-size: 13px; opacity: 0.85; }
.democta__tel a { font-family: var(--inter); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  .democta { padding: 88px 0 96px; }
  .democta__title { font-size: 30px; }
  .democta__lead { font-size: 15px; }
  .democta__actions { flex-direction: row; justify-content: center; max-width: none; }
  .democta__actions .btn { min-width: 240px; }
}

/* =========================================================
   Contact form
========================================================= */
.contact { background: var(--primary); color: var(--white); }
.contact__title { color: var(--white); }
.contact__form {
  background: var(--white);
  color: var(--text);
  border-top: 2px solid var(--gold);
  padding: 28px 22px;
  max-width: 680px;
  margin: 0 auto;
}
.form__row { margin-bottom: 18px; }
.form__row label { display: block; font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.form__req { display: inline-block; background: var(--gold-dark); color: var(--white); font-size: 10px; font-weight: 600; padding: 2px 6px; margin-left: 4px; letter-spacing: 0.04em; }
.form__row input, .form__row textarea, .form__row select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  background: var(--base); font-size: 15px; color: var(--text); line-height: 1.7;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form__row input:focus, .form__row textarea:focus, .form__row select:focus {
  outline: none; border-color: var(--primary); background: var(--white);
}
.form__row textarea { resize: vertical; min-height: 120px; }
.form__check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--sub); margin: 4px 0 20px; cursor: pointer; line-height: 1.7;
}
.form__check input { margin-top: 4px; flex-shrink: 0; width: auto; }
.form__check a { color: var(--primary); text-decoration: underline; }
.contact__form-note { text-align: center; font-size: 11px; color: var(--sub); margin-top: 14px; line-height: 1.8; }
@media (min-width: 768px) {
  .contact__form { padding: 40px 36px; }
}

/* =========================================================
   Placeholder note (仮ページ用)
========================================================= */
.placeholder {
  max-width: 720px; margin: 0 auto;
  background: var(--white); border: 1px dashed var(--gold);
  padding: 32px 24px; text-align: center;
}
.placeholder__badge {
  display: inline-block; background: var(--cream); color: var(--gold-dark);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 5px 12px; margin-bottom: 16px;
}
.placeholder__title { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--primary); margin-bottom: 12px; line-height: 1.6; }
.placeholder__text { font-size: 13.5px; color: var(--sub); line-height: 1.95; margin-bottom: 20px; }
.placeholder__outline {
  text-align: left; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px;
}
.placeholder__outline dt { font-size: 11px; letter-spacing: 0.08em; color: var(--gold-dark); font-weight: 700; margin-bottom: 10px; }
.placeholder__outline ol { counter-reset: ph; }
.placeholder__outline li {
  position: relative; padding: 8px 0 8px 30px; font-size: 13px; color: var(--text);
  border-bottom: 1px solid var(--border); counter-increment: ph;
}
.placeholder__outline li:last-child { border-bottom: none; }
.placeholder__outline li::before {
  content: counter(ph); position: absolute; left: 0; top: 8px;
  font-family: var(--inter); font-weight: 700; font-size: 12px; color: var(--gold-dark);
}

/* =========================================================
   Footer
========================================================= */
.footer { background: var(--primary-dark); color: rgba(255,255,255,0.7); padding: 48px 0 40px; }
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer__name { font-family: var(--serif); font-weight: 500; color: var(--white); font-size: 16px; margin-bottom: 10px; }
.footer__addr { font-size: 12px; opacity: 0.7; line-height: 1.9; }
.footer__col-title {
  font-family: var(--inter); font-weight: 600; font-size: 10px;
  letter-spacing: 0.18em; color: var(--gold); margin-bottom: 12px;
}
.footer__links a { display: block; font-size: 13px; padding: 6px 0; color: rgba(255,255,255,0.75); transition: color 0.2s ease; }
.footer__links a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.footer__nav a { color: rgba(255,255,255,0.7); transition: opacity 0.2s ease; }
.footer__nav a:hover { opacity: 1; }
.footer__copy { font-family: var(--inter); font-size: 11px; opacity: 0.5; }
@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =========================================================
   Sticky mobile CTA
========================================================= */
.sticky {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.98);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex; gap: 8px; z-index: 80;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky.is-visible { transform: translateY(0); }
.sticky__tel {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 88px; background: var(--white); color: var(--primary);
  border: 1.5px solid var(--primary); font-weight: 600; font-size: 13px;
}
.sticky__btn {
  flex: 1; background: var(--btn-primary-bg);
  color: var(--btn-primary-text); padding: 13px 12px; font-weight: 600; font-size: 14px;
  text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
@media (min-width: 900px) {
  .sticky { display: none !important; }
}
body.has-sticky { padding-bottom: 64px; }
@media (min-width: 900px) { body.has-sticky { padding-bottom: 0; } }

/* =========================================================
   Service detail hero extras（出張型/各サービスページ用）
========================================================= */
.page-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.page-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 620px;
  margin: 28px auto 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(201,169,97,0.6);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 14px;
}
.chip::before { content: "✓"; color: var(--gold); font-weight: 700; }
@media (min-width: 768px) {
  .page-hero__actions { flex-direction: row; }
  .page-hero__actions .btn { min-width: 240px; }
  .chip { font-size: 12.5px; }
}

/* =========================================================
   Feature grid（2列カード：出張型研修の特徴 など）
========================================================= */
.featgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .featgrid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Tag list（このような事業所におすすめ）
========================================================= */
.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}
.taglist li {
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--gold);
  padding: 10px 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .taglist li { font-size: 14px; padding: 12px 18px; }
}

/* =========================================================
   Note line（注記・補足）
========================================================= */
.note {
  max-width: 760px;
  margin: 22px auto 0;
  font-size: 11.5px;
  color: var(--sub);
  line-height: 1.85;
}
.note--center { text-align: center; }

/* =========================================================
   Plan cards（研修カリキュラム例：1日型/半日型/複数日型）
========================================================= */
.plan__label {
  display: inline-block;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

/* =========================================================
   Service hero（サービス詳細ページ：コピー＋写真）
========================================================= */
.shero { background: var(--primary-dark); color: var(--white); }
.shero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
}
.shero__body { padding: 40px 0 30px; }
.shero__eyebrow {
  font-family: var(--inter);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 16px;
}
.shero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.shero__lead {
  font-size: 15px;
  line-height: 2;
  opacity: 0.9;
  margin-bottom: 30px;
}
.shero__actions { display: flex; flex-direction: column; gap: 12px; }
.shero__media {
  position: relative;
  min-height: 200px;
  border-top: 2px solid var(--gold);
  overflow: hidden;
}
.shero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .shero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .shero__body { padding: 74px 0; }
  .shero__title { font-size: 40px; }
  .shero__lead { font-size: 16px; }
  .shero__actions { flex-direction: row; }
  .shero__actions .btn { min-width: 220px; }
  .shero__media { min-height: 340px; height: 100%; }
}

/* ---- Info card（実施形態・受講人数・助成金・対応業種） ---- */
.infocard-wrap { position: relative; z-index: 3; margin-top: -32px; }
.infocard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  box-shadow: 0 10px 26px rgba(6,31,48,0.08);
}
.infocard__item {
  padding: 18px 18px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.infocard__item:nth-child(even) { border-right: none; }
.infocard__item:nth-last-child(-n+2) { border-bottom: none; }
.infocard__item dt {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
  margin-bottom: 6px;
}
.infocard__item dd {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--primary);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .infocard-wrap { margin-top: -44px; }
  .infocard { grid-template-columns: repeat(4, 1fr); }
  .infocard__item { padding: 24px 22px; }
  .infocard__item:nth-child(even) { border-right: 1px solid var(--border); }
  .infocard__item:nth-child(4n) { border-right: none; }
  .infocard__item { border-bottom: none; }
  .infocard__item dd { font-size: 15px; }
}

/* =========================================================
   Split（写真 ＋ コンテンツ：出張型研修の特徴 など）
========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.split__media {
  position: relative;
  min-height: 230px;
  border-top: 2px solid var(--gold);
  overflow: hidden;
}
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .split__media { min-height: 100%; max-height: 460px; }
}
.split__cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) {
  .split__cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: stretch; }
  .split__media { min-height: 100%; }
}

/* =========================================================
   Curriculum timeline（15時間研修：3時間×5回）
========================================================= */
.ctl { max-width: 840px; margin: 0 auto; }
.ctl__item {
  position: relative;
  padding: 0 0 30px 28px;
  border-left: 1px solid var(--border);
}
.ctl__item:last-child { padding-bottom: 0; }
.ctl__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 9px;
  height: 9px;
  background: var(--gold);
}
.ctl__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ctl__day {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
}
.ctl__time {
  font-size: 11px;
  color: var(--sub);
  border: 1px solid var(--border);
  padding: 2px 9px;
  letter-spacing: 0.04em;
}
.ctl__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
  line-height: 1.6;
  margin-bottom: 12px;
}
.ctl__points { display: grid; gap: 6px; }
.ctl__points li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--sub);
  line-height: 1.85;
}
.ctl__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 1px;
  background: var(--gold);
}
@media (min-width: 768px) {
  .ctl__item { padding-left: 36px; }
  .ctl__title { font-size: 18px; }
  .ctl__points li { font-size: 14px; }
}

/* =========================================================
   業種別の活用イメージ（事例カード）
========================================================= */
.bizcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .bizcase__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .bizcase__grid { grid-template-columns: repeat(3, 1fr); }
}
.bizcase {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 24px 24px 26px;
}
.bizcase__media {
  margin: -24px -24px 18px;
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
  .bizcase__media { margin: -30px -28px 20px; }
}
.bizcase .check-list {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.bizcase__label {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
.bizcase__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.bizcase__text {
  font-size: 14.5px;
  color: var(--sub);
  line-height: 1.95;
  margin-bottom: 18px;
}
.bizcase__list {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: grid;
  gap: 9px;
}
.bizcase__list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.75;
}
.bizcase__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 1px;
  background: var(--gold);
}
@media (min-width: 768px) {
  .bizcase { padding: 30px 28px; }
  .bizcase__title { font-size: 18px; }
  .bizcase__text { font-size: 14.5px; }
  .bizcase__list li { font-size: 13.5px; }
}

/* =========================================================
   Placeholder frame（画像未配置でも上品に見せる枠）
========================================================= */
.phframe {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #efe9dd 0%, #e3dccb 100%);
}
.phframe::after {
  content: "CAREER AI PLAZA";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(11,61,92,0.20);
  pointer-events: none;
}
.phframe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.phframe img.is-broken { opacity: 0; }
.phframe--navy { background: linear-gradient(135deg, #10405f 0%, #0a2a40 100%); }
.phframe--navy::after { color: rgba(201,169,97,0.45); }

/* =========================================================
   Check list（✓付き箇条書き：濃紺ボックス＋ゴールド）
========================================================= */
.check-list { display: grid; gap: 9px; }
.split__text { font-size: 14.5px; color: var(--sub); line-height: 1.9; margin-bottom: 16px; }
@media (min-width: 600px) {
  .check-list--2col { grid-template-columns: 1fr 1fr; gap: 9px 18px; }
}
.check-list li {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: var(--primary);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}
@media (min-width: 768px) { .check-list li { font-size: 13.5px; } }

/* =========================================================
   Lessons（15時間カリキュラム：左テキスト＋右画像 ×4回）
========================================================= */
.lessons { display: grid; gap: 22px; max-width: 1080px; margin: 0 auto; }
.lesson {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  overflow: hidden;
}
.lesson__media { position: relative; aspect-ratio: 16 / 10; order: -1; }
.lesson__body { padding: 24px 22px; }
.lesson__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lesson__no {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
}
.lesson__time {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 3px 10px;
  letter-spacing: 0.04em;
}
.lesson__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  line-height: 1.6;
  margin-bottom: 12px;
}
.lesson__text { font-size: 14.5px; color: var(--sub); line-height: 1.9; margin-bottom: 16px; }
.lesson__points { border-top: 1px solid var(--border); padding-top: 14px; }
@media (min-width: 768px) {
  .lesson { grid-template-columns: 1.4fr 1fr; }
  .lesson__media { order: 0; aspect-ratio: auto; min-height: 100%; }
  .lesson__body { padding: 30px 34px; }
  .lesson__title { font-size: 18px; }
  .lesson__text { font-size: 14.5px; }
}

/* ---- price banner / compact section ---- */
.price__banner {
  aspect-ratio: 16 / 5;
  border-top: 2px solid var(--gold);
  margin: 0 auto 24px;
}
.section--compact { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) {
  .section--compact { padding-top: 72px; padding-bottom: 72px; }
}

/* ---- infocard：さらに狭い幅では1列 ---- */
@media (max-width: 420px) {
  .infocard { grid-template-columns: 1fr; }
  .infocard__item { border-right: none; }
  .infocard__item:not(:last-child) { border-bottom: 1px solid var(--border); }
}

/* =========================================================
   Text link（ボタンを多用しない控えめな導線）
========================================================= */
.morelink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: gap 0.2s ease;
}
.morelink::after { content: "→"; color: var(--gold-dark); }
.morelink:hover { gap: 13px; }
.u-center { text-align: center; }

/* =========================================================
   Service hero（全面背景画像バリアント：出張型ページ）
   ※ .shero（2カラム）は他ページでも使用するため変更しない
========================================================= */
.shero--bg { position: relative; overflow: hidden; }
.shero--bg .shero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-top: none;
}
.shero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,31,48,0.92) 0%, rgba(6,31,48,0.74) 46%, rgba(11,61,92,0.42) 100%),
    linear-gradient(180deg, rgba(6,31,48,0.30) 0%, rgba(6,31,48,0.10) 40%, rgba(6,31,48,0.55) 100%);
}
.shero--bg .shero__inner { position: relative; z-index: 2; }
.shero--bg .shero__body { max-width: 660px; padding: 60px 0 52px; }
@media (min-width: 768px) {
  .shero--bg { display: flex; align-items: center; min-height: 460px; }
  .shero--bg .shero__inner { width: 100%; }
  .shero--bg .shero__body { padding: 92px 0; }
}

/* =========================================================
   AIで効率化できる業務：枠線付きタイル（modifier）
   ※ 既存 .tilegrid は変更しない
========================================================= */
.tilegrid--bordered {
  background: transparent;
  border: none;
  gap: 14px;
}
.tilegrid--bordered .tilegrid__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tilegrid--bordered .tilegrid__item:hover {
  border-color: var(--accent-blue);
  background: var(--base);
}
/* 3列×2段グリッド（スマホ1列・タブレット2列・PC3列）※適用セクションのみ */
.tilegrid--3 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .tilegrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tilegrid--3 { grid-template-columns: repeat(3, 1fr); }
}
.tilegrid--3 .tilegrid__item { text-align: left; padding: 22px 20px; }
/* 文章量のあるカードは読みやすいサイズに（短いチップ系には影響させない） */
.tilegrid--3 .tilegrid__item h3 { font-size: 16px; margin-bottom: 6px; }
.tilegrid--3 .tilegrid__item p { font-size: 14px; line-height: 1.85; }
/* 2列×2段グリッド（4カード用・スマホ1列） */
.tilegrid--2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .tilegrid--2 { grid-template-columns: repeat(2, 1fr); }
}
.tilegrid--2 .tilegrid__item { text-align: left; padding: 22px 20px; }
.tilegrid--2 .tilegrid__item h3 { font-size: 16px; margin-bottom: 6px; }
.tilegrid--2 .tilegrid__item p { font-size: 14px; line-height: 1.85; }

/* =========================================================
   配色確認用パレット（本番前の確認用・削除可）
========================================================= */
[data-theme="a"] {
  --primary: #082F49;
  --primary-dark: #061F30;
  --secondary: #0F4C75;
  --gold: #C9A961;
  --gold-dark: #B8860B;
  --base: #FAF8F2;
  --cream: #F1F7FA;
  --accent-blue: #38BDF8;
  --btn-primary-bg: #38BDF8;
  --btn-primary-bg-hover: #0EA5E9;
  --btn-primary-text: #061F30;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #C9A961;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-bg-hover: #C9A961;
  --btn-secondary-text-hover: #061F30;
}
[data-theme="b"] {
  --primary: #0B3D5C;
  --primary-dark: #062A3F;
  --secondary: #2A9D8F;
  --gold: #D6B56D;
  --gold-dark: #B8943E;
  --base: #FBFAF5;
  --cream: #EEF8F5;
  --accent-blue: #2A9D8F;
  --btn-primary-bg: #2A9D8F;
  --btn-primary-bg-hover: #21867A;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #A7F3D0;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-bg-hover: #A7F3D0;
  --btn-secondary-text-hover: #062A3F;
}
[data-theme="c"] {
  --primary: #092A3A;
  --primary-dark: #061F30;
  --secondary: #2563EB;
  --gold: #F59E0B;
  --gold-dark: #D97706;
  --base: #FAFAF7;
  --cream: #F3F7FF;
  --accent-blue: #2563EB;
  --btn-primary-bg: #F59E0B;
  --btn-primary-bg-hover: #D97706;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #DBEAFE;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-bg-hover: #DBEAFE;
  --btn-secondary-text-hover: #092A3A;
}
[data-theme="d"] {
  --primary: #092A3A;
  --primary-dark: #061F30;
  --secondary: #7F1D1D;
  --gold: #E85D5A;
  --gold-dark: #C2413D;
  --base: #FAFAF7;
  --cream: #FFF4F2;
  --accent-blue: #E85D5A;
  --btn-primary-bg: #E85D5A;
  --btn-primary-bg-hover: #C2413D;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #F3B6B3;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-bg-hover: #F3B6B3;
  --btn-secondary-text-hover: #092A3A;
}

/* ---- 配色確認タブ／パネル ---- */
.color-switcher {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
}
.color-switcher__tab {
  writing-mode: vertical-rl;
  background: var(--primary);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-right: none;
  padding: 14px 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(0,0,0,0.15);
}
.color-switcher__panel {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
  width: 236px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(6,31,48,0.20);
  padding: 16px;
  display: none;
}
.color-switcher.is-open .color-switcher__panel { display: block; }
.color-switcher__title {
  font-size: 11px;
  color: var(--sub);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 700;
}
.color-switcher__note {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.6;
  margin-bottom: 12px;
}
.color-switcher__demo {
  margin-top: 12px;
  padding: 12px;
  background: var(--primary-dark);
  display: grid;
  gap: 8px;
}
.color-switcher__demo-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}
.color-switcher__demo .btn {
  padding: 9px 12px;
  font-size: 12px;
  width: 100%;
}
.color-switcher__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  background: #fff;
  padding: 9px 11px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.color-switcher__button:last-child { margin-bottom: 0; }
.color-switcher__button:hover {
  background: #FAF7EF;
  border-color: var(--gold);
  border-left-color: var(--gold);
  box-shadow: 0 5px 16px -7px rgba(6,31,48,0.35);
}
.color-switcher__button.is-active {
  border-color: #B8860B;
  border-left: 4px solid #B8860B;
  background: #F5F1E8;
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 7px 20px -7px rgba(184,134,11,0.50), inset 0 0 0 1px rgba(184,134,11,0.22);
}
.color-switcher__sw {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.color-switcher__sw i {
  display: block;
  width: 14px;
  height: 22px;
}
.color-switcher__button.is-active .color-switcher__sw {
  box-shadow: 0 0 0 2px rgba(184,134,11,0.55);
}
@media (max-width: 640px) {
  .color-switcher { top: auto; bottom: 78px; transform: none; }
  .color-switcher__tab { writing-mode: horizontal-tb; padding: 8px 12px; font-size: 11px; }
  .color-switcher__panel {
    top: auto; bottom: 0; transform: none;
    margin-right: 8px; width: 220px;
  }
}

/* =========================================================
   Instagramアイコン（ヘッダー／ドロワー／フッター 専用）
========================================================= */
.header__instagram,
.footer__instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.header__instagram svg,
.footer__instagram svg { width: 22px; height: 22px; display: block; }
/* ヘッダー：CTAの左に配置。CTAと同じくPC（900px以上）のみ表示 */
.header__instagram {
  display: none;
  color: var(--primary);
  margin-left: 14px;
  margin-right: 12px;
}
@media (min-width: 900px) { .header__instagram { display: inline-flex; } }
.header__instagram:hover { color: var(--gold-dark); transform: translateY(-1px); }
/* フッター：濃紺背景になじむ文字色、hoverでゴールド */
.footer__instagram { color: rgba(255,255,255,0.75); margin-top: 14px; }
.footer__instagram:hover { color: var(--gold); transform: translateY(-1px); }
/* ドロワー内：アイコン＋テキスト（スマホ用に必ず表示） */
.drawer__instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--primary);
  font-size: 14px;
  transition: color 0.2s ease;
}
.drawer__instagram svg { width: 20px; height: 20px; display: block; }
.drawer__instagram:hover { color: var(--gold-dark); }

/* =========================================================
   業種別の活用例（DX活用例＋マーケティング活用例）
========================================================= */
.icase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .icase__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .icase__grid { grid-template-columns: repeat(3, 1fr); }
}
.icase {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 24px 24px 26px;
}
.icase__media {
  margin: -24px -24px 16px;
  aspect-ratio: 16 / 9;
}
.icase__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.icase__text {
  font-size: 14.5px;
  color: var(--sub);
  line-height: 1.9;
}
.icase__sub {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.icase__sub--mkt { color: var(--accent-blue); }
.icase .check-list { gap: 7px; }
.icase .check-list li { font-size: 12.5px; }
@media (min-width: 768px) {
  .icase { padding: 28px 26px 30px; }
  .icase__media { margin: -28px -26px 18px; }
  .icase__name { font-size: 18px; }
  .icase__text { font-size: 14.5px; }
  .icase .check-list li { font-size: 13px; }
}
.pricecards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pricecards { grid-template-columns: 1fr 1fr; }
}
.pricecard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 24px 22px;
}
.pricecard__label {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
.pricecard__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  line-height: 1.5;
  margin-bottom: 10px;
}
.pricecard__desc {
  font-size: 14.5px;
  color: var(--sub);
  line-height: 1.9;
  margin-bottom: 16px;
}
.pricecard__price {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.pricecard__price small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sub);
  margin-bottom: 2px;
}
.pricecard__price b {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold-dark);
  letter-spacing: 0.01em;
}
.pricecard__media {
  margin: -24px -22px 16px;
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
  .pricecard { padding: 28px 26px; }
  .pricecard__name { font-size: 18px; }
  .pricecard__media { margin: -28px -26px 18px; }
}

/* 料金セクションの問い合わせ導線 */
.price-cta {
  max-width: 760px;
  margin: 32px auto 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 28px 24px;
  text-align: center;
}
.price-cta__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--primary);
  line-height: 1.6;
  margin-bottom: 12px;
}
.price-cta__text {
  font-size: 14.5px;
  color: var(--sub);
  line-height: 1.9;
  margin-bottom: 22px;
}
.price-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
@media (min-width: 768px) {
  .price-cta { padding: 36px 32px; }
  .price-cta__title { font-size: 19px; }
  .price-cta__actions { flex-direction: row; justify-content: center; }
  .price-cta__actions .btn { min-width: 240px; }
}

/* =========================================================
   サービス一覧ページ
========================================================= */
/* 4サービスカード（2列・画像＋2リスト＋ボタン） */
.svcgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .svcgrid { grid-template-columns: 1fr 1fr; }
}
.icase__cta { margin-top: auto; padding-top: 18px; }

/* 目的別おすすめのラベル */
.tile-rec {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 0.02em;
  margin: 4px 0 8px;
}

/* サービス比較表 */
.compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__note { font-size: 11.5px; color: var(--sub); margin: 0 0 10px; }
.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
}
.compare-table th,
.compare-table td {
  border: 1px solid var(--border);
  padding: 13px 15px;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.compare-table thead th {
  background: var(--primary);
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  line-height: 1.5;
}
.compare-table tbody th {
  background: var(--cream);
  color: var(--primary);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}
.compare-table td { color: var(--sub); }

/* =========================================================
   導入事例：モデルケースカード
========================================================= */
.casecard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 24px 24px 26px;
}
.casecard__media {
  margin: -24px -24px 16px;
  aspect-ratio: 16 / 9;
}
.casecard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.casecard__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  line-height: 1.5;
}
.casecard__tag--ind { background: var(--cream); color: var(--gold-dark); }
.casecard__tag--svc {
  background: rgba(31,111,139,0.10);
  color: var(--accent-blue);
  border: 1px solid rgba(31,111,139,0.25);
}
.casecard__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  line-height: 1.6;
  margin-bottom: 14px;
}
.casecard__row { margin-bottom: 12px; }
.casecard__label {
  display: block;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.casecard__text { font-size: 14.5px; color: var(--sub); line-height: 1.8; }
.casecard__cta { margin-top: auto; padding-top: 16px; }
@media (min-width: 768px) {
  .casecard { padding: 28px 26px 30px; }
  .casecard__media { margin: -28px -26px 18px; }
  .casecard__title { font-size: 18px; }
  .casecard__text { font-size: 14.5px; }
}

/* =========================================================
   導入事例：ピックアップ事例（横長カード）
========================================================= */
.pickcase {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto 28px;
}
.pickcase__media { position: relative; aspect-ratio: 16 / 10; order: -1; }
.pickcase__body { padding: 24px 22px; }
.pickcase__badge {
  display: inline-block;
  background: var(--gold-dark);
  color: #fff;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.pickcase__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--primary);
  line-height: 1.55;
  margin-bottom: 8px;
}
.pickcase__stat {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 14px;
}
.pickcase__stat b {
  font-family: var(--inter);
  color: var(--gold-dark);
  font-size: 20px;
  letter-spacing: 0.01em;
  margin: 0 2px;
}
.pickcase__row { margin-bottom: 11px; }
.pickcase__label {
  display: block;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.pickcase__text { font-size: 14.5px; color: var(--sub); line-height: 1.85; }
.pickcase__voice {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.9;
  margin: 14px 0 18px;
}
.pickcase__voice span { display: block; font-size: 11px; color: var(--sub); margin-top: 6px; }
@media (min-width: 768px) {
  .pickcase { grid-template-columns: 1fr 1.1fr; }
  .pickcase__media { order: 0; aspect-ratio: auto; min-height: 100%; }
  .pickcase__body { padding: 34px 36px; }
  .pickcase__title { font-size: 22px; }
}

/* =========================================================
   FAQ カテゴリナビ
========================================================= */
.faqnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
}
.faqnav a {
  display: inline-block;
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--gold);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.faqnav a:hover { background: var(--cream); border-bottom-color: var(--accent-blue); }
@media (min-width: 768px) {
  .faqnav a { font-size: 13.5px; padding: 11px 18px; }
}

/* =========================================================
   Fade-in animations
========================================================= */
.js-fade {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.js-fade.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-fade { opacity: 1; transform: none; transition: none; }
  .sticky, .drawer, .drawer__panel { transition: none; }
}

/* =========================================================
   出張型AI研修：カリキュラム注記の文字サイズ（service-onsite-ai-training.html 専用）
========================================================= */
.curriculum-note--large { font-size: 14.5px; line-height: 1.9; }
@media (min-width: 768px) {
  .curriculum-note--large { font-size: 15px; }
}
.industry-note--large { font-size: 14.5px; line-height: 1.9; }
@media (min-width: 768px) {
  .industry-note--large { font-size: 15.5px; }
}

/* =========================================================
   Web実装：料金の相談ボタン（service-web-implementation.html 専用）
========================================================= */
.price-consult__btn { min-width: 320px; }
@media (max-width: 767px) {
  .price-consult__btn { display: block; width: 100%; min-width: 0; }
}

/* =========================================================
   導入事例：丸型イラストアイコン（cases.html 専用）
========================================================= */
.case-icon {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
  display: block;
  margin: 0 auto;
}
.pickcase__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  background: var(--cream);
}
/* ピックアップ事例は一回り大きく（人物アイコン） */
.pickcase__icon .case-icon--lg { width: 140px; height: 140px; }
.casecard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 16px;
}
@media (min-width: 600px) {
  .case-icon { width: 112px; height: 112px; }
}
@media (min-width: 900px) {
  .case-icon { width: 120px; height: 120px; }
}

/* =========================================================
   お問い合わせ：確認画面 / 完了画面（confirm.php・thanks.html 専用）
========================================================= */
.confirm-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 28px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.confirm-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.confirm-table th,
.confirm-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.8;
}
.confirm-table th {
  width: 38%;
  color: var(--sub);
  font-weight: 600;
  white-space: nowrap;
}
.confirm-table td { color: var(--text); word-break: break-word; }
.confirm-errors {
  list-style: disc;
  margin: 0 0 20px 1.2em;
  color: #9a3b3b;
  font-size: 14px;
  line-height: 1.9;
}
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.thanks-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 32px 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 600px) {
  .confirm-table th { width: 30%; }
}

/* =========================================================
   会社概要：関連会社の外部リンク（company.html 専用）
========================================================= */
.company-link {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.company-link:hover {
  color: var(--gold-dark);
  text-decoration-color: var(--gold-dark);
}


/* =========================================================================
   PREMIUM OVERLAY — 「金の伴走線」 Edition
   ハイエンド制作会社品質へのアップグレード・レイヤー（全ページ共通）
   - 既存のクラス構造・HTMLは一切変更せず、このレイヤーのみで上書き
   - タイポグラフィ：Marcellus（欧文ディスプレイ）× Noto Serif JP（見出し）
   - シグネチャー：1pxのゴールド罫線＝「伴走」を貫くモチーフ
   - モーション：ヒーローのロード演出＋スタッガー出現／reduced-motion対応
========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --primary: #0A314F;
  --primary-dark: #041A2C;
  --secondary: #1F6F8B;
  --gold: #C5A45C;
  --gold-bright: #DCC189;
  --gold-dark: #A8853E;
  --base: #FBFAF6;
  --cream: #F4EFE4;
  --white: #FFFFFF;
  --text: #1B2630;
  --sub: #5B6570;
  --border: #E4DECE;

  --display: "Marcellus", "Noto Serif JP", serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --header-h: 72px;
}

body {
  font-size: 15.5px;
  color: var(--text);
  background: var(--base);
  line-height: 2;
}

::selection { background: var(--primary); color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- 2. Header ---------- */
.header {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(228,222,206,0.7);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-soft), background 0.45s var(--ease-soft);
}
.header.is-scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 0 rgba(197,164,92,0.35), 0 16px 40px -18px rgba(4,26,44,0.18);
}
.header.is-hidden { transform: translateY(-105%); }

.header__inner { min-height: var(--header-h); }

.header__logo { gap: 12px; }
.header__logo-mark {
  background: var(--primary);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 6px 9px 5px;
  box-shadow: inset 0 0 0 1px rgba(220,193,137,0.55);
  position: relative;
}
.header__logo-text {
  font-size: 15px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.gnav__link, .gnav__toggle {
  font-size: 13.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.gnav__link::after { bottom: 2px; transition: transform 0.35s var(--ease-out); }
.gnav__link[aria-current="page"] { color: var(--gold-dark); }
.gnav__link[aria-current="page"]::after { transform: scaleX(1); }

.gnav__dropdown {
  border: none;
  border-top: 1px solid var(--gold);
  box-shadow: 0 30px 70px -20px rgba(4,26,44,0.28);
  padding: 10px;
  border-radius: 0;
}

.header__cta {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--white);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  padding: 12px 20px;
  box-shadow: inset 0 0 0 1px rgba(220,193,137,0.4);
  transition: color 0.35s var(--ease-soft);
  isolation: isolate;
}
.header__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  transform: translateX(-101%);
  transition: transform 0.45s var(--ease-out);
}
.header__cta:hover { filter: none; }
.header__cta:hover::before { transform: translateX(0); }

/* ---------- 3. Drawer（モバイル） ---------- */
.drawer__panel { background: var(--primary-dark); }
.drawer__nav a { color: rgba(255,255,255,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.06em; }
.drawer__nav a:hover { color: var(--gold-bright); }
.drawer__group-label {
  font-family: var(--display);
  color: var(--gold);
  letter-spacing: 0.35em;
  font-size: 11px;
}
.drawer__sub { color: rgba(255,255,255,0.66); }
.drawer__cta {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  letter-spacing: 0.1em;
}

/* ---------- 4. Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 17px 36px;
  border-width: 1px;
  transition: color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft),
              transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-soft),
              background 0.4s var(--ease-soft);
}
.btn--large { padding: 19px 42px; font-size: 14.5px; }

.btn--primary {
  background: linear-gradient(135deg, #CDAC64 0%, #B08B45 100%);
  box-shadow: 0 12px 30px -10px rgba(168,133,62,0.55), inset 0 0 0 1px rgba(255,255,255,0.22);
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-22deg);
  transition: left 0.7s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover {
  background: linear-gradient(135deg, #D6B670 0%, #A8853E 100%);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -12px rgba(168,133,62,0.65), inset 0 0 0 1px rgba(255,255,255,0.3);
}
.btn--primary:hover::after { left: 125%; }

.btn--secondary {
  background: transparent;
  border-color: var(--primary);
}
.btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.btn--secondary:hover { background: transparent; color: var(--white); }
.btn--secondary:hover::before { transform: scaleX(1); }

.btn--ghost {
  border-color: rgba(220,193,137,0.8);
  color: var(--white);
}
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.btn--ghost:hover { background: transparent; border-color: var(--gold); color: var(--primary-dark); }
.btn--ghost:hover::before { transform: scaleX(1); }

/* ---------- 5. Section commons ---------- */
.section { padding-top: clamp(72px, 9vw, 124px); padding-bottom: clamp(72px, 9vw, 124px); }

.section__eyebrow {
  font-family: var(--display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold-dark);
  margin-bottom: 18px;
}
.section__eyebrow::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 14px auto 0;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(197,164,92,0) 100%);
}
.section__title {
  font-size: clamp(25px, 3.4vw, 38px);
  letter-spacing: 0.06em;
  line-height: 1.65;
  margin-bottom: 30px;
  font-feature-settings: "palt";
}
.section__lead {
  font-size: 15.5px;
  line-height: 2.2;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(40px, 5vw, 60px);
}
@media (min-width: 900px) {
  .section__title { font-size: clamp(28px, 3.2vw, 38px); }
}

/* ---------- 6. Hero（全ページ共通 .shero--bg） ---------- */
.shero--bg::before {
  background:
    linear-gradient(92deg, rgba(4,26,44,0.9) 0%, rgba(4,26,44,0.72) 44%, rgba(10,49,79,0.34) 100%),
    linear-gradient(180deg, rgba(4,26,44,0.42) 0%, rgba(4,26,44,0.06) 45%, rgba(4,26,44,0.62) 100%);
}
.shero--bg .shero__body { padding: 76px 0 68px; }

.shero__eyebrow {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.4em;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.shero__eyebrow::before {
  content: "";
  width: 52px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.shero__title {
  font-size: clamp(29px, 4.5vw, 52px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 26px;
  font-feature-settings: "palt";
  text-shadow: 0 2px 30px rgba(4,26,44,0.4);
}
.shero__lead {
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 2.15;
  opacity: 0.92;
  margin-bottom: 40px;
  max-width: 620px;
  text-shadow: 0 1px 16px rgba(4,26,44,0.5);
}
@media (min-width: 768px) {
  .shero--bg { min-height: 520px; }
  .shero--bg .shero__body { padding: 110px 0; max-width: 700px; }
}

/* TOPページ（背景スライダー有り）はより大きく */
@media (min-width: 900px) {
  .shero--bg:has(.fvslide) { min-height: min(86vh, 820px); }
}

/* ヒーロー・ロード演出（body.is-loaded で発火） */
.shero__eyebrow,
.shero__title,
.shero__lead,
.shero__actions {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.shero__eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-out) 0.65s;
}
body.is-loaded .shero__eyebrow,
body.is-loaded .shero__title,
body.is-loaded .shero__lead,
body.is-loaded .shero__actions { opacity: 1; transform: translateY(0); }
body.is-loaded .shero__eyebrow::before { transform: scaleX(1); }
body.is-loaded .shero__eyebrow { transition-delay: 0.15s; }
body.is-loaded .shero__title   { transition-delay: 0.3s; }
body.is-loaded .shero__lead    { transition-delay: 0.48s; }
body.is-loaded .shero__actions { transition-delay: 0.64s; }

/* スクロール・キュー（JSが index のヒーローに注入） */
.scroll-cue {
  position: absolute;
  left: clamp(16px, 4vw, 48px);
  bottom: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft) 1.4s;
}
body.is-loaded .scroll-cue { opacity: 1; }
.scroll-cue__label {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: rgba(255,255,255,0.78);
  writing-mode: vertical-rl;
}
.scroll-cue__line {
  width: 1px;
  height: 72px;
  background: rgba(220,193,137,0.35);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold-bright);
  animation: cueDrop 2.4s var(--ease-soft) infinite;
}
@keyframes cueDrop {
  0%   { top: -100%; }
  55%  { top: 0; }
  100% { top: 100%; }
}
@media (min-width: 900px) {
  .scroll-cue { display: flex; }
}

/* ---------- 7. 写真の質感（ホバーで静かなズーム） ---------- */
.phframe { overflow: hidden; }
.phframe img {
  transition: transform 1.4s var(--ease-out), opacity 0.6s ease;
  will-change: transform;
}
.icase:hover .phframe img,
.linkcard:hover .phframe img,
.casecard:hover .phframe img,
.bizcase:hover .phframe img,
.lesson:hover .phframe img,
a:hover > .phframe img,
a:hover .phframe img { transform: scale(1.045); }

/* ---------- 8. Cards（共通の上質化） ---------- */
.icase,
.merit__card,
.linkcard,
.casecard,
.tilegrid__item,
.subsidy__card,
.featgrid > *,
.infocard {
  border-color: var(--border);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft);
}
.icase:hover,
.merit__card:hover,
.casecard:hover,
.tilegrid__item:hover {
  transform: translateY(-4px);
  border-color: rgba(197,164,92,0.65);
  box-shadow: 0 26px 50px -22px rgba(4,26,44,0.22);
}
.linkcard:hover {
  transform: translateY(-4px);
  border-color: rgba(197,164,92,0.65);
  box-shadow: 0 26px 50px -22px rgba(4,26,44,0.22);
}

.merit__num,
.lesson__no,
.flow__step,
.subsidy__num,
.pickcase__stat {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.linkcard__eyebrow,
.icase__sub,
.footer__col-title,
.pickcase__label,
.bizcase__label,
.democta__eyebrow {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.3em;
}

/* ---------- 9. FAQ ---------- */
.faq__item {
  border-color: var(--border);
  transition: border-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.faq__item:hover { border-color: rgba(197,164,92,0.6); }
.faq__item[open] {
  border-color: rgba(197,164,92,0.7);
  box-shadow: 0 18px 40px -22px rgba(4,26,44,0.16);
}
.faq__q { letter-spacing: 0.04em; }

/* ---------- 10. Demo CTA（紺の帯） ---------- */
.democta { position: relative; }
.democta::before,
.democta::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(197,164,92,0) 0%, rgba(197,164,92,0.7) 50%, rgba(197,164,92,0) 100%);
  z-index: 2;
}
.democta::before { top: 0; }
.democta::after { bottom: 0; }
.democta__title {
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: 0.07em;
  line-height: 1.7;
}

/* ---------- 11. Forms ---------- */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form select,
.contact__form textarea {
  border: 1px solid #D9D2BF;
  background: var(--white);
  transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197,164,92,0.18);
}

/* ---------- 12. Footer ---------- */
.footer {
  padding: clamp(56px, 8vw, 96px) 0 44px;
  border-top: 1px solid rgba(197,164,92,0.45);
  position: relative;
  overflow: hidden;
}
.footer__wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 7.5vw, 92px);
  letter-spacing: 0.14em;
  line-height: 1;
  color: rgba(255,255,255,0.055);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  margin: 0 0 clamp(24px, 4vw, 48px);
}
.footer__name { font-size: 18px; letter-spacing: 0.08em; margin-bottom: 14px; }
.footer__addr { font-size: 12.5px; line-height: 2.1; }
.footer__col-title { font-size: 11px; color: var(--gold); margin-bottom: 16px; }
.footer__links a {
  font-size: 13px;
  padding: 7px 0;
  position: relative;
  transition: color 0.3s ease, padding-left 0.3s var(--ease-out);
}
.footer__links a:hover { color: var(--gold-bright); padding-left: 12px; }
.footer__links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease-out);
}
.footer__links a:hover::before { width: 8px; }
.footer__copy { font-family: var(--display); letter-spacing: 0.14em; }

/* ---------- 13. Tables / breadcrumb / misc ---------- */
.breadcrumb { font-size: 12px; letter-spacing: 0.06em; }

.subsidy__table th,
.compare-table th { letter-spacing: 0.06em; }

.sticky { box-shadow: 0 -14px 36px -16px rgba(4,26,44,0.25); }
.sticky__btn {
  background: linear-gradient(135deg, #CDAC64 0%, #B08B45 100%);
  letter-spacing: 0.08em;
}

/* ---------- 14. Reveal（スタッガー対応） ---------- */
.js-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.js-fade.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .shero__eyebrow, .shero__title, .shero__lead, .shero__actions {
    opacity: 1; transform: none; transition: none;
  }
  .shero__eyebrow::before { transform: none; transition: none; }
  .scroll-cue__line::after { animation: none; }
  .phframe img { transition: none; }
  .js-fade { opacity: 1; transform: none; transition: none; }
  .btn, .btn::before, .btn::after, .header__cta::before { transition: none; }
}

/* ---------- 16. 最終調整 ---------- */
/* 日本語見出しの自然な改行（対応ブラウザのみ／非対応環境は従来通り） */
.shero__title,
.section__title,
.democta__title {
  word-break: auto-phrase;
}

/* 確認用カラースイッチャーの意匠を本体デザインに合わせる */
.color-switcher__tab {
  background: var(--primary-dark);
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.28em;
  box-shadow: inset 0 0 0 1px rgba(220,193,137,0.45);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
/* タブ：hover＝ゴールド背景＋ネイビー文字 */
.color-switcher__tab:hover {
  background: var(--gold);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px rgba(184,134,11,0.65);
}
/* タブ：パネル展開中（active）＝白背景＋ネイビー文字＋ゴールドの太め枠線 */
.color-switcher.is-open .color-switcher__tab {
  background: #fff;
  color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* infocard 見出しも欧文ディスプレイで統一 */
.infocard__item dt {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.24em;
}

/* =========================================================
   テーマアクセント（CSS変数 --accent で管理）
   既定はオレンジ。ページ別に body.theme-xxx で上書き。
   配色確認スイッチャーからも body のテーマクラスを切り替え可能。
   ※ サブ（btn--secondary）・白抜き・ghost ボタンは変更しない
========================================================= */
.theme-orange { --accent:#f28c28; --accent-dark:#e67612; --accent-soft:rgba(242,140,40,0.12); --accent-shadow:rgba(242,140,40,0.28); }
.theme-blue   { --accent:#2f80ed; --accent-dark:#1f65c8; --accent-soft:rgba(47,128,237,0.12); --accent-shadow:rgba(47,128,237,0.28); }
.theme-green  { --accent:#2fa36b; --accent-dark:#238557; --accent-soft:rgba(47,163,107,0.12); --accent-shadow:rgba(47,163,107,0.28); }
.theme-purple { --accent:#7c5cff; --accent-dark:#6246d9; --accent-soft:rgba(124,92,255,0.12); --accent-shadow:rgba(124,92,255,0.28); }
.theme-gold   { --accent:#c8a35a; --accent-dark:#a98232; --accent-soft:rgba(200,163,90,0.14); --accent-shadow:rgba(200,163,90,0.28); }

/* 主要CTAボタン（背景・hover・影が --accent に追従） */
.btn--primary,
.header__cta,
.drawer__cta,
.sticky__btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 24px var(--accent-shadow);
}
.btn--primary:hover,
.header__cta:hover,
.drawer__cta:hover,
.sticky__btn:hover {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px var(--accent-shadow);
  filter: none;
}

/* ページアクセント：英字ラベル・カード上ライン・番号・料金強調が --accent に追従
   （いずれも明るい背景上のため、可読性確保に --accent-dark を使用） */
.section__eyebrow { color: var(--accent-dark); }
.tilegrid--bordered .tilegrid__item { border-top-color: var(--accent); }
.bizcase__label,
.flow__step,
.merit__num,
.subsidy__num--total { color: var(--accent-dark); }

/* 配色確認スイッチャー：各色の見分け＋選択中の明確化 */
.color-switcher__button[data-theme="orange"] { border-left-color: #f08a2e; }
.color-switcher__button[data-theme="blue"]   { border-left-color: #2f74c9; }
.color-switcher__button[data-theme="green"]  { border-left-color: #2fa86c; }
.color-switcher__button[data-theme="purple"] { border-left-color: #8159d9; }
.color-switcher__button[data-theme="gold"]   { border-left-color: #d4a558; }
.color-switcher__button.is-active::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
  color: #B8860B;
}

/* 本番：配色確認ウィジェットは非表示（確定テーマカラーを上書きしないよう無効化） */
.color-switcher { display: none !important; }

/* =========================================================
   お知らせ（news.json 読み込み・index.html）
========================================================= */
.news-list { margin-top: 8px; }
.news-item { border-bottom: 1px solid var(--border); }
.news-item:first-child { border-top: 1px solid var(--border); }
.news-item__link {
  display: grid;
  gap: 4px;
  padding: 18px 4px;
  transition: background 0.2s ease;
}
.news-item__link:hover { background: var(--base); }
.news-item__meta { display: flex; align-items: center; gap: 12px; }
.news-item__date {
  font-family: var(--inter);
  font-size: 13px;
  color: var(--sub);
  letter-spacing: 0.04em;
}
.news-item__category {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-dark);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.news-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.7;
}
.news-item__link:hover .news-item__title { color: var(--accent-dark); }
.news-loading,
.news-empty,
.news-error {
  font-size: 14px;
  color: var(--sub);
  padding: 16px 4px;
}
.news-error { color: #b3261e; }
@media (min-width: 768px) {
  .news-item__link {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 22px;
    padding: 18px 6px;
  }
}
.news-item__summary {
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.8;
  margin-top: 6px;
}
@media (min-width: 768px) {
  /* PCでは日付・カテゴリ＝左、タイトル＋概要＝右の2カラム */
  .news-item__link { grid-template-columns: auto 1fr; }
  .news-item__title, .news-item__summary { grid-column: 2; }
}

/* カテゴリ色分け（控えめ・お知らせ／研修情報／補助金情報／重要） */
.news-cat--info     { color: var(--sub);      border-color: var(--border);  background: var(--base); }
.news-cat--training { color: #1f579f; border-color: #1f579f; background: rgba(47,116,201,0.08); }
.news-cat--subsidy  { color: #8a6d1f; border-color: #b07f30; background: rgba(200,163,90,0.14); }
.news-cat--important { color: #b3261e; border-color: #b3261e; background: rgba(179,38,30,0.08); }

/* お知らせ詳細（news-detail.html） */
.news-detail { max-width: 760px; margin: 0 auto; }
.news-detail__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.news-detail__date {
  font-family: var(--inter);
  font-size: 13px;
  color: var(--sub);
  letter-spacing: 0.04em;
}
.news-detail__category {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.news-detail__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.45;
  color: var(--primary);
  margin-bottom: 18px;
}
.news-detail__summary {
  font-size: 15px;
  color: var(--text);
  line-height: 1.9;
  padding: 14px 16px;
  background: var(--cream);
  border-left: 3px solid var(--accent);
  margin-bottom: 24px;
}
.news-detail__body p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.95;
  margin-bottom: 16px;
}
.news-detail__back { margin-top: 32px; }

/* =========================================================
   サービスカードのサービス名＋強調タグ（index.html / services.html）
========================================================= */
.service-card__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.service-card__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.service-badge--blue   { color: #2f80ed; background: rgba(47,128,237,0.10); }
.service-badge--green  { color: #2fa36b; background: rgba(47,163,107,0.10); }
.service-badge--purple { color: #7c5cff; background: rgba(124,92,255,0.10); }
.service-badge--gold   { color: #a98232; background: rgba(200,163,90,0.14); }
@media (max-width: 640px) {
  .service-card__title { align-items: flex-start; }
  .service-card__badges { margin-top: 4px; }
  .service-badge { font-size: 11px; padding: 4px 7px; }
}

/* ヘッダーロゴ画像（images/logo/site-logo.png） */
.header__logo-img { height: 36px; width: auto; object-fit: contain; display: block; }
@media (max-width: 640px) { .header__logo-img { height: 30px; } }

/* =========================================================
   グローバルメニュー：ネイビー背景（全ページ共通／テーマカラーは保持）
========================================================= */
.header,
.header.is-scrolled {
  background: #0d2f45;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18), 0 16px 40px -22px rgba(0,0,0,0.45);
}
.gnav__link,
.gnav__toggle { color: #ffffff; }
.gnav__link:hover,
.gnav__toggle:hover { color: var(--accent); }
.gnav__link[aria-current="page"] { color: #e8c270; }
.gnav__toggle-arrow { border-color: rgba(255,255,255,0.78); }
.header__instagram { color: #ffffff; }
.header__instagram:hover { color: var(--accent); }
.header__burger span { background: #ffffff; }

/* フッターの会社名部分のサイトロゴ */
.footer__logo { width: 180px; max-width: 100%; height: auto; display: block; margin-bottom: 14px; }
@media (max-width: 640px) { .footer__logo { width: 150px; } }