/* =============================================
   PORTUS — style.css (shared)
   Covers: portus-marketing & portus-listing pages
   ============================================= */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  background: #fff;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ---- Layout ---- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ---- Gradient Text Utilities ---- */
.grad-text {
  background: linear-gradient(92.25deg, #0d3b6e 15.1%, #1a6db5 48.78%, #7aafc9 82.46%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-2 {
  background: linear-gradient(92.68deg, #0d3b6e 33.42%, #a8dbf4 53.74%, #1a6db5 74.06%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-3 {
  background: linear-gradient(121.56deg, #0d3b6e 0%, #1a6db5 29.01%, #7aafc9 58.02%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-3-center {
  background: linear-gradient(151.1deg, #0d3b6e 0%, #1a6db5 29.01%, #7aafc9 58.02%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-4 {
  background: linear-gradient(94.16deg, #0d3b6e 15.32%, #7aafc9 50%, #1a6db5 84.68%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Section Text Helpers ---- */
.text-white { color: #fff; }
.text-blue-mid { color: #3d7bae; }

/* ---- Section Header (EN + JA title) ---- */
.section-header { margin-bottom: 0; }
.section-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(60px, 8vw, 100px);
  line-height: 1;
  color: #3d7bae;
  margin-bottom: 20px;
}
.section-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0d3b6e;
  letter-spacing: 0.6px;
  line-height: 2;
}

/* ---- Responsive line break helpers ---- */
.problem-br { display: none; }

/* ---- Fade-in animation ---- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   HEADER
   ============================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  height: 85px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 23px;
  height: 100%;
  display: flex;
  align-items: center;
}
.logo { height: 56px; display: flex; }
.logo img { height: 100%; width: auto; object-fit: contain; aspect-ratio: 2120 / 656; }

/* =============================================
   GLOBAL NAVIGATION
   ============================================= */
.gnav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
margin: 0 25px 0 16px;
}
.gnav-list {
  display: flex;
  align-items: center;
  list-style: none;
  height: 85px;
}
.gnav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.gnav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 13px;
  height: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0d3b6e;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}
.gnav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 13px;
  right: 13px;
  height: 2px;
  background: linear-gradient(90deg, #0d3b6e, #3d7bae);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.gnav-item:hover > .gnav-link { color: #3d7bae; }
.gnav-item:hover > .gnav-link::after { transform: scaleX(1); }
.gnav-chevron {
  font-size: 15px;
  color: #3d7bae;
  transition: transform 0.2s;
  line-height: 1;
}
.gnav-item:hover > .gnav-link .gnav-chevron { transform: rotate(180deg); }

/* ---- Mega Menu ---- */
.mega-menu {
  position: fixed;
  top: 85px;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  border-top: 3px solid #3d7bae;
  display: none;
  z-index: 200;
}
.gnav-has-mega:hover .mega-menu { display: block; }
.mega-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 40px 30px;
}
.mega-service-top {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #3d7bae;
  margin-bottom: 18px;
  transition: color 0.2s, padding-left 0.15s;
}
.mega-service-top:hover { color: #0d3b6e; padding-left: 4px; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.mega-col-title {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #3d7bae;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(61,123,174,0.25);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.mega-col-title:hover { color: #0d3b6e; }
.mega-col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mega-col-list a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #333;
  transition: color 0.15s, padding-left 0.15s;
}
.mega-col-list a:hover { color: #3d7bae; padding-left: 4px; }

/* ---- Small Dropdown ---- */
.gnav-drop {
  position: absolute;
  top: 85px;
  left: 0;
  min-width: 175px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border-top: 3px solid #3d7bae;
  list-style: none;
  display: none;
  z-index: 200;
}
.gnav-has-drop:hover .gnav-drop { display: block; }
.gnav-drop li a {
  display: block;
  padding: 11px 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0d3b6e;
  transition: background 0.15s, color 0.15s;
}
.gnav-drop li a:hover { background: #eff8fd; color: #3d7bae; }

/* ---- CTA Buttons ---- */
.gnav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.gnav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 15px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
}
.gnav-btn:hover { opacity: 0.82; transform: translateY(-1px); }
.gnav-btn-contact { background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%); }
.gnav-btn-dl { background: linear-gradient(92.25deg, #0d3b6e 10%, #3d7bae 100%); }

/* ---- Hamburger ---- */
.gnav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: 16px;
}
.gnav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #0d3b6e;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.gnav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.gnav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.gnav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Mobile Drawer ---- */
.gnav-drawer {
  position: fixed;
  top: 85px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 99;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.gnav-drawer.open { transform: translateX(0); }
.gnav-drawer-inner { padding: 0 20px 50px; }
.gnav-drawer-list { list-style: none; }
.gnav-drawer-item { border-bottom: 1px solid rgba(13,59,110,0.08); }
.gnav-drawer-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0d3b6e;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.gnav-drawer-chevron {
  font-size: 17px;
  color: #3d7bae;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.gnav-drawer-item.open .gnav-drawer-chevron { transform: rotate(180deg); }
.gnav-drawer-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.gnav-drawer-item.open .gnav-drawer-sub { max-height: 1400px; }
.gnav-drawer-sub-top {
  display: block;
  padding: 10px 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #3d7bae;
  background: #eff8fd;
  margin-bottom: 6px;
}
.gnav-drawer-cat {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #3d7bae;
  padding: 12px 14px 5px;
  letter-spacing: 0.5px;
}
.gnav-drawer-sub ul { list-style: none; padding-bottom: 4px; }
.gnav-drawer-sub-link {
  display: block;
  padding: 8px 14px 8px 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #333;
  transition: color 0.15s;
}
.gnav-drawer-sub-link:hover { color: #3d7bae; }
.gnav-drawer-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
}
.gnav-drawer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.2s;
}
.gnav-drawer-btn:hover { opacity: 0.85; }
.gnav-drawer-btn-contact { background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%); }
.gnav-drawer-btn-dl { background: linear-gradient(92.25deg, #0d3b6e 10%, #3d7bae 100%); }

@media (max-width: 1024px) {
  .gnav { display: none; }
  .gnav-cta { display: none; }
  .gnav-hamburger { display: flex; }
  .header-inner { justify-content: space-between; }
  .logo img { width: 150px; height: auto; }
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero-section {
  background: linear-gradient(109.45deg, #7aafc9 0.12%, #3d7bae 70%);
  padding: 100px 30px 120px;
}
.hero-inner { }
.hero-titlebox { display: flex; flex-direction: column; gap: 20px; }
.hero-title-row { display: flex; align-items: center; gap: 15px; }
.hero-search-icon { width: 90px; height: 90px; object-fit: contain; opacity: 0.85; flex-shrink: 0; }
.hero-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 80px);
  color: rgba(255,255,255,0.7);
  letter-spacing: 3px;
  line-height: 1;
}
.hero-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 24px);
  color: #fff;
  line-height: 1.4;
}

/* =============================================
   INTRO SECTION
   ============================================= */
.intro-section {
  position: relative;
  padding: 80px 30px;
  overflow: hidden;
  text-align: center;
  min-height: 530px;
  display: flex;
  align-items: center;
}
.intro-bg-ellipse {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.intro-bg-ellipse img { width: 100%; height: auto; opacity: 0.15; }
.intro-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.intro-headline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
  max-width: 100%;
}
.intro-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.8px;
  max-width: 900px;
  color: #000;
}

/* =============================================
   PROBLEM SECTION
   ============================================= */
.problem-section {
  position: relative;
  padding: 100px 30px;
  overflow: hidden;
}
.section-bg-text {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 150px;
  color: rgba(146,202,237,0.2);
  letter-spacing: 10px;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.problem-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.section-heading-center {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  text-align: center;
}
.problem-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 860px;
}
.problem-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  transition: transform 0.2s;
}
.problem-box:hover { transform: translateX(6px); }
.problem-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.problem-box p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #000;
}
.problem-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%);
  color: #fff;
  height: 60px;
  padding: 20px 35px;
  width: fit-content;
  min-width: 400px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  box-shadow: 0 0 50px rgba(255,255,255,0.3);
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
}
.problem-cta:hover { opacity: 0.85; transform: translateY(-2px); }
.problem-cta img { width: 25px; height: 25px; object-fit: contain; }

/* =============================================
   ABOUT SECTION (marketing)
   ============================================= */
.about-section {
  background: #eff8fd;
  padding: 100px 30px;
  overflow: hidden;
}
.about-wrapper { display: flex; flex-direction: column; gap: 0; }
.about-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: 60px;
}
.about-headline-block {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 100%;
}
.about-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
}
.about-body-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: #000;
}

/* ---- Flow diagram ---- */
.about-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  background: white;
  box-shadow: 0 4px 30px rgba(61,123,174,0.12);
}
.about-flow-item {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 35px;
  text-align: center;
  border-right: 2px solid rgba(61,123,174,0.25);
  transition: background 0.2s;
}
.about-flow-item:last-child { border-right: none; }
.about-flow-item:hover { background: #f5fbff; }
.about-flow-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  background-image: url('../img/right-chevron.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
}
.about-flow-desc {
  font-size: 15px;
}
.about-flow-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  background: linear-gradient(121.56deg, #0d3b6e 0%, #1a6db5 40%, #7aafc9 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-flow-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0d3b6e;
  line-height: 1.5;
}
.about-flow-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #3d7bae;
  margin-top: 4px;
  display: block;
}
.about-flow-arr { display: none; }

/* =============================================
   FEATURES SECTION (listing)
   ============================================= */
.features-section {
  background: #eff8fd;
  padding: 100px 30px;
  overflow: hidden;
}
.features-wrapper { display: flex; flex-direction: column; gap: 0; }
.features-container {
  display: flex;
  gap: 30px;
  padding-top: 60px;
  align-items: flex-start;
}
.features-title-col {
  flex: 0 0 40%;
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.features-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
.features-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: #000;
}
.features-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.features-card {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 50px 30px 60px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.2s;
}
.features-card:hover {
  box-shadow: 0 8px 30px rgba(61,123,174,0.15);
  transform: translateY(-2px);
}
.features-num-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.features-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 150px;
  line-height: 1;
}
.features-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 10px;
}
.features-card-text h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
  line-height: 1.4;
}
.features-card-text p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  line-height: 2;
}

