@charset "UTF-8";
/* ============================================================================
   POS売上分析Copilotを作る ── ランディングページ スタイルシート
   株式会社セールスアナリティクス

   1. リセット
   2. デザイントークン（色・タイポ・余白）
   3. 基本タイポグラフィ
   4. ボタン／リンク
   5. サイトヘッダー
   6. ヒーロー
   7. 申込オファー（価格ボックス）
   8. 数字バンド
   9. セクション見出し
  10. 本文パーツ（リスト・引用・パネル・表・図）
  11. 各セクション個別
  12. GUARANTEE／APPLY
  13. フッター／追従CTA
  14. スクロール表示アニメーション
  15. レスポンシブ
  15b. 無料セミナー案内
  16. 印刷
   ========================================================================= */

/* ---------------------------------------------------------------- 1. リセット */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;          /* 固定ヘッダー分 */
}

body { margin: 0; }

img,
svg,
video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4,
p, ul, ol, li,
figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; }

button { font: inherit; }

details summary { cursor: pointer; }

::selection { background: rgba(226, 113, 29, .22); }

/* ---------------------------------------------------------------- 2. トークン */
:root {
  /* 色 */
  --navy:      #0A2342;
  --navy-2:    #143A66;
  --navy-ink:  #06182E;
  --blue:      #1565C0;
  --blue-pale: #E3EDF7;
  --orange:    #E2711D;
  --orange-dk: #C25F12;
  --gold:      #C9A227;
  --red:       #C0392B;
  --green:     #1E8E5A;

  --ink:       #1A2430;
  --muted:     #5B6B7C;
  --line:      #DCE4EC;
  --paper:     #FFFFFF;
  --paper-2:   #F4F7FB;
  --paper-3:   #EAF0F7;

  /* タイポ */
  --font:    "Noto Sans JP", "Yu Gothic UI", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "Barlow Condensed", "Noto Sans JP", sans-serif;
  --mono:    "SFMono-Regular", Consolas, Menlo, monospace;

  /* レイアウト */
  --max:      1000px;
  --max-wide: 1160px;
  --gutter:   20px;
  --radius:   14px;
  --radius-s: 8px;

  /* 影 */
  --shadow-s: 0 1px 2px rgba(10, 35, 66, .06), 0 2px 8px rgba(10, 35, 66, .05);
  --shadow-m: 0 4px 12px rgba(10, 35, 66, .08), 0 12px 32px rgba(10, 35, 66, .07);
  --shadow-l: 0 18px 48px rgba(10, 35, 66, .18);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- 3. タイポ */
.pc-lp {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.pc-lp p { margin-bottom: 1.1em; }
.pc-lp p:last-child { margin-bottom: 0; }

.pc-lp strong { font-weight: 700; }

.pc-lp code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--paper-3);
  color: var(--navy);
  padding: .12em .45em;
  border-radius: 4px;
}

.pc-inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pc-center { text-align: center; }
.pc-small  { font-size: .875em; color: var(--muted); line-height: 1.8; }

/* ---------------------------------------------------------------- 4. ボタン */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 17px 40px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .04em;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}

.pc-btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, #F0872F 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(226, 113, 29, .32);
}
.pc-btn-primary:hover,
.pc-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(226, 113, 29, .42);
}

.pc-btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(10, 35, 66, .3);
}
.pc-btn-ghost:hover,
.pc-btn-ghost:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

.pc-btn-small {
  padding: 10px 24px;
  font-size: .9rem;
  box-shadow: 0 3px 10px rgba(226, 113, 29, .28);
}

.pc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- 5. ヘッダー */
.pc-sitebar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}

.pc-sitebar-inner {
  max-width: var(--max-wide);
  margin-inline: auto;
  padding: 11px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.pc-brand {
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  letter-spacing: .02em;
  white-space: nowrap;
}

.pc-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.pc-nav a {
  position: relative;
  font-size: .88rem;
  font-weight: 500;
  color: var(--navy);
  padding-bottom: 2px;
}
.pc-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.pc-nav a:hover::after,
.pc-nav a:focus-visible::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- 6. ヒーロー */
.pc-hero {
  position: relative;
  padding: 76px var(--gutter) 10px;
  text-align: center;
  color: #fff;
  isolation: isolate;
}

.pc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(21, 101, 192, .55) 0%, rgba(21, 101, 192, 0) 62%),
    linear-gradient(170deg, var(--navy-ink) 0%, var(--navy) 48%, var(--navy-2) 100%);
}
.pc-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 78%, transparent 100%);
}

