/* ========================================
   BASE / RESET
   ======================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --navy: #00428c;
  --black: #2c2c2c;
  --green: #12c955;
  --blue-light: #e6eefd;
  --circle-blue: #2D59B2;
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Onest', sans-serif;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* clip horizontal overflow at the document level — the big "Build with…"
     / watermark texts overflow by design and were causing a white gap on the
     right (body's overflow-x:hidden alone leaves html scrollable). */
  overflow-x: clip;
}

body {
  font-family: var(--font-ja);
  color: var(--black);
  overflow-x: hidden;
  background: #fff;
}

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

img {
  display: block;
  max-width: 100%;
}

/* ========================================
   SHARED: SECTION HEADINGS
   ======================================== */
.section-heading {
  text-align: center;
  margin-bottom: 48px;
}

.section-heading-en {
  display: block;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.2;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.section-heading-ja {
  display: block;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  margin-top: 4px;
  font-feature-settings: "halt" 1;
}

.section-heading--white .section-heading-en {
  color: #fff;
}

.section-heading--white .section-heading-ja {
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   HEADER (80px height)
   ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.05);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.is-visible {
  transform: translateY(0);
}

.header-inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 49px;
}

.header-logo img {
  height: 48.33px;
  width: 281px;
  object-fit: contain;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto;
  margin-right: 25px;
}

.header-nav a {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--black);
  position: relative;
  transition: color 0.3s;
  white-space: nowrap;
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--navy);
  transition: width 0.3s ease;
}

.header-nav a:hover::after {
  width: 100%;
}

.header-nav a:hover {
  color: var(--navy);
}

.header-cta {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ========================================
   SHARED: BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 9px 14px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-ja);
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-navy { background: var(--navy); }
.btn-green { background: var(--green); }
.btn svg { flex-shrink: 0; }

.btn-navy--large,
.btn-green--large {
  height: 52px;
  padding: 12px 28px;
  font-size: 16px;
}

.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-ja);
  color: var(--navy);
  background: transparent;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-outline-navy:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 66, 140, 0.25);
}

.btn-white-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-ja);
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* per client request: do NOT change colour on hover (keep a subtle lift only) */
.btn-white-navy:hover {
  background: #fff;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 66, 140, 0.15);
}

.btn-white-navy svg path {
  transition: stroke 0.3s;
}

.btn-white-navy:hover svg path {
  stroke: #00428c;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  transition: transform 0.3s, opacity 0.3s;
}

/* hamburger → X when the menu is open */
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   HERO SECTION — 1440 x 800 pixel-perfect
   ======================================== */
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 800px;
  overflow-x: clip;
  overflow-y: visible;
  /* static pattern background (109959 still) over the gradient — no video */
  background:
    url(../assets/images/hero-bg.png) center top / cover no-repeat,
    linear-gradient(119.05deg, #f0f4f8 0%, #c1d4ea 100%);
}

.hero-video-wrap {
  position: absolute;
  left: calc(50% - 720px + -18px);
  top: 55px;
  width: 1478px;
  height: 832px;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-vector {
  position: absolute;
  left: calc(50% - 720px + 573px);
  top: -10px;
  width: 857px;
  height: 964px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.hero-vector svg {
  width: 100%;
  height: 100%;
}

.hero-phones {
  position: absolute;
  left: calc(50% - 720px + 488px);
  top: 102px;
  width: 967px;
  height: 672px;
  z-index: 3;
  opacity: 0;
}

.hero-phones img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* MV mockup slides — stack & crossfade so 3-4 variations can rotate */
.hero-phones-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-phones-slide.is-active,
.hero-phones-slide:only-child {
  opacity: 1;
}

.hero-tag {
  position: absolute;
  left: calc(50% - 720px + 78px);
  top: 163px;
  width: 524px;
  height: 39px;
  z-index: 5;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
}

.hero-tag-bg {
  position: absolute;
  inset: 0;
  background: var(--navy);
}

.hero-tag-text {
  position: absolute;
  left: 10px;
  top: 1px;
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  font-feature-settings: "halt" 1;
}

.hero-headline {
  position: absolute;
  left: calc(50% - 720px + 84px);
  top: 225px;
  z-index: 5;
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 66px;
  line-height: 1.2;
  color: var(--black);
  white-space: nowrap;
  font-feature-settings: "halt" 1;
}

.hero-headline-line1,
.hero-headline-line2 {
  display: block;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.hero-headline em {
  font-style: normal;
  color: var(--navy);
}

.hero-description {
  position: absolute;
  left: calc(50% - 720px + 84px);
  top: 406px;
  z-index: 5;
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--black);
  white-space: nowrap;
  opacity: 0;
}

.hero-stats {
  position: absolute;
  left: calc(50% - 720px);
  top: 0;
  width: 1440px;
  height: 800px;
  z-index: 5;
  pointer-events: none;
}

.stat-circle {
  position: absolute;
  width: 140px;
  height: 140px;
}

.stat-circle-bg {
  width: 100%;
  height: 100%;
  display: block;
}

.stat-circle-1 { left: 84px;  top: 516px; opacity: 0; }
.stat-circle-2 { left: 227px; top: 516px; opacity: 0; }
.stat-circle-3 { left: 371px; top: 516px; opacity: 0; }

.stat-crown {
  position: absolute;
  width: 29.29px;
  height: 26.06px;
}

.stat-crown svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.stat-crown-1 { left: 140.81px; top: 521px; opacity: 0; }
.stat-crown-2 { left: 282.17px; top: 521px; opacity: 0; }
.stat-crown-3 { left: 426.71px; top: 521px; opacity: 0; }

.stat-num {
  position: absolute;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 47.264px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "halt" 1;
  pointer-events: none;
}

.stat-num-1 {
  left: 154px;
  top: 543px;
  transform: translateX(-50%);
  opacity: 0;
}

.stat-num-2 {
  left: 297px;
  top: 543px;
  transform: translateX(-50%);
  opacity: 0;
}

.stat-num-3 {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 37.136px;
  left: 441px;
  top: 546px;
  transform: translateX(-50%);
  font-feature-settings: "halt" 1;
  opacity: 0;
}

.stat-label {
  position: absolute;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 13.504px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "halt" 1;
  pointer-events: none;
  /* Figma (PC): white fill + 2D59B2 outer stroke 3px on the badge sub-text
     (mobile/SP uses 2.45px — see the @media block) */
  -webkit-text-stroke: 3px #2D59B2;
  paint-order: stroke fill;
}

.stat-label-1 {
  left: 154px;
  top: 601.14px;
  transform: translateX(-50%);
  opacity: 0;
}

.stat-label-2 {
  left: 297px;
  top: 611.27px;
  transform: translateX(-50%);
  opacity: 0;
}

.stat-label-3 {
  left: 441px;
  top: 601px;
  transform: translateX(-50%);
  font-size: 13.504px;
  opacity: 0;
}

.hero-bottom-text {
  position: absolute;
  left: calc(50% - 720px + -46px);
  top: 677px;
  width: 1579px;
  height: 168px;
  z-index: 2;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 112px;
  line-height: 1.5;
  color: #00428c;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ========================================
   CLIENTS SECTION
   ======================================== */
.clients {
  position: relative;
  background: #fff;
  padding-bottom: 0;
  overflow: visible;
}

.clients-logos-area {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 30px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.clients-logos-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.clients-logos-track {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-shrink: 0;
  padding-right: 36px;
}

.clients-logos-row--left .clients-logos-track {
  animation: marquee-left 30s linear infinite;
}

.clients-logos-row--right .clients-logos-track {
  animation: marquee-right 30s linear infinite;
}

@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.clients-logos-row img {
  height: 50px;
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
}

.clients-wave {
  display: none;
}

.clients-bg {
  display: none;
}

.clients-navy {
  background: var(--navy);
  clip-path: ellipse(75% 100% at 50% 100%);
  padding-top: 40px;
  overflow: hidden;
}

.clients-achievement {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 20px 0 30px;
}

.achievement-text {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

.achievement-number {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 46px;
  vertical-align: middle;
  margin: 0 4px;
}

.case-cards {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 10px 0 20px;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

@keyframes case-cards-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.case-cards-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: case-cards-scroll 20s linear infinite;
}

.case-card {
  flex-shrink: 0;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease;
}

.case-card:hover {
  transform: translateY(-6px);
}

.case-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 200px;
}

.case-logo {
  height: 80px;
  width: 200px;
  object-fit: contain;
}

.case-card-info h3 {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  color: var(--black);
  line-height: 1.4;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  display: inline-block;
  background: var(--blue-light);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 70px;
}

.case-phone {
  width: 98.17px;
  height: 193.25px;
  border-radius: 15.46px;
  overflow: hidden;
  border: 3px solid var(--black);
  box-shadow: 0 3.09px 15.46px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.case-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   STORY SECTION — pixel-perfect (1440 × 1331)
   ======================================== */
.story {
  position: relative;
  width: 100%;
  height: 1650px;
  /* Exact Figma gradient (sampled): navy at the top (men + heading sit here),
     brightening down through medium blue to light sky-blue at the bottom that
     melts into the white News section. */
  background: linear-gradient(180deg, #00428c 0%, #2d71b5 30%, #5197d4 54%, #6fb0ea 74%, #89c8fc 92%);
  overflow: hidden;
  margin-top: -1px;
}

.story::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, #fff);
  z-index: 5;
  pointer-events: none;
}

.story-bg-gradient {
  position: absolute;
  inset: 0;
  /* gentle top light for depth — no longer a dark/heavy wash */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.story.bg-shifted .story-bg-gradient {
  opacity: 1;
}

.story-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 0;
  pointer-events: none;
  transition: background 0.8s ease;
}

.story.is-reading .story-overlay {
  /* removed the dark dimming veil that made the section feel gloomy */
  background: rgba(0, 0, 0, 0);
}

/* S-shaped vector */
.story-vector {
  position: absolute;
  left: calc(50% - 720px + 293px);
  top: 263px;
  width: 1413px;
  height: 1589px;
  z-index: 2;
  pointer-events: none;
}

.story-vector svg {
  display: block;
  width: 100%;
  height: 100%;
}

.story-vector-path {
  display: none;
}

.story-vector-fill {
  opacity: 1;
  fill: #1d3a73;
}

/* Photo layers */
.story-photos {
  position: absolute;
  left: calc(50% - 720px + 576px);
  top: 410px;
  width: 1058px;
  height: 705px;
  z-index: 1;
  opacity: 1;
}

.story-photo-normal,
.story-photo-smile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

.story-photo-normal {
  z-index: 1;
}

.story-photo-smile {
  z-index: 2;
  opacity: 0;
}

.story-photos.is-smiling .story-photo-smile {
  opacity: 1;
}

.story-photos.is-smiling .story-photo-normal {
  opacity: 0;
}

/* Heading */
.story-heading {
  position: absolute;
  left: calc(50% - 720px + 139px);
  top: 200px;
  z-index: 4;
}

.story-title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: #fff;
  margin: 0;
}

.story-subtitle {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin: 8px 0 0;
}

/* Body text */
.story-body-text {
  position: absolute;
  left: calc(50% - 720px + 139px);
  top: 374px;
  width: 1025px;
  z-index: 4;
}

.story-body-text p {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 36px;
  font-feature-settings: "halt" 1;
  text-shadow: none;
  transition: color 0.6s ease, text-shadow 0.6s ease;
}

.story-body-text p.is-lit {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 35, 80, 0.55), 0 0 2px rgba(0, 35, 80, 0.35);
}

.story-body-text p:last-child {
  margin-bottom: 0;
}

.story-char {
  display: inline-block;
  white-space: pre;
}

.story-highlight {
  font-weight: 900;
}

/* Signature */
.story-signature {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 48px;
}

.story-sig-title {
  font-family: 'Weibei SC', 'AB-doudoukaisyo', cursive;
  font-weight: 700;
  font-size: 35px;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
  transition: opacity 0.6s ease;
}

.story-sig-name {
  font-family: 'Weibei SC', 'AB-doudoukaisyo', cursive;
  font-weight: 700;
  font-size: 52px;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
  letter-spacing: -0.1em;
  transition: opacity 0.6s ease;
}

.story.is-reading .story-signature {
  opacity: 0.25;
  transition: opacity 0.6s ease;
}

.story.is-reading .story-signature.is-lit {
  opacity: 1;
}

/* ========================================
   NEWS SECTION
   ======================================== */
.news {
  padding: 100px 0;
  background: #fff;
}

.news-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.3s;
}

.news-card:first-child {
  border-top: 1px solid #e0e0e0;
}

.news-card:hover {
  background: #f8fafc;
}

.news-card-thumb {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e7f2fb;
}

.news-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.news-card-date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  color: #999;
}

.news-card-category {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: var(--blue-light);
  padding: 2px 10px;
  border-radius: 50px;
}

.news-card-title {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--black);
  font-feature-settings: "halt" 1;
}