/* =============================================
   WHY US SECTION
   ============================================= */
.whyus-section {
  padding: 100px 30px;
  background: #fff;
}
.whyus-wrapper { display: flex; flex-direction: column; gap: 0; max-width: 1200px; margin: 0 auto; }
.whyus-headline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 40px);
  text-align: center;
  padding: 30px 0 0;
  margin-top: 20px;
}
.whyus-grad {
  background: linear-gradient(90deg, #0d3b6e, #a1d4ee, #1b6eb5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(30px, 4vw, 60px);
}
.whyus-normal { font-size: clamp(20px, 2.5vw, 40px); color: #000; }
.whyus-portus {
  background: linear-gradient(90deg, #0d3b6e, #7abcc9, #1a6db5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(30px, 4vw, 60px);
}
.whyus-content-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 60px;
}
.whyus-card {
  background: #eff8fd;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 50px 50px 60px;
  transition: box-shadow 0.3s, transform 0.2s;
}
.whyus-card:hover {
  box-shadow: 0 8px 30px rgba(61,123,174,0.12);
  transform: translateY(-2px);
}
.whyus-num-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-right: 30px;
}
.point-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  color: #0d3b6e;
}
.whyus-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 150px;
  line-height: 1;
}
.whyus-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 10px;
}
.whyus-card-text h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
}
.whyus-card-text p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000;
  line-height: 2;
}

/* =============================================
   SERVICES SECTION (marketing)
   ============================================= */
.services-section {
  background: linear-gradient(127.53deg, #a8ddf4 0%, #3d7bae 50.86%, #0d3b6e 100%);
  padding: 100px 30px;
}
.services-wrapper { display: flex; flex-direction: column; gap: 0; max-width: 1200px; margin: 0 auto; }
.services-headline {
  padding: 60px 0 50px;
  text-align: center;
}
.services-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
  background: linear-gradient(137.64deg, #fff 0%, #a8ddf4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Services grid (flat, all 5 cards) ---- */
.services-grid-all {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
}
.services-grid-all > .service-card:nth-child(1),
.services-grid-all > .service-card:nth-child(2),
.services-grid-all > .service-card:nth-child(3) {
  grid-column: span 2;
}
.services-grid-all > .service-card:nth-child(4),
.services-grid-all > .service-card:nth-child(5) {
  grid-column: span 3;
}

.service-card {
  background: #fff;
  padding: 40px 35px 50px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.2s, box-shadow 0.3s;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.12);
}
.service-cat-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  background: linear-gradient(121.56deg, #0d3b6e 0%, #1a6db5 29.01%, #7aafc9 58.02%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
}
.service-divider {
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, #0d3b6e, #3d7bae);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.service-cat-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #0d3b6e;
  margin-bottom: 16px;
}
.service-card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  color: #444;
  margin-bottom: 22px;
  flex: 1;
}
.service-top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0d3b6e;
  padding: 0 0 12px 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(13,59,110,0.15);
  transition: color 0.2s, gap 0.2s;
}
.service-top-link::after { content: ' →'; }
.service-top-link:hover { color: #3d7bae; gap: 10px; }
.service-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 2px;
}
.service-list li a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #555;
  transition: color 0.15s, padding-left 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(61,123,174,0.08);
}
.service-list li:last-child a { border-bottom: none; }
.service-list li a::before {
  content: '›';
  color: #3d7bae;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.service-list li a:hover { color: #0d3b6e; padding-left: 4px; }

/* =============================================
   FLOW SECTION (listing)
   ============================================= */
.flow-section {
  background: linear-gradient(127.53deg, #a8ddf4 0%, #3d7bae 50.86%, #0d3b6e 100%);
  padding: 100px 30px;
}
.flow-wrapper { display: flex; flex-direction: column; gap: 0; max-width: 1200px; margin: 0 auto; }
.flow-key-msg {
  padding-top: 60px;
  text-align: center;
  color: white;
}
.flow-key-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 40px);
  background: linear-gradient(137.64deg, #fff 0%, #a8ddf4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: white;
  line-height: 1.5;
}
.flow-content-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 60px;
}
.flow-card {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 50px 50px 60px;
  transition: box-shadow 0.3s;
}
.flow-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.flow-icon { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; order: 2;}
.step-circle {
  order: 1;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(166.92deg, #0d3b6e 2.44%, #3d7bae 50%, #a8ddf4 97.56%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  color: #fff;
}
.step-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  line-height: 1;
}
.step-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 50px;
  line-height: 1;
}
.flow-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 10px;
  order: 3;
}
.flow-card-text h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
}
.flow-card-text p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  line-height: 2;
}
.flow-connector {
  width: 4px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(168,221,244,0.5), rgba(168,221,244,0.1));
  margin: 0 auto;
  position: relative;
  align-self: center;
}
.flow-note {
  color: #ffffffab;
  font-size: 12px;
  margin-top: 30px;
}

/* =============================================
   KEY FIGURES SECTION
   ============================================= */
.figures-section {
  background: linear-gradient(26.22deg, #fff 24.93%, #e1f2fa 99.54%);
  padding: 100px 30px;
}
.figures-wrapper { display: flex; flex-direction: column; gap: 0; max-width: 1200px; margin: 0 auto; }
.figures-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 60px;
  padding-bottom: 10px;
  text-align: center;
}
.figures-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
}
.figures-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000;
}
/* marketing: stat row */
.figures-stat-row {
  display: flex;
  justify-content: center;
  padding: 30px 0 10px;
}
.figures-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.figures-stat-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(60px, 8vw, 100px);
  line-height: 1;
}
.figures-stat-unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #0d3b6e;
}
.figures-stat-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #555;
  padding-left: 4px;
}
.figures-content-box {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
}
.figures-chart-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.chart-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  text-align: center;
}
.figures-chart-box img {
  width: 100%;
  max-width: 528px;
  height: auto;
  object-fit: cover;
}

/* =============================================
   PLANS SECTION (listing)
   ============================================= */
.plans-section {
  padding: 100px 30px;
  background:#f7f8fc;
  overflow: hidden;
}
.plans-wrapper { display: flex; flex-direction: column; gap: 0; max-width: 1200px; margin: 0 auto; }
.plans-headline {
  padding-top: 60px;
  padding-bottom: 30px;
  text-align: center;
}
.plans-headline p {
margin-top: 30px;
}
.plans-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
}
.plans-cards {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding-top: 30px;
}
.plan-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 50px 30px 60px;
  border-width: 5px;
  border-style: solid;
  overflow: hidden;
  background: white;
  transition: transform 0.2s, box-shadow 0.3s;
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.plan-light {
  border: 0;
  box-shadow: 0 0 30px rgb(100 203 242 / 32%);
}
.plan-standard {
  border: 0;
  box-shadow: 0 0 30px rgb(25 110 181 / 32%);
}
.plan-light .plan-tagline { color: #7aaec8; font-size: 16px; }
.plan-light .plan-label { background: #7aaec8; color: white; }
.plan-light .plan-value-num { color: #79adc7; }
.plan-standard .plan-tagline { color: #196eb5; font-size: 16px; }
.plan-standard .plan-label { background: #196eb5; color: white; }
.plan-standard .plan-value-num { color: #196eb5; }
.plan-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  text-align: center;
}
.plan-name-light { color: #7aafc9; }
.plan-name-standard { color: #1a6db5; }
.plan-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  text-align: center;
}
.plan-img {
  width: 350px;
  max-width: 100%;
  height: 233px;
  object-fit: contain;
}
.plan-table {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-collapse: collapse;
}
.plan-table tr { height: 55px; }
.plan-table td {
  vertical-align: middle;
  text-align: left;
  padding: 4px 0;
}
.plan-table td:first-child {
  padding-right: 12px;
  white-space: nowrap;
}
.plan-label {
  display: inline-flex;
  align-items: center;
  background: #dbeaf2;
  border-radius: 20px;
  padding: 7px 15px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  justify-content: center;
  width: 120px;
}
.plan-value {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: #000;
  text-align: center;
}
.plan-value-prefix { font-size: 16px; }
.plan-value-num { font-size: 36px; }
.plan-value-suffix { font-size: 16px; }
.plan-value-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #000;
}
.plans-section-custom .plans-cards {
  flex-direction: column;
  align-items: center;
}
.plans-section-custom .plan-card {
  max-width: 900px;
  margin: 0 auto;
}
.plan-detail-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.plan-imgbox {
  display: flex;
flex-direction: column;
gap: 20px;
}
.plans-section-custom .plan-card {
  padding: 50px 50px 60px;
}
@media (max-width: 900px) {
  .plan-detail-wrapper {
    flex-direction: column;
    gap: 20px;
  }
  .plan-table tr {
    margin-bottom: 10px;
  }
}
/* =============================================
   OPERATIONS SECTION (listing)
   ============================================= */
.operations-section {
  background: linear-gradient(205.21deg, #fff 25.49%, #e1f2fa 98.77%);
  padding: 100px 30px;
  position: relative;
  overflow: hidden;
}
.operations-support-img {
  position: absolute;
  bottom: 100px;
  left: 3vw;
  width: 400px;
  height: 400px;
  pointer-events: none;
}
.operations-support-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.4;
}
.operations-wrapper { display: flex; flex-direction: column; gap: 0; }
.operations-container {
  display: flex;
  gap: 50px;
  padding-top: 60px;
  align-items: flex-start;
}
.operations-title-col {
  flex: 0 0 40%;
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-height: 300px;
}
.operations-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.5;
  text-align: left;
}
.operations-content-col {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 30px;
}
.ops-card {
  background: #fff;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 30px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(122,175,201,0.3);
  transition: transform 0.2s;
}
.ops-card:hover { transform: translateY(-2px); }
.ops-num-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(166.92deg, #0d3b6e 2.44%, #3d7bae 50%, #a8ddf4 97.56%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ops-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 60px;
  color: #fff;
  line-height: 1;
}
.ops-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.ops-card-text h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #000;
  line-height: 1.4;
}
.ops-card-text p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  line-height: 2;
}

/* =============================================
   FAQ SECTION
   ============================================= */
.faq-section {
  background: #fff;
  padding: 100px 30px;
}
.faq-wrapper { display: flex; flex-direction: column; gap: 0; }
.faq-list {
  display: flex;
  flex-direction: column;
  padding-top: 60px;
}
.faq-item { border-bottom: 1px solid rgba(122,175,201,0.2); }
.faq-item:last-child { border-bottom: none; }
.faq-q-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  padding: 30px 30px 30px 30px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.faq-q-row:hover { background: rgba(239,248,253,0.6); }
.faq-item.open:hover .faq-a-wrap { background: rgba(239,248,253,0.6); }
.faq-item.open:has(.faq-a-wrap:hover) .faq-q-row { background: rgba(239,248,253,0.6); }
.faq-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 18px;
  color: #3d7bae;
  transition: transform 0.3s ease;
  align-self: center;
  padding-left: 16px;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-a-wrap { max-height: 300px; }
.faq-a-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 0 30px 30px 30px;
}
.faq-q-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(166.92deg, #0d3b6e 2.44%, #3d7bae 50%, #a8ddf4 97.56%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.faq-a-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #a8ddf4;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d3b6e;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.faq-q-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #000;
  line-height: 2.5;
}
.faq-a-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  line-height: 2;
  flex: 1;
}