.pc-hero-inner {
  max-width: var(--max);
  margin-inline: auto;
}

.pc-hero-eyebrow {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: #F5B173;
  margin-bottom: 14px;
}

.pc-hero-kicker {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 4px 18px;
  margin-bottom: 18px;
}

.pc-h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.75rem);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}

.pc-hero-tagline {
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  font-weight: 500;
  color: #C7DCF2;
  margin: 14px 0 26px;
  line-height: 1.6;
}

.pc-hero-date {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  margin-bottom: 0;
}
.pc-hero-date time {
  font-family: var(--font-en);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
}
.pc-hero-date time span {
  font-size: .62em;
  color: #F5B173;
  margin-left: .32em;
  letter-spacing: .12em;
}
.pc-hero-date i { font-style: normal; opacity: .5; font-size: 1.2rem; }
.pc-hero-date b {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #C7DCF2;
}
.pc-hero-date em {
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  padding: 3px 14px;
}

/* メインビジュアル：ヒーローの下端にまたがせる */
.pc-hero-visual {
  position: relative;
  max-width: var(--max-wide);
  margin: 46px auto -96px;
  padding-inline: var(--gutter);
}
.pc-mainvisual {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-l);
}

/* ---------------------------------------------------------------- 7. オファー */
.pc-offer {
  background: var(--paper);
  padding: 128px var(--gutter) 64px;
}
.pc-offer-inner { max-width: var(--max); }

.pc-offer-lead {
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 34px;
}

.pc-offer-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  padding: 34px 36px 30px;
  position: relative;
  overflow: hidden;
}
.pc-offer-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 55%, var(--orange) 100%);
}

.pc-offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 20px;
}
.pc-offer-label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: var(--navy);
  border-radius: 4px;
  padding: 3px 12px;
}
.pc-offer-price strong {
  font-family: var(--font-en);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  letter-spacing: .01em;
}
.pc-offer-price strong small {
  font-family: var(--font);
  font-size: .34em;
  font-weight: 700;
  margin-left: .12em;
}
.pc-offer-tax { font-size: .88rem; color: var(--muted); }
.pc-offer-member {
  font-size: .9rem;
  font-weight: 700;
  color: var(--orange);
  background: #FDF1E6;
  border-radius: 999px;
  padding: 3px 14px;
}

.pc-offer-meta { margin-bottom: 24px; }
.pc-offer-meta li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .95rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--paper-3);
}
.pc-offer-meta li:last-child { border-bottom: 0; }
.pc-offer-meta li span {
  flex: 0 0 4.6em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
  background: var(--blue-pale);
  border-radius: 4px;
  text-align: center;
  padding: 2px 0;
  margin-top: .35em;
}

.pc-offer-note {
  margin: 18px 0 0;
  font-size: .9rem;
  color: var(--ink);
  background: #FFF8E8;
  border: 1px solid #F0DFAE;
  border-radius: var(--radius-s);
  padding: 12px 16px;
}
.pc-offer-note b {
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .02em;
  margin-right: .6em;
}

/* ---------------------------------------------------------------- 8. 数字バンド */
.pc-stats {
  background: var(--navy);
  color: #fff;
  padding: 34px var(--gutter);
}
.pc-statlist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}
.pc-statlist li {
  padding: 6px 8px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.pc-statlist li:first-child { border-left: 0; }
.pc-statlist strong {
  display: block;
  font-family: var(--font-en);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
}
.pc-statlist span {
  display: block;
  font-size: .8rem;
  color: #A9C4DF;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- 9. 見出し */
.pc-section { padding: 92px 0; }
.pc-sec-light { background: var(--paper-2); }

.pc-sechead {
  text-align: center;
  margin-bottom: 46px;
}

.pc-eyebrow {
  font-family: var(--font-en);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--orange);
  margin-bottom: 6px;
}

.pc-h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--navy);
  letter-spacing: .02em;
}
.pc-h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--navy), var(--orange));
}

.pc-sectionlead {
  max-width: 40em;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: .98rem;
}

.pc-h3 {
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  margin: 34px 0 14px;
  padding-left: 13px;
  border-left: 4px solid var(--blue);
}