.news-card-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-more {
  text-align: center;
  margin-top: 32px;
}

/* ========================================
   SERVICE SECTION — pixel-perfect (1440 × ~1880)
   ======================================== */
.service {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 1880px;
  background: #fff;
  overflow: visible;
}

/* Heading */
.service-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 94px;
  text-align: center;
}

.service-title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 46px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}

.service-title-ja {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  color: var(--black);
  margin: 0;
}

.service-desc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 209px;
  text-align: center;
  white-space: nowrap;
}

.service-desc p {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
  font-feature-settings: "halt" 1;
}

/* LINE Marketing box */
.service-line-box {
  position: absolute;
  left: calc(50% - 680px);
  top: 389px;
  width: 1360px;
  height: 790px;
  border: 3px solid #12c955;
  border-radius: 20px;
}

.service-line-title {
  position: absolute;
  left: calc(50% - 720px + 139px);
  top: 442px;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 76px;
  line-height: 1.5;
  color: #12c955;
  margin: 0;
}

/* Service list (left column) */
.service-line-list {
  position: absolute;
  left: calc(50% - 720px + 139px);
  top: 572px;
  width: 570px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-line-divider {
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid #ccc;
  margin: 0;
}

.service-line-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-line-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.service-dot--green {
  background: #12c955;
}

.service-line-item-head h4 {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
  font-feature-settings: "halt" 1;
}

.service-line-item p {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: #677481;
  margin: 0;
  font-feature-settings: "halt" 1;
}

/* Circle icons (right column) */
.service-line-circle {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.1));
}

.service-line-circle--top {
  left: calc(50% - 720px + 875px);
  top: 526px;
  z-index: 2;
}

.service-line-circle--bl {
  left: calc(50% - 720px + 752px);
  top: 740px;
  z-index: 1;
}

.service-line-circle--br {
  left: calc(50% - 720px + 998px);
  top: 740px;
  z-index: 1;
}

.service-circle-bg {
  position: absolute;
  inset: 0;
  background: #edf4ed;
  border-radius: 50%;
}

.service-circle-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 298px;
  height: 88px;
}

.service-circle-img {
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
  width: 190px;
  height: 190px;
  object-fit: cover;
  pointer-events: none;
}

.service-line-circle--bl .service-circle-img,
.service-line-circle--br .service-circle-img {
  width: 180px;
  height: 180px;
  top: 53px;
}

.service-circle-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 224px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* Web Marketing box */
.service-web-box {
  position: absolute;
  left: calc(50% - 680px);
  top: 1217px;
  width: 1360px;
  height: 596px;
  border: 3px solid var(--navy);
  border-radius: 20px;
}

.service-web-title {
  position: absolute;
  left: calc(50% - 720px + 143px);
  top: 1274px;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 76px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}

.service-web-desc {
  position: absolute;
  left: calc(50% - 720px + 143px);
  top: 1391px;
}

.service-web-desc p {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
  font-feature-settings: "halt" 1;
}