/* =============================================
   CONTACT SECTION
   ============================================= */
.contact-section {
  position: relative;
  height: 625px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-bg { position: absolute; inset: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; }
.contact-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 30px;
  padding: 60px 50px;
  width: min(1200px, calc(100% - 60px));
  display: flex;
  align-items: center;
  gap: 50px;
  box-shadow: 0 10px 60px rgba(0,0,0,0.1);
}
.contact-title-col {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.contact-en-wrap {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(50px, 6vw, 100px);
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.contact-en-gray { color: #d9dfe5; }
.contact-en-blue { color: #0d3b6e; }
.contact-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0d3b6e;
  letter-spacing: 0.6px;
}
.contact-body-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.contact-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0d3b6e;
  text-align: center;
}
.contact-body-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  text-align: center;
  line-height: 2.5;
}
.contact-btn-row {
  display: flex;
  gap: 25px;
  align-items: center;
}
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  padding: 20px 35px;
  min-width: 200px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 0 50px rgba(255,255,255,0.3);
}
.contact-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.contact-btn img { width: 30px; height: 30px; object-fit: contain; }
.contact-btn-black { background: #000; }
.contact-btn-navy { background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%); }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: #000616;
  padding: 30px 0 10px;
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 49px;
  width: 100%;
  background: black;
}
.footer-body {
  display: flex;
  gap: 60px;
  margin-bottom: 30px;
}
.footer-logo-col { flex-shrink: 0; width: 180px; }
.footer-logo { height: 50px; width: auto; object-fit: contain; }
.footer-nav { flex: 1; display: flex; gap: 32px; flex-wrap: wrap; }
.footer-col { min-width: 90px; }
.footer-col-head {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.footer-col-head:hover { color: #7aafc9; }
.footer-col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-col-list a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer-col-list a:hover { color: #fff; }
.footer-col-marketing { flex: 1; min-width: 400px; }
.footer-marketing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 2px;
}
.footer-sub-head {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #7aafc9;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(122,175,201,0.2);
  transition: color 0.2s;
}
.footer-sub-head:hover { color: #a8ddf4; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-copy {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
}

/* =============================================
   RESPONSIVE — Operations support image bottom align (≥ 1025px)
   ============================================= */
@media (min-width: 1025px) {
  /* Stretch both columns to same height so image bottom = last card bottom */
  .operations-container { align-items: stretch; }
  .operations-title-col { justify-content: space-between; min-height: unset; }
  .operations-support-img {
    position: static;
    width: 100%;
    height: 300px;
    bottom: auto;
    left: auto;
  }
}

/* =============================================
   RESPONSIVE — Footer column order (≤ 1200px) — listing
   ============================================= */
@media (max-width: 1200px) {
  .footer-col-marketing { min-width: 100%; order: 2; }
  .footer-col { order: 1; }
}

/* =============================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {
  /* listing: features / operations */
  .features-container { flex-direction: column; }
  .features-title-col { flex: 1; width: 100%; min-width: unset; }
  .features-content-col { flex: 1; width: 100%; }
  .features-title { display: block; white-space: nowrap; }
  .operations-container { flex-direction: column; }
  .operations-title-col {
    flex: 1;
    width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }
  .operations-content-col { flex: 1; width: 100%; }
  .operations-support-img {
    position: static;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-end;
  }
  .operations-support-img img { opacity: 0.6; }
  /* listing: plans */
  .plans-cards { flex-direction: column; }
  .plan-card { width: 100%; }

  /* shared */
  .whyus-card { padding: 40px 30px; }
  .contact-card { flex-direction: column; gap: 30px; }
  .contact-title-col { width: auto; align-items: center; text-align: center; }
  .contact-en-wrap { flex-direction: row; align-items: baseline; gap: 0.15em; }
  .figures-content-box { flex-direction: column; }

  .footer-body { flex-direction: column; gap: 40px; }
  .footer-logo-col { width: auto; }
  .footer-nav { gap: 24px; }
  .footer-col-marketing { width: 100%; min-width: 100%; order: unset; }
  .footer-marketing-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================
   RESPONSIVE — Small Tablet (≤ 991px) — listing
   ============================================= */
@media (max-width: 991px) {
  .section-bg-text { font-size: 140px; }
  .flow-card { gap: 20px; padding: 40px 30px 50px 30px;}
  .flow-icon { width: 80px; height: 80px; }
  .step-circle { width: 110px; height: 110px; }
  .step-label { font-size: 16px; }
  .step-num { font-size: 50px; }
}

/* =============================================
   RESPONSIVE — Services 900px (marketing)
   ============================================= */
@media (max-width: 900px) {
  .services-grid-all { grid-template-columns: repeat(2, 1fr); }
  .services-grid-all > .service-card:nth-child(1),
  .services-grid-all > .service-card:nth-child(2),
  .services-grid-all > .service-card:nth-child(3),
  .services-grid-all > .service-card:nth-child(4) { grid-column: span 1; }
  .services-grid-all > .service-card:nth-child(5) { grid-column: span 2; }
}

/* =============================================
   RESPONSIVE — About flow tablet 2×2 (768px–1024px) (marketing)
   ============================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .about-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Card 1: top-left — border-right, arrow → */
  .about-flow > .about-flow-item:nth-child(1) {
    grid-column: 1; grid-row: 1;
    border-right: 2px solid rgba(61,123,174,0.25);
    border-bottom: none; border-left: none; border-top: none;
  }
  .about-flow > .about-flow-item:nth-child(1)::after {
    background-image: url('../img/right-chevron.png');
    right: 0; top: 50%; left: auto; bottom: auto;
    transform: translate(50%, -50%);
  }

  /* Card 2: top-right — no border */
  .about-flow > .about-flow-item:nth-child(3) {
    grid-column: 2; grid-row: 1;
    border-bottom: 0px;
    border-right: none; border-left: none; border-top: none;
  }
  .about-flow > .about-flow-item:nth-child(3)::after {
    background-image: url('../img/bottom-chevron.png');
    left: 50%; bottom: 0; right: auto; top: auto;
    transform: translate(-50%, 50%);
  }

  /* Card 3: bottom-right — border-top, arrow ← */
  .about-flow > .about-flow-item:nth-child(5) {
    grid-column: 2; grid-row: 2;
    border-left: 0px;
    border-top: 2px solid rgba(61,123,174,0.25);
    border-right: none; border-bottom: none;
  }
  .about-flow > .about-flow-item:nth-child(5)::after {
    background-image: url('../img/right-chevron.png');
    left: 0; top: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%) scaleX(-1);
  }

  /* Card 4: bottom-left — border-top + border-right, arrow ↑ */
  .about-flow > .about-flow-item:nth-child(7) {
    grid-column: 1; grid-row: 2;
    border-top: 2px solid rgba(61,123,174,0.25);
    border-right: 2px solid rgba(61,123,174,0.25);
    border-bottom: none; border-left: none;
  }
  .about-flow > .about-flow-item:nth-child(7)::after {
    content: '';
    position: absolute;
    left: 50%; top: 0; right: auto; bottom: auto;
    transform: translate(-50%, -50%) scaleY(-1);
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: white;
    background-image: url('../img/bottom-chevron.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
  }
}

/* =============================================
   RESPONSIVE — Mobile (≤ 767px)
   ============================================= */
@media (max-width: 767px) {
  /* --- Hero --- */
  .hero-section { padding: 60px 20px 80px; }
  .hero-title-row { flex-wrap: wrap; }
  .hero-search-icon { width: 50px; height: 50px; }
  .hero-en { font-size: 48px; }
  .hero-ja { font-size: 16px; }

  /* --- Intro --- */
  .intro-section { padding: 60px 20px; min-height: unset; }
  .intro-headline { font-size: 20px; }
  .intro-body { font-size: 13px; }
  .intro-body p { font-size: 13px; }

  /* --- Problem --- */
  .problem-section { padding: 60px 20px; }
  .section-bg-text { font-size: 120px; }
  .problem-box p { font-size: 13px; }
  .problem-cta { min-width: unset; width: 100%; font-size: 14px; }

  /* --- About (marketing) --- */
  .about-section { padding: 60px 20px; }
  .about-container { gap: 40px; padding-top: 40px; }
  .about-body-text { font-size: 13px; }
  .about-flow { flex-direction: column; flex-wrap: nowrap; }
  .about-flow-item {
    min-width: 100%;
    border-right: none;
    border-bottom: 2px solid rgba(61,123,174,0.25);
  }
  .about-flow-item:last-child { border-bottom: none; }
  .about-flow-item:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    background-image: url('../img/bottom-chevron.png');
    background-size: contain;
  }
  .about-flow-desc {
    font-size: 13px;
  }
  .about-flow-num { font-size: 28px; }
  .about-flow-label { font-size: 13px; }

  /* --- Features (listing) --- */
  .features-section { padding: 60px 20px; }
  .features-title { white-space: normal; }
  .features-desc { font-size: 13px; }
  .features-card { gap: 30px; padding: 20px 40px 40px 40px; }
  .features-num { font-size: 100px; }
  .features-card-text h3 { font-size: 18px; }
  .features-card-text p { font-size: 13px; }

  /* --- Why Us --- */
  .whyus-section { padding: 60px 20px; }
  .whyus-num { font-size: 80px; }
  .whyus-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .whyus-num-box { padding: 0; }
  .point-label { font-size: 16px; }
  .whyus-card-text { gap: 15px; }
  .whyus-card-text h3 { font-size: 18px; }
  .whyus-card-text p { font-size: 13px; }

  /* --- Services (marketing) --- */
  .services-section { padding: 60px 20px; }
  .services-headline { padding: 40px 0 30px; }
  .services-grid-all { grid-template-columns: 1fr; }
  .services-grid-all > .service-card:nth-child(1),
  .services-grid-all > .service-card:nth-child(2),
  .services-grid-all > .service-card:nth-child(3),
  .services-grid-all > .service-card:nth-child(4),
  .services-grid-all > .service-card:nth-child(5) { grid-column: span 1; }
  .service-card { padding: 30px 25px 40px; }
  .service-cat-en { font-size: 36px; }
  .service-card-desc { font-size: 13px; }
  .service-top-link { font-size: 12px; }
  .service-list li a { font-size: 12px; padding: 8px 0; }

  /* --- Flow (listing) --- */
  .flow-section { padding: 60px 20px; }
  .flow-key-msg { padding-top: 40px; }
  .flow-card { flex-direction: column; gap: 10px; padding: 30px; }
  .flow-icon { order: 2; margin-top: 15px; }
  .step-circle { order: 1; width: 150px; height: auto; flex-direction: row; border-radius: 0px; padding: 5px 0; gap: 10px;}
  .step-label { font-size: 16px; }
  .step-num { font-size: 24px; }
  .flow-card-text { order: 3; font-size: 13px; }
  .flow-card-text h3 { font-size: 18px; }
  .flow-card-text p { font-size: 13px; }
  .flow-content-col { padding-top: 30px; }

  /* --- Key Figures --- */
  .figures-section { padding: 60px 20px; }
  .figures-stat-num { font-size: 70px; }
  .figures-sub { font-size: 13px; }
  .figures-content-box { flex-direction: column; }

  /* --- Plans (listing) --- */
  .plans-section { padding: 60px 20px; }
  .plans-cards { flex-direction: column; }
  .plan-card { padding: 40px 20px 50px; }
  .plan-label { width: 100px;padding: 5px 10px; font-size: 12px;}
  .plans-section-custom .plan-card {padding: 30px 20px 40px;}
  .plan-value-prefix,
  .plan-value-suffix,
  .plan-value-text { font-size: 13px; }

  /* --- Operations (listing) --- */
  .operations-section { padding: 60px 20px; }
  .operations-support-img { position: absolute; right: 0; bottom: 0; width: 100px; height: 90px; }
  .ops-card { padding: 30px; align-items: center; }
  .ops-card-text { gap: 10px; }
  .ops-card-text h3 { font-size: 18px; }
  .ops-card-text p { font-size: 13px; }
  .ops-num-circle { width: 70px; height: 70px; }
  .ops-num { font-size: 40px; }

  /* --- FAQ --- */
  .faq-section { padding: 60px 20px; }
  .faq-q-text { font-size: 13px; }
  .faq-a-text { font-size: 13px; }

  /* --- Contact --- */
  .contact-section { height: auto; padding: 40px 20px; }
  .contact-card { flex-direction: column; padding: 40px 20px; gap: 20px; border-radius: 20px; }
  .contact-body-text { font-size: 13px; }
  .contact-btn-row { flex-direction: column; width: 100%; }
  .contact-btn { width: 100%; justify-content: center; }
  .contact-ja, .contact-heading { font-size: 16px; }
  .contact-btn-row { gap: 15px; }
  .contact-btn span { font-size: 13px; }
  .contact-btn img { width: 25px; height: 25px; }

  /* --- Section Header --- */
  .section-en { font-size: 50px; }
  .section-ja { font-size: 16px; }
}