/* ---------------------------------------------------------------- 10. パーツ */
/* 引用 */
.pc-quote {
  position: relative;
  max-width: 860px;
  margin: 0 auto 34px;
  padding: 30px 32px 30px 64px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.75;
  color: var(--navy);
}
.pc-quote::before {
  content: "“";
  position: absolute;
  left: 20px;
  top: 6px;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--orange);
  opacity: .32;
}
.pc-quote em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(226, 113, 29, .28) 62%);
}

/* リスト */
.pc-checklist li,
.pc-list li {
  position: relative;
  padding-left: 1.9em;
  margin-bottom: 10px;
}
.pc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: var(--orange);
}
.pc-checklist li::after {
  content: "";
  position: absolute;
  left: .34em;
  top: .82em;
  width: .46em;
  height: .24em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.pc-checklist {
  max-width: 780px;
  margin: 0 auto 8px;
  font-size: 1.02rem;
}
.pc-list li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: .86em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue);
}
.pc-list-small { font-size: .9rem; color: #3D4A58; }

/* パネル */
.pc-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-s);
}
.pc-panel .pc-h3 { margin-top: 0; }

/* 表 */
.pc-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-s);
  /* 横スクロールできることが分かるように、端に影を出す */
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat,
    linear-gradient(to left,  var(--paper) 30%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(10, 35, 66, .16), rgba(10, 35, 66, 0)) left center / 15px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 35, 66, .16), rgba(10, 35, 66, 0)) right center / 15px 100% no-repeat,
    var(--paper);
  background-attachment: local, local, scroll, scroll, local;
}
.pc-table {
  width: 100%;
  min-width: 480px;
  font-size: .95rem;
  background: var(--paper);
}
.pc-table th,
.pc-table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.7;
}
.pc-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 0;
}
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table tbody tr:nth-child(even) td { background: #FAFCFE; }
.pc-table-time td:first-child,
.pc-table-head td:first-child {
  white-space: nowrap;
  font-weight: 700;
  color: var(--navy);
  background: var(--blue-pale) !important;
  width: 1%;
}
.pc-table-time td:first-child { font-family: var(--font-en); font-size: 1.05rem; letter-spacing: .03em; }
.pc-table-qa td:first-child { font-weight: 700; color: var(--navy); }

/* 図 */
.pc-figure { margin: 30px 0; }
.pc-fig {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  box-shadow: var(--shadow-s);
}
.pc-figure figcaption {
  margin-top: 12px;
  font-size: .86rem;
  line-height: 1.75;
  color: var(--muted);
}
.pc-ba {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.pc-ba > div { flex: 1 1 320px; max-width: 460px; }

/* 差し替え画像 */
.pc-slotimg {
  width: 100%;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-s);
}
.pc-photo {
  width: 172px;
  height: 172px;
  flex: 0 0 172px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-m);
}

/* ---------------------------------------------------------------- 11. 各セクション */
/* 成果物フォルダ */
.pc-folder {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 26px;
  box-shadow: var(--shadow-s);
}
.pc-folder li {
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .95rem;
  line-height: 1.75;
}
.pc-folder li:last-child { border-bottom: 0; }
.pc-dir {
  display: inline-block;
  min-width: 7.4em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  background: var(--navy);
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  margin-right: 12px;
  white-space: nowrap;
  vertical-align: 1px;
}

/* 動画 */
.pc-video {
  position: relative;
  max-width: 820px;
  margin: 0 auto 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-m);
}
.pc-video img { border-radius: 0; box-shadow: none; }
.pc-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.pc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-radius: 50%;
  background: rgba(10, 35, 66, .82);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.pc-play::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 26px;
  border-left: 27px solid #fff;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

/* できるようになること */
.pc-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pc-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 18px 20px;
  font-size: .96rem;
  line-height: 1.75;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pc-steps li:hover {
  transform: translateY(-3px);
  border-color: #C3D4E6;
  box-shadow: var(--shadow-m);
}
.pc-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pc-stepnum {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  letter-spacing: .02em;
  padding-top: .12em;
}

/* 事例の導入 */
.pc-case-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.pc-case-intro > * { flex: 1 1 320px; min-width: 0; }
.pc-case-intro > img { max-width: 440px; }

