/* ==========================================================================
   簿記TOP LP（bookkeeping）
   Figma: PC 21351:2663 (1440px) / SP は Figma なし（PC からレスポンシブ展開）
   共通のヘッダー / フッター / ドロワー / モーダルは _shared/css/site-chrome.css
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --green: #0c866a;
  --green-light: #ddeeea;
  --green-pale: #cfe3de;
  --green-bg: #d4dddb;
  --orange: #d26500;
  --orange-red: #f36421;
  --yellow: #fff61c;
  --red: #eb5757;
  --text: #171818;
  --text-sub: #333;
  --gray-100: #f5f5f5;
  --gray-200: #e3e3e3;
  --gray-300: #cecece;
  --gray-500: #999;
  --link-blue: #0c4ced;
  /* 簿記TOP 固有 */
  --beige: #f4f3ec;
  --green-deep: #31776a;
  --green-main: #00957a;
  --heading: #384946;

  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-num: "DIN Alternate", "Arial Narrow", "Inter", sans-serif;
  --font-en: "Inter", "Hiragino Sans", sans-serif;

  --container: 1120px;
  --container-narrow: 930px;
  --header-h: 69px;
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  color: var(--text);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: separate; }
hr { border: 0; margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.bg-green {
  position: relative;
  background-color: var(--green);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 28px);
  background-position: 0 40px, 0 0;
  color: #fff;
}
.bg-green > * { position: relative; }

@media (max-width: 768px) { .pc-only { display: none !important; } }
@media (min-width: 769px) { .sp-only { display: none !important; } }


/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn--primary { background: var(--orange); }


/* ==========================================================================
   KV（Figma 22590:2697 / 1440x580）
   写真は右寄せ（Figma: 1706x602 を中心 +357px / 上 -19px に配置）。
   左 706px に白のフェード（kv-fade.svg）を重ねて文字の可読性を確保。
   内側の要素は Figma の座標をそのまま absolute で配置（1440 基準）
   ========================================================================== */
.kv {
  position: relative;
  height: 580px;
  background: var(--beige) url("../images/kv/kv-photo.jpg") calc(50% + 357px) -19px / 1706px 602px no-repeat;
  overflow: hidden;
}
.kv__fade {
  position: absolute;
  left: 0;
  top: 0;
  width: 706px;
  height: 580px;
  pointer-events: none;
}
.kv__inner {
  position: relative;
  width: 1440px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  font-family: "Noto Sans JP", var(--font-jp);
  font-weight: 900;
  color: var(--green-main);
}
.kv__inner > * { position: absolute; margin: 0; }

/* 手書き風「無料で学べる」+ 黄色マーカー（Figma フォント TA_oonishi のため 1 枚の画像に書き出し） */
.kv__catch { left: 114px; top: 61px; }
.kv__catch img { display: block; width: 223px; height: auto; }

.kv__title {
  left: 124px;
  top: 124.5px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: nowrap;
}
.kv__title-brand { margin-left: 3px; font-size: 34px; letter-spacing: .03em; }
.kv__title-main { margin-top: -6.5px; font-size: 95px; letter-spacing: .04em; }

/* 「日商簿記検定 3級 2級 1級 に対応 / 日商簿記合格ガイド」ボックス */
.kv__box {
  left: 127px;
  top: 293px;
  width: 464px;
  height: 138.5px;
  background: #edf6f5;
  border-radius: 8px;
}
.kv__sub {
  position: absolute;
  left: 17px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--heading);
  font-size: 27px;
  line-height: 1;
  white-space: nowrap;
}
.kv__grades { display: flex; gap: 6px; }
.kv__grade {
  position: relative;
  width: 53.2px;
  height: 46px;
  background: var(--heading);
  border-radius: 5.26px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.kv__grade-num { position: absolute; left: 7.2px; top: 7.5px; font-size: 39.4px; font-family: var(--font-num), "Noto Sans JP", sans-serif; }
.kv__grade-unit { position: absolute; left: 31.2px; top: 21.7px; font-size: 14.5px; }
.kv__guide {
  position: absolute;
  left: 13.5px;
  top: 67.5px;
  margin: 0;
  font-size: 47px;
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
}
.kv__guide-accent { color: #ea676f; }

/* 累計登録者数バッジ（黄色ピル） */
.kv__badge {
  left: 458.5px;
  top: 54px;
  width: 228.5px;
  height: 97.4px;
  background: #f7c600;
  border-radius: 80px;
  color: #563507;
  font-family: var(--font-jp);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.kv__badge > * { position: absolute; }
.kv__badge-label { left: 50%; top: 14px; transform: translateX(calc(-50% + 1.5px)); font-size: 15.8px; }
.kv__badge-num { left: 57px; top: 31px; font-family: var(--font-num); font-weight: 700; font-size: 63px; letter-spacing: .01em; }
.kv__badge-unit { left: 124.5px; top: 38px; font-size: 24.1px; }
.kv__badge-tail { left: 50%; top: 64.3px; transform: translateX(calc(-50% + 38px)); font-size: 18.1px; letter-spacing: .15em; }
.kv__badge-laurel { top: 11.5px; width: 49px; height: 68.6px; }
.kv__badge-laurel--left { left: 14px; transform: rotate(21.69deg); }
.kv__badge-laurel--right { right: 14px; transform: scaleX(-1) rotate(21.69deg); }

.kv__note {
  left: 127px;
  top: 446.5px;
  width: 471px;
  color: #353636;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .kv { height: 480px; background-position: calc(50% + 250px) -19px; }
  .kv__inner { transform: scale(.8); transform-origin: top left; width: 1250px; }
  .kv__fade { height: 480px; }
}

/* ==========================================================================
   簿記学習コンテンツ（Figma 23247:9506 / 21856:38905 の 2 回使用）
   ========================================================================== */
.contents { padding: 96px 40px 120px; background: var(--beige); }
.contents__inner { display: flex; flex-direction: column; align-items: center; gap: 76px; }
.contents__head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 726px; max-width: 100%; }
.contents__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--green-main);
  font-family: "Noto Sans JP", var(--font-jp);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.contents__title-sub { font-size: 32px; }
.contents__title-main { font-size: 52px; }
.contents__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #236a5d;
  font-family: "Noto Sans JP", var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.9;
  text-align: center;
  white-space: nowrap;
}
.contents__lead-line {
  display: inline-block;
  background: linear-gradient(#f2a50e, #f2a50e) left bottom / 100% 4px no-repeat;
}
.contents__sup { font-size: .645em; line-height: 1; vertical-align: super; }

.contents__body { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.contents__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.contents__card { overflow: hidden; background: #fff; border-radius: 8px; }
.contents__card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 0 16px;
  transition: opacity .2s;
}
.contents__card-link:hover { opacity: .8; }
.contents__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 84px;
  padding: 12px 16px;
  background: var(--green-main);
  color: #fff;
  font-family: "Noto Sans JP", var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.contents__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 16px;
}
/* サムネイル: コラージュ等は Figma の合成結果を 1 枚の画像（2x）で配置 */
.contents__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 516 / 290.25;
  overflow: hidden;
  border-radius: 11.8px;
  background: #edf6f5;
}
.contents__thumb > img { width: 100%; height: 100%; object-fit: cover; }