/* =============================================
   RESPONSIVE — Small Mobile (≤ 600px)
   ============================================= */
@media (max-width: 600px) {
  .container { padding: 0; }
  .hero-section { padding: 50px 20px 60px; }
  .hero-titlebox { gap: 15px; }
  .hero-title-row { gap: 10px; }
  .hero-search-icon { width: 45px; height: 45px; }
  .hero-en { font-size: 40px; }

  .problem-box { padding: 8px 0; }
  .problem-icon { width: 30px; height: 30px; }
  .problem-br { display: inline; }
  .section-bg-text { font-size: 100px; letter-spacing: 0; }
  .section-en { margin-bottom: 10px; }

  /* about (marketing) */
  .about-container { gap: 30px; }
  .about-flow-num { font-size: 24px; }

  /* features (listing) */
  .features-container { padding-top: 30px; }
  .features-title-col { gap: 20px; }
  .features-card { flex-direction: column; gap: 0; padding: 30px 20px; }
  .features-num { font-size: 80px; }
  .features-card-text { gap: 10px; padding-top: 5px; }

  .whyus-headline { margin-top: 0; }
  .whyus-content-col { padding-top: 30px; }
  .whyus-card { gap: 0; align-items: center; padding: 30px 20px; }

  /* flow (listing) */
  .flow-key-msg { padding-top: 30px; }
  .flow-card { padding: 30px 20px; }
  .flow-connector { height: 30px; }

  .figures-headline { padding: 30px 0 0; }
  .figures-stat-row { padding: 20px 0 5px; }
  .figures-stat-num { font-size: 60px; }
  .figures-stat-unit { font-size: 22px; }
  .figures-stat-label { font-size: 14px; }

  /* plans (listing) */
  .plans-headline { padding: 30px 0 0; }
  .plan-name { font-size: 34px; }
  .plan-card { padding: 40px 20px; }
  .plan-table { display: block; }
  .plan-table tbody { display: block; }
  .plan-table tr { display: flex; gap: 2px; height: auto; flex-direction: column; align-items: flex-start;}
  .plan-table tr:nth-child(3) { margin: 10px 0; }
  .plan-table td { display: block; padding: 2px 0; }
  .plan-table td:first-child { padding-right: 0; white-space: nowrap; flex-shrink: 0; }

  /* operations (listing) */
  .operations-container { padding: 30px 0 0 0; gap: 30px; }
  .operations-title-col { align-items: flex-start; flex-direction: column; gap: 5px; }
  .operations-support-img { position: relative; width: 80px; height: 80px; right: auto; bottom: auto; }
  .ops-card { flex-direction: column; padding: 30px 20px; gap: 20px; }

  /* services (marketing) */
  .services-grid-all { gap: 20px; }
  .service-card { padding: 25px 20px 35px; }

  .faq-list { padding-top: 30px; }
  .faq-q-row { padding: 20px 0; }
  .faq-a-row { padding: 0 0 20px 0; }

  .contact-card { width: 100%; gap: 5px; }
  .contact-title-col { gap: 20px; }
  .contact-body-col { gap: 15px; }
  .contact-body-text p { line-height: 1.4; }

  .footer-inner { padding: 0 20px; }
  .footer-nav { gap: 20px; }
  .footer-marketing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-copy { font-size: 10px; }
  .logo img { width: 120px; }
  .gnav-hamburger span { height: 1.5px; }
}

/* =============================================
   RESPONSIVE — XS Mobile (≤ 500px)
   ============================================= */
@media (max-width: 500px) {
  .section-bg-text { font-size: 70px; top: 30px; }
}

/* =============================================
   PLANS NOTE (ads/index.html)
   ============================================= */
.plans-note {
  margin-top: 30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #888;
  line-height: 2;
  text-align: center;
}

/* =============================================
   ADS WHICH-SERVICE SECTION (05) — ads/index.html only
   ============================================= */
.ads-which-section {
  background: linear-gradient(127.53deg, #0d3b6e 0%, #1a6db5 55%, #3d7bae 100%);
  padding: 0;
  overflow: hidden;
}
.ads-which-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}
.ads-which-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.ads-which-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: rgba(168,221,244,0.9);
  letter-spacing: 0.5px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(168,221,244,0.25);
}
.ads-which-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 36px);
  color: #fff;
  line-height: 1.4;
}
.ads-which-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 2;
  max-width: 600px;
}
.ads-which-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #0d3b6e;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 32px;
  width: fit-content;
  transition: background 0.2s, gap 0.2s, transform 0.2s;
}
.ads-which-btn:hover {
  background: #e8f4fb;
  gap: 14px;
  transform: translateY(-2px);
}
.ads-which-btn svg { flex-shrink: 0; }
.ads-which-deco {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ads-which-deco::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
}
.ads-which-deco-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 130px;
  color: rgba(255,255,255,0.12);
  line-height: 1;
  user-select: none;
}

@media (max-width: 767px) {
  .ads-which-inner { flex-direction: column; padding: 60px 20px; gap: 30px; }
  .ads-which-deco { display: none; }
  .ads-which-body { font-size: 13px; }
  .ads-which-btn { font-size: 13px; padding: 14px 24px; }
}