/* CONCEPT：2つの方式（よくある方式／この講座） */
.pc-way {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 30px 34px 28px;
  margin-bottom: 24px;
}
.pc-way:last-child { margin-bottom: 0; }
.pc-h3-way {
  margin: 0 0 16px;
  padding: 0 0 12px 0;
  border-left: 0;
  border-bottom: 2px solid var(--blue-pale);
  font-size: 1.22rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pc-h3-way::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
.pc-h3-bad { color: #6B7684; }
.pc-h3-bad::before {
  background-color: #9AA7B4;
  background-image: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
}
.pc-h3-good::before {
  background-color: var(--green);
  background-image: linear-gradient(-45deg, transparent 40%, #fff 40%, #fff 52%, transparent 52%),
                    linear-gradient(45deg, transparent 62%, #fff 62%, #fff 74%, transparent 74%);
  background-size: 60% 60%, 60% 60%;
  background-position: 62% 42%, 32% 52%;
}
.pc-way .pc-figure { margin: 22px 0; }
.pc-way > p { font-size: 1rem; }

/* イラスト枠（棒人間などの差し替え画像） */
.pc-fig-illust {
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--radius);
}
.pc-img-wide { border-radius: var(--radius); }
.pc-overview-visual { margin-bottom: 26px; }

/* 図（SVG）の横スクロール：狭い画面でも文字が読める大きさを保つ */
.pc-figscroll { width: 100%; }
@media (max-width: 760px) {
  .pc-figscroll {
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pc-figscroll > .pc-fig { min-width: 660px; }
  .pc-figscroll + figcaption::before {
    content: "← 図は横にスクロールできます →";
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--orange);
  }
}

/* 動作GIF（Streamlit版の実画面） */
.pc-demogif { margin-bottom: 30px; }
.pc-demogif img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(10, 35, 66, .45);
}

/* セクション冒頭の中央寄せリード文 */
.pc-lead-c {
  max-width: 44em;
  margin: 0 auto 26px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--ink);
}
.pc-lead-c strong { color: var(--navy); }
@media (max-width: 640px) {
  .pc-lead-c { text-align: left; font-size: .96rem; }
}

/* 事例のストーリー（STEP 1〜3） */
.pc-storylead {
  font-size: 1.02rem;
  color: var(--muted);
  margin: 22px 0 6px;
}
.pc-story {
  position: relative;
  margin-top: 14px;
  padding-left: 0;
}
.pc-storystep {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 30px 34px 28px;
  margin-bottom: 22px;
}
/* ステップ間をつなぐ縦線 */
.pc-storystep::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 2px;
  height: 22px;
  background: linear-gradient(180deg, var(--line), rgba(220, 228, 236, 0));
}
.pc-storystep:last-child { margin-bottom: 0; }
.pc-storystep:last-child::after { display: none; }

.pc-storystep > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--blue-pale);
}
.pc-storyno {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border-radius: 999px;
  padding: 4px 18px;
}
.pc-storystep > header h3 {
  font-size: 1.28rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.5;
}
.pc-storystep > p { font-size: 1rem; }
.pc-storystep .pc-figure { margin: 24px 0 20px; }

.pc-storynote {
  margin: 0;
  padding: 16px 20px;
  background: #FFF7EF;
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .95rem;
  line-height: 1.8;
}
.pc-storynote b { color: var(--orange-dk); font-weight: 700; margin-right: .6em; }

.pc-storyend {
  margin-top: 30px;
  font-size: 1.02rem;
}

/* 2カラム */
.pc-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 24px;
}
.pc-cols:last-child { margin-bottom: 0; }
.pc-col { flex: 1 1 320px; min-width: 0; }

/* カリキュラム */
.pc-day { margin-top: 38px; }
.pc-h3-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 1.22rem;
  border-left: 0;
  padding-left: 0;
  margin-bottom: 16px;
}
.pc-daynum {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--navy);
  border-radius: 4px;
  padding: 3px 14px;
}
.pc-h3-day em {
  font-style: normal;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .04em;
}

/* 特典 */
.pc-benefits {
  display: grid;
  gap: 16px;
}
.pc-benefit {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-s);
  padding: 24px 26px;
  box-shadow: var(--shadow-s);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pc-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.pc-benefit-no {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
  opacity: .55;
}
.pc-benefit h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.5;
}
.pc-benefit p {
  font-size: .93rem;
  color: #3D4A58;
  line-height: 1.8;
  margin: 0;
}

/* 講師 */
.pc-instructor {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 34px;
  box-shadow: var(--shadow-s);
}
.pc-instructor > div:last-child { flex: 1 1 380px; min-width: 0; }
.pc-instructor-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 14px;
}
.pc-instructor-name span {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .02em;
  margin-top: 2px;
}