.contents__text {
  width: 100%;
  color: #161817;
  font-family: "Noto Sans JP", var(--font-jp);
  font-size: 16px;
  line-height: 1.7;
}
.contents__more {
  width: 100%;
  color: var(--green-main);
  font-family: "Noto Sans JP", var(--font-jp);
  font-size: 14px;
  line-height: 1.7;
}
.contents__note {
  color: #161817;
  font-family: "Noto Sans JP", var(--font-jp);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .contents__title-sub { font-size: 26px; }
  .contents__title-main { font-size: 40px; }
  .contents__lead { font-size: 20px; white-space: normal; }
}

/* ==========================================================================
   簿記学習コンテンツ一覧（Figma 21351:2771 / 緑背景・上角丸）
   ========================================================================== */
.llink {
  padding: 68px 40px 104px;
  background: var(--green-deep);
  border-radius: 72px 72px 0 0;
}
.llink__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.llink__title {
  width: 100%;
  color: #fff;
  font-family: "Noto Sans JP", var(--font-jp);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  text-align: center;
}
.llink__nav { width: 100%; }
.llink__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.llink__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.5px;
  height: 96px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  color: #236a5d;
  font-family: "Noto Sans JP", var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.7;
  text-align: center;
  transition: opacity .2s;
}
.llink__item:hover { opacity: .85; }
.llink__arrow { width: 17px; height: 12px; }

@media (min-width: 769px) and (max-width: 1200px) {
  .llink { border-radius: 48px 48px 0 0; }
  .llink__item { font-size: 18px; }
}

/* ==========================================================================
   About（簿記について） Figma 21351:2784
   ========================================================================== */
.about { background: var(--green-deep); }
.about__inner {
  padding: 96px 40px 120px;
  background: var(--beige);
  border-radius: 72px 72px 0 0;
}
.about__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.about__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.about__title { font-size: 44px; font-weight: 700; line-height: 1.5; color: var(--heading); }
.about__en { font-size: 14px; font-weight: 700; line-height: 1; color: var(--green-main); }

.about__body { display: flex; flex-direction: column; gap: 56px; width: 100%; }
.about__block { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.about__block--exam { gap: 28px; }
.about__subtitle { font-size: 32px; font-weight: 700; line-height: 1.5; text-align: center; color: var(--heading); }

.about__row { display: flex; align-items: flex-start; gap: 20px; width: 100%; }
.about__row--reverse { gap: 25px; }
.about__illust { flex: 0 0 358px; width: 358px; height: auto; border-radius: 8px; }
.about__text { flex: 1 1 0; min-width: 0; font-size: 16px; line-height: 1.7; color: #161817; }
.about__em { font-weight: 700; color: #c2840b; }

/* 級別カード */
.about__levels { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.about__level {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: #fff;
  border-radius: 8px;
}
.about__badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  padding-top: 28px;
  background: var(--green-main);
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.about__badge-num { font-size: 72px; }
.about__badge-unit { font-size: 28px; }
.about__level-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-width: 0; }
.about__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.about__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--heading);
  border-radius: 21px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--heading);
  white-space: nowrap;
}
.about__tag--fill { background: var(--heading); color: #fff; }
.about__level-text { font-size: 16px; line-height: 1.7; color: #161817; }

@media (min-width: 769px) and (max-width: 1200px) {
  .about__inner { padding: 80px 32px 96px; }
  .about__illust { flex-basis: 300px; width: 300px; }
}

/* ==========================================================================
   Merits（簿記を学ぶメリットと広がる選択肢） Figma 21351:3094
   ========================================================================== */
.merits { background: var(--beige); }
.merits__inner {
  padding: 96px 40px 120px;
  background: var(--green-deep);
  border-radius: 72px 72px 0 0;
  color: #fff;
}
.merits__container { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.merits__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.merits__title { font-size: 44px; font-weight: 700; line-height: 1.5; }
.merits__en { font-size: 14px; font-weight: 700; line-height: 1; }

.merits__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
  width: 100%;
}
.merits__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px;
  background: #fff;
  border-radius: 8px;
  color: #161817;
}
.merits__card-title { display: flex; align-items: flex-start; gap: 12px; }
.merits__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 4px;
  padding-bottom: 2px;
  background: var(--heading);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.merits__card-heading { flex: 1 1 0; min-width: 0; font-size: 28px; font-weight: 700; line-height: 1.5; color: var(--heading); }
.merits__accent { font-style: normal; color: var(--green-main); }
.merits__card-text { font-size: 16px; line-height: 1.7; }

@media (min-width: 769px) and (max-width: 1200px) {
  .merits__inner { padding: 80px 32px 96px; }
  .merits__card { padding: 24px; }
  .merits__card-heading { font-size: 24px; }
}

/* ==========================================================================
   効果的な学習方法 (Steps)  Figma: 21351:3146
   ========================================================================== */
.steps {
  padding: 96px 40px 120px;
  background: var(--beige);
  border-radius: 72px 72px 0 0;
}
.steps__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.steps__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.steps__title { font-size: 44px; font-weight: 700; line-height: 1.5; color: var(--heading); }
.steps__en { font-size: 14px; font-weight: 700; line-height: 1; color: var(--green-main); }

.steps__body { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.steps__lead { font-size: 16px; line-height: 1.7; color: #161817; }
.steps__list { display: flex; flex-direction: column; gap: 16px; }

/* Card */
.steps__card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: #fff;
  border-radius: 8px;
}
.steps__label { display: flex; align-items: center; gap: 16px; flex-shrink: 0; width: 260px; }
.steps__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background: var(--green-main);
  border-radius: 50%;
}
.steps__icon img { width: auto; height: auto; }
.steps__icon--labeled { justify-content: flex-start; padding-top: 18px; }
.steps__icon-label {
  font-family: "Zen Maru Gothic", var(--font-jp);
  font-size: 17.15px;
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  white-space: nowrap;
}
.steps__icon--labeled img { margin-top: 2px; }
.steps__label-text { display: flex; flex-direction: column; gap: 4px; width: 120px; padding-bottom: 8px; }
.steps__num { font-size: 20px; font-weight: 800; line-height: 1; color: var(--green-main); }
.steps__num-digit { font-size: 40px; }
.steps__name { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--heading); }