/* =============================================
   ADS WHICH-SERVICE v2 (ads/index-2.html only)
   Light background, 3-step card + centered CTA
   ============================================= */
.ads-which2-section {
  background: linear-gradient(127.53deg, #0d3b6e 0%, #1a6db5 55%, #3d7bae 100%);
  padding: 100px 30px;
  position: relative;
  overflow: hidden;
}
.ads-which2-section::before {
  content: '?';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 400px;
  line-height: 1;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
  user-select: none;
}
.ads-which2-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}
.ads-which2-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ads-which2-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: rgba(168,221,244,0.9);
  letter-spacing: 0.4px;
}
.ads-which2-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.4;
  color: #fff;
}
.ads-which2-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  line-height: 2;
  max-width: 700px;
  text-align: center;
}
.ads-which2-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.25);
}
.ads-which2-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 30px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.25);
  position: relative;
  background: #fff;
}
.ads-which2-step:last-child { border-right: none; }
.ads-which2-step::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  font-size: 24px;
  color: #3d7bae;
  background: #fff;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ads-which2-step:last-child::after { display: none; }
.ads-which2-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d3b6e, #3d7bae);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.ads-which2-step-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #0d3b6e;
  line-height: 1.5;
}
.ads-which2-step-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #777;
  line-height: 1.8;
}
.ads-which2-cta-row {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ads-which2-btn-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(137deg, rgba(13, 59, 110, 1) 0%, rgba(27, 47, 77, 1) 35%, rgb(107 186 251) 100%);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 18px 40px;
  transition: opacity 0.2s, transform 0.2s;
}
.ads-which2-btn-primary:hover { opacity: 0.85; transform: translateY(-2px); }
.ads-which2-btn-primary svg { flex-shrink: 0; }
.ads-which2-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 18px 0;
  border-bottom: 2px solid rgba(255,255,255,0.6);
  transition: color 0.2s, border-color 0.2s;
}
.ads-which2-btn-secondary:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.4); }

@media (max-width: 767px) {
  .ads-which2-section { padding: 60px 20px; }
  .ads-which2-section::before { font-size: 200px; right: -20px; }
  .ads-which2-steps { grid-template-columns: 1fr; }
  .ads-which2-step { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding: 20px 30px; }
  .ads-which2-step:first-child { padding: 40px 30px 20px 30px; }
  .ads-which2-step:last-child { border-bottom: none; padding: 20px 30px 40px 30px; }
  .ads-which2-step::after {
    content: '›';
    right: auto;
    bottom: 0;
    left: 50%;
    top: auto;
    transform: translate(-50%, 50%) rotate(90deg);
    margin-left: 4px;
  }
  .ads-which2-step:last-child::after { display: none; }
  .ads-which2-cta-row { flex-direction: column; width: 100%; }
  .ads-which2-btn-primary { width: 100%; justify-content: center; }
  .ads-which2-body { font-size: 13px; }
}

/* =============================================
   ADS SERVICES SECTION (ads/index.html only)
   Horizontal row list — distinct from marketing
   service-card grid
   ============================================= */
.ads-services-section {
  background: #fff;
  padding: 100px 30px;
}
.ads-services-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.ads-services-headline {
  padding: 60px 0 50px;
}
.ads-services-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.6;
  color: #0d3b6e;
}
.ads-services-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(61,123,174,0.15);
}

/* ---- Each service row ---- */
.ads-service-row {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(61,123,174,0.15);
  transition: background 0.22s;
  cursor: pointer;
}
.ads-service-row:hover {
  background: #f0f7fc;
}
.ads-service-row:hover .ads-service-label-col {
  background: linear-gradient(135deg, #0d3b6e 0%, #1a6db5 100%);
}
.ads-service-row:hover .ads-service-index {
  opacity: 1;
}

/* ---- Left: label column ---- */
.ads-service-label-col {
  background: linear-gradient(135deg, #0d3b6e 0%, #5f9cce 100%);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 40px;
  gap: 6px;
  transition: background 0.22s;
  flex-shrink: 0;
}
.ads-service-index {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: rgba(168,221,244,0.7);
  letter-spacing: 2px;
  opacity: 0.8;
  transition: opacity 0.22s;
}
.ads-service-en-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  color: rgba(255,255,255,0.88);
  letter-spacing: 1px;
  line-height: 1;
}

/* ---- Center: body column ---- */
.ads-service-body-col {
  padding: 36px 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ads-service-title-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #0d3b6e;
  line-height: 1.4;
}
.ads-service-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #555;
  line-height: 2;
}

/* ---- Right: arrow CTA ---- */
.ads-service-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 36px 40px 36px 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #3d7bae;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s, gap 0.2s;
}
.ads-service-cta svg {
  transition: transform 0.22s;
  flex-shrink: 0;
}
.ads-service-row:hover .ads-service-cta {
  color: #0d3b6e;
  gap: 12px;
}
.ads-service-row:hover .ads-service-cta svg {
  transform: translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ads-service-row {
    grid-template-columns: 200px 1fr auto;
  }
  .ads-service-label-col { padding: 30px 28px; }
  .ads-service-body-col { padding: 30px 30px; }
  .ads-service-cta { padding: 30px 24px 30px 12px; }
}

@media (max-width: 767px) {
  .ads-services-section { padding: 60px 20px; }
  .ads-services-headline { padding: 40px 0 30px; }
  .ads-service-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .ads-service-label-col {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    align-self: auto;
  }
  .ads-service-index { font-size: 24px; }
  .ads-service-body-col { padding: 20px 24px 12px; }
  .ads-service-title-ja { font-size: 16px; }
  .ads-service-desc { font-size: 13px; }
  .ads-service-cta {
    padding: 12px 24px 20px;
    justify-content: flex-end;
    font-size: 12px;
  }
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  display: none;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(61,123,174,0.1);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  flex-wrap: wrap;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  color: #888;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  margin: 0 8px;
  color: #bbb;
  font-size: 14px;
}
.breadcrumb-item a {
  color: #3d7bae;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb-item a:hover {
  color: #0d3b6e;
  text-decoration: underline;
}
.breadcrumb-current {
  color: #555;
}
@media (max-width: 600px) {
  .breadcrumb-list { padding: 5px 10px; }
}

/* =============================================
   COMPANY PAGE
   ============================================= */

/* ---- Hero ---- */
.co-hero-section {
  position: relative;
  padding: 100px 60px 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #eff8fd;
}
.co-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.co-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.8;
}
.co-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(99,176,248,0.21);
  z-index: 1;
}
.co-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.co-hero-titlebox {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.co-hero-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 8vw, 100px);
  line-height: 1;
  margin: 0;
}
.co-hero-en-gray { color: #d9dfe5; display: block; }
.co-hero-en-navy { color: #0d3b6e; display: block; }
.co-hero-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.6px;
  margin: 0;
}

/* ---- Company section EN span colors (used inside shared .section-en) ---- */
.co-section-en-gray { color: #d9dfe5; }
.co-section-en-navy { color: #0d3b6e; }

/* ---- About Us Section ---- */
.co-aboutus-section {
  background: #fff;
  padding: 100px 30px;
  position: relative;
  overflow: hidden;
}
.co-aboutus-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.co-aboutus-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding-top: 60px;
  padding-inline: 10px;
}
.co-aboutus-watermark {
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 20vw, 300px);
  color: rgba(146,202,237,0.2);
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---- Members Section ---- */
.co-members-section {
  background: #fff;
  padding: 100px 30px;
  border-top: 1px solid rgba(61,123,174,0.1);
}
.co-members-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.co-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 60px;
}
.co-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 25px 30px;
  border-radius: 10px;
  border: 3px solid #3d7bae;
}
.co-member-card--gold { border-color: #d3aa38; }
.co-member-card--teal { border-color: #7abcc9; }
.co-member-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.co-member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-member-role {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #000;
  align-self: flex-start;
  margin-top: 6px;
}
.co-member-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  align-self: flex-start;
}
.co-member-bio {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  line-height: 1.8;
  padding: 10px 0;
  flex: 1;
}
.co-member-spec-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #000;
  align-self: flex-start;
}
.co-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
}
.co-spec-tag {
  background: #3d7bae;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13px;
  padding: 4px 15px;
  border-radius: 15px;
  white-space: nowrap;
}
.co-spec-tag--gold { background: #d3aa38; }
.co-spec-tag--teal { background: #7abcc9; }

/* ---- Company Info Section ---- */
.co-info-section {
  background: #eff8fd;
  padding: 100px 30px;
}
.co-info-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.co-info-container {
  padding-top: 60px;
}
.co-info-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.co-info-row {
  background: #fff;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 15px;
  gap: 10px;
}
.co-info-label {
  flex-shrink: 0;
  width: 160px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  text-align: center;
}
.co-info-divider {
  width: 1px;
  height: 40px;
  background: rgba(61,123,174,0.2);
  flex-shrink: 0;
}
.co-info-value {
  flex: 1;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  padding-left: 20px;
  line-height: 1.8;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .co-members-grid { grid-template-columns: 1fr; gap: 24px; }
  .co-member-card { flex-direction: column; }
  .co-member-img { width: 160px; height: 160px; }
}
@media (max-width: 767px) {
  .co-hero-titlebox { gap: 20px; }
  .co-hero-section { padding: 60px 40px 80px;}
  .co-hero-inner {}
  .co-hero-ja { font-size: 16px; }
  .co-aboutus-section,
  .co-members-section,
  .co-info-section { padding: 60px 20px; }
  .co-aboutus-content { padding-top: 40px; gap: 40px; }
  .co-aboutus-section .about-title { font-size: clamp(20px, 5vw, 28px); }
  .co-aboutus-watermark { font-size: 25vw; }
  .co-members-grid { padding-top: 40px; }
  .co-info-container { padding-top: 40px; }
  .co-info-label { width: 115px; font-size: 11px; }
  .co-info-value { font-size: 12px; padding-left: 12px; }
}

@media (max-width: 600px) {
  .co-hero-section {padding: 50px 20px 60px;}
}

/* =============================================
   AI-FIRST PAGE
   ============================================= */

/* ---- Hero ---- */
.ai-hero-section {
  background: linear-gradient(135deg, #040f23 0%, #0d3b6e 60%, #1a6db5 100%);
  padding: 100px 30px 120px;
  position: relative;
  overflow: hidden;
}
.ai-hero-bg-text {
  position: absolute;
  top: -10px;
  right: -20px;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 280px);
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.ai-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ai-hero-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #63b0f8;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ai-hero-titlebox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}
.ai-hero-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 56px);
  color: #fff;
  line-height: 1.25;
}
.ai-hero-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2vw, 22px);
  color: rgba(255,255,255,0.6);
}
.ai-hero-lead {
  max-width: 800px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 2;
  margin-bottom: 20px;
}
.ai-hero-note {
  max-width: 800px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  padding: 14px 20px;
  border-left: 2px solid rgba(99,176,248,0.35);
  background: rgba(99,176,248,0.06);
}

