/* =========================================================
   SEON SALES PROOF
   17｜競合営業プルーフ
   /sales-proof/competitive-sales/
========================================================= */


/* =========================================================
   BASE
========================================================= */

.competitive-sales {
  --cs-navy: #17324a;
  --cs-navy-dark: #102638;
  --cs-blue: #315d7c;
  --cs-red: #b84545;
  --cs-text: #30363b;
  --cs-sub: #65717a;
  --cs-border: #dce3e8;
  --cs-bg: #f5f7f8;
  --cs-bg-blue: #eef3f6;
  --cs-white: #ffffff;

  color: var(--cs-text);
  font-size: 16px;
  line-height: 1.9;
  overflow: hidden;
}

.competitive-sales *,
.competitive-sales *::before,
.competitive-sales *::after {
  box-sizing: border-box;
}

.competitive-sales section {
  position: relative;
}

.competitive-sales .inner {
  width: calc(100% - 40px);
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

.competitive-sales p {
  margin-top: 0;
}

.competitive-sales h2,
.competitive-sales h3 {
  color: var(--cs-navy);
}

.competitive-sales .pc-only {
  display: inline;
}

.competitive-sales .sp-none {
  display: inline;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.cs-section {
  padding: 95px 0;
}

.cs-section:nth-of-type(even) {
  background: var(--cs-bg);
}

.competitive-sales .parts-title {
  margin-bottom: 38px;
}

.competitive-sales .parts-title small {
  display: block;
  margin-bottom: 10px;
  color: var(--cs-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.competitive-sales .parts-title h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cs-lead {
  max-width: 900px;
  margin-bottom: 42px;
}

.cs-lead p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 2;
}

.cs-label {
  margin-bottom: 8px;
  color: var(--cs-blue);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* =========================================================
   MESSAGE / NOTE
========================================================= */

.cs-message {
  max-width: 980px;
  margin: 50px auto 0;
  padding: 28px 34px;
  border-left: 4px solid var(--cs-red);
  background: var(--cs-white);
  box-shadow: 0 6px 22px rgba(18, 43, 61, 0.06);
}

.cs-message p {
  margin: 0;
  color: var(--cs-navy);
  font-size: 17px;
  line-height: 1.9;
  font-weight: 600;
}

.cs-note {
  max-width: 980px;
  margin: 35px auto 0;
  padding: 24px 30px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-note p {
  margin: 0;
  color: #4d5961;
  font-size: 15px;
  line-height: 1.9;
}


/* =========================================================
   NUMBER
========================================================= */

.cs-number {
  margin-bottom: 15px;
  color: var(--cs-blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* =========================================================
   BUTTON AREA
========================================================= */

.cs-hero__buttons,
.cs-final__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.cs-section-cta {
  margin-top: 40px;
  text-align: center;
}

.cs-section-cta .parts-button {
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   01 HERO
========================================================= */

.cs-hero {
  padding: 90px 0 95px;
  background:
    linear-gradient(
      120deg,
      rgba(238, 243, 246, 0.96) 0%,
      rgba(255, 255, 255, 1) 68%
    );
}

.cs-hero__head {
  max-width: 960px;
}

.cs-hero .cs-label {
  margin-bottom: 8px;
}

.cs-service {
  margin-bottom: 26px;
  color: var(--cs-navy);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cs-hero h2 {
  max-width: 880px;
  margin: 0 0 28px;
  font-size: 46px;
  line-height: 1.38;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.cs-hero__sub {
  max-width: 900px;
  margin-bottom: 28px;
  color: var(--cs-navy);
  font-size: 20px;
  line-height: 1.8;
  font-weight: 600;
}

.cs-hero__lead {
  max-width: 950px;
  margin-bottom: 36px;
  color: var(--cs-text);
  font-size: 16px;
  line-height: 2;
}

.cs-hero__visual {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 50px minmax(300px, 1.45fr) 50px minmax(180px, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 58px;
  padding: 32px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  box-shadow: 0 8px 30px rgba(18, 43, 61, 0.06);
}

.cs-hero__visual-start,
.cs-hero__visual-end,
.cs-hero__visual-center {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  text-align: center;
}

.cs-hero__visual-start,
.cs-hero__visual-end {
  background: var(--cs-bg);
}

.cs-hero__visual-center {
  background: var(--cs-navy);
}

.cs-hero__visual-start span,
.cs-hero__visual-end span {
  display: block;
  margin-bottom: 6px;
  color: var(--cs-sub);
  font-size: 12px;
  font-weight: 700;
}

.cs-hero__visual-start strong,
.cs-hero__visual-end strong {
  display: block;
  color: var(--cs-navy);
  font-size: 16px;
  line-height: 1.55;
}

.cs-hero__visual-center > span {
  display: block;
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.cs-hero__companies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cs-hero__companies div {
  padding: 10px 6px;
  background: #ffffff;
  color: var(--cs-navy);
  font-size: 14px;
  font-weight: 700;
}

.cs-hero__arrow {
  color: var(--cs-blue);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}


/* =========================================================
   02 INVISIBLE SALES
========================================================= */

.cs-question-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cs-question-card {
  min-height: 185px;
  padding: 27px 26px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-question-card span {
  display: block;
  margin-bottom: 15px;
  color: var(--cs-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cs-question-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
}


/* =========================================================
   03 TABLE
========================================================= */

.cs-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cs-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--cs-white);
}

.cs-table th,
.cs-table td {
  padding: 21px 22px;
  border: 1px solid var(--cs-border);
  vertical-align: top;
  font-size: 15px;
  line-height: 1.75;
}

.cs-table thead th {
  background: var(--cs-navy);
  color: #ffffff;
  font-weight: 700;
  text-align: left;
}

.cs-table tbody th {
  width: 18%;
  background: var(--cs-bg-blue);
  color: var(--cs-navy);
  font-weight: 700;
}

.cs-table tbody td:nth-child(2) {
  width: 31%;
}

.cs-table tbody td:nth-child(3) {
  width: 51%;
}


/* =========================================================
   04 USE CASE
========================================================= */

.cs-check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 22px;
}

.cs-check-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: start;
  gap: 13px;
  padding: 24px 26px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-check-card span {
  color: var(--cs-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cs-check-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
}


/* =========================================================
   05 INDUSTRIES
========================================================= */

.cs-industry-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.cs-industry-card {
  grid-column: span 2;
  min-height: 230px;
  padding: 28px 25px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-industry-card:nth-child(4),
.cs-industry-card:nth-child(5) {
  grid-column: span 3;
}

.cs-industry-card.is-primary {
  border-top: 4px solid var(--cs-red);
}

.cs-industry-card.is-secondary {
  border-top: 4px solid var(--cs-blue);
}

.cs-industry-card.is-careful {
  background: #fafafa;
}

.cs-industry-card__priority {
  margin-bottom: 12px;
  color: var(--cs-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cs-industry-card h3 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.5;
}

.cs-industry-card > p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
}


/* =========================================================
   06 THREE EVIDENCE LAYERS
========================================================= */

.cs-evidence {
  background: var(--cs-bg-blue) !important;
}

.cs-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cs-evidence-card {
  min-height: 330px;
  padding: 31px 28px;
  background: var(--cs-white);
  border-top: 4px solid var(--cs-blue);
  box-shadow: 0 5px 20px rgba(18, 43, 61, 0.05);
}

.cs-evidence-card h3 {
  margin: 0 0 17px;
  font-size: 23px;
  line-height: 1.5;
}

.cs-evidence-card__target {
  min-height: 90px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.8;
}

.cs-evidence-card__question {
  padding-top: 20px;
  border-top: 1px solid var(--cs-border);
}

.cs-evidence-card__question span {
  display: block;
  margin-bottom: 8px;
  color: var(--cs-sub);
  font-size: 12px;
  font-weight: 700;
}

.cs-evidence-card__question p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   07 SEVEN SALES PROCESSES
========================================================= */

.cs-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cs-process-card {
  min-height: 310px;
  padding: 27px 24px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-process-card:nth-child(n+5) {
  grid-column: span 1;
}

.cs-process-card h3 {
  margin: 0 0 16px;
  min-height: 60px;
  font-size: 19px;
  line-height: 1.55;
}

.cs-process-card__observe,
.cs-process-card__customer {
  position: relative;
  margin-bottom: 0;
  padding-top: 28px;
  font-size: 14px;
  line-height: 1.8;
}

.cs-process-card__observe {
  margin-bottom: 16px;
}

.cs-process-card__observe::before,
.cs-process-card__customer::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cs-sub);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cs-process-card__observe::before {
  content: "OBSERVE";
}

.cs-process-card__customer::before {
  content: "CUSTOMER";
}


/* =========================================================
   08 CONDITIONS
========================================================= */

.cs-condition-box {
  padding: 36px 38px;
  background: var(--cs-navy);
  color: #ffffff;
}

.cs-condition-box__title {
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 700;
}

.cs-condition-box ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 45px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-condition-box li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.8;
}

.cs-condition-box li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  background: #ffffff;
  border-radius: 50%;
}


/* =========================================================
   09 EVIDENCE DETAIL
========================================================= */

.cs-evidence-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cs-evidence-detail-card {
  padding: 29px 27px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-evidence-detail-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.5;
}

.cs-evidence-detail-card__example {
  margin-bottom: 18px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--cs-border);
  color: var(--cs-blue);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

.cs-evidence-detail-card > p:last-child {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   10 TEN POINTS
========================================================= */

.cs-points-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.cs-point-card {
  min-height: 215px;
  padding: 23px 20px;
  border-top: 3px solid var(--cs-blue);
  background: var(--cs-white);
  box-shadow: 0 4px 18px rgba(18, 43, 61, 0.05);
}

.cs-point-card span {
  display: block;
  margin-bottom: 14px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cs-point-card h3 {
  margin: 0 0 11px;
  font-size: 19px;
  line-height: 1.45;
}

.cs-point-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}


/* =========================================================
   11 JUDGEMENT
========================================================= */

.cs-judgement {
  background: var(--cs-bg-blue) !important;
}

.cs-judgement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cs-judgement-card {
  min-height: 235px;
  padding: 28px 25px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
}

.cs-judgement-card span {
  display: block;
  margin-bottom: 14px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
}

.cs-judgement-card h3 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.5;
}

.cs-judgement-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   12 DELIVERABLES
========================================================= */

.cs-deliverable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cs-deliverable-card {
  min-height: 205px;
  padding: 26px 24px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-deliverable-card span {
  display: block;
  margin-bottom: 13px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
}

.cs-deliverable-card h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.55;
}

.cs-deliverable-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   13 STANDARD
========================================================= */

.cs-standard {
  scroll-margin-top: 110px;
  background: var(--cs-navy) !important;
}

.cs-standard .parts-title small,
.cs-standard .parts-title h2,
.cs-standard .cs-lead p {
  color: #ffffff;
}

.cs-standard-card {
  overflow: hidden;
  background: #ffffff;
}

.cs-standard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cs-standard-item {
  min-height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px 28px;
  border-right: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
}

.cs-standard-item:nth-child(3n) {
  border-right: 0;
}

.cs-standard-item span {
  display: block;
  margin-bottom: 8px;
  color: var(--cs-sub);
  font-size: 12px;
  font-weight: 700;
}

.cs-standard-item strong {
  color: var(--cs-navy);
  font-size: 22px;
  line-height: 1.55;
}

.cs-standard-detail {
  padding: 32px 34px;
}

.cs-standard-detail > div {
  display: grid;
  grid-template-columns: 175px 1fr;
  gap: 25px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cs-border);
}

.cs-standard-detail > div:last-child {
  border-bottom: 0;
}

.cs-standard-detail span {
  color: var(--cs-navy);
  font-size: 14px;
  font-weight: 700;
}

.cs-standard-detail p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.cs-standard .cs-note {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.cs-standard .cs-note p {
  color: #ffffff;
}


/* =========================================================
   14 MODULES
========================================================= */

.cs-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cs-module-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  padding: 29px 27px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-module-card h3 {
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 1.5;
}

.cs-module-card > p:not(.cs-module-card__price) {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.8;
}

.cs-module-card__price {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cs-border);
  color: var(--cs-navy);
  font-size: 18px;
  font-weight: 700;
}


/* =========================================================
   15 FLOW
========================================================= */

.cs-flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cs-flow-card {
  min-height: 240px;
  padding: 28px 24px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-flow-card__step {
  margin-bottom: 15px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cs-flow-card h3 {
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 1.5;
}

.cs-flow-card > p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   16 HOUSING EXAMPLE
========================================================= */

.cs-housing {
  background: var(--cs-bg-blue) !important;
}

.cs-housing-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cs-housing-card {
  min-height: 245px;
  padding: 27px 24px;
  background: var(--cs-white);
}

.cs-housing-card > span {
  display: block;
  margin-bottom: 13px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
}

.cs-housing-card h3 {
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 1.5;
}

.cs-housing-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   17 DIFFERENCE
========================================================= */

.cs-difference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cs-difference-card {
  min-height: 355px;
  padding: 30px 27px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-difference-card.is-proof {
  border-top: 4px solid var(--cs-red);
}

.cs-difference-card__category {
  margin-bottom: 12px;
  color: var(--cs-blue);
  font-size: 12px;
  font-weight: 700;
}

.cs-difference-card h3 {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.5;
}

.cs-difference-card dl {
  margin: 0;
}

.cs-difference-card dt {
  margin-top: 18px;
  margin-bottom: 6px;
  color: var(--cs-navy);
  font-size: 13px;
  font-weight: 700;
}

.cs-difference-card dt:first-child {
  margin-top: 0;
}

.cs-difference-card dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   18 CUSTOMER DECISION
========================================================= */

.cs-customer-decision {
  background: var(--cs-bg-blue) !important;
}

.cs-compare-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cs-compare-two__card {
  padding: 31px 30px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
}

.cs-compare-two__card h3 {
  margin: 0 0 22px;
  font-size: 23px;
  line-height: 1.5;
}

.cs-compare-two__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-compare-two__card li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.8;
}

.cs-compare-two__card li:last-child {
  margin-bottom: 0;
}

.cs-compare-two__card li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--cs-blue);
  border-radius: 50%;
}


/* =========================================================
   19 PARTNER
========================================================= */

.cs-partner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
}

.cs-partner-card {
  padding: 31px 30px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-partner-card h3 {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.5;
}

.cs-partner-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-partner-card li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 19px;
  font-size: 15px;
  line-height: 1.8;
}

.cs-partner-card li:last-child {
  margin-bottom: 0;
}

.cs-partner-card li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--cs-blue);
  border-radius: 50%;
}

.cs-partner-cross {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cs-navy);
}

.cs-partner-cross span {
  font-size: 12px;
  font-weight: 700;
}

.cs-partner-cross strong {
  display: block;
  margin: 5px 0;
  font-size: 29px;
  line-height: 1;
}


/* =========================================================
   20 RULES
========================================================= */

.cs-rules {
  background: var(--cs-bg-blue) !important;
}

.cs-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cs-rule-card {
  min-height: 270px;
  padding: 27px 23px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
}

.cs-rule-card > span {
  display: block;
  margin-bottom: 13px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
}

.cs-rule-card h3 {
  margin: 0 0 13px;
  font-size: 18px;
  line-height: 1.55;
}

.cs-rule-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}


/* =========================================================
   21 BtoB
========================================================= */

.cs-btob__content {
  max-width: 950px;
  margin-bottom: 40px;
}

.cs-btob__content p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.95;
}

.cs-btob__content p:last-child {
  margin-bottom: 0;
}

.cs-btob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cs-btob-grid article {
  min-height: 235px;
  padding: 27px 23px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-btob-grid article > span {
  display: block;
  margin-bottom: 13px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
}

.cs-btob-grid h3 {
  margin: 0 0 13px;
  font-size: 18px;
  line-height: 1.55;
}

.cs-btob-grid p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}


/* =========================================================
   22 FAQ
========================================================= */

.cs-faq {
  background: var(--cs-bg) !important;
}

.cs-faq-list {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.cs-faq-item {
  padding: 29px 30px;
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-white);
}

.cs-faq-item:first-child {
  border-top: 1px solid var(--cs-border);
}

.cs-faq-item h3 {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  margin: 0 0 15px;
  font-size: 18px;
  line-height: 1.7;
}

.cs-faq-item h3 span {
  color: var(--cs-blue);
  font-size: 13px;
  line-height: 2.3;
  font-weight: 700;
}

.cs-faq-item > p {
  margin: 0 0 0 58px;
  font-size: 15px;
  line-height: 1.9;
}


/* =========================================================
   RELATED
========================================================= */

.cs-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cs-related-card {
  display: block;
  min-height: 210px;
  padding: 28px 26px;
  border: 1px solid var(--cs-border);
  background: var(--cs-white);
  color: var(--cs-text);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.cs-related-card:hover {
  transform: translateY(-4px);
  border-color: #aebdc7;
  box-shadow: 0 8px 26px rgba(18, 43, 61, 0.08);
}

.cs-related-card > span {
  display: block;
  margin-bottom: 13px;
  color: var(--cs-blue);
  font-size: 11px;
  font-weight: 700;
}

.cs-related-card h3 {
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 1.5;
}

.cs-related-card p {
  margin: 0;
  color: var(--cs-text);
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   23 FINAL CTA
========================================================= */

.cs-final {
  padding: 100px 0;
  background: var(--cs-navy-dark);
}

.cs-final__content {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.cs-final__eyebrow {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 600;
}

.cs-final h2 {
  margin: 0 0 30px;
  color: #ffffff;
  font-size: 38px;
  line-height: 1.5;
  font-weight: 700;
}

.cs-final__text {
  max-width: 900px;
  margin: 0 auto 38px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 2;
}

.cs-final__buttons {
  justify-content: center;
}


/* =========================================================
   TABLET
========================================================= */

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

  .cs-hero h2 {
    font-size: 42px;
  }

  .cs-question-grid,
  .cs-evidence-detail-grid,
  .cs-deliverable-grid,
  .cs-module-grid,
  .cs-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-process-grid,
  .cs-flow-list,
  .cs-housing-list,
  .cs-rule-grid,
  .cs-btob-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-points-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-point-card:last-child {
    grid-column: span 2;
  }

  .cs-judgement-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================================
   SP
========================================================= */

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

  .competitive-sales {
    font-size: 15px;
    line-height: 1.85;
  }

  .competitive-sales .inner {
    width: calc(100% - 32px);
  }

  .competitive-sales .pc-only {
    display: none;
  }

  .competitive-sales .sp-none {
    display: none;
  }


  /* -----------------------------------------
     SECTION
  ----------------------------------------- */

  .cs-section {
    padding: 68px 0;
  }

  .competitive-sales .parts-title {
    margin-bottom: 28px;
  }

  .competitive-sales .parts-title small {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .competitive-sales .parts-title h2 {
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  .cs-lead {
    margin-bottom: 30px;
  }

  .cs-lead p {
    font-size: 15px;
    line-height: 1.9;
  }


  /* -----------------------------------------
     MESSAGE
  ----------------------------------------- */

  .cs-message {
    margin-top: 35px;
    padding: 23px 20px;
  }

  .cs-message p {
    font-size: 15px;
    line-height: 1.85;
  }

  .cs-note {
    margin-top: 28px;
    padding: 21px 20px;
  }

  .cs-note p {
    font-size: 14px;
    line-height: 1.85;
  }


  /* -----------------------------------------
     BUTTON
  ----------------------------------------- */

  .cs-hero__buttons,
  .cs-final__buttons {
    display: block;
  }

  .cs-hero__buttons .parts-button,
  .cs-final__buttons .parts-button,
  .cs-section-cta .parts-button {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .cs-hero__buttons .parts-button + .parts-button,
  .cs-final__buttons .parts-button + .parts-button {
    margin-top: 13px;
  }


  /* -----------------------------------------
     HERO
  ----------------------------------------- */

  .cs-hero {
    padding: 65px 0 70px;
  }

  .cs-service {
    margin-bottom: 21px;
    font-size: 14px;
  }

  .cs-hero h2 {
    margin-bottom: 23px;
    font-size: 32px;
    line-height: 1.5;
  }

  .cs-hero__sub {
    margin-bottom: 22px;
    font-size: 17px;
    line-height: 1.8;
  }

  .cs-hero__lead {
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.9;
  }

  .cs-hero__visual {
    display: block;
    margin-top: 42px;
    padding: 18px;
  }

  .cs-hero__visual-start,
  .cs-hero__visual-end,
  .cs-hero__visual-center {
    min-height: auto;
    padding: 21px 17px;
  }

  .cs-hero__arrow {
    padding: 10px 0;
    transform: rotate(90deg);
    font-size: 22px;
  }

  .cs-hero__companies {
    gap: 6px;
  }

  .cs-hero__companies div {
    padding: 9px 4px;
    font-size: 13px;
  }


  /* -----------------------------------------
     QUESTION
  ----------------------------------------- */

  .cs-question-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-question-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .cs-question-card span {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .cs-question-card p {
    font-size: 14px;
    line-height: 1.8;
  }


  /* -----------------------------------------
     TABLE
  ----------------------------------------- */

  .cs-table {
    min-width: 760px;
  }

  .cs-table th,
  .cs-table td {
    padding: 17px 16px;
    font-size: 14px;
  }


  /* -----------------------------------------
     USE CASE
  ----------------------------------------- */

  .cs-check-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cs-check-card {
    grid-template-columns: 36px 1fr;
    gap: 9px;
    padding: 20px 18px;
  }

  .cs-check-card p {
    font-size: 14px;
    line-height: 1.8;
  }


  /* -----------------------------------------
     INDUSTRIES
  ----------------------------------------- */

  .cs-industry-grid {
    display: block;
  }

  .cs-industry-card,
  .cs-industry-card:nth-child(4),
  .cs-industry-card:nth-child(5) {
    min-height: 0;
    margin-bottom: 14px;
    padding: 23px 20px;
  }

  .cs-industry-card:last-child {
    margin-bottom: 0;
  }

  .cs-industry-card h3 {
    font-size: 20px;
  }

  .cs-industry-card > p:last-child {
    font-size: 14px;
  }


  /* -----------------------------------------
     EVIDENCE 3
  ----------------------------------------- */

  .cs-evidence-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .cs-evidence-card {
    min-height: 0;
    padding: 25px 21px;
  }

  .cs-evidence-card h3 {
    font-size: 21px;
  }

  .cs-evidence-card__target {
    min-height: 0;
    font-size: 14px;
  }

  .cs-evidence-card__question p {
    font-size: 14px;
  }


  /* -----------------------------------------
     PROCESS 7
  ----------------------------------------- */

  .cs-process-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-process-card,
  .cs-process-card:nth-child(n+5) {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-process-card h3 {
    min-height: 0;
    font-size: 19px;
  }

  .cs-process-card__observe,
  .cs-process-card__customer {
    font-size: 14px;
  }


  /* -----------------------------------------
     CONDITIONS
  ----------------------------------------- */

  .cs-condition-box {
    padding: 27px 21px;
  }

  .cs-condition-box__title {
    font-size: 17px;
  }

  .cs-condition-box ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cs-condition-box li {
    font-size: 14px;
  }


  /* -----------------------------------------
     EVIDENCE DETAIL
  ----------------------------------------- */

  .cs-evidence-detail-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-evidence-detail-card {
    padding: 23px 20px;
  }

  .cs-evidence-detail-card h3 {
    font-size: 20px;
  }

  .cs-evidence-detail-card__example,
  .cs-evidence-detail-card > p:last-child {
    font-size: 14px;
  }


  /* -----------------------------------------
     TEN POINTS
  ----------------------------------------- */

  .cs-points-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cs-point-card,
  .cs-point-card:last-child {
    grid-column: auto;
    min-height: 0;
    padding: 21px 19px;
  }

  .cs-point-card h3 {
    font-size: 18px;
  }

  .cs-point-card p {
    font-size: 14px;
  }


  /* -----------------------------------------
     JUDGEMENT
  ----------------------------------------- */

  .cs-judgement-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-judgement-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-judgement-card h3 {
    font-size: 20px;
  }

  .cs-judgement-card p {
    font-size: 14px;
  }


  /* -----------------------------------------
     DELIVERABLE
  ----------------------------------------- */

  .cs-deliverable-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-deliverable-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .cs-deliverable-card h3 {
    font-size: 18px;
  }

  .cs-deliverable-card p {
    font-size: 14px;
  }


  /* -----------------------------------------
     STANDARD
  ----------------------------------------- */

  .cs-standard {
    scroll-margin-top: 75px;
  }

  .cs-standard-grid {
    grid-template-columns: 1fr;
  }

  .cs-standard-item {
    min-height: 0;
    padding: 21px 20px;
    border-right: 0;
  }

  .cs-standard-item strong {
    font-size: 20px;
  }

  .cs-standard-detail {
    padding: 20px;
  }

  .cs-standard-detail > div {
    display: block;
    padding: 17px 0;
  }

  .cs-standard-detail span {
    display: block;
    margin-bottom: 6px;
  }

  .cs-standard-detail p {
    font-size: 14px;
  }


  /* -----------------------------------------
     MODULE
  ----------------------------------------- */

  .cs-module-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-module-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-module-card h3 {
    font-size: 19px;
  }

  .cs-module-card > p:not(.cs-module-card__price) {
    font-size: 14px;
  }

  .cs-module-card__price {
    font-size: 17px;
  }


  /* -----------------------------------------
     FLOW
  ----------------------------------------- */

  .cs-flow-list {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-flow-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-flow-card h3 {
    font-size: 19px;
  }

  .cs-flow-card > p:last-child {
    font-size: 14px;
  }


  /* -----------------------------------------
     HOUSING
  ----------------------------------------- */

  .cs-housing-list {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-housing-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-housing-card h3 {
    font-size: 19px;
  }

  .cs-housing-card p {
    font-size: 14px;
  }


  /* -----------------------------------------
     DIFFERENCE
  ----------------------------------------- */

  .cs-difference-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .cs-difference-card {
    min-height: 0;
    padding: 25px 21px;
  }

  .cs-difference-card h3 {
    margin-bottom: 19px;
    font-size: 21px;
  }

  .cs-difference-card dd {
    font-size: 14px;
  }


  /* -----------------------------------------
     CUSTOMER DECISION
  ----------------------------------------- */

  .cs-compare-two {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .cs-compare-two__card {
    padding: 25px 21px;
  }

  .cs-compare-two__card h3 {
    font-size: 21px;
  }

  .cs-compare-two__card li {
    font-size: 14px;
  }


  /* -----------------------------------------
     PARTNER
  ----------------------------------------- */

  .cs-partner-grid {
    display: block;
  }

  .cs-partner-card {
    padding: 25px 21px;
  }

  .cs-partner-card h3 {
    font-size: 20px;
  }

  .cs-partner-card li {
    font-size: 14px;
  }

  .cs-partner-cross {
    padding: 20px 0;
  }

  .cs-partner-cross {
    flex-direction: row;
    gap: 9px;
  }

  .cs-partner-cross strong {
    margin: 0;
    font-size: 24px;
  }


  /* -----------------------------------------
     RULES
  ----------------------------------------- */

  .cs-rule-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-rule-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-rule-card h3 {
    font-size: 18px;
  }

  .cs-rule-card p {
    font-size: 14px;
  }


  /* -----------------------------------------
     BtoB
  ----------------------------------------- */

  .cs-btob__content {
    margin-bottom: 30px;
  }

  .cs-btob__content p {
    font-size: 15px;
    line-height: 1.9;
  }

  .cs-btob-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-btob-grid article {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-btob-grid h3 {
    font-size: 18px;
  }

  .cs-btob-grid p {
    font-size: 14px;
  }

  .cs-btob__message br {
    display: none;
  }


  /* -----------------------------------------
     FAQ
  ----------------------------------------- */

  .cs-faq-item {
    padding: 23px 20px;
  }

  .cs-faq-item h3 {
    grid-template-columns: 34px 1fr;
    gap: 8px;
    margin-bottom: 13px;
    font-size: 16px;
    line-height: 1.7;
  }

  .cs-faq-item h3 span {
    font-size: 12px;
    line-height: 2.3;
  }

  .cs-faq-item > p {
    margin-left: 42px;
    font-size: 14px;
    line-height: 1.85;
  }


  /* -----------------------------------------
     RELATED
  ----------------------------------------- */

  .cs-related-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .cs-related-card {
    min-height: 0;
    padding: 23px 20px;
  }

  .cs-related-card h3 {
    font-size: 19px;
  }

  .cs-related-card p {
    font-size: 14px;
  }


  /* -----------------------------------------
     FINAL
  ----------------------------------------- */

  .cs-final {
    padding: 72px 0;
  }

  .cs-final__eyebrow {
    margin-bottom: 17px;
    font-size: 14px;
  }

  .cs-final h2 {
    margin-bottom: 24px;
    font-size: 27px;
    line-height: 1.55;
  }

  .cs-final__text {
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
  }

}


/* =========================================================
   SMALL SP
========================================================= */

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

  .competitive-sales .inner {
    width: calc(100% - 28px);
  }

  .competitive-sales .parts-title h2 {
    font-size: 25px;
  }

  .cs-hero h2 {
    font-size: 29px;
  }

  .cs-hero__sub {
    font-size: 16px;
  }

  .cs-hero__visual {
    padding: 14px;
  }

  .cs-faq-item {
    padding-left: 17px;
    padding-right: 17px;
  }

  .cs-faq-item h3 {
    grid-template-columns: 30px 1fr;
  }

  .cs-faq-item > p {
    margin-left: 38px;
  }

  .cs-final h2 {
    font-size: 25px;
  }

}
/* =========================================================
   FAQ ACCORDION
========================================================= */

.cs-faq-accordion {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--cs-border);
}

.cs-faq-accordion__item {
  margin: 0;
  border-bottom: 1px solid var(--cs-border);
  background: #ffffff;
}

.cs-faq-accordion__item summary {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  color: var(--cs-navy);
  transition: background-color 0.2s ease;
}

.cs-faq-accordion__item summary::-webkit-details-marker {
  display: none;
}

.cs-faq-accordion__item summary::marker {
  display: none;
  content: "";
}

.cs-faq-accordion__item summary:hover {
  background: #f8fafb;
}

.cs-faq-accordion__q {
  color: var(--cs-blue);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cs-faq-accordion__question {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
}

/* ＋ */
.cs-faq-accordion__item summary::after {
  content: "";
  position: relative;
  justify-self: center;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(var(--cs-blue), var(--cs-blue)) center / 16px 2px no-repeat,
    linear-gradient(var(--cs-blue), var(--cs-blue)) center / 2px 16px no-repeat;
  transition: transform 0.25s ease;
}

/* 開いたときは－ */
.cs-faq-accordion__item[open] summary::after {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--cs-blue), var(--cs-blue)) center / 16px 2px no-repeat;
}

.cs-faq-accordion__item[open] summary {
  background: #f8fafb;
}

.cs-faq-accordion__answer {
  padding: 0 76px 27px 90px;
}

.cs-faq-accordion__answer p {
  margin: 0;
  color: var(--cs-text);
  font-size: 15px;
  line-height: 1.95;
}


/* FAQ ACCORDION SP */
@media screen and (max-width: 768px) {

  .cs-faq-accordion__item summary {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 8px;
    min-height: 72px;
    padding: 18px 16px;
  }

  .cs-faq-accordion__q {
    font-size: 12px;
  }

  .cs-faq-accordion__question {
    font-size: 15px;
    line-height: 1.7;
  }

  .cs-faq-accordion__item summary::after {
    width: 18px;
    height: 18px;
    background:
      linear-gradient(var(--cs-blue), var(--cs-blue)) center / 14px 2px no-repeat,
      linear-gradient(var(--cs-blue), var(--cs-blue)) center / 2px 14px no-repeat;
  }

  .cs-faq-accordion__item[open] summary::after {
    background:
      linear-gradient(var(--cs-blue), var(--cs-blue)) center / 14px 2px no-repeat;
  }

  .cs-faq-accordion__answer {
    padding: 0 52px 22px 60px;
  }

  .cs-faq-accordion__answer p {
    font-size: 14px;
    line-height: 1.85;
  }

}


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

  .cs-faq-accordion__item summary {
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .cs-faq-accordion__answer {
    padding-left: 54px;
    padding-right: 20px;
  }

}
/* =========================================================
   SP FINAL ADJUSTMENT
   競合営業プルーフ
========================================================= */

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

  /* -----------------------------------------
     UNDER MV
     SPで大きく残っている空白を圧縮
  ----------------------------------------- */

  .underMV {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .underMV .inner {
    min-height: 0 !important;
    height: auto !important;
  }

  .underMV .under-title {
    display: none !important;
  }

  .underMV .bread-list {
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }


  /* -----------------------------------------
     JAPANESE LINE BREAK
     1文字だけの不自然な折返しを抑える
  ----------------------------------------- */

  .competitive-sales .parts-title h2,
  .competitive-sales .cs-hero h2,
  .competitive-sales .cs-final h2,
  .competitive-sales h3 {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: balance;
  }


  /* -----------------------------------------
     HERO
     大きさは維持しながら少しだけ調整
  ----------------------------------------- */

  .competitive-sales .cs-hero h2 {
    font-size: 30px;
    line-height: 1.52;
  }


  /* -----------------------------------------
     SECTION TITLE
  ----------------------------------------- */

  .competitive-sales .parts-title h2 {
    font-size: 25px;
    line-height: 1.55;
  }


  /* -----------------------------------------
     HORIZONTAL TABLE GUIDE
  ----------------------------------------- */

  .competitive-sales .cs-table-wrap::before {
    content: "← 横にスクロールできます →";
    display: block;
    margin-bottom: 10px;
    color: var(--cs-sub);
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
  }

}


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

  .competitive-sales .cs-hero h2 {
    font-size: 29px;
  }

  .competitive-sales .parts-title h2 {
    font-size: 24px;
  }

}
/* SPのみで表示する改行 */
.cs-sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .cs-sp-only {
    display: inline;
  }
}