/* Web cards */
.service-web-cards {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1491px;
  display: flex;
  gap: 16px;
}

.service-web-card {
  position: relative;
  width: 278px;
  height: 278px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  background: #f0f4f8;
}

.service-web-card-img {
  position: absolute;
  left: 34px;
  top: 12px;
  width: 200px;
  height: 200px;
  border-radius: 5px 5px 0 0;
}

.service-web-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.service-web-card-bar {
  position: absolute;
  left: 0;
  top: 212px;
  width: 278px;
  height: 66px;
}

.service-web-card-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 230px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* ========================================
   REASON SECTION
   ======================================== */
.reason {
  position: relative;
  padding: 94px 0;
  padding-top: 100px;
  margin-top: 0px;
  background: var(--navy);
  overflow: hidden;
  /* wide ellipse so the domed top is gentle (matches the Clients curve),
     not a sharp point — Reason is much taller than Clients. */
  clip-path: ellipse(185% 100% at 50% 100%);
}

.reason-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.reason-bg-ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4494px;
  height: 4494px;
  opacity: 1;
}

.reason .section-heading {
  margin-bottom: 0;
}

.reason .section-heading-en {
  font-size: 46px;
}

.reason .section-heading-ja {
  font-size: 20px;
  color: #fff;
}

.reason-heading-line {
  display: block;
  width: 44px;
  height: 1px;
  background: #fff;
  margin: 16px auto 0;
}

.reason-inner {
  position: relative;
  z-index: 2;
  max-width: 1302px;
  margin: 0 auto;
  padding: 0 40px;
}

.reason-subtitle {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 66px;
}

.reason-items {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.reason-item {
  display: flex;
  align-items: flex-start;
  gap: 122px;
}

.reason-item-image {
  width: 500px;
  height: 340px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(231, 242, 251, 0.1);
}

.reason-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reason-item-content {
  flex: 1;
  width: 541px;
}

.reason-item-number {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 66px;
  color: #e7f2fb;
  opacity: 0.3;
  line-height: 1.2;
  display: block;
  margin-bottom: 13px;
}

.reason-item:nth-child(2) .reason-item-number { margin-bottom: 11px; }
.reason-item:nth-child(3) .reason-item-number { margin-bottom: 9px; }
.reason-item:nth-child(4) .reason-item-number { margin-bottom: 7px; }

.reason-item-title {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 900;
  font-size: 36px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 13px;
  font-feature-settings: "halt" 1;
}

.reason-item:nth-child(2) .reason-item-title { margin-bottom: 11px; }
.reason-item:nth-child(3) .reason-item-title { margin-bottom: 9px; }
.reason-item:nth-child(4) .reason-item-title { margin-bottom: 7px; }

.reason-item-text {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.44;
  color: #fff;
  font-feature-settings: "halt" 1;
}

/* ========================================
   CASE STUDY SECTION
   ======================================== */
.cs {
  padding: 94px 0;
  background: #fff;
}

.cs .section-heading {
  margin-bottom: 0;
}

.cs .section-heading-en {
  font-size: 46px;
}

.cs .section-heading-ja {
  font-size: 20px;
}

.cs-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.cs-subtitle {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  text-align: center;
  margin-top: 24px;
  margin-bottom: 66px;
}

.cs-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.cs-card {
  background: #e7f2fb;
  border-radius: 20px;
  padding: 44px 120px 37px 99px;
  display: flex;
  flex-direction: column;
  gap: 23px;
  align-items: flex-end;
}

.cs-card-top {
  display: flex;
  gap: 48px;
  align-items: center;
}

.cs-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 567px;
}

.cs-card-title {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.5;
  color: var(--navy);
  font-feature-settings: "halt" 1;
}

.cs-card-title br + span,
.cs-card-title br ~ * {
  color: var(--navy);
}

.cs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.cs-card-company {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 20px;
  line-height: 38px;
  color: var(--black);
}

.cs-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 70px;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  white-space: nowrap;
}

.cs-card-desc {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
}

.cs-kpis {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}

/* KPI = thin navy-outline circle holding [category / number / arrow] (Figma) */
.cs-kpi {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.cs-kpi-cat {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  color: var(--navy);
}

.cs-kpi-number {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 27px;
  line-height: 1;
  color: var(--navy);
}

.cs-kpi-number small {
  font-size: 17px;
  font-weight: 800;
}

/* text-based KPI values (自動化 / 数千万円) — Japanese font, fits the circle */
.cs-kpi-number--text {
  font-family: var(--font-ja);
  font-size: 18px;
  line-height: 1.25;
}

.cs-kpi-arrow {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.cs-card-phones {
  width: 520px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.cs-card-phones img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-card-detail {
  display: flex;
  width: 1138px;
  border-radius: 10px;
  overflow: hidden;
}

.cs-detail-left {
  width: 533px;
  padding: 25px 49px;
  background: #ffffff;
  border-radius: 10px 0 0 10px;
}

/* 施策 panel: the WHITE 目的 panel points RIGHT (▶) into the blue 施策 — so
   the blue has a left notch that overlaps 目的 and reveals its white point. */
.cs-detail-right {
  flex: 1;
  margin-left: -44px;
  padding: 25px 40px 25px 84px;
  background: #69a3d8;
  border-radius: 0 10px 10px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 44px 50%);
}

.cs-detail-heading {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 11px;
}

.cs-detail-left .cs-detail-heading {
  color: var(--black);
}

.cs-detail-right .cs-detail-heading {
  color: #fff;
}

.cs-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-en), var(--font-ja);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

.cs-detail-left .cs-detail-list {
  color: var(--black);
}

.cs-detail-right .cs-detail-list {
  color: #fff;
  font-weight: 700;
}

.cs-detail-list li::before {
  content: "・";
}

.cs-card-result {
  width: 1138px;
  background: var(--navy);
  border-radius: 10px;
  padding: 25px 40px;
  text-align: center;
}

.cs-card-result p {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

/* ========================================
   CTA SECTION — Desktop-6 pixel-perfect
   ======================================== */
.cta {
  position: relative;
  width: 100%;
  height: 710px;
  overflow: hidden;
  background: #e9f0ff;
}

.cta-bg-ellipse {
  position: absolute;
  left: 50%;
  top: 369px;
  width: 4494px;
  height: 4494px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(233,240,255,0) 60%);
  pointer-events: none;
}

.cta-build-marquee {
  position: absolute;
  top: 244px;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  display: flex;
}

.cta-build-text {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 112px;
  line-height: 1.5;
  color: #00428c;
  white-space: nowrap;
  animation: marqueeLeft 20s linear infinite;
}

@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.cta-card {
  position: absolute;
  left: 50%;
  top: 77px;
  transform: translateX(-50%);
  width: 1133px;
  height: 480px;
  background: var(--navy);
  border-radius: 30px;
  overflow: hidden;
  z-index: 2;
}

.cta-card-top {
  display: flex;
  align-items: center;
  gap: 210px;
  position: absolute;
  left: 45px;
  top: 48px;
}

.cta-headline {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 56px;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
  font-feature-settings: "halt" 1;
}

.cta-headline-line1,
.cta-headline-line2 {
  display: block;
}

.cta-stats {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 134px;
}

.cta-crown {
  width: 29.29px;
  height: 26.06px;
  margin-bottom: -10px;
  z-index: 1;
}

.cta-crown svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.cta-circle-wrap {
  position: relative;
  width: 134px;
  height: 134px;
}

.cta-circle-bg {
  width: 100%;
  height: 100%;
  display: block;
}

.cta-stat-num {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 47px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "halt" 1;
  margin: 0;
}

.cta-stat-num--ja {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size: 37px;
  top: 36%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.cta-stat-label {
  position: absolute;
  top: 67%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "halt" 1;
  margin: 0;
  -webkit-text-stroke: 2px #2D59B2;
  paint-order: stroke fill;
}

.cta-description {
  position: absolute;
  left: 45px;
  top: 228px;
  display: flex;
  gap: 17px;
  align-items: flex-start;
}

.cta-description-bar {
  width: 6px;
  height: 61px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.cta-description-text {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

.cta-buttons {
  position: absolute;
  left: 50%;
  top: calc(50% + 150px);
  transform: translate(-50%, -50%);
  display: flex;
  gap: 20px;
  width: 1064px;
}

/* main CTA buttons — original blue/green design, just SIZED DOWN to match the
   other CTAs (was 110px tall; now ~56px like the plan-CTA / header) */
.cta-btn {
  flex: 1;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.cta-btn--blue {
  background: #1b58d3;
}

.cta-btn--green {
  background: #12c955;
}

.cta-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* restore the arrow bounce on hover (keyframe was orphaned after the button revert) */
.cta-btn:hover svg {
  animation: arrow-bounce 0.7s ease infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.cta-logos {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 1162px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;
  /* client FB 2026-07-23: 「1つ一つの枠ではなくデザインそのまま」→ 個別カードを
     やめ、1枚の白パネルにロゴを並べて統一（サイズ感も揃える） */
  background: #fff;
  border-radius: 14px;
  padding: 22px 28px;
}

.cta-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

/* No per-logo frame — logos sit directly on the shared panel at a unified height */
.cta-logos-row img {
  flex: 0 1 auto;
  min-width: 0;
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  opacity: 1;
}

/* ========================================
   CASE STUDIES SECTION
   ======================================== */
.case-studies {
  padding: 100px 0;
  background: #fff;
}

.case-studies-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.case-study-card {
  background: #f8fafc;
  border-radius: 20px;
  padding: 48px 40px;
  margin-bottom: 48px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.case-study-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

.case-study-client {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.case-study-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 12px;
}

.case-study-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
  font-feature-settings: "halt" 1;
}

.case-study-tags {
  display: flex;
  gap: 6px;
}

.case-study-desc {
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  font-feature-settings: "halt" 1;
}

.case-study-kpis {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
}

.case-study-kpi {
  position: relative;
  width: 120px;
  height: 120px;
}

.kpi-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.kpi-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.kpi-number {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 28px;
  color: var(--navy);
  display: block;
  line-height: 1;
}

.kpi-number small {
  font-size: 16px;
}

.kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  margin-top: 4px;
  display: block;
}

.case-study-phones {
  text-align: center;
  margin-bottom: 24px;
}

.case-study-phones img {
  display: inline-block;
  max-width: 200px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.case-study-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-study-detail-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-radius: 8px;
  background: #fff;
}

.detail-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  padding: 2px 12px;
  border-radius: 50px;
  flex-shrink: 0;
}

.case-study-detail-bar--strategy .detail-bar-label {
  background: var(--green);
}

.case-study-detail-bar--result .detail-bar-label {
  background: #ff6b35;
}

.detail-bar-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--black);
  font-feature-settings: "halt" 1;
}

/* ========================================
   PLAN SECTION
   ======================================== */
.plan {
  padding: 100px 0;
  background: #f8fafc;
}

.plan-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.plan-subtitle {
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-top: 16px;
  margin-bottom: 0;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  margin-bottom: 60px;
}

.plan-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 66, 140, 0.12);
}