.steps__content { display: flex; flex-direction: column; gap: 16px; flex: 1 1 0; min-width: 0; }
.steps__text { display: flex; flex-direction: column; gap: 12px; }
.steps__headline { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--heading); }
.steps__desc { font-size: 16px; line-height: 1.7; color: #161817; }
.steps__em { font-weight: 700; color: #c2840b; }

/* Buttons */
.steps__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.steps__action-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.steps__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 8px 16px;
  border: 1px solid #236a5d;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #236a5d;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.steps__btn:hover { background: #236a5d; color: #fff; }
.steps__btn:hover .steps__btn-icon { filter: brightness(0) invert(1); }
.steps__btn-icon { width: 9px; height: 16px; margin-left: 2px; }
.steps__btn-icon--download { width: 17px; height: 12px; margin-left: 0; }
.steps__btn:hover .steps__btn-icon--download { filter: none; }
.steps__note { font-size: 12px; line-height: 1.7; color: #161817; white-space: nowrap; }

@media (min-width: 769px) and (max-width: 1200px) {
  .steps__card { align-items: flex-start; }
  .steps__label { flex-direction: column; align-items: flex-start; width: 140px; }
  .steps__label-text { width: auto; }
}

/* ==========================================================================
   08 講義動画（Videos）+ 講師紹介 / 共通カルーセル
   Figma: 21351:3308
   ========================================================================== */

/* ---------- 共通カルーセル ---------- */
.carousel { width: 100%; }
.carousel__nav { display: flex; gap: 12px; }
.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: opacity .2s;
}
.carousel__btn img { width: 9px; height: 16px; }
.carousel__btn--prev img { transform: scaleX(-1); margin-right: 2px; }
.carousel__btn--next img { margin-left: 2px; }
.carousel__btn:hover:not(:disabled) { opacity: .75; }
.carousel__btn:disabled { cursor: default; }
.carousel__btn:disabled img { opacity: .3; } /* Figma: 背景はそのまま、矢印だけ淡色 */
.carousel__track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto; /* PC はコンテナ幅で切り、右端のカードは見切れさせる（Figma） */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { flex: 0 0 auto; scroll-snap-align: start; }

/* ---------- Videos ---------- */
.videos {
  overflow: hidden;
  padding: 96px 40px 120px;
  background: var(--green-deep);
  border-radius: 72px 72px 0 0;
  color: #fff;
}
.videos__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.videos__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.videos__title { font-size: 44px; font-weight: 700; line-height: 1.5; }
.videos__en { font-size: 14px; font-weight: 700; line-height: 1; }

.videos__rows { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.videos__row { display: flex; flex-direction: column; gap: 12px; }
.videos__row-head { display: flex; align-items: center; justify-content: space-between; }
.videos__row-title { font-size: 24px; font-weight: 700; line-height: 1.5; }
.videos .carousel__btn { background: #fff; }

.videos__card { width: 238px; }
.videos__card-link { display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; }
.videos__card-link:hover { opacity: .85; }
.videos__thumb { width: 238px; height: 134px; object-fit: cover; border-radius: 8px; }
.videos__caption { font-size: 16px; font-weight: 700; line-height: 1.5; }

.videos__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  transition: opacity .2s;
}
.videos__more:hover { opacity: .75; }
.videos__more img { width: 9px; height: 16px; }

/* ---------- 講師紹介 ---------- */
.instructor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--container-narrow);
  padding: 28px 32px;
  background: #fff;
  border-radius: 8px;
  color: #161817;
}
.instructor__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--heading);
  border-radius: 8px;
  color: #fff;
  line-height: 1.5;
}
.instructor__title { font-size: 18px; font-weight: 700; }
.instructor__en { font-size: 12px; font-weight: 700; }
.instructor__body { display: flex; align-items: flex-start; gap: 24px; }
.instructor__photo { flex: 0 0 280px; width: 280px; height: 280px; object-fit: cover; }
.instructor__text { display: flex; flex: 1 1 0; flex-direction: column; gap: 12px; min-width: 0; }
.instructor__profile { display: flex; flex-direction: column; gap: 4px; }
.instructor__school { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--heading); }
.instructor__name { font-weight: 700; line-height: 1.5; color: var(--heading); }
.instructor__name-main { font-size: 24px; }
.instructor__name-sub { font-size: 16px; }
.instructor__bio { font-size: 16px; line-height: 1.7; }
.instructor__books { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.7; }
.instructor__books-title { font-weight: 700; }
.instructor__sns { display: flex; gap: 12px; }
.instructor__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: opacity .2s;
}
.instructor__sns a:hover { opacity: .7; }
.instructor__message {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: #edf6f5;
  border: 1px solid #c9d9d6;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.7;
}
.instructor__message-title { font-weight: 700; }

@media (min-width: 769px) and (max-width: 1200px) {
  .videos { padding: 80px 24px 96px; }
  .instructor__photo { flex-basis: 220px; width: 220px; height: 220px; }
}

/* ==========================================================================
   Books（教材・問題集） Figma 21351:3423
   ========================================================================== */
