/* ============================================
   Equinox Factoring LP - Stylesheet
   ============================================ */

/* -------- Reset & Base -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1a1a2e;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 70px; /* footer CTA分 */
}
a { text-decoration: none; color: inherit; transition: opacity .2s; }
a:hover { opacity: .85; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { border: none; cursor: pointer; font-family: inherit; }
em { font-style: normal; }

:root {
  --navy: #0a2540;
  --navy-dark: #061a30;
  --blue: #1e5ec8;
  --blue-light: #4a8cf0;
  --orange: #ff6a00;
  --orange-dark: #e85d00;
  --green: #06c755;
  --green-dark: #04a847;
  --yellow: #ffe14a;
  --bg-light: #f4f7fb;
  --gray: #6b7280;
  --gray-light: #e5e7eb;
  --shadow: 0 4px 20px rgba(10, 37, 64, 0.12);
  --shadow-lg: 0 10px 40px rgba(10, 37, 64, 0.18);
}

/* -------- Header -------- */
.header {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 12px 0;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
.header-logo { display: flex; flex-direction: column; line-height: 1.2; }
.logo-sub { font-size: 11px; opacity: .85; }
.logo-main { font-size: 22px; font-weight: 900; letter-spacing: .03em; }
.logo-main em { color: var(--blue-light); font-style: italic; margin-left: 4px; }
.logo-powered { font-size: 10px; opacity: .7; }

/* -------- Hero (リデザイン版・躍動感重視) -------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #0a2540 0%, #1e5ec8 60%, #0a2540 100%);
  color: #fff;
  overflow: hidden;
  padding: 20px 0 30px;
}
/* 大きなオレンジの円（参考サイト風） */
.hero-circle {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 880px;
  height: 880px;
  background: radial-gradient(circle, var(--orange) 0%, var(--orange) 50%, transparent 68%);
  border-radius: 50%;
  opacity: .9;
  z-index: 0;
  filter: blur(1px);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* === メイン領域（写真と数字が重なる） === */
.hh-lead {
  position: relative;
  z-index: 4;
  display: inline-block;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
  padding: 6px 18px;
  background: var(--navy-dark);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  margin-bottom: 8px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.hero-main {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  min-height: 380px;
  margin-bottom: 20px;
}
.hero-photo {
  position: relative;
  z-index: 2;
  grid-column: 2;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.45));
  transform: scale(1.1) translateX(-2%);
  transform-origin: center;
}
.hh-number {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  line-height: .9;
  font-style: italic;
  white-space: nowrap;
  width: 60%;
}
.hh-num {
  font-size: 140px;
  color: var(--yellow);
  display: block;
  letter-spacing: -.04em;
  -webkit-text-stroke: 2px var(--navy-dark);
  text-shadow:
    5px 5px 0 rgba(0,0,0,.55),
    -2px -2px 0 #fff;
  transform: rotate(-3deg) translateX(-4px);
  margin-bottom: 4px;
  margin-top: 2px;
}
.hh-unit {
  display: block;
  font-size: 56px;
  color: #fff;
  font-style: italic;
  text-shadow: 4px 4px 0 rgba(0,0,0,.5);
  transform: rotate(-2deg);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.hh-unit em {
  color: var(--yellow);
  font-size: 1.1em;
  text-shadow: 4px 4px 0 var(--orange-dark);
  margin: 0 2px;
}

.hero-badge {
  position: absolute;
  top: 4%;
  right: 42%;
  background: radial-gradient(circle at 35% 30%, #ffb060 0%, var(--orange) 50%, var(--orange-dark) 100%);
  color: #fff;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1.1;
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transform: rotate(-10deg);
  z-index: 4;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.hero-badge .b1 { font-size: 13px; }
.hero-badge .b2 { font-size: 14px; margin-top: 1px; }
.hero-badge .b3 {
  font-size: 34px;
  color: var(--yellow);
  margin-top: 2px;
  font-style: italic;
  text-shadow: 2px 2px 0 var(--navy-dark);
}
.hero-badge .b3 small { font-size: 16px; margin-left: 1px; }

/* === サブ領域（タグ・キャッチコピー・フラグ） === */
.hero-sub { position: relative; z-index: 2; text-align: center; }
.hero-tagbox {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: nowrap;
  justify-content: center;
}
.tag-corp {
  background: #fff;
  color: var(--navy);
  padding: 8px 14px;
  font-weight: 900;
  font-size: 15px;
  border-radius: 6px;
  line-height: 1.15;
  letter-spacing: .02em;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.tag-service {
  background: var(--navy-dark);
  color: #fff;
  padding: 8px 16px;
  font-weight: 900;
  font-size: 15px;
  border-radius: 6px;
  border: 2px solid #fff;
  line-height: 1.15;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.tag-service em { color: var(--yellow); font-size: 1.05em; }

.hero-catch {
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.hc-line1 {
  display: inline-block;
  font-size: 36px;
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
  margin-bottom: 4px;
}
.hc-line1 em {
  color: var(--yellow);
  font-size: 1.3em;
  font-style: italic;
  text-shadow: 3px 3px 0 var(--orange-dark);
  margin: 0 4px;
}
.hc-line2 {
  display: block;
  font-size: 42px;
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
}
.hc-line2 em {
  color: var(--yellow);
  font-size: 1.25em;
  font-style: italic;
  text-shadow: 3px 3px 0 var(--orange-dark);
  margin: 0 2px;
}

/* 訴求フラグ */
.hero-flags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hf {
  background: #fff;
  color: var(--navy);
  padding: 8px 16px;
  font-weight: 900;
  font-size: 15px;
  border-radius: 50px;
  border: 3px solid var(--navy);
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
  line-height: 1.2;
}
.hf em {
  color: var(--orange);
  font-size: 1.15em;
  font-style: italic;
  margin: 0 2px;
}

/* === 3問診断パネル（女性入り・大きく） === */
.hero-diag {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 3px solid #fff;
}
.hd-woman {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #fff;
}
.hd-panel { padding: 20px 22px; color: #fff; }
.hd-title {
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 14px;
  background: #fff;
  color: var(--navy);
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.3;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.hd-list { margin-bottom: 14px; }
.hd-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 700;
}
.hd-list .lbl {
  background: #fff;
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 30px;
  font-weight: 900;
  min-width: 100px;
  text-align: center;
  font-size: 15px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.2);
}
.hd-list .lvl {
  background: var(--orange);
  color: #fff;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 900;
}
.hd-list .lvl.middle { background: var(--blue); }
.hd-list .lvl.easy { background: #555; }
.hd-btn {
  display: block;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: 50px;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 4px 0 #8a3700, 0 6px 12px rgba(0,0,0,.3);
  border: 2px solid #fff;
  letter-spacing: .03em;
  animation: heropulse 1.8s ease-in-out infinite;
}
.hd-btn span { display: inline-block; margin-left: 4px; }
@keyframes heropulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* -------- CTA Bar -------- */
.cta-bar { background: var(--navy-dark); color: #fff; padding: 14px 0; }
.cta-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
.cta-bar-camp { font-size: 13px; line-height: 1.4; }
.cmp1 { display: block; color: var(--yellow); font-weight: 700; }
.cmp2 { display: block; }
.cmp2 em { color: var(--yellow); font-weight: 900; font-size: 1.1em; }
.cmp3 { display: block; }
.cmp3 em { color: var(--yellow); font-weight: 900; }

.cta-bar-tel { display: flex; align-items: center; gap: 10px; justify-content: center; }
.ct-free { background: var(--orange); color: #fff; padding: 4px 8px; font-size: 11px; font-weight: 700; border-radius: 4px; text-align: center; line-height: 1.1; }
.ct-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
}
.ct-time { font-size: 11px; opacity: .8; }

.cta-bar-btns { display: flex; gap: 8px; }
.ct-line { background: var(--green); color: #fff; padding: 10px 20px; border-radius: 6px; font-weight: 700; font-size: 14px; }
.ct-mail { background: var(--orange); color: #fff; padding: 10px 20px; border-radius: 6px; font-weight: 700; font-size: 14px; }

/* -------- Campaign Banner -------- */
.campaign {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  padding: 28px 0;
  text-align: center;
}
.campaign-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.cmp-sub { font-size: 22px; font-weight: 700; margin-bottom: 4px; text-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.cmp-main { font-size: 36px; font-weight: 900; line-height: 1.2; text-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.cmp-pct em { color: var(--yellow); font-size: 1.4em; margin: 0 4px; text-shadow: 3px 3px 0 var(--navy-dark); }

/* -------- Diagnosis Form -------- */
.diag { background: var(--bg-light); padding: 50px 0; }
.diag-inner { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.diag-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 30px;
  color: var(--navy);
  background: var(--yellow);
  display: inline-block;
  padding: 10px 30px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
}
.diag-title span { display: inline-block; margin-right: 6px; font-size: 22px; }
.diag-title em { color: var(--orange); font-size: 1.2em; }

.diag-form { background: #fff; border-radius: 16px; padding: 30px; box-shadow: var(--shadow); }
.diag-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; margin-bottom: 24px; }
.diag-q { background: var(--bg-light); border-radius: 10px; padding: 18px; }
.dq-label {
  background: var(--navy);
  color: #fff;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.dq-label small { font-size: 11px; opacity: .9; }
.dq-note { font-size: 11px; color: var(--gray); margin-bottom: 10px; }
.dq-note a { color: var(--blue); text-decoration: underline; }

.dq-radio { display: inline-block; background: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer; border: 2px solid var(--gray-light); }
.dq-radio input { margin-right: 6px; accent-color: var(--orange); }
.dq-radio:has(input:checked) { border-color: var(--orange); background: #fff5ed; }

.dq-input { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 12px; border-radius: 6px; border: 2px solid var(--gray-light); }
.dq-input input { flex: 1; border: none; outline: none; font-size: 16px; padding: 4px 0; }
.dq-input span { color: var(--gray); font-weight: 700; }

.dq-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dq-radios label { background: #fff; padding: 8px 10px; border-radius: 6px; border: 2px solid var(--gray-light); cursor: pointer; text-align: center; font-size: 13px; }
.dq-radios input { display: none; }
.dq-radios label:has(input:checked) { border-color: var(--orange); background: #fff5ed; font-weight: 700; }

.diag-btn {
  display: block;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--gray) 0%, #4b5563 100%);
  color: #fff;
  padding: 16px 60px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 900;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.diag-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.diag-form.is-valid .diag-btn {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
}

/* -------- Appeal -------- */
.appeal { background: #fff; padding: 50px 0; }
.appeal-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: center;
}
.appeal-img img { border-radius: 12px; }

.apl-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.apl-tag {
  background: var(--navy); color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
}
.apl-list { font-weight: 700; color: var(--navy); font-size: 14px; }
.apl-list li { display: inline-block; margin-right: 14px; }

.apl-catch { font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1.4; margin-bottom: 20px; }
.apl-catch em { color: var(--orange); font-size: 1.1em; }

.apl-tel { background: var(--bg-light); border-radius: 12px; padding: 20px; margin-bottom: 16px; text-align: center; position: relative; }
.apl-tel-note { background: var(--yellow); color: var(--navy); display: inline-block; padding: 4px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.apl-tel-label { font-size: 18px; font-weight: 700; color: var(--navy); display: inline-block; vertical-align: middle; margin-right: 16px; }
.apl-tel-num { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.atn-free { background: var(--orange); color: #fff; padding: 4px 8px; font-size: 11px; font-weight: 700; border-radius: 4px; text-align: center; line-height: 1.1; }
.apl-tel-num a {
  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .01em;
}
.apl-tel-time { font-size: 12px; color: var(--gray); margin-top: 6px; }

.apl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.apl-mail, .apl-line { display: block; text-align: center; padding: 16px; border-radius: 50px; font-weight: 900; font-size: 17px; color: #fff; box-shadow: var(--shadow); }
.apl-mail { background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%); }
.apl-line { background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%); }

/* -------- Features -------- */
.features { background: var(--bg-light); padding: 60px 0; }
.features-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.ft-stat {
  background: #fff; border-radius: 16px; padding: 30px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 20px; align-items: center; margin-bottom: 50px;
}
.ft-stat-box { text-align: center; }
.fs-num { font-family: 'Montserrat', sans-serif; font-size: 80px; font-weight: 900; color: var(--navy); line-height: 1; }
.fs-num span { font-size: 36px; color: var(--orange); }
.fs-txt { font-size: 14px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.fs-star { color: var(--yellow); font-size: 22px; text-shadow: 1px 1px 0 var(--orange); }
.ft-stat-msg { text-align: left; padding-left: 20px; border-left: 2px solid var(--gray-light); }
.fs-brand { font-size: 28px; font-weight: 900; color: var(--navy); }
.fs-brand em { color: var(--blue); font-style: italic; }
.fs-desc { font-size: 14px; line-height: 1.6; color: var(--navy); margin-top: 4px; font-weight: 500; }

.ft-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 50px; }
.ft-points li {
  background: #fff; border-radius: 16px; padding: 30px 20px; text-align: center;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.ft-points li::before {
  content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px;
  background: var(--orange); opacity: .08; border-radius: 50%;
}
.fp-label { display: inline-block; background: var(--navy); color: var(--yellow); padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.fp-title { font-size: 24px; font-weight: 900; color: var(--navy); margin-bottom: 10px; }
.fp-desc { font-size: 14px; color: var(--navy); }
.fp-desc em { color: var(--orange); font-weight: 900; font-size: 1.1em; }

.ft-msg { background: var(--navy); color: #fff; border-radius: 16px; padding: 40px 30px; text-align: center; }
.ft-msg h3 { font-size: 26px; font-weight: 900; line-height: 1.5; margin-bottom: 14px; }
.ft-msg h3 em { color: var(--yellow); }
.ft-msg p { font-size: 15px; opacity: .9; line-height: 1.8; }

/* -------- Example -------- */
.example { background: #fff; padding: 60px 0; }
.example-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.ex-title { text-align: center; font-size: 30px; font-weight: 900; color: var(--navy); margin-bottom: 30px; }
.ex-title span { font-size: 22px; margin-right: 8px; }
.ex-title em { color: var(--orange); font-size: 1.2em; }

.ex-box {
  background: linear-gradient(135deg, var(--bg-light) 0%, #fff 100%);
  border: 3px solid var(--navy); border-radius: 16px; padding: 30px; margin-bottom: 40px;
}
.ex-case { text-align: center; font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 24px; }

.ex-calc {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  gap: 12px;
  align-items: center;
}
.ex-item { background: #fff; border-radius: 10px; padding: 20px; text-align: center; box-shadow: var(--shadow); }
.ex-lbl { display: block; font-size: 13px; font-weight: 700; color: var(--gray); margin-bottom: 6px; line-height: 1.3; }
.ex-val { display: block; font-family: 'Montserrat', sans-serif; font-size: 38px; font-weight: 900; color: var(--navy); line-height: 1; }
.ex-val small { font-size: 16px; margin-left: 4px; color: var(--navy); }
.ex-fee { color: var(--orange); }
.ex-op { font-size: 32px; font-weight: 900; color: var(--navy); text-align: center; }
.ex-result { background: var(--navy); }
.ex-result .ex-lbl { color: #ccd; }
.ex-result .ex-final { color: var(--yellow); font-size: 46px; }
.ex-result .ex-final small { color: var(--yellow); }
.ex-note { text-align: center; font-size: 13px; color: var(--gray); margin-top: 20px; }

.ex-voice { background: var(--bg-light); border-radius: 16px; padding: 30px; }
.exv-title { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 20px; border-left: 4px solid var(--orange); padding-left: 12px; }
.exv-title small { font-size: 14px; color: var(--gray); margin-left: 8px; }
.exv-body { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; }
.exv-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
.exv-qa p { margin-bottom: 8px; }
.exv-q { font-weight: 700; color: var(--blue); font-size: 14px; }
.exv-a { color: var(--navy); padding-left: 16px; font-size: 14px; margin-bottom: 14px; }

/* -------- Condition -------- */
.condition { background: var(--navy); color: #fff; padding: 50px 0; }
.condition-inner { max-width: 900px; margin: 0 auto; padding: 0 16px; text-align: center; }
.cd-title { font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.cd-lead { font-size: 28px; font-weight: 700; margin-bottom: 24px; }
.cd-lead em { color: var(--yellow); }
.cd-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cd-list li {
  background: rgba(255,255,255,.08); border-radius: 10px; padding: 16px; text-align: left;
  border-left: 4px solid var(--orange);
}
.cd-list li span { display: block; font-weight: 700; color: var(--yellow); font-size: 13px; margin-bottom: 4px; }

/* -------- About -------- */
.about { background: #fff; padding: 60px 0; }
.about-inner { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.ab-title {
  text-align: center; font-size: 32px; font-weight: 900; color: var(--navy);
  margin-bottom: 20px; position: relative;
}
.ab-title::after {
  content: ''; display: block; width: 60px; height: 4px; background: var(--orange);
  margin: 12px auto 0;
}
.ab-lead { text-align: center; font-size: 15px; color: var(--navy); margin-bottom: 40px; }

.ab-points { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.ab-points li {
  background: var(--bg-light); border-radius: 16px; padding: 30px; position: relative;
  border-top: 4px solid var(--orange);
}
.abp-num { display: inline-block; background: var(--orange); color: #fff; padding: 4px 14px; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.abp-ttl { font-size: 22px; font-weight: 900; color: var(--navy); margin-bottom: 12px; }
.abp-ttl em { color: var(--orange); }
.abp-desc { font-size: 14px; color: var(--navy); }
.abp-desc em { color: var(--orange); font-weight: 700; }

.ab-cta { background: var(--navy); color: #fff; border-radius: 16px; padding: 30px; text-align: center; }
.ab-cta h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.ab-cta p { font-size: 16px; }
.ab-cta em { color: var(--yellow); font-weight: 700; }

/* -------- MidCTA -------- */
.midcta { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); color: #fff; padding: 40px 0; }
.midcta-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.mc-camp { text-align: left; }
.mc-cmp1 { font-size: 15px; font-weight: 700; }
.mc-cmp2 { font-size: 24px; font-weight: 900; }
.mc-cmp2 em { color: var(--yellow); font-size: 1.3em; }

.mc-tel { text-align: center; }
.mc-free { background: #fff; color: var(--orange); padding: 4px 8px; font-size: 11px; font-weight: 700; border-radius: 4px; line-height: 1.1; display: inline-block; vertical-align: middle; margin-right: 8px; }
.mc-tel a { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 900; color: #fff; vertical-align: middle; }
.mc-time { display: block; font-size: 12px; opacity: .9; margin-top: 4px; }

.mc-btns { display: flex; gap: 10px; }
.mc-mail, .mc-line { padding: 14px 20px; border-radius: 50px; font-weight: 900; color: #fff; font-size: 15px; }
.mc-mail { background: var(--navy); }
.mc-line { background: var(--green); }

/* -------- Compare -------- */
.compare { background: var(--bg-light); padding: 60px 0; }
.compare-inner { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.cp-title { text-align: center; font-size: 24px; font-weight: 900; color: var(--navy); margin-bottom: 8px; }
.cp-title span { display: block; font-size: 16px; color: var(--gray); font-weight: 700; }
.cp-sub { text-align: center; font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 30px; }
.cp-sub em { color: var(--orange); }
.cp-tablewrap { overflow-x: auto; }
.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.cp-table th, .cp-table td { padding: 16px; text-align: center; border-bottom: 1px solid var(--gray-light); }
.cp-table thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; }
.cp-table thead th.cp-us { background: var(--orange); position: relative; }
.cp-table tbody th { background: var(--bg-light); font-size: 14px; color: var(--navy); text-align: left; padding-left: 20px; }
.cp-table tbody td { font-size: 15px; color: var(--navy); }
.cp-table tbody td.cp-us { background: #fff5ed; font-weight: 700; }
.cp-table tbody td.cp-us em { color: var(--orange); font-weight: 900; }
.cp-note { text-align: center; font-size: 18px; font-weight: 700; color: var(--navy); margin-top: 24px; line-height: 1.6; }

/* -------- Cases Carousel -------- */
.cases { background: #fff; padding: 60px 0; }
.cases-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.cs-title { text-align: center; font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 40px; line-height: 1.6; }
.cs-title em { color: var(--orange); font-size: 1.2em; font-weight: 900; }

.cs-carousel { position: relative; }
.cs-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 4px 20px;
  scrollbar-width: thin;
}
.cs-track::-webkit-scrollbar { height: 8px; }
.cs-track::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 4px; }
.cs-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: var(--bg-light);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--orange);
}
.csc-amount { background: var(--navy); color: var(--yellow); display: inline-block; padding: 6px 16px; border-radius: 20px; font-weight: 900; font-size: 16px; margin-bottom: 14px; }
.csc-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.csc-meta { font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 14px; }
.csc-change { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
.csc-change div { background: #fff; padding: 10px; border-radius: 6px; font-size: 13px; color: var(--navy); }
.csc-change span { display: inline-block; background: var(--orange); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-right: 6px; }
.csc-body { font-size: 13px; color: var(--navy); line-height: 1.7; }

.cs-nav {
  position: absolute;
  top: 45%;
  background: var(--navy);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  z-index: 2;
  box-shadow: var(--shadow);
}
.cs-prev { left: -10px; }
.cs-next { right: -10px; }
.cs-nav:hover { background: var(--orange); }

.cs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.cs-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-light); cursor: pointer; transition: background .2s; }
.cs-dots span.active { background: var(--orange); }

/* -------- Company -------- */
.company { background: var(--bg-light); padding: 60px 0; }
.company-inner { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.cm-eyebrow { text-align: center; color: var(--orange); font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .2em; font-size: 14px; }
.cm-title { text-align: center; font-size: 30px; font-weight: 900; color: var(--navy); margin-bottom: 24px; }
.cm-lead { font-size: 15px; color: var(--navy); line-height: 1.9; margin-bottom: 30px; }
.cm-img { width: 100%; border-radius: 12px; margin-bottom: 30px; }
.cm-table { width: 100%; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.cm-table th, .cm-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--gray-light); font-size: 14px; }
.cm-table th { background: var(--navy); color: #fff; width: 30%; font-weight: 700; }
.cm-table td { color: var(--navy); }
.cm-table a { color: var(--blue); text-decoration: underline; }

/* -------- Message -------- */
.message { background: #fff; padding: 60px 0; }
.message-inner { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.ms-eyebrow { text-align: center; color: var(--orange); font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .2em; font-size: 14px; }
.ms-title { text-align: center; font-size: 30px; font-weight: 900; color: var(--navy); margin-bottom: 30px; }
.ms-body { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.ms-img { border-radius: 12px; }
.ms-text p { margin-bottom: 16px; line-height: 1.9; color: var(--navy); }
.ms-text em { color: var(--orange); font-weight: 700; }

/* -------- Form -------- */
.form { background: var(--navy); color: #fff; padding: 60px 0; }
.form-inner { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.fm-title { text-align: center; font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.fm-lead { text-align: center; font-size: 14px; margin-bottom: 30px; opacity: .9; }
.fm-form { background: #fff; border-radius: 16px; padding: 30px; color: var(--navy); }
.fm-row { margin-bottom: 18px; }
.fm-row label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--navy); }
.req { background: var(--orange); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 6px; }
.fm-row input, .fm-row select, .fm-row textarea {
  width: 100%; padding: 12px 14px; border: 2px solid var(--gray-light);
  border-radius: 8px; font-size: 15px; font-family: inherit; outline: none; transition: border-color .2s;
}
.fm-row input:focus, .fm-row select:focus, .fm-row textarea:focus { border-color: var(--orange); }
.fm-agree { margin: 20px 0; font-size: 13px; }
.fm-agree input { margin-right: 6px; accent-color: var(--orange); }
.fm-agree a { color: var(--blue); text-decoration: underline; }
.fm-submit {
  display: block; width: 100%; padding: 18px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff; border-radius: 50px; font-size: 18px; font-weight: 900;
  box-shadow: var(--shadow);
}
.fm-submit:hover { transform: translateY(-2px); }

/* -------- Footer Fixed CTA -------- */
.footer-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--navy);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  z-index: 90;
  border-top: 2px solid var(--orange);
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
}
.footer-cta a {
  padding: 14px 8px; text-align: center; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.footer-cta a:last-child { border-right: none; }
.footer-cta a span { font-size: 22px; }
.footer-cta a small { font-size: 11px; opacity: .85; font-weight: 500; }
.fc-tel { background: var(--navy); }
.fc-mail { background: var(--orange); }
.fc-line { background: var(--green); }

/* -------- Footer -------- */
.footer { background: var(--navy-dark); color: #fff; padding: 40px 0 30px; text-align: center; }
.footer-inner { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.ft-camp { background: var(--orange); display: inline-block; padding: 8px 20px; border-radius: 20px; font-weight: 700; font-size: 14px; margin-bottom: 20px; }
.ft-tel { margin-bottom: 6px; }
.ftt-free { background: #fff; color: var(--navy); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; margin-right: 10px; vertical-align: middle; }
.ft-tel a { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 900; color: #fff; }
.ft-time { font-size: 13px; opacity: .85; margin-bottom: 24px; }
.ft-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.ft-links a { font-size: 13px; opacity: .85; text-decoration: underline; }
.ft-copy { font-size: 12px; opacity: .6; }

/* -------- Popup -------- */
.popup {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
  padding: 20px;
}
.popup.is-open { display: flex; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.popup-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.popup-box {
  position: relative; background: #fff; border-radius: 16px;
  max-width: 500px; width: 100%; padding: 36px 28px 28px;
  text-align: center; box-shadow: var(--shadow-lg);
  border-top: 6px solid var(--orange);
}
.popup-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; font-size: 28px; color: var(--gray);
  width: 36px; height: 36px;
}
.pp-camp { background: var(--orange); color: #fff; display: inline-block; padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 14px; margin-bottom: 16px; }
.pp-title { font-size: 24px; font-weight: 900; color: var(--navy); margin-bottom: 14px; line-height: 1.5; }
.pp-title em { color: var(--orange); font-size: 1.15em; }
.pr-title em { color: var(--blue); }
.pp-desc { font-size: 14px; color: var(--navy); margin-bottom: 20px; }
.pp-tel { margin-bottom: 4px; }
.pp-tel span { font-size: 22px; vertical-align: middle; margin-right: 6px; }
.pp-tel a { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 900; color: var(--navy); }
.pp-time { font-size: 12px; color: var(--gray); margin-bottom: 20px; }
.pp-btns { display: grid; gap: 10px; }
.pp-mail, .pp-line { display: block; padding: 14px; border-radius: 50px; color: #fff; font-weight: 700; font-size: 15px; }
.pp-mail { background: var(--orange); }
.pp-line { background: var(--green); }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  /* ヒーロー：モバイル最適化 */
  .hero { padding: 14px 0 24px; }
  .hero-circle {
    width: 720px; height: 720px;
    top: 42%;
    transform: translate(-50%, -45%);
  }
  .hh-lead {
    font-size: 18px;
    padding: 5px 14px;
    margin-bottom: 6px;
    margin-left: 4px;
  }
  .hero-main {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 16px;
  }
  .hero-photo {
    grid-column: 1;
    max-width: 86%;
    margin: 0 auto;
    transform: scale(1.05);
  }
  /* スマホでは画像の下に「5,000件突破」を重ねる */
  .hh-number {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    text-align: center;
    margin-top: -50px;
    z-index: 5;
  }
  .hh-num {
    font-size: 110px;
    transform: rotate(-3deg) translateX(0);
  }
  .hh-unit { font-size: 42px; }
  .hero-badge {
    top: 12%;
    right: auto;
    left: 4%;
    width: 105px;
    height: 105px;
  }
  .hero-badge .b1 { font-size: 11px; }
  .hero-badge .b2 { font-size: 12px; }
  .hero-badge .b3 { font-size: 26px; }
  .hero-badge .b3 small { font-size: 13px; }

  .hero-tagbox { flex-wrap: nowrap; }
  .tag-corp, .tag-service { font-size: 13px; padding: 7px 10px; }
  .hc-line1 { font-size: 24px; }
  .hc-line2 { font-size: 28px; }
  .hero-flags { gap: 6px; }
  .hf { font-size: 12px; padding: 6px 10px; border-width: 2px; }

  .hero-diag { grid-template-columns: 140px 1fr; }
  .hd-title { font-size: 17px; padding: 8px 10px; }
  .hd-list li { font-size: 13px; gap: 6px; }
  .hd-list .lbl { font-size: 13px; padding: 5px 10px; min-width: 80px; }
  .hd-list .lvl { font-size: 11px; padding: 4px 8px; }
  .hd-btn { font-size: 16px; padding: 12px; }

  .cta-bar-inner { grid-template-columns: 1fr; text-align: center; }
  .cta-bar-tel { justify-content: center; flex-wrap: wrap; }
  .cta-bar-btns { justify-content: center; }

  .cmp-main { font-size: 28px; }

  .diag-row { grid-template-columns: 1fr; }
  .diag-form { padding: 20px; }
  .diag-title { font-size: 22px; padding: 8px 20px; }

  .appeal-inner { grid-template-columns: 1fr; }
  .appeal-img { max-width: 220px; margin: 0 auto; }
  .apl-list li { display: block; margin-bottom: 4px; }
  .apl-catch { font-size: 20px; text-align: center; }
  .apl-tel-label { display: block; margin-right: 0; margin-bottom: 6px; }
  .apl-tel-num a { font-size: 32px; }
  .apl-btns { grid-template-columns: 1fr; }

  .ft-stat { grid-template-columns: 1fr 1fr; }
  .ft-stat-msg { grid-column: span 2; border-left: none; border-top: 2px solid var(--gray-light); padding: 16px 0 0; text-align: center; }
  .ft-points { grid-template-columns: 1fr; }

  .ex-calc { grid-template-columns: 1fr; }
  .ex-op { transform: rotate(90deg); }
  .exv-body { grid-template-columns: 1fr; text-align: center; }
  .exv-img { margin: 0 auto; }

  .cd-list { grid-template-columns: 1fr; }
  .ab-points { grid-template-columns: 1fr; }

  .midcta-inner { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .mc-tel a { font-size: 28px; }
  .mc-btns { grid-template-columns: 1fr 1fr; }

  .cp-table th, .cp-table td { padding: 12px 8px; font-size: 13px; }
  .cp-note { font-size: 16px; }

  .cs-card { flex: 0 0 280px; padding: 20px; }
  .cs-prev { left: 0; }
  .cs-next { right: 0; }

  .ms-body { grid-template-columns: 1fr; }
  .ms-img { max-width: 200px; margin: 0 auto; }

  .footer-cta a { font-size: 11px; }
  .footer-cta a span { font-size: 18px; }
  .footer-cta a small { font-size: 10px; }

  .sp-none { display: none; }
}

@media (max-width: 480px) {
  .hh-num { font-size: 88px; }
  .hh-unit { font-size: 36px; }
  .hh-lead { font-size: 17px; }
  .hc-line1 { font-size: 21px; }
  .hc-line2 { font-size: 24px; }
  .hero-badge { width: 88px; height: 88px; }
  .hero-badge .b3 { font-size: 22px; }
  .hero-diag { grid-template-columns: 110px 1fr; }
  .hd-title { font-size: 15px; }
  .hd-panel { padding: 14px 14px; }
  .hf { font-size: 11px; padding: 5px 8px; }
  .cmp-main { font-size: 22px; }
  .cmp-pct em { font-size: 1.3em; }
  .fs-num { font-size: 60px; }
  .ab-title, .cm-title, .ms-title, .fm-title { font-size: 24px; }
  .pp-title { font-size: 20px; }
}