/* ---- Concept Section ---- */
.ai-concept-section {
  background: #fff;
  padding: 100px 30px;
}
.ai-concept-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.ai-concept-lead {
  padding-top: 60px;
}
.ai-concept-lead h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 28px);
  color: #0d3b6e;
  margin-bottom: 20px;
  line-height: 1.5;
}
.ai-concept-lead p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
}

/* Comparison table */
.ai-compare-block { margin-top: 80px; }
.ai-compare-block-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #0d3b6e;
  margin-bottom: 24px;
}
.ai-compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(13,59,110,0.1);
}
.ai-compare-head {
  padding: 20px 30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.ai-compare-head--old { background: #dde3ea; color: #555; }
.ai-compare-head--new {
  background: linear-gradient(135deg, #0d3b6e 0%, #1a6db5 100%);
  color: #fff;
}
.ai-compare-cell {
  padding: 18px 28px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
}
.ai-compare-cell--old { background: #f4f6f8; color: #777; }
.ai-compare-cell--new {
  background: #eef5fb;
  color: #0d3b6e;
  font-weight: 500;
  gap: 10px;
}
.ai-compare-cell--new::before {
  content: '✓';
  color: #1a6db5;
  font-weight: 700;
  flex-shrink: 0;
}

/* Scale / Speed / Learning */
.ai-ssl-block { margin-top: 80px; }
.ai-ssl-block-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #0d3b6e;
  margin-bottom: 30px;
}
.ai-ssl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ai-ssl-card {
  border-radius: 12px;
  padding: 40px 30px;
  color: #fff;
}
.ai-ssl-card:nth-child(1) { background: linear-gradient(135deg, #0d3b6e 0%, #1a5a9f 100%); }
.ai-ssl-card:nth-child(2) { background: linear-gradient(135deg, #1a5a9f 0%, #2d72bc 100%); }
.ai-ssl-card:nth-child(3) { background: linear-gradient(135deg, #2d72bc 0%, #3d7bae 100%); }
.ai-ssl-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
}
.ai-ssl-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}
.ai-ssl-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255,255,255,0.88);
}

/* ---- Problem Section ---- */
.ai-problem-section {
  background: linear-gradient(135deg, #040f23 0%, #0d3b6e 100%);
  padding: 100px 30px;
  position: relative;
  overflow: hidden;
}
.ai-problem-section .section-ja { color: #fff; }
.ai-problem-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.ai-problem-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 2;
  margin-top: 40px;
  margin-bottom: 60px;
}
.ai-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ai-problem-card {
  background: white;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 36px;
}
.ai-problem-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #63b0f8;
  letter-spacing: 3px;
  margin-bottom: 14px;
}
.ai-problem-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #0d3b6f;
  margin-bottom: 14px;
  line-height: 1.4;
}
.ai-problem-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: black;
  line-height: 1.95;
}
.ai-problem-outro {
  margin-top: 60px;
  padding: 28px 36px;
  border-left: 3px solid #63b0f8;
  background: rgba(99,176,248,0.08);
  border-radius: 0 8px 8px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 2;
}

/* ---- Cycle Section ---- */
.ai-cycle-section {
  background: #eff8fd;
  padding: 100px 30px;
}
.ai-cycle-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.ai-cycle-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin-top: 40px;
  margin-bottom: 60px;
}
/* ---- AI Cycle Flow Layout ---- */
.ai-cycle-flow {
  position: relative;
}
.ai-cycle-row {
  display: flex;
  align-items: stretch;
}
.ai-cycle-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(13,59,110,0.07);
  position: relative;
  min-width: 0;
}
.ai-cycle-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0d3b6e 0%, #1a6db5 100%);
  border-radius: 12px 12px 0 0;
}
.ai-cycle-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d3b6e 0%, #1a6db5 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.ai-cycle-h-arrow {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 中段コネクター */
.ai-cycle-mid {
  display: flex;
  align-items: center;
  height: 40px;
}
.ai-cycle-arrow-up {
  transform: rotate(270deg);
}
.ai-cycle-arrow-bottom {
  transform: rotate(90deg);
}
.ai-cycle-conn {
  flex: 0 0 20px;
  width: 20px;
  height: 100%;
  position: relative;
}
.ai-cycle-conn--right {
  border-right: 2px solid #1a6db5;
  border-top: 2px solid #1a6db5;
  border-bottom: 2px solid #1a6db5;
  border-radius: 0 14px 14px 0;
}
.ai-cycle-conn--right::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #1a6db5;
}
.ai-cycle-conn--left {
  border-left: 2px solid #1a6db5;
  border-top: 2px solid #1a6db5;
  border-bottom: 2px solid #1a6db5;
  border-radius: 14px 0 0 14px;
}
.ai-cycle-conn--left::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #1a6db5;
}
.ai-cycle-mid-label {
  flex: 1;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  color: #1a6db5;
  opacity: 0.45;
  text-transform: uppercase;
}
.ai-cycle-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #3d7bae;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.ai-cycle-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #0d3b6e;
  margin-bottom: 10px;
}
.ai-cycle-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #444;
  line-height: 1.9;
}
.ai-cycle-outro {
  margin-top: 60px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #333;
  line-height: 2;
}

/* ---- Program Section ---- */
.ai-program-section {
  background: #fff;
  padding: 100px 30px;
}
.ai-program-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.ai-program-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin-top: 40px;
  margin-bottom: 60px;
}
.ai-program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ai-program-card {
  border: 2px solid #d4e4f0;
  border-radius: 12px;
  padding: 40px 30px;
  transition: border-color 0.3s;
}
.ai-program-card:hover { border-color: #3d7bae; }
.ai-program-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 52px;
  color: rgba(61,123,174,0.14);
  line-height: 1;
  margin-bottom: 12px;
}
.ai-program-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #3d7bae;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.ai-program-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #0d3b6e;
  margin-bottom: 16px;
  line-height: 1.5;
}
.ai-program-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #444;
  line-height: 1.95;
}
.ai-program-note {
  margin-top: 50px;
  padding: 24px 32px;
  background: #eff8fd;
  border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #0d3b6e;
  line-height: 1.9;
}

/* ---- Use Cases Section ---- */
.ai-usecase-section {
  background: #eff8fd;
  padding: 100px 30px;
}
.ai-usecase-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.ai-usecase-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
  max-width: 800px;
  margin-top: 40px;
  margin-bottom: 60px;
}
.ai-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ai-usecase-card {
  background: #fff;
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(13,59,110,0.06);
}
.ai-usecase-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #3d7bae;
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.ai-usecase-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #0d3b6e;
  margin-bottom: 12px;
  line-height: 1.5;
}
.ai-usecase-body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #444;
  line-height: 1.9;
}

/* ---- Responsive: AI-First ---- */
@media (max-width: 900px) {
  .ai-ssl-grid { grid-template-columns: repeat(2, 1fr); }
  /* ai-cycle-flow: 3+3 layout maintained at 900px */
  .ai-program-grid { grid-template-columns: 1fr; }
  .ai-usecase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* Hero */
  .ai-hero-section { padding: 60px 20px 80px; }
  .ai-hero-title { font-size: 26px; }
  .ai-hero-sub { font-size: 16px; }
  .ai-hero-lead { font-size: 13px; }
  .ai-hero-note { font-size: 12px; }

  /* Section padding */
  .ai-concept-section,
  .ai-problem-section,
  .ai-cycle-section,
  .ai-program-section,
  .ai-usecase-section { padding: 60px 20px; }

  /* Body text → 13px (matches other pages) */
  .ai-concept-lead p,
  .ai-problem-intro,
  .ai-problem-body,
  .ai-problem-outro,
  .ai-cycle-intro,
  .ai-cycle-body,
  .ai-cycle-outro,
  .ai-program-intro,
  .ai-program-body,
  .ai-program-note,
  .ai-usecase-intro,
  .ai-usecase-body { font-size: 13px; }

  /* Headings */
  .ai-concept-lead h2 { font-size: 18px; }
  .ai-problem-title,
  .ai-cycle-title,
  .ai-program-title { font-size: 16px; }
  .ai-usecase-title { font-size: 15px; }
  .ai-compare-block-label,
  .ai-ssl-block-label { font-size: 15px; }
  .ai-ssl-en { font-size: 24px; }
  .ai-program-num { font-size: 40px; }

  /* Card padding */
  .ai-ssl-card { padding: 30px 20px; }
  .ai-problem-card { padding: 24px; }
  .ai-cycle-card { padding: 20px; }
  .ai-cycle-h-arrow { flex: 0 0 24px; }
  .ai-cycle-h-arrow svg { width: 24px; }
  .ai-cycle-badge { width: 30px; height: 30px; font-size: 12px; }
  .ai-program-card { padding: 30px 20px; }
  .ai-usecase-card { padding: 24px; }

  /* Grids → 1col */
  .ai-ssl-grid { grid-template-columns: 1fr; }
  .ai-compare-table { grid-template-columns: 1fr; }
  .ai-compare-head--old,
  .ai-compare-cell--old { display: none; }
  .ai-problem-grid { grid-template-columns: 1fr; }
  /* ai-cycle-flow: switch to vertical single-column */
  .ai-cycle-flow { display: flex; flex-direction: column; gap: 0; }
  .ai-cycle-row { flex-direction: column; gap: 12px; }
  .ai-cycle-row--rev { flex-direction: column-reverse; }
  .ai-cycle-h-arrow { display: none; }
  .ai-cycle-mid { display: none; }
  .ai-usecase-grid { grid-template-columns: 1fr; }

  /* Spacing */
  .ai-concept-lead { padding-top: 40px; }
  .ai-compare-block,
  .ai-ssl-block { margin-top: 40px; }
}
@media (max-width: 600px) {
  .ai-hero-section { padding: 50px 20px 60px; }
  .ai-compare-cell { padding: 14px 18px; font-size: 13px; }
  .ai-compare-head { padding: 14px 18px; font-size: 13px; }
  .ai-problem-outro { padding: 20px 24px; }
  .ai-program-note { padding: 18px 20px; }
}