.books {
  padding: 96px 40px 120px;
  background: var(--beige);
  border-radius: 72px 72px 0 0;
}
.books__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.books__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.books__title { font-size: 44px; font-weight: 700; line-height: 1.5; color: var(--heading); white-space: nowrap; }
.books__en { font-size: 14px; font-weight: 700; line-height: 1; color: var(--green-main); }
.books__body { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.books__lead { width: 100%; max-width: var(--container-narrow); font-size: 16px; line-height: 1.7; color: #161817; }
.books__lead-em { font-weight: 700; color: var(--green-main); text-decoration: underline; text-underline-position: from-font; }
.books__groups { display: flex; flex-direction: column; gap: 48px; width: 100%; }
.books__group { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.books__group-title { font-size: 32px; font-weight: 700; line-height: 1.5; text-align: center; color: var(--heading); }
.books__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; width: 100%; }

.book {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 262px; padding: 20px 16px;
  background: #fff; border-radius: 8px;
}
.book__head { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 8px; width: 100%; }
.book__cover { width: auto; height: 160px; object-fit: contain; }
.book__name { width: 100%; font-size: 16px; font-weight: 700; line-height: 1.5; color: #161817; }
.book__action { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.book__label { font-size: 12px; line-height: 1.5; text-align: center; color: #161817; white-space: nowrap; }
.book__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 56px; padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center;
  transition: opacity .2s;
}
.book__btn:hover { opacity: .85; }
.book__btn--outline { border: 1px solid var(--orange); color: var(--orange); }
.book__btn--fill { background: var(--orange); color: #fff; }
.book__btn-note { font-size: 12px; }

@media (min-width: 769px) and (max-width: 1200px) {
  .book { width: calc(50% - 12px); max-width: 262px; }
}

/* ==========================================================================
   簿記対策コラム (Column)  Figma: 21351:3451
   ========================================================================== */
.column {
  padding: 96px 40px 120px;
  background: var(--green-deep);
  border-radius: 72px 72px 0 0;
  color: #fff;
}
.column__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.column__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.column__title { font-size: 44px; font-weight: 700; line-height: 1.5; }
.column__en { font-size: 14px; font-weight: 700; line-height: 1; }

.column__card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 28px 32px;
  background: #fff;
  border-radius: 8px;
  color: #161817;
}
.column__banner { flex-shrink: 0; width: 421px; height: 237px; object-fit: cover; }
.column__content { display: flex; flex-direction: column; gap: 16px; flex: 1 1 0; min-width: 0; }
.column__desc { font-size: 16px; line-height: 1.7; }
.column__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  height: 56px;
  padding: 8px 16px;
  border: 1px solid #236a5d;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #236a5d;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.column__btn:hover { background: #236a5d; color: #fff; }
.column__btn:hover .column__btn-icon { filter: brightness(0) invert(1); }
.column__btn-icon { width: 9px; height: 16px; margin-left: 2px; }

@media (min-width: 769px) and (max-width: 1200px) {
  .column__banner { width: 40%; height: auto; }
}

/* ==========================================================================
   11 受講者の声（Voices）
   Figma: 21351:3473  ※カルーセル共通スタイルは 08-videos.css を参照
   ========================================================================== */
.voices { background: var(--green-deep); }
.voices__panel {
  overflow: hidden;
  padding: 96px 40px 120px;
  background: var(--beige);
  border-radius: 72px 72px 0 0;
  color: #161817;
}
.voices__inner { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.voices__heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; }
.voices__title { font-size: 44px; line-height: 1.5; color: var(--heading); }
.voices__en { font-size: 14px; line-height: 1; color: var(--green-main); }

.voices__content { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.voices__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.voices__carousel { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.voices__nav { display: none; justify-content: flex-end; } /* PC は 3 列表示のためナビ不要。SP は top/ と同じくリスト右上 */

.voices__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}
.voices__card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.voices__card-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.voices__avatar {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
  background: #edf6f5;
  border-radius: 50%;
}
.voices__avatar img { position: absolute; max-width: none; }
.voices__avatar--male img { top: 12.5px; left: 6.5px; width: 109px; height: 114px; }
.voices__avatar--female img { top: 12px; left: 12.8px; width: 96px; height: 107px; }
.voices__avatar--photo img { top: 0; left: -46.5px; width: 213px; height: 120px; object-fit: cover; }
.voices__badge { position: absolute; top: 0; left: calc(50% + 45px); width: 65px; height: 77px; }
.voices__meta { font-size: 15px; line-height: 1.5; text-align: center; color: #595e5b; }
.voices__card-body { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.voices__card-title { font-weight: 700; }

.voices__banner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: var(--container-narrow);
  padding: 28px 32px;
  background: #fff;
  border-radius: 8px;
}
.voices__banner-img { flex: 0 0 421px; width: 421px; height: 237px; }
.voices__banner-text { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.voices__banner-lead { font-size: 16px; line-height: 1.7; }
.voices__banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 8px 16px;
  border: 1px solid #236a5d;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #236a5d;
  transition: opacity .2s;
}
.voices__banner-btn:hover { opacity: .75; }
.voices__banner-btn img { width: 9px; height: 16px; }

@media (min-width: 769px) and (max-width: 1200px) {
  .voices__panel { padding: 80px 24px 96px; }
  .voices__banner-img { flex-basis: 320px; width: 320px; height: auto; }
}

/* ==========================================================================
   Career（簿記の学びを、次のキャリアへ） Figma 21351:3569
   ========================================================================== */
.career {
  position: relative;
  padding: 96px 40px 120px;
  background: var(--green-deep);
  border-radius: 72px 72px 0 0;
  color: #fff;
}
.career__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.career__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.career__title { font-size: 44px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.career__en { font-size: 14px; font-weight: 700; line-height: 1; }
.career__body { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.career__lead { margin-bottom: 16px; font-size: 28px; font-weight: 700; line-height: 1.5; text-align: center; } /* Figma: リード→パネル 48px、パネル間 32px */

.career__panel {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 16px 24px 24px;
  background: #fff;
  border-radius: 8px;
  color: var(--text);
}
.career__panel--courses { width: 100%; }
.career__panel-title { font-size: 24px; font-weight: 700; line-height: 1.5; text-align: center; color: var(--heading); white-space: nowrap; }
.career__panel-title em { font-style: normal; color: var(--green-main); }
.career__cards { display: flex; align-items: stretch; gap: 24px; }

.career-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 16px 20px;
  background: #edf6f5;
  border-radius: 8px;
}
.career-card--service { width: 340.5px; gap: 20px; }
.career-card--service .career-card__body { flex: 1; }
.career-card--service .career-card__btn { margin-top: auto; } /* 説明文の行数が違ってもボタン位置をそろえる */
.career-card--course { width: 341px; gap: 16px; }
.career-card__logo { display: flex; align-items: center; justify-content: center; padding: 20px 0 4px; }
.career-card__logo img { height: 102px; width: auto; }
.career-card__body { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.career-card__text { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; text-align: center; }
.career-card__name { font-size: 16px; font-weight: 700; line-height: 1.7; color: #161817; white-space: nowrap; }
.career-card__desc { font-size: 16px; line-height: 1.7; text-align: center; color: #161817; }
.career-card__banner { width: 100%; overflow: hidden; }
.career-card__banner img { width: 100%; height: 206px; object-fit: cover; }
.career-card__banner-label {
  padding: 6px 12px;
  font-size: 16px; font-weight: 700; line-height: 1.7; text-align: center; color: #fff;
}
.career-card__banner-label--cpa { background: linear-gradient(90deg, #521214, #8b1f22); }
.career-card__banner-label--uscpa { background: linear-gradient(90deg, #101937, #003d66); }
.career-card__banner-label--uscma { background: linear-gradient(90deg, #149cc5, #26bae7); }
.career-card__btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 44px; padding: 8px 16px;
  background: #fff;
  border: 1px solid #236a5d; border-radius: 8px;
  font-size: 14px; font-weight: 700; line-height: 1.5; color: #236a5d; white-space: nowrap;
  transition: opacity .2s;
}
.career-card__btn:hover { opacity: .75; }
.career-card__arrow { position: absolute; top: 50%; right: 16px; width: 9px; height: 16px; transform: translateY(-50%); }

@media (min-width: 769px) and (max-width: 1200px) {
  .career__panel--courses .career__cards { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   CTA (無料登録)  Figma: 21351:3665  ※ページ内で 2 回使用
   ========================================================================== */
.cta {
  padding: 80px 40px 96px;
  background: var(--green-main);
  color: #fff;
  text-align: center;
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.cta__title { font-size: 28px; font-weight: 700; line-height: 1.5; }
.cta__action { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 548px;
  max-width: 100%;
  height: 72px;
  padding: 12px 36px;
  background: var(--orange);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  transition: opacity .2s;
}
.cta__btn:hover { opacity: .85; }
.cta__btn-arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 16px;
  transform: translateY(-50%);
}
.cta__note { font-size: 14px; line-height: 1.7; }

/* ==========================================================================
   App banner（アプリなら オフライン再生が可能）
   Figma: 21351:3667 / 高さ 429 / ベージュ背景
   ========================================================================== */
.app {
  padding: 20px 40px 40px;
  background: var(--beige);
}
.app__card {
  position: relative;
  display: flex;
  width: 930px;
  min-height: 368px;
  margin: 0 auto;
  overflow: hidden;
  background: #fcfcfa;
  border-radius: 12px;
}
.app__body {
  padding: 39px 0 40px 36px;
}
/* Figma はラスター 1 枚のため文字サイズ・字間は実測値 */
.app__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  color: #1f3d35;
}
.app__lead {
  margin-top: 13px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
  color: #1f3d35;
}
.app__lead-em {
  -webkit-text-emphasis: filled dot #1f3d35;
  text-emphasis: filled dot #1f3d35;
}
.app__badges {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.app__badge { display: block; transition: opacity .2s; }
.app__badge:hover { opacity: .85; }
.app__badge img { width: auto; height: 66px; }
.app__badge:first-child img { height: 96px; margin: -15px 0; }
.app__phone {
  position: absolute;
  top: 44px;
  right: 39px;
  width: 311px;
}
.app__phone img { width: 100%; height: auto; }

@media (min-width: 769px) and (max-width: 1200px) {
  .app__card { width: 100%; max-width: 930px; }
  .app__title { font-size: 32px; }
  .app__lead { font-size: 22px; }
}

/* ==========================================================================
   FAQ（よくある質問）
   Figma: 21351:3672 / 高さ 1622 / ベージュ背景
   ========================================================================== */
.faq {
  padding: 96px 40px 120px;
  background: var(--beige);
}
.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.faq__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--heading);
  text-align: center;
}
.faq__en {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--green-main);
  text-align: center;
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 64px;
}
.faq__item {
  padding: 32px 25px 32px 30px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
}
.faq__q { font-size: inherit; font-weight: inherit; }
.faq__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.faq__mark {
  flex-shrink: 0;
  width: 18px;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  color: var(--green-main);
  text-align: center;
}
.faq__q-text {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #161817;
}
.faq__chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform .25s;
}
.faq__trigger[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
}
.faq__answer[hidden] { display: none; }
.faq__a-text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #161817;
}
.faq__a-text a { color: var(--green-main); text-decoration: underline; }
.faq__a-text a:hover { opacity: .8; }
.faq__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--green-main);
  transition: opacity .2s;
}
.faq__more:hover { opacity: .8; }
.faq__more img { width: 9px; height: 16px; }

/* ==========================================================================
   Share（このページをシェアする）
   Figma: 21351:3766 / 高さ 304 / ベージュ背景
   ========================================================================== */
.share {
  padding: 64px 40px 96px;
  background: var(--beige);
}
.share__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--heading);
  text-align: center;
}
.share__list {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 256px;
  height: 64px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  transition: opacity .2s;
}
.share__btn:hover { opacity: .85; }
.share__btn img { width: 40px; height: auto; }
.share__btn--facebook { background: #0866ff; }
.share__btn--x { background: #f2f7fa; color: #000; }
.share__btn--line { background: #06c755; }

/* ==========================================================================
   Reason（FINACラーニングがすべて無料で提供する理由）
   Figma: 21351:3783 / 高さ 460 / 講座サムネイル背景 + 白の半透明パネル
   ========================================================================== */
.reason {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 40px;
  background: #fff url("../images/reason/bg-thumbnails.png") center / cover no-repeat;
}
.reason::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(49, 119, 106, .2) 0%, rgba(49, 119, 106, .9) 100%);
}
.reason__panel {
  position: relative;
  width: 100%;
  max-width: var(--container);
  padding: 32px 80px 48px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #fff;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-align: center;
}
.reason__title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--green-main);
}
.reason__title-em { color: var(--heading); }
.reason__text {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #161817;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .reason__panel { padding: 32px 40px 40px; }
  .reason__title { font-size: 36px; }
  .reason__text br { display: none; }
}

/* ==========================================================================
   上角丸セクションの重なり
   Figma では角丸の外側に「直前セクションの背景色」が見える。
   section 自体に直前色を敷き、自身の角丸背景は ::before で描く。
   ========================================================================== */
.llink, .steps, .videos, .books, .column, .career {
  position: relative;
  isolation: isolate;
  border-radius: 0;
}
.llink::before, .steps::before, .videos::before, .books::before, .column::before, .career::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 72px 72px 0 0;
}
.llink  { background: var(--beige); }      .llink::before  { background: var(--green-deep); }
.steps  { background: var(--green-deep); } .steps::before  { background: var(--beige); }
.videos { background: var(--beige); }      .videos::before { background: var(--green-deep); }
.books  { background: var(--green-deep); } .books::before  { background: var(--beige); }
.column { background: var(--beige); }      .column::before { background: var(--green-deep); }
.career { background: var(--beige); }      .career::before { background: var(--green-deep); }

@media (min-width: 769px) and (max-width: 1200px) {
  .llink::before, .steps::before, .videos::before, .books::before, .column::before, .career::before,
  .about__inner, .merits__inner, .voices__panel { border-radius: 48px 48px 0 0; }
}


/* ==========================================================================
   Tablet (769px – 1200px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
  .container { padding: 0 16px; }
}

/* ==========================================================================
   SP (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root { --header-h: 52px; }
  .container { padding: 0 16px; }

}
/* ==========================================================================
   SP 断片 A: KV / 簿記学習コンテンツ / コンテンツ一覧
   Figma 簿記TOP_SP_v3（375 基準）
     KV            22423:5153  h 588
     学習コンテンツ 23248:21754 h 2111.75（2 回目 22145:4262 も同一）
     コンテンツ一覧 22419:2770  h 466
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- KV（Figma 22423:5153: テキストを上、写真を下に縦積み） ----------
     PC と同じく Figma 座標を absolute で配置（375 基準）。
     写真は PC と同じ kv-photo.jpg を背景で 375 時 523x185（中心 +20px / 上 315px）に敷く。
     幅が広がった時は写真幅を 100vw + 148px で追従させ、高さと注釈位置も連動させる
     （写真高さ = 幅 x 185/523 = 35.373vw + 52.35px）。 */
  .kv {
    height: calc(455.35px + 35.373vw);               /* 588 @375 */
    padding: 0;
    background: #fff url("../images/kv/kv-photo.jpg") calc(50% + 20px) 315px / calc(100vw + 148px) auto no-repeat;
  }
  .kv__fade { display: none; }
  .kv__inner { display: block; width: 100%; height: 100%; padding: 0; }
  .kv__inner > * { position: absolute; margin: 0; }

  .kv__catch { left: 23px; top: 30px; }
  .kv__catch img { width: 171px; }

  .kv__title { left: 31px; top: 78px; margin: 0; }
  .kv__title-brand { margin-left: 2px; font-size: 27.2px; }
  .kv__title-main { margin-top: -4px; font-size: min(76px, 20vw); }

  /* ボックス（PC 464x138.5 -> 315x94、0.679 倍） */
  .kv__box {
    left: 30px;
    top: 203.6px;
    width: calc(100% - 60px);
    max-width: none;
    height: 94px;
    padding: 0;
    border-radius: 5.4px;
  }
  .kv__sub { position: absolute; left: 11.5px; top: 10.9px; flex-wrap: nowrap; gap: 4px; font-size: 18.3px; }
  .kv__grades { gap: 4px; }
  .kv__grade { width: 36.1px; height: 31.2px; border-radius: 3.6px; }
  .kv__grade-num { left: 4.9px; top: 5.1px; font-size: 26.8px; }
  .kv__grade-unit { left: 21.2px; top: 14.7px; font-size: 9.8px; }
  .kv__guide { position: absolute; left: 9.2px; top: 45.8px; margin: 0; font-size: 31.9px; }

  /* バッジ（PC 228.5x97.4 -> 120x51、0.525 倍に縮小して右上へ） */
  .kv__badge {
    order: 0;
    margin: 0;
    left: auto;
    right: 15px;
    top: 15.5px;
    transform: scale(.525);
    transform-origin: top right;
  }

  .kv__note {
    left: 20px;
    top: calc(383px + 35.373vw);                     /* 515.6 @375（写真下 + 15.6px） */
    width: calc(100% - 40px);
    margin: 0;
    font-size: 12px;
  }

  /* 360px 未満: ボックス・バッジが収まらないので縮小表示 */
  @media (max-width: 359px) {
    .kv__title-brand { font-size: 24px; }
    .kv__box { width: 315px; transform: scale(.85); transform-origin: 0 0; }
    .kv__badge { transform: scale(.45); }
  }

  /* ---------- 簿記学習コンテンツ（Figma 23248:21754） ---------- */
  .contents { padding: 56px 0 64px; }
  .contents__inner { gap: 32px; }
  .contents__head { gap: 12px; width: 320px; }
  .contents__title-sub { font-size: 24px; }
  .contents__title-main { font-size: 32px; }
  /* リード: 4 行（sp-only の br で改行）、各行に 3px のオレンジ下線。
     320 幅でも 1 行 16 文字が収まるよう文字サイズを下げる */
  .contents__lead {
    display: block;                                  /* flex だと span がブロック化され行ごとの下線が引けない */
    font-size: min(20px, calc((100vw - 32px) / 16));
    line-height: 2;
    white-space: normal;
  }
  .contents__lead-line {
    display: inline;
    padding-bottom: .28em;
    background-size: 100% 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* 2 つ目の lead-line の前で改行し 8px の間隔を空ける */
  .contents__lead-line + .contents__lead-line::before { content: ""; display: block; height: 8px; }

  .contents__body { gap: 16px; }
  .contents__cards { grid-template-columns: 1fr; gap: 16px; }
  .contents__card-link { gap: 12px; padding: 0 0 20px; }
  .contents__card-head { height: auto; min-height: 62px; padding: 12px 16px; font-size: 20px; } /* 1 行 62 / 2 行 84 */
  .contents__card-body { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 0 16px; } /* サムネ→本文 12 / 本文→リンク 8 */
  .contents__text { flex: none; font-size: 16px; }
  .contents__more { font-size: 14px; }

  /* サムネイル: 311x175 @375。テキスト・問題集のみ画像上に白パネルの見出し（Figma 23514:2564） */
  .contents__thumb {
    container-type: inline-size;
    flex: none;
    margin-bottom: 4px;
    aspect-ratio: 311 / 175;
    border-radius: 7px;
  }
  .contents__thumb-label {
    position: absolute;
    left: 17.94%;
    top: 28.84%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64.12%;
    height: 44.78%;
    background: rgba(255, 255, 255, .95);
    border-radius: 4.7px;
    color: #236a5d;
    font-family: "Noto Sans JP", var(--font-jp);
    font-weight: 700;
    font-size: 6.87cqw;                              /* 21.4px @311 */
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
  }

  .contents__note { font-size: 14px; text-align: left; }

  /* ---------- 簿記学習コンテンツ一覧（Figma 22419:2770） ---------- */
  .llink { padding: 32px 0 48px; }
  section.llink::before { border-radius: 24px 24px 0 0; }   /* 共通 SP ルール（40px）より優先 */
  .llink__inner { gap: 20px; }
  .llink__title { font-size: 20px; }
  .llink__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .llink__item { gap: 6px; height: 64.5px; padding: 8px 10px; font-size: 14px; line-height: 1.5; }
  .llink__arrow { width: 12px; height: 8.3px; }
}

/* ==========================================================================
   SP 断片 B: About（簿記について 21261:1943）/ Merits（簿記を学ぶメリット 22096:3662）
   Figma 簿記TOP_SP_v3（幅 375）準拠。PC ルール（メディアクエリ外）への上書き差分のみ。
   ========================================================================== */
@media (max-width: 768px) {
  /* ---------- About (SP) ---------- */
  /* 上角丸は SP 共通ルール（40px）より優先させるため親クラスを付けて指定 */
  .about > .about__inner { padding: 56px 16px 64px; border-radius: 24px 24px 0 0; }
  .about__container { gap: 48px; }
  .about__title { font-size: 32px; }
  .about__body { gap: 48px; }
  .about__block { gap: 20px; }
  .about__block--exam { gap: 24px; }
  .about__subtitle { font-size: 24px; }

  /* イラスト → 本文 の縦積み（検定ブロックも SP ではイラストが先） */
  .about__row { flex-direction: column; align-items: stretch; gap: 16px; }
  .about__row--reverse { flex-direction: column-reverse; gap: 16px; }
  .about__illust { flex: none; width: 100%; max-width: 480px; height: auto; margin: 0 auto; } /* 元画像 358px のため 769px 未満のタブレット幅では拡大しすぎないよう上限を設ける */
  .about__text { width: 100%; font-size: 16px; }

  /* 級別カード: バッジを上に中央寄せ、タグも中央揃え */
  .about__level { flex-direction: column; align-items: center; gap: 16px; padding: 16px 16px 20px; }
  .about__badge { flex: none; width: 100px; height: 100px; padding-top: 20px; }
  .about__badge-num { font-size: 51px; }
  .about__badge-unit { font-size: 20px; }
  .about__level-body { width: 100%; gap: 16px; }
  .about__tags { justify-content: center; gap: 12px; }
  .about__tag { font-size: 14px; white-space: normal; text-align: center; }
  .about__level-text { font-size: 16px; }

  /* ---------- Merits (SP) ---------- */
  .merits > .merits__inner { padding: 56px 16px 64px; border-radius: 24px 24px 0 0; }
  .merits__container { gap: 48px; }
  .merits__inner .merits__container { padding: 0; } /* 左右余白は inner 側で確保（.container の SP padding を打ち消す） */
  .merits__title { font-size: 32px; }
  .merits__list { grid-template-columns: 1fr; gap: 16px; }
  .merits__card { gap: 8px; padding: 16px 16px 20px; }
  .merits__card-title { gap: 8px; }
  .merits__num { flex-basis: 32px; width: 32px; height: 32px; margin-top: 0; padding-bottom: 2px; font-size: 20px; }
  .merits__card-heading { font-size: 22px; }
  .merits__card-text { font-size: 16px; }
}

/* ==========================================================================
   SP (≤768px) 断片 C: 効果的な学習方法 (Steps) / 講義動画 (Videos) + 講師紹介
   Figma SP: 簿記TOP_SP_v3  steps 22025:2000 / videos 22096:3294
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 効果的な学習方法 Figma: 22025:2000 ---------- */
  .steps { padding: 56px 16px 64px; }
  .steps::before { border-radius: 24px 24px 0 0; }
  .steps__inner { gap: 48px; }
  .steps__title { font-size: 32px; }
  .steps__en { font-size: 14px; }
  .steps__lead { font-size: 16px; }

  /* カード: 縦積み、ラベル（アイコン + STEP）は中央寄せ */
  .steps__card { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 16px 20px; }
  .steps__label { justify-content: center; gap: 12px; width: auto; }
  .steps__icon { width: 80px; height: 80px; }
  .steps__icon img { transform: scale(calc(2 / 3)); }                       /* PC 比 2/3 */
  .steps__icon--labeled { padding-top: 12px; }
  .steps__icon--labeled img { transform-origin: top center; }
  .steps__icon-label { font-size: 11.435px; }
  .steps__label-text { flex: 0 0 auto; width: auto; padding-bottom: 8px; }
  .steps__num { font-size: 20px; }
  .steps__num-digit { font-size: 28px; }
  .steps__name { font-size: 18px; }
  .steps__text { gap: 8px; }
  .steps__headline { font-size: 18px; }
  .steps__desc { font-size: 16px; }

  /* ボタン: 中央寄せで折り返し、幅はコンテンツ依存（320 幅では文言を折り返す） */
  .steps__actions { flex-direction: row; justify-content: center; align-items: flex-start; gap: 16px; }
  .steps__action-group { align-items: center; }
  .steps__btn { width: auto; max-width: 100%; height: auto; min-height: 56px; white-space: normal; text-align: center; }
  .steps__btn-icon { flex-shrink: 0; }
  .steps__note { font-size: 12px; white-space: normal; text-align: center; }

  /* ---------- 講義動画 Figma: 22096:3294 ---------- */
  .videos { padding: 56px 0 64px; }
  .videos::before { border-radius: 24px 24px 0 0; }
  .videos__inner { gap: 48px; }
  .videos__title { font-size: 32px; }
  .videos__en { font-size: 14px; }
  .videos__rows { gap: 32px; }
  .videos__row-title { font-size: 20px; }
  .videos .carousel__track { gap: 16px; margin-right: -16px; padding-right: 16px; } /* 右端はビューポート端まで */
  .videos__card { width: 223px; }
  .videos__thumb { width: 223px; height: 125.5px; }
  .videos__caption { font-size: 16px; }
  .videos__more { gap: 6px; font-size: 18px; }
  .videos__more img { margin-left: 2px; }

  /* 講師紹介: 写真を全幅の正方形にして縦積み */
  .instructor { gap: 20px; padding: 16px 16px 20px; }
  .instructor__title { font-size: 18px; }
  .instructor__en { font-size: 12px; }
  .instructor__body { flex-direction: column; align-items: stretch; gap: 20px; }
  .instructor__photo { flex-basis: auto; width: 100%; max-width: 360px; height: auto; margin: 0 auto; aspect-ratio: 1 / 1; } /* 元画像 280px のため広幅では拡大を抑える */
  .instructor__text { width: 100%; }
  .instructor__name-main { font-size: 20px; }
  .instructor__name-sub { font-size: 16px; }
  .instructor__bio,
  .instructor__books,
  .instructor__message { font-size: 16px; }
}

@media (max-width: 768px) {
  /* ---------- Books（教材・問題集） SP  Figma 22527:4924 ---------- */
  /* 上角丸は ::before で描く（style.css「上角丸セクションの重なり」参照）。半径は Figma SP の 24px */
  .books { padding: 56px 0 64px; }
  .books::before { border-radius: 24px 24px 0 0; }
  .books__inner { gap: 48px; }
  .books__title { font-size: 32px; }
  .books__en { font-size: 14px; }
  .books__body { gap: 24px; }
  .books__lead { font-size: 16px; }
  .books__groups { gap: 32px; }
  .books__group { gap: 12px; }
  .books__group-head { display: flex; align-items: center; justify-content: space-between; }
  .books__group-title { font-size: 20px; text-align: left; }
  .books .carousel__btn { background: #fff; }
  .books__lead-em { font-weight: 400; }
  /* 右端はビューポート端までカードをはみ出させる（.container の右 padding 分だけ引く） */
  .books__list {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    justify-content: flex-start;
    gap: 16px;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .books__list::-webkit-scrollbar { display: none; }
  .books__list > * { flex: 0 0 auto; scroll-snap-align: start; }
  .book { width: 223px; padding: 12px; gap: 12px; }
  .book__cover { height: 128px; }
  .book__name { font-size: 16px; }
  .book__name br { display: none; }
  .book__action { gap: 4px; }
  .book__label { font-size: 12px; white-space: normal; }
  .book__btn { height: 48px; padding: 8px; font-size: 14px; }
  .book__btn-note { font-size: 10px; }

  /* ---------- Column（簿記対策コラム） SP  Figma 22137:1897 ---------- */
  .column { padding: 56px 16px 64px; }
  .column::before { border-radius: 24px 24px 0 0; }
  .column__inner { gap: 48px; }
  .column__title { font-size: 32px; }
  .column__en { font-size: 14px; }
  .column__card { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 16px 20px; }
  .column__banner { width: 100%; height: auto; }
  .column__desc { font-size: 16px; }
  .column__btn { align-self: center; height: 56px; }

  /* ---------- Voices（受講者の声） SP  Figma 22137:2881 ---------- */
  .voices__panel { padding: 56px 0 64px; border-radius: 24px 24px 0 0; }
  .voices__inner { gap: 48px; }
  .voices__title { font-size: 32px; }
  .voices__en { font-size: 14px; }
  .voices__content { gap: 24px; }
  /* SP は横スクロール。ナビは Figma に無いが要望で追加（講義動画・教材と同じボタン） */
  .voices__list {
    display: flex;
    gap: 16px;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .voices__list::-webkit-scrollbar { display: none; }
  .voices__card { flex: 0 0 283px; padding: 16px 16px 20px; scroll-snap-align: start; }
  .voices__nav { display: flex; }
  .voices .carousel__btn { background: #fff; }
  .voices__meta { font-size: 15px; }
  .voices__card-body { font-size: 16px; }
  .voices__banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 16px 20px; }
  .voices__banner-img { flex-basis: auto; width: 100%; height: auto; }
  .voices__banner-text { align-items: center; }
  .voices__banner-lead { width: 100%; font-size: 16px; }
  .voices__banner-btn { align-self: center; height: 56px; font-size: 14px; }
}

@media (max-width: 768px) {
  /* ---------- Career (SP) Figma 22145:3506 ---------- */
  .career { padding: 56px 0 64px; }
  .career::before { background: var(--green-deep); border-radius: 24px 24px 0 0; } /* Figma SP: 背景 #31776a・上角丸 24px */
  .career__inner { gap: 48px; }
  .career__title { font-size: 32px; white-space: normal; }
  .career__en { font-size: 14px; }
  .career__body { gap: 20px; } /* パネル間 20px */
  .career__lead { margin-bottom: 12px; font-size: 22px; } /* リード→パネル 32px */
  .career__lead br { display: none; } /* Figma は自然折り返し */
  .career__panel { width: 100%; gap: 12px; padding: 16px 16px 20px; }
  .career__panel-title { font-size: 18px; white-space: normal; }
  .career__cards { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .career-card--service, .career-card--course { width: 100%; }
  .career-card__name, .career-card__desc { font-size: 16px; }
  .career-card__logo { padding: 16px 0 0; }
  .career-card__logo img { height: 84px; }
  .career-card__banner { max-width: none; margin: 0; }
  .career-card__banner img { height: auto; aspect-ratio: 309 / 206; } /* 279×186 */

  /* ---------- CTA (SP) Figma 23248:21757 / 22145:4908 ---------- */
  .cta { padding: 48px 16px 60px; }
  .cta__inner { gap: 24px; }
  .cta__title { font-size: 22px; font-weight: 700; }
  .cta__btn { width: 100%; height: 72px; padding: 12px 36px; font-size: 20px; }
  .cta__btn-arrow { right: 20px; }
  .cta__note { font-size: 14px; text-align: center; }

  /* ---------- App banner (SP) Figma 22145:4537 ----------
     Figma は 343×136 の 1 枚ラスターにバッジを重ねた構成。PC 同様テキストは HTML のまま、
     カード幅を基準にしたコンテナクエリ単位（1cqw = カード幅/100）で等比にレイアウトし、
     320〜768 のどの幅でも Figma(375) と同じ見た目に縮尺させる。 */
  .app { padding: 12px 16px 20px; container-type: inline-size; }
  .app__card {
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3089 / 1224; /* 343×136 */
  }
  .app__body { padding: 5.25cqw 0 0 4.96cqw; text-align: left; } /* 18px 0 0 17px */
  .app__title { font-size: 4.37cqw; line-height: 1.5; } /* 15px */
  .app__lead { margin-top: .58cqw; font-size: 3.5cqw; line-height: 1.5; } /* 12px */
  .app__badges {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.46cqw;
    margin: 1.75cqw 0 0 -1.17cqw;
  }
  .app__badge img { height: 7.14cqw; } /* 24.5px */
  .app__badge:first-child img { height: 10.35cqw; margin: -1.6cqw 0; } /* 35.5px（余白込み） */
  .app__phone {
    position: absolute;
    top: 4.73cqw; /* 16px */
    right: auto;
    left: 62.37%;
    width: 33.43%;
    height: auto;
    margin-top: 0;
    overflow: visible;
  }
}

/* ==========================================================================
   SP 断片 F: FAQ / Share / Reason / Footer
   Figma SP v3 (375): 22145:4544 / 23159:7866 / 21261:1624 / 20176:227825
   ========================================================================== */
@media (max-width: 768px) {
  /* FAQ（Figma 22145:4544 / 高さ 1417 ※Q3 展開状態） */
  .faq { padding: 56px 16px 64px; }
  .faq__title { font-size: 32px; }
  .faq__list { gap: 12px; margin-top: 48px; }
  .faq__item { padding: 12px 16px; }
  .faq__trigger { align-items: flex-start; gap: 8px; }
  .faq__mark { width: auto; font-size: 20px; line-height: 33px; text-align: left; }
  .faq__q-text { padding: 4px 8px 4px 0; font-size: 16px; }
  .faq__answer { gap: 12px; margin-top: 8px; padding-bottom: 4px; }
  .faq__mark--a { width: 18px; font-size: 22px; text-align: center; }
  .faq__a-text { font-size: 16px; }
  /* 「すべてのFAQを見る」は Figma SP に無いがユーザー判断で表示（PC と同じ見た目、余白のみ SP 調整） */
  .faq__more { margin-top: 24px; font-size: 16px; }

  /* Share（Figma 23159:7866 / 高さ 385） */
  .share { padding: 24px 16px 64px; }
  .share__title { font-size: 22px; }
  .share__list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }
  .share__btn { width: 256px; max-width: 100%; height: 64px; gap: 24px; font-size: 18px; }
  .share__btn img { width: 40px; }

  /* Reason（Figma 21261:1624 / 高さ 566）
     サムネイル画像は上部 200px のみ（841×200）、下は緑ベタ */
  .reason {
    display: block;
    min-height: 0;
    padding: 60px 16px 64px;
    background: var(--green-deep) url("../images/reason/bg-thumbnails.png") center top / 841px 200px no-repeat;
  }
  .reason::before {
    inset: 0 0 auto;
    height: 200px;
    background: linear-gradient(180deg, rgba(49, 119, 106, 0) 0%, var(--green-deep) 100%);
  }
  .reason__panel { padding: 16px 20px 20px; }
  /* Hiragino では 1 行目が 301px 幅に収まらないためわずかに詰める */
  .reason__title { font-size: 24px; letter-spacing: -.01em; }
  .reason__text { margin-top: 8px; font-size: 16px; text-align: left; }
  /* 1 段落目（「FINAC株式会社は、」直後）の改行のみ外す */
  .reason__text br { display: inline; }
  .reason__text br:first-of-type { display: none; }

}