/* subpages.css sets the hero text to white and expects each page class to
   supply its own dark background image. Defined here so the new page does
   not require an edit to the shared stylesheet. */
.page-service .sub-hero {
  background-image:
    linear-gradient(90deg, rgba(7,20,38,.92), rgba(7,20,38,.60) 58%, rgba(7,20,38,.22)),
    url("service/web-production-macro-v2.webp");
}
.price-note { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.training-phrase { display: inline-block; }
.detail-table th { width: 186px; }
@media (max-width: 720px) { .detail-table th { width: auto; } }
.price-range {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 0 22px;
}
.price-range div { padding: 20px 22px; border: 1px solid var(--line); }
.price-range strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 18px; }
.price-range b { display: block; margin: 8px 0 8px; font-family: var(--serif); font-size: 29px; line-height: 1.2; }
.price-range span { display: block; color: var(--muted); font-size: 16px; }
.price-range .cond { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--navy); font-size: 16px; }
.flow { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.flow li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 52px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.flow li:last-child { border-bottom: 0; }
.flow li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
.flow strong { display: block; margin-bottom: 4px; color: var(--navy); font-size: 18px; }
.flow span { color: var(--muted); font-size: 16px; }
.ask-list { margin: 0 0 20px; padding-left: 1.35em; color: var(--muted); font-size: 16px; }
.ask-list li { margin-bottom: 6px; }
.cta-mail {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  max-width: 100%;
  padding: 14px 22px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(7,20,38,.12);
  background: var(--navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.fine { margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.lesson-label-line { display: block; white-space: nowrap; }
.practice-item span, .content-section > p, .detail-table th, .detail-table td { font-size: 16px; }
.fde-pricing {
  position: relative;
  margin-top: 0;
  padding: clamp(30px,5vw,52px);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(7,20,38,.97), rgba(7,20,38,.8)),
    url("service/strategy-whiteboard-v2.webp") center / cover;
  border: 0;
}
.fde-pricing::after { content: "FDE"; position: absolute; right: -10px; top: -28px; color: rgba(255,255,255,.05); font: 700 clamp(110px,18vw,210px)/1 Georgia,serif; }
.fde-pricing > * { position: relative; z-index: 1; }
.fde-pricing h2 { max-width: 720px; margin-bottom: 16px; }
.fde-pricing > p { max-width: 760px; color: rgba(255,255,255,.72); }
.fde-price-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 30px; border-block: 1px solid rgba(255,255,255,.18); }
.fde-price-item { padding: 24px 22px 26px 0; }
.fde-price-item + .fde-price-item { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.18); }
.fde-price-item small { display: block; color: #e5a24c; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.fde-price-item strong { display: block; margin: 5px 0 8px; font-size: 17px; }
.fde-price-item b { display: block; font-family: var(--serif); font-size: 25px; }
.fde-price-item span { display: block; margin-top: 9px; color: rgba(255,255,255,.64); font-size: 14px; }
.fde-price-note { margin: 20px 0 0; color: rgba(255,255,255,.78); font-size: 14px; }
.fde-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.fde-page-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; max-width: 100%; margin-top: 24px; padding: 14px 22px; color: var(--navy); background: var(--paper); border: 1px solid rgba(255,255,255,.72); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); font-size: 16px; font-weight: 700; line-height: 1.5; transition: background .18s ease, border-color .18s ease; }
.fde-page-link::after, .fde-contact-link::after, .cta-mail::after { content: "↗"; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-left: 1px solid rgba(13,35,66,.2); padding-left: 12px; font-size: 20px; line-height: 1; }
.fde-actions .fde-page-link { margin-top: 0; }
.fde-contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; max-width: 100%; padding: 14px 22px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); border-radius: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; transition: background .18s ease, border-color .18s ease; }
.fde-contact-link::after, .cta-mail::after { border-color: rgba(255,255,255,.25); }
.fde-page-link:hover { background: #fff; border-color: #fff; }
.fde-contact-link:hover { background: rgba(255,255,255,.16); }
.cta-mail:hover { background: #18385e; border-color: #18385e; }
.fde-page-link:focus-visible, .fde-contact-link:focus-visible, .cta-mail:focus-visible { outline: 2px solid #e5b878; outline-offset: 4px; }
.service-page-links { display: flex; flex-wrap: wrap; gap: 12px 24px; width: min(var(--max), calc(100% - 40px)); margin-inline: auto; padding: 18px 0; border-bottom: 1px solid var(--line); }
.service-page-links a { color: var(--navy); font-size: 14px; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .fde-price-grid { grid-template-columns: 1fr; }
  .fde-price-item, .fde-price-item + .fde-price-item { padding: 22px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .fde-price-item:last-child { border-bottom: 0; }
}