.plan-card--recommended {
  border: 3px solid var(--navy);
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 66, 140, 0.15);
}

.plan-card--recommended:hover {
  transform: scale(1.05) translateY(-6px);
}

.plan-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 20px;
  border-radius: 50px;
  white-space: nowrap;
}

.plan-card-header {
  margin-bottom: 20px;
}

.plan-card-name {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 6px;
}

.plan-card:nth-child(1) .plan-card-name,
.plan-card:nth-child(1) .plan-card-sub,
.plan-card:nth-child(1) .plan-card-amount {
  color: #43abff;
}

.plan-card:nth-child(1) .btn-outline-navy {
  color: #43abff;
  border-color: #43abff;
}

.plan-card:nth-child(1) .btn-outline-navy:hover {
  background: #43abff;
  color: #fff;
}

.plan-card:nth-child(2) .plan-card-name,
.plan-card:nth-child(2) .plan-card-sub,
.plan-card:nth-child(2) .plan-card-amount {
  color: #1b58d3;
}

.plan-card:nth-child(2) .btn-outline-navy {
  color: #1b58d3;
  border-color: #1b58d3;
}

.plan-card:nth-child(2) .btn-outline-navy:hover {
  background: #1b58d3;
  color: #fff;
}

.plan-card:nth-child(2).plan-card--recommended {
  border-color: #1b58d3;
}

.plan-card:nth-child(2) .plan-card-badge {
  background: #1b58d3;
}

/* middle (Operation) plan: button blue to match the card's #1b58d3 accent */
.plan-card:nth-child(2) .btn-navy {
  background: #1b58d3;
}

.plan-card:nth-child(3) .plan-card-name,
.plan-card:nth-child(3) .plan-card-sub,
.plan-card:nth-child(3) .plan-card-amount {
  color: var(--navy);
}

.plan-card:nth-child(3) .btn-outline-navy {
  color: var(--navy);
  border-color: var(--navy);
}

.plan-card:nth-child(3) .btn-outline-navy:hover {
  background: var(--navy);
  color: #fff;
}

.plan-card-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-feature-settings: "halt" 1;
}

.plan-card-target {
  font-size: 14px;
  line-height: 1.8;
  color: var(--black);
  font-feature-settings: "halt" 1;
  margin-bottom: 20px;
}

.plan-card-price {
  padding: 16px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.plan-card-yen {
  font-size: 14px;
  font-weight: 700;
  color: #666;
}

.plan-card-amount {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 46px;
  color: var(--navy);
  margin: 0 4px;
}

.plan-card-unit {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.plan-card-desc {
  font-size: 13px;
  line-height: 1.8;
  color: #666;
  font-feature-settings: "halt" 1;
  margin-bottom: 24px;
}

.plan-note {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-top: 16px;
  font-feature-settings: "halt" 1;
}

.plan-card .btn,
.plan-card .btn-outline-navy {
  width: 100%;
  margin-top: auto;
}

.plan-cta {
  background: var(--navy);
  border-radius: 20px;
  padding: 48px;
  text-align: center;
}

.plan-cta-headline {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  font-feature-settings: "halt" 1;
}

.plan-cta-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 28px;
  font-feature-settings: "halt" 1;
}

.plan-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* ========================================
   MEMBER SECTION
   ======================================== */
.member {
  position: relative;
  padding: 74px 0 0;
  background: #fff;
  overflow: hidden;
}

.member-navy-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 442px;
  height: 396px;
  background: var(--navy);
}

.member .section-heading {
  margin-bottom: 0;
}

.member .section-heading-en {
  font-size: 46px;
}

.member .section-heading-ja {
  font-size: 20px;
}

.member-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.member-subtitle {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  text-align: center;
  margin-top: 20px;
  margin-bottom: 36px;
}

.member-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.member-cards::-webkit-scrollbar {
  display: none;
}

.member-card {
  position: relative;
  width: 300px;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  scroll-snap-align: start;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05));
  cursor: pointer;
}

.member-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.member-card-photo-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.member-card-photo-hover--takasu {
  inset: auto;
  top: -17px;
  left: -1px;
  width: 321px;
  height: 482px;
}

.member-card-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(102, 102, 102, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.member-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 157px;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.member-card:hover::after {
  opacity: 1;
}

.member-card-desc {
  position: absolute;
  top: 205px;
  left: 50%;
  transform: translateX(-50%);
  width: 255px;
  font-family: var(--font-en), var(--font-ja);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  color: #fff;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.member-card:hover .member-card-photo {
  opacity: 0;
}

.member-card:hover .member-card-desc {
  opacity: 1;
}

.member-card-info {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 255px;
  z-index: 4;
}

.member-card-role {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  font-feature-settings: "halt" 1;
}

.member-card-name {
  font-family: var(--font-en), var(--font-ja);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  font-feature-settings: "halt" 1;
}

.member-nav {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 26px;
  padding-bottom: 60px;
}

.member-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s;
}

