/*
 * sgt.AI 共通LPスタイル
 * app1～app6などの広告用ランディングページで共通利用することを想定。
 * ページごとの色は .lp-theme-* または CSSカスタムプロパティで変更可能。
 */

:root {
  --lp-content-width: 940px;
}

.lp-page {
  --lp-primary: #4f8b86;
  --lp-primary-dark: #356f6b;
  --lp-accent: #c9584d;
  --lp-gold: #d5a24a;
  --lp-ink: #243847;
  --lp-line: #d9e6e2;
  --lp-cream: #fffaf0;
  --lp-peach: #fff2e8;
  --lp-mint: #eef9f5;
  --lp-sky: #f0f8fb;
  color: var(--lp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
               "Yu Gothic", Meiryo, sans-serif;
}
.lp-page * { box-sizing: border-box; }
.lp-page a { text-underline-offset: 3px; }
.lp-page #prev-page-button,
.lp-page #next-page-button { display: none !important; }

.lp-wrap,
.lp-hero,
.lp-anchor-menu,
.lp-bottom-cta {
  width: min(var(--lp-content-width), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}

.lp-hero {
  margin-top: 6px;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid #e3ded4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 91% 8%, rgba(255,216,176,.55), transparent 30%),
    linear-gradient(145deg, #fffaf0 0%, #ffffff 58%, #eff9f5 100%);
  box-shadow: 0 10px 28px rgba(45,78,73,.09);
  overflow: hidden;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(280px,.92fr);
  gap: 28px;
  align-items: center;
}
.lp-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #e6f4ef;
  color: var(--lp-primary-dark);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
}
.lp-hero h1 {
  margin: 0;
  color: #244a4e;
  font-size: clamp(30px,3.4vw,46px);
  line-height: 1.38;
}
.lp-hero-lead {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.9;
}
.lp-hero-lead strong { color: #9a483f; }
.lp-hero-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--lp-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.75;
}
.lp-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.lp-hero .lp-visual img {
  max-width: 430px;
  margin: 0 auto;
}
.lp-panel .lp-visual img {
  max-width: 760px;
  margin: 0 auto;
}
.lp-visual--small img { max-width: 270px; }

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.lp-cta-row--center { justify-content: center; }
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 19px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1.35;
  transition: transform .15s ease, opacity .15s ease;
}
.lp-btn:hover { transform: translateY(-1px); opacity: .92; }
.lp-btn--primary { background: var(--lp-accent); color: #fff !important; }
.lp-btn--secondary { background: var(--lp-primary); color: #fff !important; }
.lp-btn--light {
  border: 1px solid #a9cbc5;
  background: #fff;
  color: var(--lp-primary-dark) !important;
}

.lp-anchor-menu {
  margin-bottom: 18px;
  padding: 11px;
  border: 1px solid var(--lp-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(45,78,73,.05);
}
.lp-anchor-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-anchor-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f2f8f6;
  color: #355f5e;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.lp-section {
  padding: 12px 0;
  scroll-margin-top: 190px;
}
.lp-panel {
  padding: 28px;
  border: 1px solid var(--lp-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(45,78,73,.05);
}
.lp-panel--peach { background: linear-gradient(180deg,#fff7f1,#fff); }
.lp-panel--mint { background: linear-gradient(180deg,#eff9f5,#fff); }
.lp-panel--sky { background: linear-gradient(180deg,#f2f9fb,#fff); }
.lp-panel--cream { background: linear-gradient(180deg,#fffaf0,#fff); }

.lp-section-title {
  margin: 0 0 10px;
  color: #315d60;
  text-align: center;
  font-size: clamp(23px,2.6vw,32px);
  line-height: 1.45;
}
.lp-section-lead {
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
}

.lp-card-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.lp-card {
  padding: 18px;
  border: 1px solid #dce8e4;
  border-radius: 17px;
  background: rgba(255,255,255,.94);
}
.lp-card h3 {
  margin: 0 0 7px;
  color: #315d60;
  font-size: 17px;
  line-height: 1.5;
}
.lp-card p,
.lp-card li {
  font-size: 14px;
  line-height: 1.8;
}
.lp-card p { margin: 0; }
.lp-card ul { margin: 0; padding-left: 1.35em; }
.lp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f5e9d2;
  font-size: 19px;
  vertical-align: middle;
}

.lp-conversation {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  align-items: center;
}
.lp-bubble-list {
  display: grid;
  gap: 10px;
}
.lp-bubble {
  padding: 13px 15px;
  border: 1px solid #eadfd3;
  border-radius: 15px;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
}
.lp-message {
  margin: 18px 0 0;
  padding: 15px 17px;
  border-left: 5px solid var(--lp-primary);
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  line-height: 1.85;
}

.lp-before-after {
  display: grid;
  grid-template-columns: 1fr 54px 1fr;
  gap: 15px;
  align-items: center;
}
.lp-before-after-box {
  padding: 20px;
  border-radius: 18px;
}
.lp-before-after-box--before { background: #fff6f2; border: 1px solid #efd7cd; }
.lp-before-after-box--after { background: #eef9f5; border: 1px solid #cfe5dd; }
.lp-before-after-box h3 {
  margin: 0 0 12px;
  color: #315d60;
  text-align: center;
  font-size: 19px;
}
.lp-list-cards {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-list-cards li {
  margin: 8px 0;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.6;
}
.lp-arrow {
  color: #b9854a;
  text-align: center;
  font-size: 38px;
  font-weight: 900;
}

.lp-example-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.lp-example {
  padding: 16px;
  border: 1px solid #dce8e4;
  border-radius: 16px;
  background: #fff;
}
.lp-example strong {
  display: block;
  margin-bottom: 6px;
  color: #315d60;
  font-size: 16px;
}
.lp-example span {
  font-size: 14px;
  line-height: 1.7;
}

.lp-flow-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}
.lp-step {
  position: relative;
  padding: 18px 14px;
  border: 1px solid #d8e7e2;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.lp-step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: var(--lp-primary);
  color: #fff;
  font-weight: 900;
}
.lp-step strong {
  display: block;
  margin-bottom: 6px;
  color: #315d60;
  font-size: 15px;
}
.lp-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.lp-fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lp-fit-box {
  padding: 20px;
  border-radius: 17px;
}
.lp-fit-box h3 { margin: 0 0 10px; font-size: 18px; }
.lp-fit-box ul { margin: 0; padding-left: 1.3em; }
.lp-fit-box li { margin: 5px 0; font-size: 14px; line-height: 1.7; }
.lp-fit-box--good { background: #eff9f5; border: 1px solid #cde4dc; }
.lp-fit-box--bad { background: #fff7f1; border: 1px solid #eedbd0; }

.lp-product-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}
.lp-product-box,
.lp-price-box {
  padding: 22px;
  border: 1px solid #dce8e4;
  border-radius: 18px;
  background: #fff;
}
.lp-product-box h3,
.lp-price-box h3 {
  margin: 0 0 12px;
  color: #315d60;
  font-size: 19px;
}
.lp-product-box ul { margin: 0; padding-left: 1.3em; }
.lp-product-box li { margin: 6px 0; font-size: 14px; line-height: 1.7; }
.lp-price-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg,#fff8f3,#fff);
}
.lp-price {
  color: #b34840;
  font-size: 31px;
  font-weight: 900;
  line-height: 1.25;
}
.lp-price-sub {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.7;
}

.lp-faq-list {
  overflow: hidden;
  border: 1px solid #dce8e4;
  border-radius: 16px;
  background: #fff;
}
.lp-faq-item {
  padding: 16px 18px;
  border-bottom: 1px solid #e4ece9;
}
.lp-faq-item:last-child { border-bottom: 0; }
.lp-faq-q {
  display: block;
  margin-bottom: 6px;
  color: #315d60;
  font-size: 15px;
  font-weight: 800;
}
.lp-faq-a {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.lp-next-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.lp-next-card {
  padding: 20px;
  border: 1px solid #d9e7e3;
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.lp-next-card h3 {
  margin: 0 0 7px;
  color: #315d60;
  font-size: 17px;
}
.lp-next-card p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
}

.lp-note {
  margin: 12px 0 0;
  padding: 16px 18px;
  border: 1px solid #e3ddd3;
  border-radius: 16px;
  background: #fffaf3;
}
.lp-note-title {
  margin-bottom: 5px;
  color: #7b5b36;
  font-size: 15px;
  font-weight: 800;
}
.lp-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.lp-bottom-cta {
  margin-top: 12px;
  margin-bottom: 34px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(135deg,#2f6a67,#467f79);
  color: #fff;
  text-align: center;
  box-shadow: 0 9px 26px rgba(45,78,73,.12);
}
.lp-bottom-cta h2 {
  margin: 0 0 9px;
  font-size: 26px;
  line-height: 1.45;
}
.lp-bottom-cta p {
  max-width: 730px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.85;
}
.lp-bottom-cta .lp-btn--light {
  border-color: #fff;
  background: #fff;
}

@media screen and (max-width: 767px) {
  html { scroll-padding-top: 28vw; }
  .ly-wrapper { padding-top: 10vw !important; }
  .ly-wrapper main { padding-top: 4vw; }

  .lp-wrap,
  .lp-hero,
  .lp-anchor-menu,
  .lp-bottom-cta {
    width: calc(100% - 24px);
  }

  .lp-hero {
    margin-top: 0;
    margin-bottom: 13px;
    padding: 22px 16px;
    border-radius: 19px;
  }
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lp-kicker { font-size: 13px; }
  .lp-hero h1 {
    font-size: 26px !important;
    line-height: 1.43 !important;
  }
  .lp-hero-lead { font-size: 15px; line-height: 1.8; }
  .lp-hero-note { font-size: 13px; }
  .lp-visual img { max-height: 270px; object-fit: contain; }

  .lp-cta-row { display: grid; grid-template-columns: 1fr; }
  .lp-btn { width: 100%; min-height: 49px; font-size: 15px; }

  .lp-anchor-menu ul { display: grid; grid-template-columns: 1fr 1fr; }
  .lp-anchor-menu a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }

  .lp-section { padding: 10px 0; scroll-margin-top: 28vw; }
  .lp-panel { padding: 20px 14px; border-radius: 19px; }
  .lp-section-title { font-size: 22px; }
  .lp-section-lead { text-align: left; font-size: 14px; }

  .lp-card-grid,
  .lp-example-grid,
  .lp-flow-grid,
  .lp-fit-grid,
  .lp-product-grid,
  .lp-next-grid {
    grid-template-columns: 1fr;
  }

  .lp-conversation { grid-template-columns: 1fr; gap: 12px; }
  .lp-conversation .lp-visual { max-width: 220px; margin: 0 auto; }

  .lp-before-after { grid-template-columns: 1fr; }
  .lp-arrow { transform: rotate(90deg); font-size: 31px; line-height: 1; }

  .lp-step { text-align: left; padding-left: 60px; }
  .lp-step-no {
    position: absolute;
    left: 13px;
    top: 16px;
  }

  .lp-price { font-size: 29px; }

  .lp-bottom-cta {
    margin-bottom: 22px;
    padding: 22px 14px;
    border-radius: 19px;
  }
  .lp-bottom-cta h2 { font-size: 22px; }

  /* スマホ：小さめだった本文を少し拡大 */
  .lp-hero-note,
  .lp-section-lead,
  .lp-card p,
  .lp-card li,
  .lp-bubble,
  .lp-message,
  .lp-list-cards li,
  .lp-example span,
  .lp-step p,
  .lp-fit-box li,
  .lp-product-box li,
  .lp-price-sub,
  .lp-faq-a,
  .lp-next-card p,
  .lp-note p {
    font-size: clamp(14.5px, 3.9vw, 16px);
    line-height: 1.75;
  }
  .lp-example strong,
  .lp-step strong,
  .lp-faq-q {
    font-size: clamp(16px, 4.2vw, 17px);
  }
  .lp-hero .lp-visual img {
    max-width: 360px;
  }
}

/* =========================================================
 * index.html（トップページ）
 * app1～app6のLPデザインに合わせた専用スタイル
 * ========================================================= */
.lp-page--top {
  --lp-primary: #4f8b86;
  --lp-primary-dark: #356f6b;
  --lp-accent: #c9584d;
  --lp-gold: #d5a24a;
}

.lp-page--top .top-hero {
  padding: 30px 34px 24px;
  text-align: center;
}
.lp-page--top .top-hero .lp-kicker {
  margin-bottom: 10px;
}
.lp-page--top .top-hero h1 {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(30px, 3.2vw, 43px);
}
.lp-page--top .top-hero .lp-hero-lead {
  max-width: 790px;
  margin: 17px auto 0;
  text-align: left;
}
.lp-page--top .top-hero-visual {
  max-width: 860px;
  margin: -8px auto -7px;
  text-align: center;
}
.lp-page--top .top-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.lp-page--top .top-browser-intro {
  width: min(var(--lp-content-width), calc(100% - 40px));
  margin: 0 auto 18px;
  padding: 20px 25px;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #f2f9fb, #fff);
  box-shadow: 0 6px 20px rgba(45, 78, 73, .05);
  color: var(--lp-ink);
}
.lp-page--top .top-browser-intro h2 {
  margin: 0 0 7px;
  color: #315d60;
  text-align: center;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.45;
}
.lp-page--top .top-browser-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
}

.lp-page--top .lp-section {
  width: min(var(--lp-content-width), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}
.lp-page--top .lp-jump-anchor {
  display: block;
  height: 130px;
  margin-top: -130px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.lp-page--top .top-section-body {
  min-width: 0;
}
.lp-page--top .lp-section-lead {
  margin-bottom: 18px;
}
.lp-page--top .lp-card--wide {
  grid-column: 1 / -1;
}
.lp-page--top .lp-card p {
  margin: 0;
}
.lp-page--top .lp-message {
  border-left-color: var(--lp-accent);
}

.lp-page--top .top-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.lp-page--top .top-purpose-card {
  display: flex;
  flex-direction: column;
  min-height: 205px;
  padding: 18px;
  border: 1px solid #dce8e4;
  border-radius: 17px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 14px rgba(45, 78, 73, .035);
  text-align: left;
}
.lp-page--top .top-purpose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-page--top .top-purpose-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lp-page--top .top-purpose-no {
  display: inline-block;
  margin-bottom: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e8f4f0;
  color: var(--lp-primary-dark);
  font-size: 13px;
  font-weight: 800;
}
.lp-page--top .top-purpose-card h3 {
  margin: 0;
  color: #315d60;
  font-size: 20px;
  line-height: 1.45;
}
@media screen and (min-width: 768px) {
  .lp-page--top .top-purpose-card h3 {
    white-space: nowrap;
  }
}
.lp-page--top .top-purpose-card p {
  margin: 12px 0 15px;
  font-size: 14px;
  line-height: 1.8;
}
.lp-page--top .top-purpose-man {
  flex: 0 0 auto;
  width: 70px;
  height: 84px;
  margin-top: -12px;
  object-fit: contain;
}
.lp-page--top .top-purpose-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 42px;
  margin-top: auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lp-primary);
  color: #fff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: transform .15s ease, opacity .15s ease;
}
.lp-page--top .top-purpose-card a:hover {
  transform: translateY(-1px);
  opacity: .92;
}

.lp-page--top .top-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  align-items: stretch;
}
.lp-page--top .top-process-item {
  position: relative;
  padding: 17px 12px;
  border: 1px solid #dce8e4;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.lp-page--top .top-process-item:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -17px;
  transform: translateY(-50%);
  color: #b9854a;
  font-size: 22px;
  font-weight: 900;
}
.lp-page--top .top-process-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: var(--lp-primary);
  color: #fff;
  font-weight: 900;
}
.lp-page--top .top-process-item h3 {
  margin: 0 0 7px;
  color: #315d60;
  font-size: 16px;
  line-height: 1.45;
}
.lp-page--top .top-process-item p {
  margin: 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
}

.lp-page--top .top-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.lp-page--top .top-role-card {
  padding: 18px;
  border: 1px solid #dce8e4;
  border-radius: 17px;
  background: #fff;
}
.lp-page--top .top-role-card h3 {
  margin: 0 0 9px;
  color: #315d60;
  text-align: center;
  font-size: 23px;
}
.lp-page--top .top-role-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.lp-page--top .top-philosophy {
  padding: 25px 30px;
  border: 1px solid #e3ded4;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 216, 176, .45), transparent 32%),
    linear-gradient(145deg, #fffaf0, #fff 58%, #eff9f5);
  box-shadow: 0 7px 22px rgba(45, 78, 73, .05);
}
.lp-page--top .top-philosophy h3 {
  margin: 0 0 10px;
  color: #315d60;
  text-align: center;
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.45;
}
.lp-page--top .top-philosophy p {
  max-width: 810px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
}

.lp-page--top .top-possibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.lp-page--top .top-possibility-grid > a {
  text-decoration: none;
}
.lp-page--top .top-possibility {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 1px solid #dce8e4;
  border-radius: 15px;
  background: #fff;
  color: #315d60;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-page--top .top-possibility:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(45, 78, 73, .08);
}

.lp-page--top .notes-box {
  width: min(var(--lp-content-width), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}
.lp-page--top .sgt01 {
  text-align: center;
}

.lp-page--top .lp-section-title,
.lp-page--top .top-process-item h3,
.lp-page--top .top-role-card h3,
.lp-page--top .top-philosophy h3,
.lp-page--top .top-browser-intro h2 {
  text-wrap: balance;
  line-break: strict;
}

/* 「あなたは、何を実現したいですか？」の各見出しは、
   文字を均等配置せず、右端まで使って自然に折り返す */
.lp-page--top .top-purpose-card h3 {
  text-wrap: wrap;
  line-break: normal;
  word-break: normal;
}

@media screen and (max-width: 767px) {
  .lp-page--top .top-hero {
    margin-top: 0;
    padding: 22px 16px 18px;
  }
  .lp-page--top .top-hero h1 {
    font-size: 25px !important;
    line-height: 1.45 !important;
  }
  .lp-page--top .top-hero .lp-hero-lead {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.8;
  }
  .lp-page--top .top-hero-visual {
    margin: -3px auto -4px;
  }
  .lp-page--top .top-hero-visual img {
    border-radius: 13px;
  }
  .lp-page--top .top-browser-intro,
  .lp-page--top .lp-section,
  .lp-page--top .notes-box {
    width: calc(100% - 24px);
  }
  .lp-page--top .top-browser-intro {
    margin-bottom: 12px;
    padding: 17px 15px;
    border-radius: 17px;
  }
  .lp-page--top .top-browser-intro h2 {
    font-size: 21px;
  }
  .lp-page--top .top-browser-intro p {
    font-size: 15px;
    line-height: 1.8;
  }
  .lp-page--top .lp-jump-anchor {
    height: 12vw;
    margin-top: -12vw;
  }
  .lp-page--top .top-purpose-grid,
  .lp-page--top .top-role-grid,
  .lp-page--top .top-possibility-grid {
    grid-template-columns: 1fr;
  }
  .lp-page--top .top-purpose-card {
    min-height: 0;
    padding: 16px;
  }
  .lp-page--top .top-purpose-head {
    gap: 8px;
  }
  .lp-page--top .top-purpose-card h3 {
    font-size: 18px;
  }
  .lp-page--top .top-purpose-man {
    width: 50px;
    height: 60px;
    margin-top: -8px;
  }
  .lp-page--top .top-purpose-card p,
  .lp-page--top .top-process-item p,
  .lp-page--top .top-role-card p {
    font-size: 15px;
    line-height: 1.75;
  }
  .lp-page--top .top-purpose-card a {
    width: 100%;
    min-height: 47px;
    font-size: 15px;
  }
  .lp-page--top .top-process {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lp-page--top .top-process-item {
    padding: 16px 15px 16px 58px;
    text-align: left;
  }
  .lp-page--top .top-process-step {
    position: absolute;
    top: 16px;
    left: 14px;
  }
  .lp-page--top .top-process-item:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: 50%;
    bottom: -20px;
    transform: translateX(50%);
  }
  .lp-page--top .top-process-item h3 {
    font-size: 17px;
  }
  .lp-page--top .top-role-card h3 {
    font-size: 21px;
  }
  .lp-page--top .top-philosophy {
    padding: 21px 16px;
    border-radius: 18px;
  }
  .lp-page--top .top-philosophy h3 {
    font-size: 22px;
  }
  .lp-page--top .top-philosophy p {
    font-size: 15px;
    line-height: 1.8;
  }
  .lp-page--top .top-possibility {
    min-height: 54px;
    font-size: 16px;
  }
  .lp-page--top .lp-card--wide {
    grid-column: auto;
  }
}
/* =========================================================
 * sgt.AI 共通：box1 モダン枠
 *
 * 既存のHTML構造
 *   .box1
 *     .box1_headline
 *     .box1_body
 * を変更せず、親要素へ .box1-modern を追加して使用します。
 *
 * 使用例：
 * <div class="box1 box1-modern bk_eeffee bd_366">
 *   <h2 class="box1_headline bk_366">見出し</h2>
 *   <div class="box1_body">...</div>
 * </div>
 *
 * h11_outline.html専用ではなく、他ページでも共通利用できます。
 * ========================================================= */

:root {
  --site-content-width: 940px;
  --site-content-gap-pc: 40px;
  --site-content-gap-sp: 24px;
}

/* ---------------------------------------------------------
 * 共通モダン枠
 * 上辺だけを太くせず、四辺を同じ1pxで囲みます。
 * --------------------------------------------------------- */
.box1-modern {
  --box-accent: #456c69;
  --box-soft: #f2f7f6;
  --box-line: #d3e0de;

  width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
  max-width: var(--site-content-width) !important;
  margin: 30px auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;

  border: 1px solid var(--box-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 7px 22px rgba(45, 78, 73, .06);
}

.box1-modern > .box1_headline {
  width: auto !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  box-sizing: border-box;

  border: 0 !important;
  border-bottom: 1px solid var(--box-line) !important;
  border-radius: 0 !important;
  background: var(--box-soft) !important;
  box-shadow: none !important;

  color: var(--box-accent) !important;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}

.box1-modern > .box1_body {
  width: auto !important;
  margin: 0 !important;
  padding: 22px 18px 26px !important;
  box-sizing: border-box;

  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
 * 既存の色クラスをそのまま利用できる配色
 * [1]～[3]の文字はHTMLに残し、番号バッジへ変更しません。
 * --------------------------------------------------------- */
.box1-modern.bd_366,
.box1-modern.box1-theme-green {
  --box-accent: #356b64;
  --box-soft: #eef7f5;
  --box-line: #c9ddd8;
}

.box1-modern.bd_D02020,
.box1-modern.box1-theme-red {
  --box-accent: #ae4e4e;
  --box-soft: #fff3f3;
  --box-line: #ead0d0;
}

.box1-modern.bd_16A,
.box1-modern.box1-theme-blue {
  --box-accent: #356f9f;
  --box-soft: #f0f6fb;
  --box-line: #ccdeec;
}

/* 新規ページで使える汎用テーマ */
.box1-modern.box1-theme-neutral {
  --box-accent: #455a64;
  --box-soft: #f4f6f7;
  --box-line: #d8e0e3;
}

.box1-modern.box1-theme-warm {
  --box-accent: #9a6440;
  --box-soft: #fff7ef;
  --box-line: #ead9c9;
}

/* =========================================================
 * h11_outline.html
 * 大見出し・3枠・Notesを同一の940px基準へ統一
 * ========================================================= */
.outline-page .box8B,
.outline-page .notes-box {
  width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
  max-width: var(--site-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box;
}

.outline-page .notes-box {
  margin-top: 30px !important;
}

/*
 * 最上部の4行：各行は左揃え、文章のまとまり全体はページ中央
 */
.outline-page .outline-main-title {
  display: flex !important;
  justify-content: center;
  text-align: left !important;
}

.outline-page .outline-main-title-text {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  text-align: left;
}

/* 旧CSSの背景色・太枠が内側へ残らないように調整 */
.outline-page .box1-modern > .box1_body > .box2 {
  margin-top: 0;
}

/* =========================================================
 * スマートフォン
 * ========================================================= */
@media screen and (max-width: 767px) {
  .box1-modern,
  .outline-page .box8B,
  .outline-page .notes-box {
    width: calc(100% - var(--site-content-gap-sp)) !important;
    max-width: none !important;
  }

  .box1-modern {
    margin: 22px auto !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(45, 78, 73, .055);
  }

  .box1-modern > .box1_headline {
    padding: 10px 12px !important;
    font-size: clamp(19px, 5.1vw, 22px) !important;
    line-height: 1.35;
  }

  .box1-modern > .box1_body {
    padding: 14px 8px 18px !important;
  }

  .outline-page .box1-modern .box7 {
    width: 100% !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 2vw 2.5vw 3vw !important;
    box-sizing: border-box;
  }

  .outline-page .box1-modern .box7 p.st-text1 {
    margin: .28em 0 !important;
    padding-left: 1.1em;
    text-indent: -1.1em;
    font-size: clamp(14px, 3.7vw, 16px) !important;
    line-height: 1.65;
  }

  .outline-page .st-mleft1 {
    margin-left: 0 !important;
  }

  .outline-page .outline-main-title {
    padding-right: 2vw !important;
    padding-left: 2vw !important;
  }

  .outline-page .outline-main-title-text {
    width: auto;
  }

  .outline-page .notes-box {
    margin-top: 22px !important;
  }
}
/* =========================================================
 * h11_outline.html：比較画像・説明文を大きく表示
 *
 * PCは2列比較を維持し、各画像を列幅いっぱいに表示します。
 * スマホは1列表示にして、画像と説明文をカード内ほぼ全幅にします。
 * ========================================================= */
.outline-page .box1-modern > .box1_body {
  padding: 18px 12px 22px !important;
}

.outline-page .box1-modern .box2,
.outline-page .box1-modern .box2_body {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.outline-page .box1-modern .tate-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 22px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  list-style: none;
}

.outline-page .box1-modern .tate-list {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.outline-page .box1-modern .tate-list > span {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.45;
}

.outline-page .box1-modern .tate-list > a.highslide {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.outline-page .box1-modern img.st-image1 {
  display: block !important;
  width: 100% !important;
  max-width: 440px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto 10px !important;
  object-fit: contain;
}

.outline-page .box1-modern .box7 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 10px 12px !important;
  box-sizing: border-box;
}

.outline-page .box1-modern .box7 p.st-text1 {
  width: 100% !important;
  max-width: none !important;
  margin: .25em 0 !important;
  padding-left: 1.05em !important;
  text-indent: -1.05em !important;
  box-sizing: border-box;
  font-size: 15px !important;
  line-height: 1.62;
}

@media screen and (max-width: 767px) {
  /* 外枠幅はNotesとそろえ、内側の余白だけを減らします */
  .outline-page .box1-modern > .box1_body {
    padding: 10px 4px 14px !important;
  }

  .outline-page .box1-modern .tate-menu {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px;
  }

  .outline-page .box1-modern .tate-list {
    width: 100% !important;
  }

  .outline-page .box1-modern .tate-list > span {
    margin-bottom: 6px;
    font-size: clamp(17px, 4.6vw, 19px) !important;
    line-height: 1.4;
  }

  .outline-page .box1-modern img.st-image1 {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 8px !important;
  }

  .outline-page .box1-modern .box7 {
    padding: 8px 5px 10px !important;
  }

  .outline-page .box1-modern .box7 p.st-text1 {
    margin: .22em 0 !important;
    font-size: clamp(14.5px, 3.85vw, 16px) !important;
    line-height: 1.58;
  }
}
/* =========================================================
 * 比較内容を上から下へつなぐ矢印
 * PCでは非表示、スマホだけ表示
 * 他ページでも再利用可能
 * ========================================================= */
.compare-flow-arrow {
  display: none;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .compare-flow-arrow {
    position: relative;
    display: block !important;
    width: 100% !important;
    height: 46px;
	margin-top: calc(3px - 8mm) !important;
	margin-bottom: calc(8px - 8mm) !important;
    padding: 0 !important;
    list-style: none;
  }

  /* 矢印の縦棒 */
  .compare-flow-arrow::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 10px;
    height: 22px;
    border-radius: 5px 5px 0 0;
    background: #3b82b8;
    transform: translateX(-50%);
  }

  /* 矢印の先端 */
  .compare-flow-arrow::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 17px solid #3b82b8;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    transform: translateX(-50%);
  }
}



/* =========================================================
 * index.html 差別化ブロック（コンパクト版）
 * ========================================================= */
.lp-page--top .top-difference-compact {
  width: min(var(--lp-content-width), calc(100% - 40px));
  margin: 0 auto 14px;
  padding: 16px 22px 14px;
  border: 1px solid #d8e6e2;
  border-radius: 18px;
  background: linear-gradient(180deg, #f4faf8, #fff);
  box-shadow: 0 5px 16px rgba(45, 78, 73, .045);
}
.lp-page--top .top-difference-compact h2 {
  margin: 0 0 11px;
  color: #315d60;
  text-align: center;
  font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.4;
  text-wrap: balance;
}
.lp-page--top .top-difference-lines {
  overflow: hidden;
  border: 1px solid #dce8e4;
  border-radius: 13px;
  background: #fff;
}
.lp-page--top .top-difference-line {
  display: grid;
  grid-template-columns: 205px 28px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 7px 16px;
  border-bottom: 1px solid #e3ece9;
  font-size: 18px;
  line-height: 1.45;
}
.lp-page--top .top-difference-line:last-child {
  border-bottom: 0;
}
.lp-page--top .top-difference-line strong {
  color: #415f60;
  font-size: 18px;
  font-weight: 900;
}
.lp-page--top .top-difference-arrow {
  color: #9a7851;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
}
.lp-page--top .top-difference-line--sgt {
  background: linear-gradient(90deg, #eaf6f1, #f8fcfa);
  color: #204f50;
  font-weight: 800;
}
.lp-page--top .top-difference-line--sgt strong {
  color: #235e5d;
  font-size: 20px;
}
.lp-page--top .top-difference-line--sgt span:last-child {
  font-size: 20px;
  font-weight: 900;
}
.lp-page--top .top-difference-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
}
.lp-page--top .top-difference-bottom p {
  margin: 0;
  color: #40595a;
  font-size: 14px;
  line-height: 1.65;
}
.lp-page--top .top-difference-bottom a {
  flex: 0 0 auto;
  color: var(--lp-primary-dark);
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-page--top .top-difference-bottom a:hover {
  text-decoration-thickness: 2px;
}

@media screen and (max-width: 767px) {
  .lp-page--top .top-difference-compact {
    width: calc(100% - 24px);
    margin-bottom: 12px;
    padding: 15px 12px 13px;
    border-radius: 17px;
  }
  .lp-page--top .top-difference-compact h2 {
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.45;
  }
  .lp-page--top .top-difference-line {
    grid-template-columns: minmax(112px, 38%) 20px minmax(0, 1fr);
    min-height: 0;
    padding: 9px 10px;
    font-size: clamp(14px, 3.7vw, 16px);
    line-height: 1.45;
  }
  .lp-page--top .top-difference-line strong {
    font-size: clamp(14px, 3.8vw, 16px);
  }
  .lp-page--top .top-difference-arrow {
    font-size: 16px;
  }
  .lp-page--top .top-difference-line--sgt strong,
  .lp-page--top .top-difference-line--sgt span:last-child {
    font-size: clamp(15px, 4vw, 17px);
  }
  .lp-page--top .top-difference-bottom {
    display: block;
    margin-top: 9px;
  }
  .lp-page--top .top-difference-bottom p {
    font-size: 13.5px;
    line-height: 1.65;
  }
  .lp-page--top .top-difference-bottom a {
    display: inline-block;
    margin-top: 5px;
    font-size: 13.5px;
  }
}


/* =========================================================
 * 5分で分かるガイド付き体験
 * ========================================================= */
.st-headerLink_item--experience > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 3px 12px !important;
  border: 1px solid #d47a45;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4e9, #ffe7d2);
  color: #a64920 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 3px 9px rgba(167,80,35,.14);
}
.st-headerLink_item--experience > a:hover,
.st-headerLink_item--experience > a:focus {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffead8, #ffd7b7);
}
.experience-promo__badge {
  display: inline-block;
  margin-bottom: 9px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff0df;
  color: #a34c24;
  font-size: 13px;
  font-weight: 800;
}
.experience-promo__panel {
  overflow: hidden;
  border-color: #ead6c5 !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,204,157,.38), transparent 30%),
    linear-gradient(145deg, #fff9f2, #fff 58%, #eef9f5) !important;
  text-align: center;
}
.experience-promo__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -6px auto 0;
}
.experience-promo__points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #d7e5e1;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #3e6664;
  font-size: 13px;
  font-weight: 700;
}
.experience-promo__button {
  min-width: 250px;
  background: linear-gradient(135deg, #d96538, #bd4f28) !important;
  color: #fff !important;
}
.lp-page--top .top-experience-promo {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  width: min(var(--lp-content-width), calc(100% - 40px));
  margin: 0 auto 18px;
  padding: 21px 25px;
  border: 1px solid #ead6c5;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,201,150,.34), transparent 32%),
    linear-gradient(145deg, #fff8f1, #fff 62%, #eef9f5);
}
.lp-page--top .top-experience-promo h2 {
  margin: 0 0 7px;
  color: #8f4325;
  font-size: clamp(22px,2.5vw,29px);
}
.lp-page--top .top-experience-promo p {
  margin: 0;
  color: #40595a;
  font-size: 15px;
  line-height: 1.8;
}
.lp-page--top .top-experience-promo__button,
.basetool-experience__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 225px;
  min-height: 50px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d96538, #bd4f28);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
}
.basetool-experience {
  width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc)));
  margin: 26px auto 30px;
  padding: 24px 26px 26px;
  box-sizing: border-box;
  border: 1px solid #ead6c5;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255,203,154,.34), transparent 32%),
    linear-gradient(145deg, #fff8f1, #fff 62%, #eef9f5);
  text-align: center;
}
.basetool-experience h2 {
  margin: 0 0 9px;
  color: #8f4325;
  font-size: 27px;
}
.basetool-experience p {
  max-width: 760px;
  margin: 0 auto 18px;
  color: #40595a;
  font-size: 16px;
  line-height: 1.85;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .st-headerLink_item--experience {
    width: 100%;
    margin-bottom: 5px;
  }
  .st-headerLink_item--experience > a {
    width: 100%;
    min-height: 38px;
    border-radius: 10px;
    font-size: 14px !important;
  }
  .experience-promo__points {
    display: grid;
    grid-template-columns: 1fr;
  }
  .experience-promo__points span {
    justify-content: center;
    font-size: 14px;
  }
  .lp-page--top .top-experience-promo {
    display: block;
    width: calc(100% - 24px);
    margin-bottom: 12px;
    padding: 18px 15px;
  }
  .lp-page--top .top-experience-promo__button {
    width: 100%;
    min-width: 0;
    margin-top: 15px;
  }
  .basetool-experience__button {
    width: 80%;
    min-width: 0;
    margin-top: 15px;
  }
  .basetool-experience {
    width: calc(100% - var(--site-content-gap-sp));
    margin: 22px auto;
    padding: 20px 14px 22px;
  }
  .basetool-experience h2 {
    font-size: 22px;
  }
  .basetool-experience p {
    font-size: 15px;
  }
}


/* =========================================================
 * ヘッダー「ガイド付き体験」高さ・上下中央揃え修正
 * ========================================================= */
.st-header_right,
.st-header_right .st-headerLink,
.st-headerLink.ut-pcOnly {
  display: flex;
  align-items: center;
}

.st-headerLink.ut-pcOnly {
  height: 100%;
}

.st-headerLink.ut-pcOnly .st-headerLink_item {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
}

.st-headerLink.ut-pcOnly .st-headerLink_item > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.st-headerLink_item--experience > a {
  min-height: 24px !important;
  height: 24px;
  padding: 0 10px !important;
  border-radius: 12px;
  line-height: 22px !important;
  box-sizing: border-box;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .st-headerLink.st-headerLink--spTop {
    align-items: stretch;
  }

  .st-headerLink.st-headerLink--spTop .st-headerLink_item {
    height: auto;
  }

  .st-headerLink.st-headerLink--spTop .st-headerLink_item--experience > a {
    min-height: 34px !important;
    height: 34px;
    padding: 0 10px !important;
    line-height: 32px !important;
    border-radius: 8px;
  }
}


/* =========================================================
 * ガイド付き体験：スマホ向けPC閲覧推奨案内
 * experience/index.php 内でのみ使用
 * ========================================================= */
.experience-pc-recommend {
  display: none;
}

@media screen and (max-width: 767px) {
  .experience-pc-recommend {
    display: block;
    margin: 12px 0 0;
    padding: 12px 13px;
    border: 1px solid #e3c79f;
    border-radius: 10px;
    background: #fff8ed;
    color: #704a24;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
    box-sizing: border-box;
  }

  .experience-pc-recommend strong {
    color: #a24e25;
  }
}
/* =========================================================
 * PC基準幅 1200px / 6大メニュー
 *
 * ・既存 style.css は変更しない
 * ・既存 addstyle.css の定義を維持し、このブロックで上書きする
 * ・スマートフォン（767px以下）は従来仕様を維持
 * ========================================================= */

:root {
  --lp-content-width: 1200px;
  --site-content-width: 1200px;
}

@media print, screen and (min-width: 768px) {

  /* 上段ロゴ・お問い合わせ等 */
  .st-header_upper_inner {
    width: min(1200px, calc(100% - 40px));
  }

  /* 6大見出しを1200px内に均等配置 */
  .st-nav {
    width: min(1200px, calc(100% - 40px));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    justify-content: initial;
  }

  .st-navItem {
    width: auto;
    min-width: 0;
  }

  /* 6列でもサブメニュー文字が窮屈になりにくいよう微調整 */
  .st-nav_lowerLink {
    padding: 0 8px 0 26px;
    font-size: 13px;
  }

  .st-nav_lowerLink::before {
    left: 9px;
  }

  /* footerも本文の1200px基準に合わせる */
  .st-container {
    width: min(1220px, 100%);
  }

  .st-footer_under {
    width: min(1200px, calc(100% - 40px));
  }
}

/* =========================================================
 * 動作環境ページ共通
 * h40_environment.html / h40R_environment.html
 *
 * ページ固有の調整は body.env-page 内だけに限定。
 * .env-* クラスは、他ページでも同じ部品を使う場合に再利用可能。
 * ========================================================= */
/* 動作環境ページ：PC表示は変えず、スマホで本文だけを読みやすくする */
      @media screen and (max-width: 767px) {
        .env-page main .box1 .box1_body .st-text16C {
          font-size: clamp(14px, 3.7vw, 16px) !important;
          line-height: 1.7 !important;
          letter-spacing: 0.02em;
        }
        .env-page main .box1 .box1_body .st-text15,
        .env-page main .box1 .box1_body .st-text18 {
          font-size: clamp(14px, 3.6vw, 16px) !important;
          line-height: 1.65 !important;
          letter-spacing: 0.02em;
        }
        .env-page main .box1 .box1_body .st-text14,
        .env-page .env-page main .box1 .box1_body .st-text14C,
        .env-page main .box1 .box1_body .font14 {
          font-size: clamp(13.5px, 3.5vw, 15.5px) !important;
          line-height: 1.65 !important;
          letter-spacing: 0.02em;
        }
        .env-page main .box1 .box1_body .font16 {
          font-size: clamp(14px, 3.5vw, 16px) !important;
          line-height: 1.7 !important;
          letter-spacing: 0.02em;
        }
        .env-page main .box1 .box1_body .font18B {
          line-height: 1.65 !important;
        }
        .env-page .font18B {
          font-size: 15px;
        }
        .env-page main .box1 .box1_body .ManualPage-button,
        .env-page main .box1 .box1_body .ManualPage1-button,
        .env-page main .box1 .box1_body .ManualPage2-button {
          font-size: clamp(13px, 3.5vw, 15px) !important;
          line-height: 1.35 !important;
          padding-top: 2.2vw;
          padding-bottom: 2.2vw;
        }

		/* margin-left 調整 */
        body#totop.env-page .st-mleft1 {
		  margin-left:-10px;
        }
        body#totop.env-page .st-mleft2 {
		  margin-left: 4px;
        }
        body#totop.env-page .st-mleft3 {
		  margin-left:-16px;
        }
        body#totop.env-page .st-mleft4 {
		  margin-left: 14px;
        }
		/* 見出し文字サイズ */
        body#totop.env-page .st-hdsz1 {
          font-size: 4.5vw;
        }
	    .env-page .st-text20 {
		  font-size: 4.0vw;
	    }
		.env-page .st-text18B {
		  font-size: 4.9vw;
		}
		.env-page .st-text22A {
		  font-size: 5.2vw;
		}
		.env-page .st-text3B {
		  font-size: 4.4vw;
		}
		.env-page ul.hd_list li:before {
		  top: 1.6vw;
		  left: -1.2vw;
		}
		.env-page .alignLeft {
		  text-align: left;
		  font-size: 16px;
		  margin-left: 2px;
		}
		.env-page .sgt02a {
		  font-size: 4.2vw;
		}
      }


      /* 動作環境ページ共通 */
      .env-lead {
        max-width: 920px;
        margin: 0 auto;
      }
      .env-choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }
      .env-choice-card {
        box-sizing: border-box;
        border: 2px solid #d7d7d7;
        border-radius: 8px;
        background: #fff;
        padding: 20px 20px 5px 20px;
      }
      .env-choice-card h3 {
        margin: 0 0 12px;
        text-align: center;
        font-size: 26px;
        line-height: 1.45;
      }
      .env-choice-card p,
      .env-choice-card li {
        font-size: 16px;
        line-height: 1.8;
      }
      .env-choice-card ul {
        margin: 8px 0 0;
        padding-left: 1.0em;
      }
      .env-choice-card--rental {
        border-color: #d02020;
        background: #fffafa;
      }
      .env-choice-card--build {
        border-color: #166aaa;
        background: #f7fbff;
      }
      .env-badge {
        display: inline-block;
        margin-bottom: 7px;
        padding: 3px 12px;
        border-radius: 999px;
        background: #d02020;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
      }
      .env-badge--blue {
        background: #166aaa;
      }
      .env-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .env-table {
        width: 100%;
        min-width: 660px;
        border-collapse: collapse;
        background: #fff;
        font-size: 16px;
        line-height: 1.6;
      }
      .env-table th,
      .env-table td {
        border: 1px solid #aaa;
        padding: 10px 12px;
        vertical-align: top;
      }
      .env-table th {
        background: #e9f3ff;
        text-align: center;
        white-space: nowrap;
      }
      .env-table .recommended {
        background: #fff4f4;
        font-weight: bold;
        color: #b00000;
      }
      .env-step-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 16px 0;
      }
      .env-step {
        position: relative;
        border: 2px solid #366;
        border-radius: 8px;
        background: #fff;
        padding: 16px 12px;
        text-align: center;
        font-size: 16px;
        line-height: 1.6;
      }
      .env-step strong {
        display: block;
        margin-bottom: 5px;
        color: #064f6a;
        font-size: 19px;
      }
      .env-page-link {
        /* display: inline-block; */
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
        box-sizing: border-box;
        min-width: 280px;
        margin: 8px;
        padding: 12px 22px;
        border-radius: 6px;
        background: #166aaa;
        color: #fff !important;
        text-decoration: none;
        font-weight: bold;
        font-size: 17px;
        line-height: 1.45;
        height: 74px;
      }
      .env-page-link--red {
        background: #d02020;
      }
      .env-small-note {
        font-size: 13px;
        line-height: 1.7;
        color: #555;
		margin:10px;
		text-align: left;
      }
      @media screen and (max-width: 767px) {
        .env-choice-grid,
        .env-step-grid {
          grid-template-columns: 1fr;
        }
        .env-choice-card {
          padding: 15px 15px 5px 15px;
        }
        .env-choice-card h3 {
          font-size: 6vw;
        }
        .env-choice-card p,
        .env-choice-card li,
        .env-step {
          font-size: clamp(14px, 3.7vw, 16px);
		  text-align: left;
        }
        .env-page-link {
          min-width: 0;
          width: calc(100% - 16px);
          margin: 8px;
          font-size: 16px;
          height: 20vw;
        }
      }
    

      /* h40 / h40R 追加 */
      .env-route-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 14px;
      }
      .env-route-card {
        border: 1px solid #d5dfdf;
        border-radius: 10px;
        background: #fff;
        padding: 18px;
        text-align: center;
      }
      .env-route-card h3 {
        margin: 0 0 8px;
        font-size: 21px;
        line-height: 1.45;
      }
      .env-route-card p {
        margin: 0 0 12px;
        font-size: 15px;
        line-height: 1.75;
        text-align: left;
      }
      .env-compare-title {
        margin: 16px 0 8px;
        color: #064f6a;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
      }
      .env-server-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin: 14px 0;
      }
      .env-server-card {
        box-sizing: border-box;
        border: 2px solid #d5dfdf;
        border-radius: 10px;
        padding: 18px;
        background: #fff;
      }
      .env-server-card--free {
        border-color: #5b8f4e;
        background: #f7fff5;
      }
      .env-server-card--value {
        border-color: #d02020;
        background: #fffafa;
      }
      .env-server-card h3 {
        margin: 0 0 8px;
        text-align: center;
        font-size: 23px;
      }
      .env-server-card p {
        margin: 7px 0;
        font-size: 15px;
        line-height: 1.75;
      }
      .env-merit {
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 7px;
        background: rgba(255,255,255,.85);
        font-size: 14px;
        line-height: 1.7;
      }
      .env-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-width: 760px;
        margin: 14px auto 0;
      }
      .env-action-grid .env-page-link {
        width: 100%;
        min-width: 0;
        margin: 0;
      }
      .env-page-link--xrea {
        background: #4f8b45;
      }
      @media screen and (max-width: 767px) {
        .env-route-grid,
        .env-server-summary,
        .env-action-grid {
          grid-template-columns: 1fr;
        }
        .env-route-card,
        .env-server-card {
          padding: 14px;
        }
        .env-route-card h3,
        .env-server-card h3 {
          font-size: 5.2vw;
        }
      }


      /* 2026-08-13: 上部キャッチとNotesをこのページ内で確実に1200px対応 */
      @media print, screen and (min-width: 768px) {
        .env-page main > h1.box8.env-page-catch {
          width: min(1200px, calc(100% - 40px)) !important;
          max-width: 1200px !important;
          margin-right: auto !important;
          margin-left: auto !important;
          padding: 20px 0 0 !important;
          box-sizing: border-box;
          text-align: center !important;
        }
        .env-page main > h1.box8.env-page-catch > strong,
        .env-page main > h1.box8.env-page-catch > span {
          display: block !important;
          width: 100% !important;
          white-space: nowrap !important;
          text-align: center !important;
        }
        .env-page main .notes-box {
          width: min(1200px, calc(100% - 40px)) !important;
          max-width: 1200px !important;
          margin-right: auto !important;
          margin-left: auto !important;
          box-sizing: border-box;
        }
        .env-page main .notes-content {
          max-width: 1080px;
          margin-right: auto !important;
          margin-left: auto !important;
        }
      }
      @media screen and (max-width: 767px) {
        .env-page main > h1.box8.env-page-catch {
          width: calc(100% - 24px) !important;
          max-width: none !important;
          margin-right: auto !important;
          margin-left: auto !important;
          box-sizing: border-box;
          text-align: center !important;
        }
        .env-page main > h1.box8.env-page-catch > strong,
        .env-page main > h1.box8.env-page-catch > span {
          display: block !important;
          white-space: normal !important;
          text-align: center !important;
        }
        .env-page main .notes-box {
          width: calc(100% - 24px) !important;
          max-width: none !important;
        }
      }

/* =========================================================
 * 2026-08-13 動作環境ページ：内側レイアウトを1200px基準へ統一
 *
 * 旧 style.css の .box2 / .box2_body / .box2_body1 などに
 * 残っている固定幅・余白・内枠を、env-page 内だけ完全に上書きします。
 *
 * ・外側 .box1-modern：最大1200px
 * ・内側の旧ラッパー：100%幅、内枠なし
 * ・比較表・カード・グリッド：利用可能幅を100%使用
 * ・長文だけは最大1080pxに抑えて可読性を維持
 * ========================================================= */

body.env-page main .box1-modern > .box1_body {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 24px 28px 28px !important;
  box-sizing: border-box !important;
}

/* 旧ページ由来の内側ラッパーの固定幅を解除 */
body.env-page main .box1-modern .box2,
body.env-page main .box1-modern .box2_body,
body.env-page main .box1-modern .box2_body1 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 「枠の中にさらに枠」に見えないよう、旧 box2 の装飾を無効化 */
body.env-page main .box1-modern .box2 {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 旧2列部品も親幅をすべて利用 */
body.env-page main .box1-modern .tate-menu {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.env-page main .box1-modern .tate-list {
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 動作環境ページの主要部品は内側100%を使用 */
body.env-page .env-choice-grid,
body.env-page .env-route-grid,
body.env-page .env-server-summary,
body.env-page .env-step-grid,
body.env-page .env-table-wrap {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 通常説明文は横に長くなりすぎないよう中央1080px */
body.env-page .env-lead {
  width: 100% !important;
  max-width: 1080px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

/* 補足文も大枠内で自然に広げる */
body.env-page .env-small-note {
  max-width: 1080px;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* 申込方法ボタン部分は、ボタンが巨大になりすぎない範囲で拡張 */
body.env-page .env-action-grid {
  width: 100% !important;
  max-width: 900px !important;
}

/* PC */
@media print, screen and (min-width: 768px) {
  body.env-page main .box1-modern .tate-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  body.env-page main .box1-modern .tate-list {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  body.env-page main .box1-modern > .box1_body {
    padding: 14px 10px 18px !important;
  }

  body.env-page main .box1-modern .tate-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  body.env-page main .box1-modern .tate-list {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.env-page .env-lead,
  body.env-page .env-small-note,
  body.env-page .env-action-grid {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
 * 2026-08-13 主要説明ページ 1200px共通レイアウト
 *
 * 対象：
 * h12 / h13 / h21 / h22 / h23 / h31 / h32
 *
 * 旧 style.css の固定幅をページ単位で上書き。
 * h11 は outline-page 専用設定を維持します。
 * ========================================================= */

@media print, screen and (min-width: 768px) {

  /* ページ上部キャッチ・旧box1A・Notesを1200px基準へ */
  body.content-wide-page main > h1.box8,
  body.content-wide-page main > .box1A,
  body.content-wide-page main > .notes-box,
  body.content-wide-page main > .tool-videos {
    width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
    max-width: var(--site-content-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  /* h11の補助キャッチだけ1200pxへ。4行の主見出しは従来の専用設定を維持 */
  body.outline-page main > .box8M {
    width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
    max-width: var(--site-content-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  /* box1A の外枠内部を親幅いっぱいに */
  body.content-wide-page main > .box1A > .box1A_headline,
  body.content-wide-page main > .box1A > .box1_body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* box1-modern の本文内部も旧固定幅へ戻さない */
  body.content-wide-page main > .box1-modern > .box1_body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 旧box2系は装飾を残し、固定幅だけ解除 */
  body.content-wide-page main .box2,
  body.content-wide-page main .box2_body,
  body.content-wide-page main .box2_body1,
  body.content-wide-page main .box2_body2 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 左右2列は1200pxの有効幅を均等利用 */
  body.content-wide-page main .tate-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.content-wide-page main .tate-list {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Notesは枠1200px、文章は1080pxで可読性を維持 */
  body.content-wide-page main .notes-content {
    max-width: 1080px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* h12の詳しい操作動画：旧940px固定を解除 */
  body.content-wide-page main .tool-videos {
    width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
    max-width: var(--site-content-width) !important;
  }

  body.content-wide-page main .tool-videos_intro {
    max-width: 1080px !important;
  }
}

@media screen and (max-width: 767px) {

  body.content-wide-page main > h1.box8,
  body.content-wide-page main > .box1A,
  body.content-wide-page main > .notes-box,
  body.content-wide-page main > .tool-videos,
  body.outline-page main > .box8M {
    width: calc(100% - var(--site-content-gap-sp)) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  body.content-wide-page main .box2,
  body.content-wide-page main .box2_body,
  body.content-wide-page main .box2_body1,
  body.content-wide-page main .box2_body2 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.content-wide-page main .tate-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.content-wide-page main .tate-list {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
 * 2026-08-13 動作環境・ライセンス・購入ページ 1200px調整
 * h41 / h42 / h43
 * ========================================================= */

/* h41：外枠も1200px基準。内側は content-wide-page 共通設定で全幅利用 */
@media print, screen and (min-width: 768px) {
  body.environment-build-page main > .box1-modern,
  body.environment-build-page main > .notes-box {
    width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
    max-width: var(--site-content-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  /* h41の最上部キャッチもサイト幅へ */
  body.environment-build-page main > h1.box8 {
    width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
    max-width: var(--site-content-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  /* h42：導入手順の内側カードは大枠に対して自然な余白だけ残す */
  body.license-page .box1B.box1-modern-narrow {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  /* h43：購入フォームは1200px外枠の中で読みやすい1080px */
  body.order-page main > .box8,
  body.order-page main > .box1A {
    width: min(var(--site-content-width), calc(100% - var(--site-content-gap-pc))) !important;
    max-width: var(--site-content-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  body.order-page main > .box1A > .box1_body {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.order-page .Form {
    width: 100% !important;
    max-width: 1080px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  /* 申込完了ページの文章は横に広がりすぎない */
  body.order-page main > .box1A > .box1_body > p {
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media screen and (max-width: 767px) {
  body.environment-build-page main > .box1-modern,
  body.environment-build-page main > .notes-box,
  body.environment-build-page main > h1.box8,
  body.order-page main > .box8,
  body.order-page main > .box1A {
    width: calc(100% - var(--site-content-gap-sp)) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
  }

  body.license-page .box1B.box1-modern-narrow {
    width: calc(100% - 12px) !important;
  }

  body.order-page .Form {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
 * 2026-08-13 14:32
 * h51/h52/h53/h80/h91/h92：1200px直接指定版
 *
 * style.css の旧固定幅
 *   .box1A      940px
 *   .box_column 940px
 *   .box2       910px
 *   .tate-list  440px
 * を対象ページだけで確実に上書きする。
 * ========================================================= */

@media print, screen and (min-width: 768px) {

  /* 共通：対象ページの主要外枠を1200pxへ */
  body.page1200 .box1A,
  body.page1200 .box_column,
  body.page1200 .notes-box {
    width: 1200px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* h51 / h52 上部キャッチ */
  body.support-wide-page h1.box8 {
    width: 1200px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* h51 / h52：外枠の中を有効幅いっぱいに使う */
  body.support-wide-page .box1A > .box1_body,
  body.support-wide-page .box2,
  body.support-wide-page .box2_body,
  body.support-wide-page .box2_body1,
  body.support-wide-page .box2_body2 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.support-wide-page .tate-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.support-wide-page .tate-list {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.support-wide-page .notes-content {
    width: 100% !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* FAQ / 法務 / 会社 / コラム：アコーディオンも100% */
  body.faq-wide-page .cm_qa,
  body.faq-wide-page .cm_actab,
  body.legal-wide-page .cm_qa,
  body.legal-wide-page .cm_actab,
  body.company-wide-page .cm_qa,
  body.company-wide-page .cm_actab,
  body.column-wide-page .cm_qa,
  body.column-wide-page .cm_actab {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* 長文だけは1080pxに抑える */
  body.faq-wide-page .cm_actab-content > p,
  body.legal-wide-page .cm_actab-content > p,
  body.legal-wide-page .cm_actab-content > strong,
  body.column-wide-page .cm_actab-content > p,
  body.column-wide-page .cm_actab-content > strong,
  body.company-wide-page .h91-greeting {
    width: 100% !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 会社概要の2列を広げる */
  body.company-wide-page .cm_actab-content > ul.tate-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.company-wide-page .cm_actab-content > ul.tate-menu > .tate-list {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* 会社概要・沿革の箱は列幅いっぱい */
  body.company-wide-page .cm_actab-content > ul.tate-menu > .tate-list > .box5 {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 開発実績の1列内2カードは均等配置 */
  body.company-wide-page .tate-list > div[style*="display:flex"] {
    gap: 14px;
  }
  body.company-wide-page .tate-list > div[style*="display:flex"] > .box5 {
    width: calc(50% - 7px) !important;
    box-sizing: border-box !important;
  }

  /* 小さな補足ブロック(sgt.Peppers)は旧サイズを維持 */
  body.company-wide-page .sgtPeppers {
    width: 336px !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  body.page1200 .box1A,
  body.page1200 .box_column,
  body.page1200 .notes-box,
  body.support-wide-page h1.box8 {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.support-wide-page .tate-menu,
  body.company-wide-page .cm_actab-content > ul.tate-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  body.support-wide-page .tate-list,
  body.company-wide-page .tate-list {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.company-wide-page .tate-list > div[style*="display:flex"] {
    gap: 8px;
  }

  body.company-wide-page .tate-list > div[style*="display:flex"] > .box5 {
    width: calc(50% - 4px) !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
 * 2026-08-14 index.html：1200px幅に合わせた本文文字サイズ調整
 *
 * 横幅を940px→1200pxへ拡張したことで相対的に小さく見える
 * トップページの説明文のみをPC表示で拡大します。
 * スマートフォン表示は既存設定を維持します。
 * ========================================================= */
@media print, screen and (min-width: 768px) {

  /* トップ見出しの説明文 */
  .lp-page--top .top-hero .lp-hero-lead {
    font-size: 19px;
    line-height: 1.9;
  }

  /* 「ブラウザだけで、開発から利用まで」の説明文 */
  .lp-page--top .top-browser-intro p {
    font-size: 18px;
    line-height: 1.85;
  }

  /* 「あなたは、何を実現したいですか？」冒頭説明 */
  .lp-page--top #purpose + .lp-section .lp-section-lead {
    font-size: 17px;
    line-height: 1.9;
  }

  /* 「sgt.AI が大切にしているのは…」 */
  .lp-page--top #how + .lp-section .lp-message {
    font-size: 17px;
    line-height: 1.85;
  }

  /* 「例えば、こんな業務システム…」冒頭説明 */
  .lp-page--top #examples + .lp-section .lp-section-lead {
    font-size: 17px;
    line-height: 1.9;
  }

  /* 顧客管理～案件・業務管理：6つの説明文 */
  .lp-page--top #examples + .lp-section .lp-card p {
    font-size: 16px;
    line-height: 1.8;
  }

  /* 「sgt.AI とは」：カード内の見出し・説明を全体的に拡大 */
  .lp-page--top #about + .lp-section .lp-card h3 {
    font-size: 19px;
    line-height: 1.5;
  }
  .lp-page--top #about + .lp-section .lp-card p,
  .lp-page--top #about + .lp-section .lp-card li {
    font-size: 17px;
    line-height: 1.85;
  }

  /* ガイド付き体験：「購入前に、実際の画面で確認」 */
  .lp-page--top .top-experience-promo .experience-promo__badge {
    font-size: 15px;
  }

  /* ガイド付き体験：application outline ～ menu editor の説明 */
  .lp-page--top .top-experience-promo p {
    font-size: 17px;
    line-height: 1.85;
  }

  /* 「なぜ、AI 時代に sgt.AI なのか」冒頭説明 */
  .lp-page--top #ai-era + .lp-section .lp-section-lead {
    font-size: 17px;
    line-height: 1.9;
  }

  /* 人 / sgt.AI / AI：3つの説明文 */
  .lp-page--top #ai-era + .lp-section .top-role-card p {
    font-size: 17px;
    line-height: 1.8;
  }

  /* 「これから必要なのは…」 */
  .lp-page--top #ai-era + .lp-section .lp-message {
    font-size: 17px;
    line-height: 1.85;
  }

  /* 差別化ブロック下部：「画面・データベースの設計を…」 */
  .lp-page--top .top-difference-bottom p {
    font-size: 17px;
    line-height: 1.75;
  }

  /* 「AI に仕事を変えられる側…」 */
  .lp-page--top .top-philosophy p {
    font-size: 17px;
    line-height: 1.9;
  }

  /* 「sgt.AI で広がる6つの可能性」6項目 */
  .lp-page--top .top-possibility {
    font-size: 18px;
  }

  /* 「sgt.AI の導入方法は、2つから選べます」内容全体 */
  .lp-page--top #start + .lp-section .lp-card h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .lp-page--top #start + .lp-section .lp-card p {
    font-size: 17px;
    line-height: 1.85;
  }
  .lp-page--top #start + .lp-section .lp-message {
    font-size: 17px;
    line-height: 1.85;
  }
}

/* =========================================================
 * 2026-08-14 app1.html～app6.html：PC文字サイズ再調整
 *
 * 1200px幅では従来の14～16pxが小さく見えるため、
 * 本文の最小サイズを原則17～18pxへ引き上げます。
 * index.html（.lp-page--top）とスマートフォンは対象外。
 * !important を付け、既存style.cssの指定より確実に優先します。
 * ========================================================= */
@media print, screen and (min-width: 768px) {

  /* ファーストビュー */
  main.lp-page:not(.lp-page--top) .lp-hero-lead {
    font-size: 19px !important;
    line-height: 1.9 !important;
  }
  main.lp-page:not(.lp-page--top) .lp-hero-note {
    font-size: 17px !important;
    line-height: 1.85 !important;
  }

  /* ページ内メニュー */
  main.lp-page:not(.lp-page--top) .lp-anchor-menu a {
    font-size: 16px !important;
  }

  /* セクション導入文 */
  main.lp-page:not(.lp-page--top) .lp-section-lead {
    max-width: 980px !important;
    font-size: 18px !important;
    line-height: 1.9 !important;
  }

  /* カード：見出し＋本文
     app1「文法やサンプルコードは分かっても…」等 */
  main.lp-page:not(.lp-page--top) .lp-card h3 {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
  main.lp-page:not(.lp-page--top) .lp-card p,
  main.lp-page:not(.lp-page--top) .lp-card li {
    font-size: 18px !important;
    line-height: 1.82 !important;
  }

  /* 不安・悩みの吹き出し
     app1「プログラムを全部自分で書けないと…」等 */
  main.lp-page:not(.lp-page--top) .lp-bubble {
    font-size: 18px !important;
    line-height: 1.78 !important;
  }

  /* 強調メッセージ
     app1「sgt.AI が重視するのは…」等 */
  main.lp-page:not(.lp-page--top) .lp-message {
    font-size: 18px !important;
    line-height: 1.88 !important;
  }

  /* Before / After
     app1「まずプログラミング言語を勉強する」等8項目 */
  main.lp-page:not(.lp-page--top) .lp-before-after-box h3 {
    font-size: 21px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-list-cards li {
    font-size: 18px !important;
    line-height: 1.72 !important;
  }

  /* 具体例 */
  main.lp-page:not(.lp-page--top) .lp-example strong {
    font-size: 19px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-example span {
    font-size: 17px !important;
    line-height: 1.78 !important;
  }

  /* 作る流れ */
  main.lp-page:not(.lp-page--top) .lp-step strong {
    font-size: 18px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-step p {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  /* 向いている方／向いていない方 */
  main.lp-page:not(.lp-page--top) .lp-fit-box h3 {
    font-size: 20px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-fit-box li {
    font-size: 18px !important;
    line-height: 1.78 !important;
  }

  /* 商品・価格 */
  main.lp-page:not(.lp-page--top) .lp-product-box h3,
  main.lp-page:not(.lp-page--top) .lp-price-box h3 {
    font-size: 21px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-product-box li {
    font-size: 18px !important;
    line-height: 1.78 !important;
  }
  main.lp-page:not(.lp-page--top) .lp-price-sub {
    font-size: 17px !important;
    line-height: 1.78 !important;
  }

  /* FAQ */
  main.lp-page:not(.lp-page--top) .lp-faq-q {
    font-size: 18px !important;
    line-height: 1.65 !important;
  }
  main.lp-page:not(.lp-page--top) .lp-faq-a {
    font-size: 17px !important;
    line-height: 1.85 !important;
  }

  /* 次の行動カード */
  main.lp-page:not(.lp-page--top) .lp-next-card h3 {
    font-size: 19px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-next-card p {
    font-size: 17px !important;
    line-height: 1.78 !important;
  }

  /* ガイド付き体験 */
  main.lp-page:not(.lp-page--top) .experience-promo__badge {
    font-size: 16px !important;
  }
  main.lp-page:not(.lp-page--top) .experience-promo__points span {
    font-size: 16px !important;
  }

  /* 注記 */
  main.lp-page:not(.lp-page--top) .lp-note-title {
    font-size: 17px !important;
  }
  main.lp-page:not(.lp-page--top) .lp-note p {
    font-size: 16px !important;
    line-height: 1.82 !important;
  }

  /* 最終CTA */
  main.lp-page:not(.lp-page--top) .lp-bottom-cta p {
    font-size: 18px !important;
    line-height: 1.88 !important;
  }
}

/* =========================================================
 * 2026-08-14 h11_outline.html 以降：PC文字サイズ総点検
 *
 * 1200px化後も旧940px時代の 14～16px 指定が多数残っていたため、
 * index.html / app1～app6（.lp-page）は除外して旧ページだけを調整。
 * スマートフォン表示は既存設定を維持します。
 * ========================================================= */
@media print, screen and (min-width: 768px) {

  /* -------------------------------------------------------
   * 旧ページ共通本文
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .st-text1 {
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  .ly-wrapper main:not(.lp-page) .st-text2 {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  .ly-wrapper main:not(.lp-page) .st-text14,
  .ly-wrapper main:not(.lp-page) .st-text14C,
  .ly-wrapper main:not(.lp-page) .font14,
  .ly-wrapper main:not(.lp-page) .font14B {
    font-size: 16px !important;
    line-height: 1.70 !important;
  }

  .ly-wrapper main:not(.lp-page) .st-text15,
  .ly-wrapper main:not(.lp-page) .st-text16,
  .ly-wrapper main:not(.lp-page) .st-text16B,
  .ly-wrapper main:not(.lp-page) .st-text16C,
  .ly-wrapper main:not(.lp-page) .font16,
  .ly-wrapper main:not(.lp-page) .font16a,
  .ly-wrapper main:not(.lp-page) .font16b,
  .ly-wrapper main:not(.lp-page) .font16c,
  .ly-wrapper main:not(.lp-page) .font16d,
  .ly-wrapper main:not(.lp-page) .font16R {
    font-size: 17px !important;
    line-height: 1.72 !important;
  }

  .ly-wrapper main:not(.lp-page) .st-text17,
  .ly-wrapper main:not(.lp-page) .font17 {
    font-size: 18px !important;
    line-height: 1.72 !important;
  }

  /* Notes：本文16px/行間1.4では1200px幅で詰まって見えるため調整 */
  .ly-wrapper main:not(.lp-page) .notes-content {
    font-size: 17px !important;
    line-height: 1.72 !important;
  }
  .ly-wrapper main:not(.lp-page) .notes-title {
    font-size: 15px !important;
  }

  /* 小さな補足・画像下説明 */
  .ly-wrapper main:not(.lp-page) .note {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .ly-wrapper main:not(.lp-page) .note3 {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* 比較表 */
  .ly-wrapper main:not(.lp-page) .compare-table th,
  .ly-wrapper main:not(.lp-page) .compare-table td {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  /* -------------------------------------------------------
   * h11_outline.html
   * 比較説明は既存 addstyle.css で15px!importantだったため明示上書き
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .box1-modern .box7 p.st-text1 {
    font-size: 17px !important;
    line-height: 1.70 !important;
  }

  /* -------------------------------------------------------
   * h12_basetool.html：5基本ツール／操作動画
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .tool-feature > strong {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
  .ly-wrapper main:not(.lp-page) .tool-feature > span {
    font-size: 17px !important;
    line-height: 1.72 !important;
  }
  .ly-wrapper main:not(.lp-page) .tool-videos_intro {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }
  .ly-wrapper main:not(.lp-page) .tool-video-detail summary {
    font-size: 17px !important;
  }
  .ly-wrapper main:not(.lp-page) .tool-video-detail_body p {
    font-size: 16px !important;
    line-height: 1.72 !important;
  }
  .ly-wrapper main:not(.lp-page) .video-button {
    font-size: 17px !important;
  }

  /* -------------------------------------------------------
   * h40 / h40R / h41：動作環境・レンタルサーバー・自前構築
   * ページ内styleの13～16px指定より優先
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .env-choice-card p,
  .ly-wrapper main:not(.lp-page) .env-choice-card li,
  .ly-wrapper main:not(.lp-page) .env-route-card p,
  .ly-wrapper main:not(.lp-page) .env-server-card p,
  .ly-wrapper main:not(.lp-page) .env-step,
  .ly-wrapper main:not(.lp-page) .env-table {
    font-size: 17px !important;
    line-height: 1.70 !important;
  }
  .ly-wrapper main:not(.lp-page) .env-merit {
    font-size: 16px !important;
    line-height: 1.70 !important;
  }
  .ly-wrapper main:not(.lp-page) .env-small-note {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }
  .ly-wrapper main:not(.lp-page) .env-route-card h3,
  .ly-wrapper main:not(.lp-page) .env-server-card h3 {
    line-height: 1.5 !important;
  }
  .ly-wrapper main:not(.lp-page) .ManualPage-button,
  .ly-wrapper main:not(.lp-page) .ManualPage1-button,
  .ly-wrapper main:not(.lp-page) .ManualPage2-button {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  /* -------------------------------------------------------
   * h42_license.html：価格条件／導入手順
   * 重要説明の大半が font14 だったため共通16px化を適用。
   * 見出し・価格表示は現状維持。
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .box1-modern-narrow .font14 {
    font-size: 16px !important;
    line-height: 1.72 !important;
  }

  /* -------------------------------------------------------
   * h43_order.html / 確認画面：フォームは崩さず1pxだけ底上げ
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .Form-Item-Label,
  .ly-wrapper main:not(.lp-page) .Form-Item-Label2,
  .ly-wrapper main:not(.lp-page) .Form-Item-Input,
  .ly-wrapper main:not(.lp-page) .Form-Item-select {
    font-size: 17px !important;
  }
  .ly-wrapper main:not(.lp-page) .chkbox {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .ly-wrapper main:not(.lp-page) .optional-toggle-btn,
  .ly-wrapper main:not(.lp-page) .optional-close-btn {
    font-size: 16px !important;
  }
  .ly-wrapper main:not(.lp-page) #MailVerifyMsg {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* -------------------------------------------------------
   * h51 / h52：サポート画面
   * note3 14px、font16 16pxを読みやすく調整
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .tate-list .note3 {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* -------------------------------------------------------
   * h53 FAQ / h80 法務 / h91 会社 / h92 コラム
   * 1200pxの長文領域に合わせる
   * ------------------------------------------------------- */
  .ly-wrapper main:not(.lp-page) .box_column .cm_qa .cm_actab label,
  .ly-wrapper main:not(.lp-page) .box_column .cm_qa .cm_actab2 label {
    font-size: 18px !important;
    line-height: 1.65 !important;
  }

  .ly-wrapper main:not(.lp-page) .box_column .cm_actab-content p.st-text1 {
    font-size: 17px !important;
    line-height: 1.80 !important;
  }

  .ly-wrapper main:not(.lp-page) .box_column .cm_actab-content p.st-text15,
  .ly-wrapper main:not(.lp-page) .box_column .cm_actab-content strong.st-text15,
  .ly-wrapper main:not(.lp-page) .h91-greeting p.st-text15 {
    font-size: 17px !important;
    line-height: 1.82 !important;
  }

  .lp-page--top .notes-content {
    font-size: 17px !important;
    line-height: 1.72 !important;
  }
  .lp-page--top .notes-title {
    font-size: 15px !important;
  }
}
/* XREA Free 広告イメージ POPUP */
.ad-image-popup {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.ad-image-popup-inner {
  position: relative;
  max-width: 800px;
  width: 100%;
}
.ad-image-popup-inner img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  background: #fff;
}
.ad-image-popup-close {
  position: absolute;
  right: -14px;
  top: -14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
  cursor: pointer;
  z-index: 1;
}