/* FAQ */
.pc-faq {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: 10px;
  padding: 0 22px;
  box-shadow: var(--shadow-s);
  transition: border-color .2s var(--ease);
}
.pc-faq[open] { border-color: #BFD3E6; }
.pc-faq summary {
  position: relative;
  list-style: none;
  padding: 18px 40px 18px 34px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  line-height: 1.65;
}
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.3;
}
.pc-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.pc-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pc-faq p {
  position: relative;
  margin: 0;
  padding: 0 6px 20px 34px;
  font-size: .95rem;
  color: #3D4A58;
  border-top: 1px dashed var(--line);
  padding-top: 16px;
}
.pc-faq p::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue);
}

/* ---------------------------------------------------------------- 12. 保証／申込 */
.pc-guarantee {
  position: relative;
  text-align: center;
  padding: 78px var(--gutter);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(201, 162, 39, .13) 0%, transparent 70%),
    #FFFCF3;
  border-top: 1px solid #EFE3C4;
  border-bottom: 1px solid #EFE3C4;
}
.pc-guarantee-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 3px double var(--gold);
  color: var(--gold);
  font-family: var(--font-en);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(201, 162, 39, .18);
}
.pc-guarantee-badge small {
  font-family: var(--font);
  font-size: .34em;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 5px;
}
.pc-eyebrow-gold { color: var(--gold); }
.pc-h2-gold { color: #8A6F12; }
.pc-h2-gold::after { background: linear-gradient(90deg, var(--gold), #E7C765); }
.pc-guarantee-body {
  margin-top: 20px;
  font-size: 1.02rem;
  color: #4A3F1E;
}
.pc-guarantee-body strong { color: #8A6F12; }

.pc-apply {
  position: relative;
  text-align: center;
  padding: 88px var(--gutter);
  color: #fff;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(21, 101, 192, .5) 0%, transparent 66%),
    linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 60%, var(--navy-2) 100%);
}
.pc-eyebrow-light { color: #F5B173; }
.pc-h2-light { color: #fff; }
.pc-h2-light::after { background: linear-gradient(90deg, #fff, var(--orange)); }
.pc-apply-date {
  margin-top: 20px;
  font-size: .95rem;
  color: #C7DCF2;
  letter-spacing: .02em;
}
.pc-apply-price {
  font-size: 1.15rem;
  margin-bottom: 26px;
}
.pc-apply-price strong {
  font-family: var(--font-en);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 .1em;
}
.pc-apply-price span { opacity: .55; margin: 0 .5em; }
.pc-apply-price small { font-size: .8rem; opacity: .8; margin-left: .3em; }
.pc-apply .pc-cta { justify-content: center; }
.pc-apply-note {
  margin-top: 16px;
  font-size: .88rem;
  color: #F0DFAE;
}
.pc-apply-sub {
  margin-top: 8px;
  font-size: .9rem;
  color: #C7DCF2;
}
.pc-apply-sub a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.pc-apply-sub a:hover { border-bottom-color: #fff; }

/* ---------------------------------------------------------------- 13. フッター */
.pc-footer {
  background: #06182E;
  color: #9FB6CC;
  text-align: center;
  padding: 46px var(--gutter) 108px;
  font-size: .88rem;
}
.pc-footer-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.pc-footer-mail { margin-bottom: 14px; }
.pc-footer-mail a { color: #9FB6CC; border-bottom: 1px solid rgba(159, 182, 204, .4); }
.pc-footer-mail a:hover { color: #fff; }
.pc-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 18px;
}
.pc-footer-links a { color: #9FB6CC; }
.pc-footer-links a:hover { color: #fff; text-decoration: underline; }
.pc-copy { font-size: .78rem; opacity: .6; margin: 0; }

/* 追従CTA */
.pc-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(10, 35, 66, .1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(105%);
  transition: transform .32s var(--ease);
}
.pc-sticky.is-on { transform: translateY(0); }
.pc-sticky-inner {
  max-width: var(--max-wide);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pc-sticky-text {
  margin: 0;
  font-size: .9rem;
  color: var(--navy);
  white-space: nowrap;
}
.pc-sticky-text strong { margin-right: .5em; }
.pc-sticky .pc-btn { padding: 13px 32px; font-size: 1rem; }

/* JSが無い場合は常時表示（内容が隠れないように） */
html:not(.js-reveal) .pc-sticky { transform: translateY(0); }

/* ---------------------------------------------------------------- 14. 表示演出 */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- 15. レスポンシブ */
@media (max-width: 900px) {
  .pc-nav { display: none; }
  .pc-sitebar-inner .pc-btn { margin-left: auto; }
  .pc-statlist { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .pc-statlist li:nth-child(odd) { border-left: 0; }
  .pc-steps { grid-template-columns: 1fr; }
  .pc-steps li:last-child:nth-child(odd) { grid-column: auto; }
  .pc-sticky-text { display: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .pc-lp { font-size: 15px; line-height: 1.85; }

  .pc-hero { padding-top: 46px; }
  .pc-hero-eyebrow { font-size: .8rem; letter-spacing: .2em; }
  .pc-hero-date { gap: 6px; padding: 10px 16px; }
  .pc-hero-date time { font-size: 1.45rem; }
  .pc-hero-date b { font-size: 1rem; width: 100%; }
  .pc-hero-date em { font-size: .68rem; padding: 2px 12px; }
  .pc-hero-visual { margin: 30px auto -56px; }

  .pc-offer { padding-top: 80px; padding-bottom: 48px; }
  .pc-offer-card { padding: 24px 20px 22px; }
  .pc-offer-price strong { font-size: 2.6rem; }
  .pc-offer-meta li { flex-direction: column; gap: 4px; }
  .pc-offer-meta li span { flex: none; align-self: flex-start; padding: 2px 10px; margin-top: 0; }
  .pc-btn { width: 100%; padding: 16px 20px; }
  .pc-btn-small { width: auto; padding: 9px 18px; }
  .pc-cta { gap: 10px; }

  .pc-section { padding: 60px 0; }
  .pc-sechead { margin-bottom: 30px; }
  .pc-quote { padding: 24px 20px 24px 46px; }
  .pc-quote::before { left: 12px; font-size: 3rem; }
  .pc-h3 { font-size: 1.05rem; }

  .pc-table { font-size: .9rem; min-width: 420px; }
  .pc-table th, .pc-table td { padding: 10px 12px; }

  .pc-way { padding: 22px 18px 20px; }
  .pc-h3-way { font-size: 1.06rem; gap: 8px; }
  .pc-storystep { padding: 22px 18px 20px; }
  .pc-storystep > header { gap: 10px; }
  .pc-storystep > header h3 { font-size: 1.1rem; }
  .pc-storynote { padding: 14px 16px; }
  .pc-benefit { padding: 18px 18px; gap: 14px; }
  .pc-benefit-no { font-size: 1.6rem; }
  .pc-instructor { padding: 24px 20px; gap: 20px; justify-content: center; }
  .pc-photo { width: 140px; height: 140px; flex-basis: 140px; margin-inline: auto; }
  .pc-instructor-name { text-align: center; }

  .pc-play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .pc-play::after { left: 25px; top: 19px; border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; }

  .pc-guarantee { padding: 56px var(--gutter); }
  .pc-guarantee-badge { width: 92px; height: 92px; font-size: 1.7rem; }
  .pc-apply { padding: 62px var(--gutter); }
  .pc-apply-price strong { font-size: 1.7rem; }
  .pc-footer { padding-bottom: 96px; }
}

/* PCでのみ効かせる改行 */
.pc-brpc { display: none; }
@media (min-width: 768px) { .pc-brpc { display: inline; } }

/* ---------------------------------------------------------------- 15b. 無料セミナー案内 */
.pc-freegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 860px;
  margin: 0 auto 22px;
}
.pc-freecard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(10, 35, 66, .06);
  text-align: center;
}
.pc-freedate {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}
.pc-freetime {
  margin: 0 0 6px;
  font-size: .94rem;
  color: var(--muted);
}
.pc-freecard .pc-btn { width: 100%; max-width: 280px; }
@media (max-width: 720px) {
  .pc-freegrid { grid-template-columns: 1fr; gap: 16px; }
  .pc-freecard { padding: 22px 18px 20px; }
  .pc-freedate { font-size: 1.14rem; }
}

/* ---------------------------------------------------------------- 16. 印刷 */
@media print {
  .pc-sitebar, .pc-sticky, .pc-cta, .pc-video, .pc-nav { display: none !important; }
  .pc-lp { font-size: 11pt; }
  .pc-hero, .pc-apply, .pc-stats { background: #fff !important; color: #000 !important; }
  .pc-h1, .pc-h2-light, .pc-hero-tagline, .pc-hero-date time { color: #000 !important; text-shadow: none !important; }
  .pc-section { padding: 18pt 0; break-inside: avoid; }
  .pc-faq { break-inside: avoid; }
  .pc-faq p { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}