.member-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.member-nav-btn:hover svg path {
  stroke: #fff;
}

/* ========================================
   FAQ SECTION
   ======================================== */
.faq {
  padding: 100px 0;
  background: #fff;
}

.faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #e7f2fb;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  /* client FB 2026-07-23 #32: 回答が開いたとき質問との間隔が空きすぎ→下を詰める */
  padding: 20px 24px 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ja);
}

.faq-q-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-q-text {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--black);
  font-feature-settings: "halt" 1;
}

.faq-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faq-chevron img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
}

.faq-answer p {
  padding: 0 24px 20px 72px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  font-feature-settings: "halt" 1;
}

.faq-item.is-open .faq-answer {
  max-height: 300px;
}

/* ========================================
   FLOW SECTION
   ======================================== */
.flow {
  padding: 105px 0 80px;
  background: #fff;
}

.flow-inner {
  max-width: 681px;
  margin: 0 auto;
  padding: 0 40px;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 36px;
}

.flow-step-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
  padding: 10px;
}

.flow-step-icon img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.flow-step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flow-step-title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--black);
}

.flow-step-text {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #677481;
}

/* ========================================
   COMPANY SECTION
   ======================================== */
.company {
  padding: 100px 0;
  background: #fff;
}

.company-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}

.company-table {
  width: 100%;
  border-collapse: collapse;
}

.company-table tr {
  border-bottom: 1px solid #e0e0e0;
}

.company-table th,
.company-table td {
  padding: 18px 16px;
  font-size: 15px;
  line-height: 1.8;
  vertical-align: top;
  font-feature-settings: "halt" 1;
}

.company-table th {
  width: 160px;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  white-space: nowrap;
}

.company-table td {
  color: var(--black);
}

/* ========================================
   CONTACT SECTION
   ======================================== */