/* =============================================
   TOP PAGE — HERO
   ============================================= */
.top-hero {
  position: relative;
  background: linear-gradient(130deg, #051c3c 0%, #0d3b6e 55%, #1a6db5 100%);
  overflow: hidden;
  height: calc(100vh - 85px);
  display: flex;
  align-items: center;
  width: 100%;
}
.top-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.top-hero-bg-img {
  width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.top-hero-bg-svg {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.top-hero-inner {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
margin: 0 auto;
height: 100%;
}
.top-hero-content {
  position: absolute;
  bottom: 40px;
}
.top-hero-pre {
  background: linear-gradient(92.25deg, #044f88 15.1%, #43a2eb 30%, #054f87 82.46% 82.46%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
  font-family: 'roboto', sans-serif;
font-weight: 700;
font-size: 53px;
letter-spacing: 1px;
line-height: 1;
margin-bottom: 32px;
padding-left: 5px;
padding-bottom: 10px;
}
.top-hero-catch {
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  line-height: 1.75;
  font-size: 16px;
  width: 100%;
  font-weight: 600;
  margin-bottom: 5px;
}
.top-hero-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: white;
  line-height: 2;
  font-weight: 600;
  margin-bottom: 48px;
}
.top-hero-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.top-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  transition: opacity 0.2s, transform 0.2s;
  background: linear-gradient(137deg, #7abcc9 0%, #7aafc9 50%, #1a6db5 100%);
}
.top-hero-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.top-hero-btn--primary {
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,109,181,0.4);
}
.top-hero-btn--ghost {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}

/* =============================================
   TOP PAGE — CONCEPT
   ============================================= */
.top-concept-section {
  position: relative;
  padding: 100px 30px;
  overflow: hidden;
  background: #fff;
}
.top-concept-inner {
  position: relative;
  z-index: 1;
}
.top-concept-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.top-concept-left { }
.top-concept-right {
  overflow: hidden;
  line-height: 0;
}
.top-concept-img {
  width: 100%;
  object-fit: cover;
}
.top-concept-body {
  padding-top: 40px;
}
.top-concept-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.6;
  margin-bottom: 24px;
}
.top-concept-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin-bottom: 16px;
}
.top-concept-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #777;
  line-height: 1.8;
  margin-bottom: 36px;
}

/* =============================================
   TOP PAGE — COMMON MORE LINK
   ============================================= */
.top-more-link {
  position: relative;
  height: 50px;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 26px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.2s;
}
.top-more-link::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: white;
  z-index: -1;
}
.top-more-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(92.25deg, #0d3b6e 15.1%, #1a6db5 48.78%, #7aafc9 82.46%);
  z-index: -2;
}
.top-more-link-text {
  display: block;
  background: linear-gradient(92.25deg, #0d3b6e 15.1%, #1a6db5 48.78%, #7aafc9 82.46%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.top-more-link:hover { opacity: 0.7; }

/* =============================================
   TOP PAGE — SERVICES
   ============================================= */
.top-services-section {
  padding: 100px 30px;
  background: #f4f8fc;
}
.top-services-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.top-services-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin-top: 40px;
  margin-bottom: 0;
  max-width: 800px;
}
.top-services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 50px;
  margin-bottom: 48px;
}
.top-service-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #e4eff8;
  transition: box-shadow 0.2s, transform 0.2s;
}
.top-service-card:hover {
  box-shadow: 0 8px 28px rgba(13,59,110,0.1);
  transform: translateY(-2px);
}
.top-service-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d3b6e 0%, #1a6db5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.top-service-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #3d7bae;
  letter-spacing: 2px;
}
.top-service-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0d3b6e;
  line-height: 1.4;
}
.top-service-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #555;
  line-height: 1.85;