.contact {
  padding: 100px 0 0;
  background: linear-gradient(135deg, #e7f2fb 0%, #f0f4f8 100%);
  position: relative;
  overflow: hidden;
}

.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: flex-start;
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-qr {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.contact-qr-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
  font-feature-settings: "halt" 1;
}

.contact-qr-code {
  margin-bottom: 16px;
}

.contact-qr-placeholder {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  background: #f0f0f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  color: #ccc;
}

.contact-line-btn {
  width: 100%;
}

.contact-phone {
  display: block;
  background: #fff;
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.contact-phone:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.contact-phone:hover .contact-phone-number {
  color: #2068b8;
}

.contact-phone-title {
  font-size: 14px;
  font-weight: 700;
  color: #666;
  margin-bottom: 8px;
  font-feature-settings: "halt" 1;
}

.contact-phone-number {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.contact-phone-hours {
  font-size: 13px;
  color: #999;
}

.contact-form-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
  font-feature-settings: "halt" 1;
}

.form-required {
  font-size: 11px;
  color: #fff;
  background: #e74c3c;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-ja);
  color: var(--black);
  transition: border-color 0.3s;
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 66, 140, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--black);
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
}

.form-group--privacy {
  margin-top: 24px;
}

.form-group--privacy a {
  color: var(--navy);
  text-decoration: underline;
}

.form-submit {
  text-align: center;
  margin-top: 28px;
}

.form-submit .btn {
  width: 100%;
  max-width: 300px;
  height: 52px;
  font-size: 16px;
}

.contact-watermark {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 0;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 122px;
  line-height: 1;
  color: #00428c;
  pointer-events: none;
}

/* ========================================
   OTHER BUSINESS SECTION
   ======================================== */
.other-business {
  padding: 80px 0;
  background: #fff;
}

.other-business-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.other-business-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.other-business-card {
  background: #f8fafc;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.other-business-card:hover {
  transform: translateY(-4px);
}

.other-business-card-thumb {
  height: 180px;
  background: linear-gradient(135deg, #e7f2fb 0%, #d0e2f5 100%);
}

.other-business-card-title {
  font-size: 16px;
  font-weight: 700;
  padding: 16px 20px 4px;
  color: var(--black);
  font-feature-settings: "halt" 1;
}

.other-business-card-text {
  font-size: 14px;
  color: #999;
  padding: 0 20px 20px;
  font-feature-settings: "halt" 1;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 64px 0 48px;
  color: var(--black);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 48px;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  height: 32px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  object-position: left;
}

.footer-address-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-address {
  font-family: var(--font-ja);
  font-size: 14px;
  color: #555;
  font-feature-settings: "halt" 1;
  line-height: 1.8;
}

.footer-cta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.footer-cta .btn {
  font-size: 14px;
  padding: 10px 28px;
  border-radius: 50px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}

.footer-nav a {
  font-family: var(--font-ja);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  transition: color 0.3s;
  font-feature-settings: "halt" 1;
}

.footer-nav a:hover {
  color: var(--navy);
}

.footer-bottom {
  text-align: center;
  padding-top: 32px;
  margin-top: 0;
  border-top: 1px solid #e5e5e5;
}

.footer-copyright {
  font-family: var(--font-en);
  font-size: 13px;
  color: #aaa;
  letter-spacing: 0.02em;
}

/* ========================================
   RESPONSIVE
   Strategy:
   • 768–1440px : the pixel-perfect absolute sections (hero / story /
     service / cta) are SCALED to fit the viewport, so the desktop design
     is preserved exactly instead of clipping.
   • ≤1280px    : wide flow sections (reason / case study) reflow to 1 col.
   • ≤1024px    : remaining grid/flex sections reflow.
   • ≤767px     : full single-column mobile layout.
   ======================================== */

/* ---- Laptop & tablet: scale the fixed-width hero-class sections ---- */
/* scale hack RETIRED — caused broken/hybrid layouts at 1025-1440 (sections
   neither scaled nor mobile). Below 1441 everything now uses the mobile reflow
   (see the @media (max-width: 1440px) blocks). Desktop fixed layout: >=1441. */
@media (min-width: 1441px) and (max-width: 1440px) {
  /* intentionally never matches — kept to preserve block numbering */
}

/* ---- ≤1280: reflow the ~1140px-wide flow sections ---- */
@media (max-width: 1280px) {
  .reason-item { flex-direction: column; gap: 30px; }
  .reason-item-image { width: 100%; height: auto; max-width: 560px; }
  .reason-item-content { width: 100%; }
  .reason-item-title { font-size: 28px; }

  .cs-card { padding: 36px 5vw; }
  .cs-card-top { flex-direction: column; gap: 28px; align-items: stretch; }
  .cs-card-info { width: 100%; }
  .cs-card-title { font-size: 30px; }
  .cs-card-phones { width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
  .cs-card-detail { width: 100%; flex-direction: column; }
  .cs-detail-left,
  .cs-detail-right { width: 100%; border-radius: 0; }
  .cs-detail-left { border-radius: 10px 10px 0 0; padding: 25px 30px; }  /* match 施策's left edge */
  .cs-detail-right { border-radius: 0 0 10px 10px; clip-path: none; padding: 25px 30px; margin-left: 0; }
  .cs-card-result { width: 100%; text-align: left; }
  .cs-card-result p { font-size: 16px; white-space: normal; text-align: left; }
}

/* ---- ≤1440: reflow remaining grid/flex sections (was ≤1024) ---- */
@media (max-width: 1440px) {
  .plan-cards { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .plan-card--recommended { transform: none; }
  .plan-card--recommended:hover { transform: translateY(-6px); }

  .member-cards { flex-wrap: wrap; justify-content: center; }
  .member-card { width: calc(50% - 8px); height: auto; aspect-ratio: 300 / 450; }
  .member-navy-bg { top: 400px; height: 520px; }

  .contact-grid { grid-template-columns: 1fr; }
  .other-business-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---- ≤1440: mobile single-column (was ≤1024 — extended so the whole page
        goes mobile below the 1440 desktop width, retiring the scale hack) ---- */
@media (max-width: 1440px) {
  /* full mobile reflow. On wide screens the content is a centred phone-width
     column (like viewing the SP design), full-width section backgrounds. */
  /* (hero centring handled in the consolidated HERO block below) */

  /* On screens wider than a phone, hold the mobile CONTENT at phone width and
     centre it (section backgrounds stay full-width) — so a laptop shows a clean
     centred phone view instead of stretched cards. */
  .cta-card, .cta-logos,
  .cs-card,
  .plan-cta,
  .contact-form-wrap,
  .news-inner,
  .faq-inner,
  .flow-inner,
  .company-inner,
  .member-cards,
  .other-business-cards,
  .footer-inner {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-heading-en { font-size: 34px; }
  .section-heading { margin-bottom: 32px; }

  /* Header */
  .header { height: 64px; }
  .header-inner { padding: 0 16px; }
  .header-logo img { height: 30px; width: auto; }
  .header-nav { display: none; }
  /* mobile dropdown menu — opens when the hamburger is tapped (.is-open) */
  .header-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #fff;
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef1f6;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
    z-index: 90;
    animation: menu-drop 0.28s ease;
  }
  .header-nav.is-open a {
    display: block;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    border-bottom: 1px solid #f1f4f9;
  }
  .header-nav.is-open a:last-child { border-bottom: none; }
  /* SP header: green LINEで相談 + hamburger grouped on the RIGHT (お問い合わせ hidden).
     header-inner is space-between; with the nav hidden that left the green button
     floating in the centre on tablet. margin-left:auto pins the CTA to the right. */
  .header-cta { display: flex; gap: 8px; margin: 0 0 0 auto; }
  .header-cta .btn-navy { display: none; }
  .header-cta .btn-green { height: 38px; padding: 8px 14px; font-size: 12.5px; }
  .header-inner { gap: 12px; }
  .hamburger { display: flex; }

  /* ===== HERO — centred phone-width column matching SP 909:2151 ===== */
  .hero {
    height: auto;
    min-height: auto;
    padding: 88px 20px 44px;
    transform: none;
    width: 100%;
    overflow: hidden;            /* clip swoosh + Build text at the edges */
    display: flex;
    flex-direction: column;
    align-items: center;         /* centre every block */
  }
  .hero-video-wrap,
  #particles-canvas { display: none; }

  /* text block = SP 909:2152: 350px wide, left-aligned, gap 13 */
  .hero-textblock {
    order: 1; align-self: center; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 13px; width: 100%; max-width: 380px; position: relative;
  }
  .hero-tag {
    position: relative; left: auto; top: auto; align-self: flex-start;
    width: auto; max-width: 100%; height: auto;
    display: inline-block; clip-path: none; margin: 0; padding: 5px 12px;
  }
  .hero-tag-text { position: relative; left: auto; top: auto; font-size: 13px; white-space: normal; }
  .hero-headline {
    position: relative; left: auto; top: auto; align-self: stretch; max-width: none;
    font-size: clamp(33px, 10.5vw, 46px); white-space: normal; margin: 0;
    clip-path: none; line-height: 1.2;
  }
  .hero-headline-line1,
  .hero-headline-line2 { clip-path: none; opacity: 1; }
  .hero-description {
    position: relative; left: auto; top: auto; align-self: stretch; max-width: none;
    font-size: 14px; white-space: normal; margin: 0; opacity: 1;
  }

  /* phone mock = SP 909:2157: FULL-BLEED band (393 wide), image enlarged & clipped.
     container is 100vw so it breaks out of the hero's 20px padding (edge-to-edge),
     capped on wide tablets. */
  .hero-phones {
    order: 2; align-self: center; z-index: 1;
    position: relative; left: auto; top: auto;
    width: 100vw; max-width: 460px; height: auto;
    aspect-ratio: 393 / 254; overflow: hidden;
    margin: 16px 0 0; opacity: 1;
  }
  /* MUST use `.hero-phones img` (0,1,1) to beat the desktop `.hero-phones img`
     rule — `.hero-phones-slide` (0,1,0) alone is too weak and was being ignored,
     so the phones never got enlarged. */
  .hero-phones img,
  .hero-phones-slide {
    position: absolute; inset: auto;
    width: 117.2%; height: auto; max-width: none;
    left: -6.89%; top: -13.32%; right: auto; bottom: auto;
    object-fit: cover;
  }

  /* badges */
  .hero-stats { order: 3; align-self: center; z-index: 1; max-width: 360px; }

  /* Build with HIGH-STANDARD. — left-aligned, overflows right & is clipped (SP) */
  .hero-bottom-text {
    order: 4; display: block; position: relative; left: auto; top: auto;
    width: 100%; height: auto; align-self: stretch; z-index: 1;
    font-size: 56px; line-height: 1.1; color: var(--navy);
    text-align: left; white-space: nowrap; margin: 16px 0 0 0; overflow: visible;
  }

  /* navy swoosh = exact SP vector (905:457): a band behind the phones/badges,
     contained ABOVE the Build-with text (top+bottom anchored, SVG stretches). */
  .hero-vector {
    display: block; position: absolute;
    left: 2%; top: 46%; bottom: 92px; width: 132%; height: auto;
    z-index: 0; opacity: 1; pointer-events: none;
    background: url(../assets/images/hero-swoosh.svg) center / 100% 100% no-repeat;
  }
  .hero-vector svg { display: none; }

  /* HERO stats → SP design: crown above, navy circle with number (upper)
     and label (lower) BOTH inside the circle in white. */
  .hero-stats {
    position: relative; left: auto; top: auto;
    width: 100%; max-width: 356px; height: auto;
    margin: 2px auto 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 22px 110px;
    align-items: start; justify-items: center;
    column-gap: 5px; pointer-events: auto;
  }
  .hero-stats > * {
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important; opacity: 1 !important;
  }
  .stat-crown { width: 24px; height: auto; align-self: end; }
  .stat-crown-1 { grid-column: 1; grid-row: 1; }
  .stat-crown-2 { grid-column: 2; grid-row: 1; }
  .stat-crown-3 { grid-column: 3; grid-row: 1; }
  .stat-circle { width: 110px; height: 110px; align-self: start; }
  .stat-circle-1 { grid-column: 1; grid-row: 2; }
  .stat-circle-2 { grid-column: 2; grid-row: 2; }
  .stat-circle-3 { grid-column: 3; grid-row: 2; }
  /* number: upper portion of the circle */
  .stat-num { grid-row: 2; align-self: start; justify-self: center; margin-top: 18px; z-index: 2; font-size: 35px; color: #fff; }
  .stat-num-1 { grid-column: 1; }
  .stat-num-2 { grid-column: 2; }
  .stat-num-3 { grid-column: 3; font-size: 27px; margin-top: 22px; }
  /* label: lower portion, inside the circle, white */
  .stat-label { grid-row: 2; align-self: start; justify-self: center; margin-top: 66px; z-index: 2; font-size: 10.5px; color: #fff; -webkit-text-stroke: 2.45px #2D59B2; paint-order: stroke fill; line-height: 1.35; }
  .stat-label-1 { grid-column: 1; }
  .stat-label-2 { grid-column: 2; }
  .stat-label-3 { grid-column: 3; }

  /* ===== CLIENTS ===== */
  .clients-logos-row img { height: 38px; }
  .case-cards-track { animation-duration: 28s; }
  .case-card { min-width: 280px; }

  /* ===== STORY (SP order: heading → text → signature → men photo at bottom) ===== */
  .story {
    height: auto;
    padding: 56px 20px 0;
    transform: none; width: 100%;
    display: flex; flex-direction: column; align-items: center;
  }
  .story::after { display: none; }
  .story-vector { display: none; }
  .story-photos,
  .story-heading,
  .story-body-text {
    position: relative; left: auto; top: auto; width: 100%; max-width: 480px;
  }
  .story-heading { order: 1; margin-bottom: 6px; }
  .story-body-text { order: 2; margin-top: 16px; }
  .story-photos {
    order: 3; height: auto; aspect-ratio: 1058 / 705; margin: 30px 0 0; opacity: 1;
  }
  .story-body-text p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; }
  .story-body-text br { display: none; }   /* desktop hard breaks -> natural wrap */
  .story-signature { margin-top: 24px; }
  .story-sig-title { font-size: 20px; }
  .story-sig-name { font-size: 30px; }

  /* ===== NEWS ===== */
  .news { padding: 64px 0; }
  .news-inner { padding: 0 20px; }
  .news-card-thumb { width: 72px; height: 52px; }
  .news-card-title { font-size: 14px; }

  /* ===== SERVICE (reflow, not scaled, on mobile) ===== */
  .service {
    height: auto; padding: 56px 20px; transform: none; width: 100%;
  }
  .service-heading,
  .service-desc,
  .service-line-box,
  .service-web-box {
    position: relative; left: auto; top: auto; transform: none; width: 100%;
  }
  .service-desc { margin-top: 20px; white-space: normal; }
  .service-desc p,
  .service-web-desc p { font-size: 14px; }
  .service-line-box,
  .service-web-box { height: auto; margin-top: 36px; padding: 28px 18px; }
  .service-line-title,
  .service-web-title {
    position: relative; left: auto; top: auto; font-size: 34px;
  }
  .service-line-list {
    position: relative; left: auto; top: auto; width: 100%; margin-top: 20px;
  }
  .service-line-item-head h4 { font-size: 18px; }
  /* LINE Marketing icon circles → centred 3-up row on mobile (desktop = absolute) */
  .service-line-circles {
    display: flex; gap: 2%; justify-content: center;
    width: 100%; max-width: 480px; margin: 26px auto 2px;
  }
  .service-line-circle {
    display: block; position: static; left: auto; top: auto;
    width: 32%; height: auto; aspect-ratio: 1; filter: none;
    border: 1.5px solid #cfe6d1; box-sizing: border-box;
  }
  .service-line-circle .service-circle-bar { width: 100%; height: 42%; }
  .service-line-circle .service-circle-img {
    width: 54%; height: auto; aspect-ratio: 1; top: 5%; left: 50%; transform: translateX(-50%);
  }
  /* label sits at the TOP of the (taller) bar — the wider part of the round,
     so the 2nd line isn't clipped by the circle's round bottom */
  .service-line-circle .service-circle-label {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 42%;
    transform: none; display: flex; align-items: flex-start; justify-content: center;
    padding: 4px 5px 0; font-size: clamp(7.5px, 2.2vw, 10px); line-height: 1.15;
  }
  .service-web-desc {
    position: relative; left: auto; top: auto; margin-top: 14px;
  }
  .service-web-cards {
    position: relative; left: auto; top: auto; transform: none;
    flex-wrap: wrap; margin-top: 22px; gap: 12px; justify-content: center;
  }
  .service-web-card { width: calc(50% - 6px); height: auto; aspect-ratio: 1 / 1; }
  .service-web-card-img { position: absolute; left: 12%; top: 6%; width: 76%; height: 60%; }
  .service-web-card-bar { top: auto; bottom: 0; width: 100%; height: 26%; }
  .service-web-card-label {
    top: auto; bottom: 8%; left: 50%; transform: translateX(-50%);
    font-size: clamp(12px, 3.6vw, 15px); white-space: normal;
    width: 90%; line-height: 1.25; text-align: center;
  }

  /* ===== REASON ===== */
  /* on mobile the section is very tall (stacked) so the dome would still
     point — keep it flat-topped here. */
  .reason { padding: 64px 0; clip-path: none; }
  .clients-navy { clip-path: none; }
  .reason-inner { padding: 0 20px; }
  .reason-item-title { font-size: 22px; }
  .reason-item-number { font-size: 48px; }

  /* ===== CASE STUDY ===== */
  .cs { padding: 64px 0; }
  .cs-inner { padding: 0 16px; }   /* was 40px desktop gutter — widen cards */
  .cs-card { padding: 28px 18px; border-radius: 16px; }
  .cs-card-title { font-size: 22px; }
  /* KPI circles: 3-in-a-row like the SP (no wrap), scale with card width */
  .cs-kpis { gap: 2.5%; flex-wrap: nowrap; justify-content: center; }
  .cs-kpi { width: 30%; height: auto; aspect-ratio: 1; flex-shrink: 0; max-width: 112px; min-width: 0; box-sizing: border-box; }
  /* only KPIs WITH an arrow nudge down for balance; text-value circles (数千万円/自動化) stay centred */
  .cs-kpi:has(.cs-kpi-arrow) { padding-top: 12px; }
  .cs-kpi-cat { font-size: clamp(9px, 2.6vw, 11px); }
  .cs-kpi-number { font-size: clamp(18px, 5.2vw, 23px); }
  .cs-kpi-number--text { font-size: clamp(12px, 3.6vw, 16px); }
  .cs-kpi-number small { font-size: 0.62em; }
  .cs-kpi-arrow { width: 17px; height: 17px; }
  .cs-detail-list,
  .cs-detail-heading { font-size: 14px; }
  .cs-card-result p { font-size: 14px; }

  /* ===== CTA (reflow, not scaled, on mobile) ===== */
  .cta {
    height: auto; padding: 48px 16px 40px; transform: none; width: 100%;
  }
  .cta-build-marquee { display: none; }
  .cta-card {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; height: auto; padding: 26px 18px 28px; border-radius: 22px;
  }
  .cta-card-top {
    position: relative; left: auto; top: auto;
    flex-direction: column; gap: 22px; align-items: stretch;
  }
  .cta-headline { font-size: 30px; white-space: normal; text-align: center; }
  .cta-stats { justify-content: center; gap: 10px; }
  .cta-stat { width: 30%; max-width: 120px; }
  .cta-circle-wrap { width: 100%; aspect-ratio: 1 / 1; height: auto; }
  .cta-circle-bg { width: 100%; height: 100%; }
  /* numbers were 47px desktop -> overflow the shrunken circle; scale them */
  .cta-stat-num { font-size: clamp(22px, 9vw, 40px); }
  .cta-stat-num--ja { font-size: clamp(17px, 7vw, 32px); }
  .cta-description {
    position: relative; left: auto; top: auto; margin-top: 4px; justify-content: center;
  }
  .cta-description-text { white-space: normal; font-size: 15px; }
  .cta-buttons {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; flex-direction: column; gap: 12px; margin-top: 22px;
  }
  /* in the mobile column, flex:1 would collapse the height — force fixed size */
  .cta-btn { flex: none; width: 100%; height: 56px; font-size: 17px; }
  .cta-logos {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 100%; max-width: 520px; margin: 26px auto 0; gap: 16px;
    padding: 18px 18px;
  }
  .cta-logos-row { flex-wrap: wrap; justify-content: center; gap: 20px 22px; }
  .cta-logos-row img { flex: 0 1 auto; height: 22px; }

  /* ===== PLAN ===== */
  .plan { padding: 64px 0; }
  .plan-cta { padding: 32px 22px; }
  .plan-cta-buttons { flex-direction: column; align-items: center; }
  .plan-cta-buttons .btn { width: 100%; max-width: 320px; }

  /* ===== MEMBER ===== */
  .member { padding: 56px 0 8px; }
  .member .section-heading-en { font-size: 34px; }   /* was stuck at desktop 46px */
  .member-inner { padding: 0 20px; }
  .member-navy-bg { display: none; }
  .member-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    overflow: visible; flex-wrap: initial;
  }
  .member-card { width: 100%; height: auto; aspect-ratio: 300 / 450; }
  .member-card-info { width: 86%; }
  /* hover-reveal disabled on mobile — a tap on iPhone fires :hover and the
     desktop-positioned desc (top:205px) overlaps the name in the shorter card */
  .member-card-desc { display: none; }
  .member-card:hover .member-card-photo { opacity: 1; }
  .member-card:hover .member-card-desc { opacity: 0; }
  .member-card-name { font-size: 18px; }
  .member-nav { display: none; }

  /* ===== FAQ ===== */
  .faq { padding: 64px 0; }
  .faq-inner { padding: 0 20px; }
  .faq-question { padding: 16px 16px 10px; gap: 10px; }
  .faq-q-text { font-size: 14px; }
  .faq-answer p { padding: 0 16px 18px 56px; }

  /* ===== FLOW ===== */
  .flow { padding: 64px 0; }
  .flow-step { flex-direction: column; align-items: center; text-align: center; gap: 14px; }

  /* ===== COMPANY ===== */
  .company { padding: 64px 0; }
  .company-inner { padding: 0 20px; }
  .company-table th { width: 110px; font-size: 13px; }
  .company-table td { font-size: 13px; }
  .company-table th,
  .company-table td { padding: 14px 8px; }

  /* ===== CONTACT ===== */
  .contact { padding: 64px 0 0; }
  .contact-inner { padding: 0 20px; }
  .contact-form-wrap { padding: 26px 20px; }
  .contact-watermark { font-size: clamp(34px, 11vw, 52px); margin-top: 36px; word-break: keep-all; }

  /* ===== OTHER BUSINESS ===== */
  .other-business { padding: 56px 0; }
  .other-business-cards { grid-template-columns: 1fr; }

  /* ===== FOOTER ===== */
  .footer { padding: 48px 0 36px; }
  .footer-inner { padding: 0 20px; }
  .footer-top { flex-direction: column; gap: 28px; text-align: center; align-items: center; }
  .footer-left { align-items: center; }
  .footer-cta { justify-content: center; }
  .footer-nav { align-items: center; align-self: center; }

  /* ---- mobile polish fixes ---- */
  /* Service: the empty bordered frames are desktop-only overlays; on a
     reflowed mobile column they'd render as empty boxes, so hide them. */
  .service-line-box,
  .service-web-box { display: none; }

  /* Case study: let the company name + tags wrap instead of crushing the
     company name into a 1-char-per-line column. */
  .cs-card-meta { flex-wrap: wrap; row-gap: 6px; }
  /* allow long company names (e.g. テイクアンドギヴ・ニーズ コンシェルジュ) to wrap
     instead of forcing one line that overflows the card */
  .cs-card-company { white-space: normal; width: 100%; line-height: 1.4; font-size: 18px; }

  /* CTA "多業種" label is long — shrink it so it sits inside the small circle. */
  .cta-stat-label { font-size: 10px; -webkit-text-stroke-width: 1px; }
}

/* ============================================================
   LEGAL PAGE (privacy policy / terms etc.)
   ============================================================ */
.legal-body .header { background: #fff; box-shadow: 0 2px 14px rgba(13, 40, 90, 0.07); }
.legal-page { padding: 80px 0 96px; background: #fff; }
.legal-hero { text-align: center; padding: 56px 24px 40px; }
.legal-title { font-family: var(--font-ja); font-weight: 900; font-size: 34px; color: var(--navy); margin: 0; }
.legal-subtitle { font-family: var(--font-en), var(--font-ja); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: #9aa9c0; margin: 8px 0 0; text-transform: uppercase; }
.legal-container { max-width: 880px; margin: 0 auto; padding: 0 24px; color: #2b3142; font-size: 15px; line-height: 1.95; }
.legal-draft-note { background: #fff7e0; border: 1px solid #f0d98a; border-radius: 8px; padding: 12px 16px; font-size: 13.5px; color: #7a5d12; margin: 0 0 40px; }
.legal-section { margin-bottom: 38px; }
.legal-section h2 { font-family: var(--font-ja); font-weight: 700; font-size: 19px; color: var(--navy); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e3e9f2; }
.legal-section p { margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-subhead { margin: 20px 0 8px !important; color: var(--navy); }
.legal-ol, .legal-ul { margin: 0 0 14px; padding-left: 1.6em; }
.legal-ol > li, .legal-ul > li { margin-bottom: 6px; }
.legal-ol { list-style: decimal; }
.legal-ul { list-style: disc; }
.legal-ul ul, .legal-ol ul { list-style: circle; margin: 6px 0; padding-left: 1.4em; }
.legal-container a { color: #1b58d3; word-break: break-all; }
.legal-todo { background: #ffe49c; color: #6b4e00; padding: 0 3px; border-radius: 3px; font-weight: 500; }
.footer-privacy-link { color: inherit; text-decoration: underline; font-size: 13px; opacity: 0.85; margin-right: 18px; }
.footer-privacy-link:hover { opacity: 1; }
@media (max-width: 1440px) {
  .legal-page { padding-top: 64px; }
  .legal-title { font-size: 26px; }
  .legal-hero { padding: 40px 18px 28px; }
  .legal-container { font-size: 14.5px; padding: 0 18px; }
}

/* ============================================================
   CURSOR FOLLOWER — trailing ring (fine-pointer only)
   ============================================================ */
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(27, 88, 211, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease,
    background-color 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hover {
  width: 54px;
  height: 54px;
  background: rgba(27, 88, 211, 0.1);
  border-color: rgba(27, 88, 211, 0.85);
}
@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}

/* ============================================================
   TABLET POLISH (700–1440px)
   The ≤1440 rules above turn the whole page into the phone
   layout. On an iPad that left either full-width text (reason)
   or a narrow 520 card stranded in a wide empty row. Here we
   unify the body into ONE centred column so tablets read as an
   intentional layout. Phones (<700px) are untouched.
   ============================================================ */
@media (min-width: 700px) and (max-width: 1440px) {
  /* shared content width for cards / single-column sections */
  .cs-card,
  .cta-card,
  .plan-cta,
  .contact-grid,
  .contact-form-wrap,
  .news-inner,
  .faq-inner,
  .flow-inner,
  .company-inner,
  .member-cards,
  .other-business-cards,
  .footer-inner {
    max-width: 660px;
  }

  /* Reason: text was 780 (full-width) while the image was 560 → the
     copy overran the illustration. Centre the item column and make the
     image + copy the same width so each block lines up. */
  .reason-items { max-width: 660px; margin-left: auto; margin-right: auto; }
  .reason-item { align-items: stretch; }
  .reason-item-image { width: 100%; max-width: 100%; }
  .reason-item-content { width: 100%; }
  .reason-subtitle { max-width: 660px; margin-left: auto; margin-right: auto; }

  /* Case study subtitle: keep off the edges */
  .cs-subtitle { max-width: 660px; margin-left: auto; margin-right: auto; }

  /* Service: copy + card rows were 780 (full-width). Bring into the column. */
  .service-desc,
  .service-line-title,
  .service-line-list,
  .service-web-title,
  .service-web-desc,
  .service-web-cards {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Plan: single column, keep the card a sensible width (not a wide banner) */
  .plan-cards { max-width: 480px; }

  /* Hero: the mobile FV (a ~380 left-aligned column) looked tiny & lopsided on
     a wide tablet. Rebuild it as ONE centred stack: bigger centred headline,
     larger phone mock, centred "Build with". */
  .hero-textblock { max-width: 560px; align-items: center; text-align: center; }
  .hero-tag { align-self: center; }
  .hero-headline { font-size: clamp(40px, 6.6vw, 58px); text-align: center; }
  .hero-description { text-align: center; font-size: 16px; }
  .hero-phones { max-width: 600px; }
  .hero-bottom-text { text-align: center; font-size: clamp(44px, 7.1vw, 60px); }
}

/* ============================================================
   2026-07-23 修正リスト（FAQ/Flow/Other Business）
   ============================================================ */
/* 33/35: 日本語を文節で折り返して読みやすく（不自然な行末を防ぐ） */
.faq-answer p,
.flow-step-text { word-break: auto-phrase; line-break: strict; }

/* 40: Other Business のリード文 */
.other-business-lead {
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a3a;
  max-width: 760px;
  margin: -12px auto 40px;
  font-feature-settings: "halt" 1;
}