/*  flex: 1;*/
}
.top-service-link {
  position: relative;
  z-index: 0;
  gap: 4px;
  padding: 8px 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 10px 0;
  background: linear-gradient(137deg, #64a9b6 0%, #3d7bae 50%, #196eb5 100%);
  transition: opacity 0.2s;
  color: white;
}
/*.top-service-link::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: white;
  border-radius: 2px;
  z-index: -1;
}
.top-service-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%);
  border-radius: 4px;
  z-index: -2;
}*/
.top-service-link:hover { opacity: 0.7; }
.top-services-all-link { text-align: right; }

/* Service card sub-links */
.top-service-sub-list {
  list-style: none;
  border-top: 1px solid rgba(61,123,174,0.2);
  padding-top: 20px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.top-service-sub-list li a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s, padding-left 0.15s;
}
.top-service-sub-list li a::before {
  content: '›';
  color: #3d7bae;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.top-service-sub-list li a:hover { color: #1a6db5; padding-left: 3px; }

/* =============================================
   TOP PAGE — STATS / 実績
   ============================================= */
.top-stats-section {
  background: linear-gradient(26.22deg, #fff 24.93%, #e1f2fa 99.54%);
  padding: 100px 30px;
}
.top-stats-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.top-stats-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  margin-top: 40px;
}
.top-stats-total {
  display: flex;
  justify-content: center;
  padding: 50px 0 20px;
}
.top-stats-total-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.top-stats-total-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #555;
  letter-spacing: 1px;
}
.top-stats-total-num-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.top-stats-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 10vw, 120px);
  line-height: 1;
}
.top-stats-unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #0d3b6e;
}
.top-donut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.top-donut-card {
  background: #fff;
  border-radius: 14px;
  padding: 36px 28px;
  box-shadow: 0 4px 20px rgba(13,59,110,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.top-donut-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0d3b6e;
  text-align: center;
  line-height: 1.6;
}
/* CSS conic-gradient donut charts */
.top-donut-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.top-donut-chart::after {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: #fff;
}
.top-donut-chart--industry {
  background: conic-gradient(
    #0d3b6e 0% 31%,
    #1a6db5 31% 57%,
    #3d7bae 57% 75%,
    #7aafc9 75% 89%,
    #a8dbf4 89% 100%
  );
}
.top-donut-chart--size {
  background: conic-gradient(
    #0d3b6e 0% 17%,
    #1a6db5 17% 38%,
    #3d7bae 38% 80%,
    #7aafc9 80% 100%
  );
}
.top-donut-chart--service {
  background: conic-gradient(
    #0d3b6e 0% 32%,
    #1a6db5 32% 55%,
    #3d7bae 55% 74%,
    #7aafc9 74% 88%,
    #a8dbf4 88% 100%
  );
}
.top-donut-legend {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.top-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: #444;
}
.top-donut-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.top-donut-legend-pct {
  margin-left: auto;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0d3b6e;
  flex-shrink: 0;
}

/* =============================================
   TOP PAGE — MEDIA
   ============================================= */
.top-media-section {
  padding: 100px 30px;
  background: #fff;
}
.top-media-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.top-media-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin-top: 40px;
  margin-bottom: 0;
}
.top-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
  margin-bottom: 48px;
}
.top-media-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8eef5;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.top-media-card:hover {
  box-shadow: 0 8px 28px rgba(13,59,110,0.1);
  transform: translateY(-2px);
}
.top-media-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #ddeef8 0%, #bcd8ee 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7aafc9;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
}
.top-media-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.top-media-cat {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #1a6db5;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.top-media-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0d3b6e;
  line-height: 1.65;
}
.top-media-date {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.top-section-more { text-align: center; }

/* =============================================
   TOP PAGE — NEWS
   ============================================= */
.top-news-section {
  padding: 100px 30px;
  background: #f4f8fc;
}
.top-news-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.top-news-list {
  list-style: none;
  margin-top: 60px;
  margin-bottom: 48px;
  border-top: 1px solid #d0dde9;
}
.top-news-item { border-bottom: 1px solid #d0dde9; }
.top-news-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  transition: opacity 0.2s;
}
.top-news-link:hover { opacity: 0.65; }
.top-news-date {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #777;
  white-space: nowrap;
  flex-shrink: 0;
}
.top-news-cat {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a6db5;
  background: rgba(26,109,181,0.09);
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.top-news-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #111;
  font-weight: 500;
  line-height: 1.6;
}

/* =============================================
   TOP PAGE — COMPANY
   ============================================= */
.top-company-section {
  padding: 100px 30px;
  background: #fff;
}
.top-company-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.top-company-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 60px;
}
.top-company-lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.75;
  margin-bottom: 24px;
}
.top-company-body-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: #444;
  line-height: 2;
}
.top-company-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}
.top-company-table th,
.top-company-table td {
  padding: 14px 18px;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  border-bottom: 1px solid #e4eff8;
  vertical-align: top;
}
.top-company-table th {
  width: 42%;
  font-weight: 700;
  color: #0d3b6e;
  background: #f4f8fc;
  white-space: nowrap;
}
.top-company-table td { color: #333; }
.top-company-link {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
  gap: 4px;
  padding: 11px 26px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(137deg, rgba(13,59,110,1) 0%, rgba(27,47,77,1) 35%, rgba(61,123,174,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.2s;
  margin: 0 0 0 auto;
  width: fit-content;
}
.top-company-link::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: white;
  z-index: -1;
}
.top-company-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(92.25deg, #0d3b6e 15.1%, #1a6db5 48.78%, #7aafc9 82.46%);
  z-index: -2;
}
.top-company-link:hover { opacity: 0.7; }

/* =============================================
   TOP PAGE — RESPONSIVE (≤ 900px)
   ============================================= */
@media (max-width: 991px) {
  .top-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .top-hero-pre { font-size: 40px; }
  .top-hero-catch { font-size: 13px; }
  .top-hero-sub { font-size: 13px; }
}

@media (max-width: 900px) {
  .top-services-grid { grid-template-columns: repeat(2, 1fr); }
  .top-donut-grid { grid-template-columns: repeat(2, 1fr); margin-top: 40px;}
  .top-company-inner { grid-template-columns: 1fr; gap: 40px; }
  .top-concept-two-col { grid-template-columns: 1fr; gap: 40px; }
  .top-concept-right { order: -1; }
  .top-concept-img { aspect-ratio: 1.5;}
  .top-company-link { margin: 40px auto 0 auto;}
}

@media (max-width: 767px) {
  .top-hero { padding: 20px; min-height: auto; aspect-ratio: 0.8;}
  .top-hero-pre { margin-bottom: 24px; font-size: 24px;}
  .top-hero-catch, .top-hero-sub { font-size: 13px; }
  .top-hero-bg-img { object-position: 75% bottom; }
  .top-hero-content { top:100px;}
  .top-concept-section,
  .top-services-section,
  .top-stats-section,
  .top-media-section,
  .top-news-section,
  .top-company-section { padding: 60px 20px; }
  .top-concept-body { padding-top: 32px; }
  .top-concept-text,
  .top-services-intro,
  .top-stats-tagline,
  .top-media-intro { font-size: 13px; }
  .top-concept-note { font-size: 12px; }
  .top-services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .top-donut-grid { grid-template-columns: 1fr; }
  .top-stats-num { font-size: 80px; }
  .top-stats-unit { font-size: 24px; }
  .top-stats-total-label { font-size: 14px; }
  .top-media-grid { grid-template-columns: 1fr; }
  .top-news-link { flex-wrap: wrap; gap: 10px; }
  .top-news-title { font-size: 14px; }
  .top-company-inner { grid-template-columns: 1fr; gap: 30px; }
  .top-company-lead { font-size: 18px; }
  .top-company-body-text,
  .top-company-table th,
  .top-company-table td { font-size: 13px; }
  .top-services-all-link { text-align: center; }
}

/* =============================================
   TOP PAGE — RESPONSIVE (≤ 600px)
   ============================================= */
@media (max-width: 600px) {
  .top-hero {  }
  .top-hero-cta-row { flex-direction: column; }
  .top-hero-btn { width: 100%; }
  .top-services-grid { grid-template-columns: 1fr; }
  .top-donut-card { padding: 28px 20px; }
  .top-company-table { display: block; }
  .top-company-table tbody { display: block; }
  .top-company-table tr { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid #e4eff8; }
  .top-company-table th,
  .top-company-table td { border-bottom: none; padding: 4px 0; background: none; width: 100%; }
  .top-company-table th { font-size: 11px; color: #3d7bae; padding-bottom: 2px; }
  .top-hero-content { top:60px;}
  .top-hero-pre { font-size: 22px;}
}

/* =============================================
   TOP PAGE — RESPONSIVE (≤ 500px)
   ============================================= */
@media (max-width: 500px) {
  .top-hero { aspect-ratio: 0.6; }
}


/* =============================================
   SEO PAGE
   ============================================= */

/* ===== SEO SERVICES GRID ===== */
.seo-services-section {
  padding: 80px 0;
  background: #fff;
}
.seo-services-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.seo-services-headline {
  margin: 60px 0;
}
.seo-services-lead {
  font-size: 16px;
  color: #555;
  margin-bottom: 48px;
  line-height: 1.8;
}
.seo-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.seo-service-card {
  border: 1.5px solid #e5e9f0;
  border-radius: 12px;
  padding: 32px 28px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.2s;
}
.seo-service-card:hover {
  box-shadow: 0 4px 24px rgba(30,60,120,0.10);
}
.seo-service-card--primary {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(94.16deg, #0d3b6e 15.32%, #7aafc9 50%, #1a6db5 84.68%) border-box;
}

.seo-service-card-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2563eb;
  background: #e8f0fe;
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 2px;
}
.seo-service-card-badge--primary {
  color: #fff;
  background: linear-gradient(94.16deg, #0d3b6e 15.32%, #7aafc9 50%, #1a6db5 84.68%);
}
.seo-service-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seo-service-card-icon svg {
  width: 36px;
  height: 36px;
}
.seo-service-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2340;
  margin: 0;
}
.seo-service-card p {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.8;
  margin: 0;
}
.seo-service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  background: linear-gradient(94.16deg, #0d3b6e 15.32%, #7aafc9 50%, #1a6db5 84.68%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.seo-service-card-link:hover {
  opacity: 0.75;
}

/* ===== RESPONSIVE: TABLET (768px) ===== */
@media (max-width: 768px) {
  .seo-services-section {
    padding: 60px 20px;
  }
  .seo-services-headline {
    margin: 40px 0;
  }
  .seo-service-card {
    padding: 24px 20px;
  }
  .seo-plans-section {
    padding: 60px 20px!important;
  }
  .seo-plans-table {
    min-width: 560px;
  }
  .seo-services-lead {
    font-size: 13px;
  }
}

/* ===== RESPONSIVE: MOBILE (640px) – grid 1-col ===== */
@media (max-width: 640px) {
  .seo-services-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== RESPONSIVE: MOBILE (480px) ===== */
@media (max-width: 480px) {
  .seo-services-section {
    padding: 48px 20px;
  }
  .seo-service-card {
    padding: 18px 14px;
    gap: 10px;
  }
  .seo-service-card h3 {
    font-size: 0.98rem;
  }
  .seo-service-card p {
    font-size: 0.86rem;
  }
  .seo-plans-section {
    padding: 48px 0;
  }
  .seo-plans-table {
    min-width: 480px;
  }
  .seo-plans-table th,
  .seo-plans-table td {
    padding: 10px 8px;
    font-size: 0.78rem;
  }
  .figures-industry-table th,
  .figures-industry-table td {
    padding: 8px 10px;
    font-size: 0.82rem;
  }
}

/* ===== SEO PRICING TABLE ===== */
.seo-plans-section {
  padding: 80px 0;
  background: #f7f9fc;
}
.seo-plans-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}
.seo-plans-note {
  font-size: 0.7rem;
  color: #888;
  margin-top: 20px;
  line-height: 1.7;
}
.seo-plans-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.seo-plans-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  font-size: 0.92rem;
}
.seo-plans-table th,
.seo-plans-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid #e5e9f0;
  vertical-align: top;
  line-height: 1.7;
}
.seo-plans-table thead th {
  background: #1a2340;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}
.seo-plans-table thead th:first-child {
  background: #163356;
}
.seo-plans-table thead th.seo-plans-th-primary {
  background: #7aafc9;
}
.seo-plans-table thead th.seo-plans-th-second {
  background: rgba(61,123,174,1);
}
.seo-plans-table thead th.seo-plans-th-third {
  background: #0d3b6e;
}
.seo-plans-table tbody tr:nth-child(even) td {
  background: #f7f9fc;
}
.seo-plans-table tbody tr:nth-child(odd) td {
  background: #fff;
}
.seo-plans-table tbody td:first-child {
  font-weight: 600;
  color: #1a2340;
  background: #f0f4fa !important;
  white-space: nowrap;
}
.seo-plans-badge-primary {
  display: inline-block;
  background: #7aafc9;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 4px;
}
.seo-plans-table ul {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
  color: #444;
}
.seo-plans-table ul li {
  margin-bottom: 2px;
}
@media (max-width: 760px) {
  .seo-plans-table th,
  .seo-plans-table td {
    font-size: 12px!important;
    padding: 12px 10px;
  }
  .seo-plans-wrapper .plans-headline {
    padding-top: 40px;
  }
}
@media (max-width: 600px) {
  .seo-plans-table-wrap {
    margin-top: 30px;
  }
}

/* ===== FIGURES TABLE (industry breakdown) ===== */
.figures-industry-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 0.92rem;
}
.figures-industry-table th,
.figures-industry-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e9f0;
}
.figures-industry-table thead th {
  background: #f0f4fa;
  font-weight: 700;
  color: #1a2340;
}
.figures-industry-table tbody td {
  color: #444;
}
.figures-industry-table tbody td:last-child {
  font-weight: 600;
  color: #2563eb;
}
.figures-total-row {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a2340;
  margin-bottom: 12px;
}
.figures-total-row span {
  color: #2563eb;
}

.hs-form-frame {
  width: 700px;
  max-width: 100%;
}
@media (max-width: 767px) {
#contact .co-aboutus-section {
  padding: 0 0 60px 0;
}
#contact .co-aboutus-content {
  padding: 0;
}
}

.privacy-content h2 {
  width: 100%;
  margin: 50px 0 20px 0;
}

.privacy-h1 {
  text-align: center;
  margin-bottom: 60px;
}

.privacy-content ul {
  margin-left: 20px;
}

@media (max-width: 767px) {
.privacy-content h2 {
  font-size: 16px;
}
.privacy-h1 {
  font-size: 20px;
}
.privacy-content p, li {
  font-size: 13px;
}
.privacy-content h2 {
  margin: 30px 0 10px 0;
}

.privacy-h1 {
  margin-bottom: 30px;
}
}