/* ==========================================================================
   Design tokens (from Figma: 9SRwH5O3JmSxJHOUi4z08W)
   ========================================================================== */
:root {
  --color-green-medium: #00a799;
  --color-green-dark: #2a706b;
  --color-green-darker: #12524e;
  --color-green-darkest: #103e3b;
  --color-green-shadow: #045f58;
  --color-green-drawer: #024441;
  --color-yellow: #f7ff14;
  --color-white: #ffffff;
  --color-black: #000000;

  --font-heading: sdmetro, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-body: sdmetro, 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  --container-max: 1180px;
  --breakpoint-mobile: 767px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.p-breadcrumb{
  display: none;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 24px;
  background: var(--color-white);
  max-width: 1440px;
  margin: 0 auto;
}

.site-header__logo img {
  width: 369px;
  height: auto;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__links a {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-green-dark);
  white-space: nowrap;
}

.site-header__nav-item {
  position: relative;
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover treatment ported from smartdrive.co.jp/fleet/'s .p-navigation_main__a:hover
   (light-cyan pill highlight; their hover text color already matches our
   default --color-green-dark, so only the background needs to change here). */
.site-header__nav-link:hover {
  background-color: #dcfefd;
  color: var(--color-green-dark);
}

.site-header__chevron {
  width: auto;
  height: 12px;
  transform: rotate(90deg);
}

/* -- Hover dropdown (機能 ▼) -------------------------------------------
   top stays flush at 100% (no gap in the box itself) and the 12px visual
   gap is done via padding-top instead, so that space is still part of
   .site-header__dropdown's hoverable area — otherwise the mouse crosses a
   dead zone moving from the link down into the panel and hover breaks. */
.site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.site-header__nav-item--has-dropdown:hover .site-header__dropdown,
.site-header__nav-item--has-dropdown:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-header__dropdown-pointer {
  display: block;
  width: 15px;
  height: 7px;
}

.site-header__dropdown-pointer img {
  display: block;
  width: 100%;
  height: auto;
}

.site-header__dropdown-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #333333;
  border-radius: 8px;
}

a.site-header__dropdown-link {
  padding: 12px 8px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--color-white);
  white-space: nowrap;
}

.site-header__dropdown-link:hover {
  background: #3edcd5;
  color: #0b3633;
}

.btn-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 17px;
  background: var(--color-yellow);
  border-radius: 5.6px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--color-green-dark);
  white-space: nowrap;
  box-shadow: 0 6px 16px 0 rgba(4, 95, 88, 0.4);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-download:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.btn-download:hover img {
  filter: brightness(0) invert(1);
}

.btn-download img {
  width: 27px;
  height: auto;
}

.site-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 44px;
  padding: 0;
  background: transparent;
}

.site-header__menu-icon {
  width: 24px;
  height: 24px;
}

/* -- Mobile-only full-screen nav drawer (D:535:355) ---------------------- */
.site-header__mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  background: var(--color-green-drawer);
  overflow-y: auto;
}

.site-header__mobile-nav.is-open {
  display: flex;
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 21px;
}

.mobile-drawer__logo {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
}

.mobile-drawer__close {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.mobile-drawer__close img {
  width: 20px;
  height: 20px;
}

.mobile-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 33px;
  padding: 40px 32px 32px;
}

.mobile-drawer__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-drawer__item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 28px;
  letter-spacing: 1.4px;
  color: var(--color-white);
}

.mobile-drawer__chevron {
  width: 12px;
  height: auto;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.mobile-drawer__item-toggle[aria-expanded="true"] .mobile-drawer__chevron {
  transform: rotate(-90deg);
}

.mobile-drawer__submenu {
  display: none;
  flex-direction: column;
  padding-left: 21px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-drawer__submenu.is-open {
  display: flex;
}

.mobile-drawer__sublink {
  padding: 16px 24px 16px 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--color-white);
}

.mobile-drawer__item--link {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  letter-spacing: 1.4px;
  color: var(--color-white);
}

.site-header__mobile-cta {
  width: 100%;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px 13px 24px;
  font-size: 16px;
  letter-spacing: 0.8px;
  border-radius: 8px;
  box-shadow: 0 8px 20px 0 rgba(4, 95, 88, 0.4);
}

.site-header__mobile-cta img {
  width: 38px;
  height: 38px;
}

@media (max-width: 767px) {
  .site-header {
    padding: 11px;
  }

  .site-header__logo img {
    width: 196px;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__menu-btn {
    display: flex;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-green-darker);
  padding-top: 64px;
  color: var(--color-white);
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 964px;
  margin: 0 auto;
  padding: 0 24px;
  flex-wrap: wrap;
}

.site-footer__address {
  padding-left: 68px;
}

.site-footer__company {
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  margin: 0 0 4px;
}

.site-footer__address p {
  font-size: 14px;
  line-height: 28px;
  margin: 0;
}

.site-footer__social {
  display: flex;
  gap: 19px;
  padding: 16px 0 48px;
  list-style: none;
  margin: 0;
}

.site-footer__social img {
  width: 40px;
  height: auto;
}

.site-footer__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-yellow-square {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 16px 0 24px;
  background: var(--color-yellow);
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--color-green-dark);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-yellow-square:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.btn-yellow-square:hover img {
  filter: brightness(0) invert(1);
}

.btn-yellow-square img {
  width: 38px;
  height: auto;
}

.btn-outline-white {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 3px 18px 2px 26px;
  border: 2px solid var(--color-white);
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-green-dark);
}

.site-footer__links {
  display: flex;
  gap: 40px;
  max-width: 916px;
  margin: 0 auto;
  padding: 24px 24px 0;
  flex-wrap: wrap;
}

.site-footer__col {
  flex: 1 0 0;
  min-width: 160px;
  padding: 24px 0;
}

.site-footer__col h3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 23.8px;
  margin: 0 0 12px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--color-white);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__col li a {
  display: block;
  font-size: 14px;
  line-height: 28px;
  padding: 5px 0;
  font-weight: 400;
}

.site-footer__bottom {
  background: var(--color-green-darkest);
  margin-top: 64px;
  padding: 64px 24px 0;
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 868px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.site-footer__legal-links a {
  font-size: 15px;
  text-decoration: underline;
}

.site-footer__badges {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 868px;
  margin: 0 auto;
  padding-bottom: 40px;
  flex-wrap: wrap;
}

.site-footer__badges img:first-child {
  width: 79px;
}

.site-footer__badge-jpx {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__badge-jpx img {
  width: 57px;
  height: auto;
  background: var(--color-white);
}

.site-footer__badge-jpx p {
  font-size: 12px;
  line-height: 20.4px;
  margin: 0;
}

.btn-more {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 13px 16px 13px 24px;
  border-radius: 8px;
  background:
    linear-gradient(233.8deg, rgb(3, 172, 195) 12.5%, rgba(0, 141, 160, 0) 69.4%),
    linear-gradient(90deg, rgb(0, 168, 146) 0%, rgb(0, 168, 146) 100%);
  color: var(--color-white);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.btn-more img {
  width: 38px;
  height: auto;
}

.site-footer__copyright {
  max-width: 868px;
  margin: 0 auto;
  padding-bottom: 40px;
  font-size: 11.67px;
}

@media (max-width: 767px) {
  .site-footer__address {
    padding-left: 0;
  }

  .site-footer__top {
    flex-direction: column;
    padding: 0 24px;
  }

  .site-footer__links {
    flex-direction: column;
    padding: 24px 24px 0;
  }

  .site-footer__col {
    width: 100%;
  }

  .site-footer__badges {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Section 2 - Document tab demo (D:5:53 / M:349:1981)
   ========================================================================== */
.section-doctabs {
  background: #f7f7f7;
  padding: 104px 24px;
}

.section-doctabs__head {
  max-width: 1150px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 56px;
}

.section-doctabs__head h2 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.35;
  color: #0b2e2a;
  margin: 0;
}

.section-doctabs__head p {
  font-size: 17px;
  line-height: 1.35;
  color: #44544f;
  margin: 18px 0 0;
}

.doctabs {
  display: flex;
  gap: 63px;
  align-items: flex-start;
  justify-content: center;
  max-width: 1180px;
  margin: 0 auto;
}

.doctabs__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.doctab-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 233px;
  height: 92px;
  padding: 0 0 0 17px;
  border-radius: 8px;
  background: #83eee9;
  text-align: left;
  transition: background-color 0.15s ease;
}

/* Hover uses the identical styling as the current/active tab, per Figma's
   Tab component "status=hover" variant (node 379:3942) — same teal
   background, same light-cyan number badge, same white text. */
.doctab-btn[aria-selected="true"],
.doctab-btn:hover {
  background: #00a799;
}

.doctab-btn__num {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #00a799;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #0b3633;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.doctab-btn[aria-selected="true"] .doctab-btn__num,
.doctab-btn:hover .doctab-btn__num {
  background: #dcfefd;
  border-color: #2a706b;
  color: #2a706b;
}

.doctab-btn__text strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #0b2e2a;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.doctab-btn__text small {
  display: block;
  font-size: 13px;
  color: #828282;
  transition: color 0.15s ease;
}

.doctab-btn[aria-selected="true"] .doctab-btn__text strong,
.doctab-btn[aria-selected="true"] .doctab-btn__text small,
.doctab-btn:hover .doctab-btn__text strong,
.doctab-btn:hover .doctab-btn__text small {
  color: #ffffff;
}

.doctabs__panel {
  flex-shrink: 1;
  max-width: 808px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.doctabs__panel-image {
  background: #f3f6f5;
}

.doctabs__panel-image img {
  width: 100%;
  height: auto;
}


.doctabs__panel-body {
  padding: 24px;
  background: #ffffff;
  box-shadow: inset 0 2px 0 0 #e0e0e0;
}

.doctabs__panel-body h3 {
  font-size: 28px;
  font-weight: 700;
  color: #0b2e2a;
  margin: 0 0 6px;
  line-height: 1.32;
}

.doctabs__panel-body p {
  font-size: 16px;
  color: #44544f;
  margin: 0;
  line-height: 1.35;
}

@media (max-width: 767px) {
  .section-doctabs {
    padding: 56px 24px;
  }

  .section-doctabs__head {
    text-align: left;
    padding-bottom: 16px;
  }

  .section-doctabs__head h2 {
    font-size: 28px;
    letter-spacing: 1.4px;
  }

  .section-doctabs__head p {
    font-size: 16px;
    color: #4f4f4f;
  }

  .doctabs {
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
  }

  .doctabs__list {
    flex-direction: row;
    gap: 17px;
  }


  .doctabs__panel-image {
    cursor: zoom-in;
  }

  .doctabs__panel-hint {
    display: block;
  }

  .doctabs__panel-body h3 {
    font-size: 13.6px;
  }

  .doctabs__panel-body p {
    font-size: 7.8px;
  }

  .doctabs__panel-body {
    padding: 11.6px;
    gap: 2.9px;
  }

  .doctab-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1.74px solid #00a799;
  }

  .doctab-btn[aria-selected="true"],
  .doctab-btn:hover {
    background: #00a799;
  }

  .doctab-btn__num {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    color: #0b2e2a;
    font-size: 14px;
  }

  .doctab-btn[aria-selected="true"] .doctab-btn__num,
  .doctab-btn:hover .doctab-btn__num {
    background: transparent;
    border: none;
    color: #ffffff;
  }

  .doctab-btn__text {
    display: none;
  }
}

/* ==========================================================================
   Section 7 - Live dashboard tab demo (D:5:459 / M:349:2098)
   ========================================================================== */
.section-dashboard-demo {
  background: linear-gradient(180deg, #082926 0%, #061d1b 100%);
  padding: 96px 20px 116px;
}

.section-dashboard-demo__head {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 62px;
}

.section-dashboard-demo__head h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #ffffff;
  margin: 0 0 18px;
  line-height: 1.5;
}

.section-dashboard-demo__rule {
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: #2bcabc;
  margin: 0 auto 32px;
}

.section-dashboard-demo__head p {
  font-size: 18px;
  letter-spacing: 0.9px;
  line-height: 1.6;
  color: #ffffff;
  margin: 0;
}

.dashboard-switch {
  max-width: 1152px;
  margin: 0 auto;
}

.dashboard-switch__tabs {
  display: flex;
}

.dashboard-tab {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 40px 32px;
  background: rgba(0, 167, 153, 0.5);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.dashboard-tab-col:first-child .dashboard-tab {
  border-radius: 12px 0 0 12px;
}

.dashboard-tab-col:last-child .dashboard-tab {
  border-radius: 0 12px 12px 0;
}


.dashboard-tab strong {
  display: block;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
}

.dashboard-tab small {
  display: block;
  font-size: 16px;
}

.dashboard-tab[aria-selected="true"] {
  background: #83eee9;
  color: #0b3633;
}

.dashboard-switch__arrow {
  display: flex;
  justify-content: center;
  visibility: hidden;
  width: 50px;
  height: 22px;
  margin: 0 auto;
}

.dashboard-switch__arrow img {
  width: 100%;
  height: auto;
  transform: rotate(180deg);
}

.dashboard-tab-col[data-active="true"] .dashboard-switch__arrow {
  visibility: visible;
}

.dashboard-tab-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-tab-col .dashboard-tab {
  width: 100%;
}

.dashboard-screen {
  margin-top: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.dashboard-screen__frame {
  display: none;
  width: 100%;
  border-radius: 8px;
}

.dashboard-screen__frame.is-active {
  display: block;
}

.dashboard-screen__iframe {
  width: 100%;
  height: auto;
  border: none;
  aspect-ratio: 16/11;
}

@media (max-width: 767px) {
  .section-dashboard-demo {
    padding: 56px 24px;
  }

  .section-dashboard-demo__head {
    padding-bottom: 32px;
  }

  .section-dashboard-demo__head h2 {
    font-size: 28px;
    letter-spacing: 1.4px;
    margin-bottom: 12px;
  }

  .section-dashboard-demo__rule {
    width: 64px;
    height: 4px;
    margin-bottom: 24px;
    background: #83eee9;
  }

  .section-dashboard-demo__head p {
    font-size: 16px;
    letter-spacing: normal;
  }

  .dashboard-tab {
    padding: 6px;
  }

  .dashboard-tab strong {
    font-size: 16px;
  }

  .dashboard-tab small {
    font-size: 11px;
  }

  .dashboard-switch__arrow {
    width: 23px;
    height: 10px;
  }

  .dashboard-screen {
    margin-top: 12px;
  }
}

/* ==========================================================================
   Section 8 - Managed data grid (D:5:501 / M:349:2106)
   ========================================================================== */
.section-managed-data {
  background: var(--color-white);
  padding: 80px 20px;
}

.section-managed-data__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 968px;
  margin: 0 auto;
  padding-bottom: 62px;
  text-align: center;
}

.section-managed-data__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 4px;
  color: #0b3633;
}

.section-managed-data__rule {
  display: block;
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: #2bcabc;
}

.section-managed-data__lead {
  margin: 0;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 2px;
  color: #333;
}

.section-managed-data__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;
  justify-content: center;
  max-width: 968px;
  margin: 0 auto;
}

/* -- Privacy sidebar -------------------------------------------------- */
.section-managed-data__sidebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 15px 31px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  flex-wrap: wrap;
}

.section-managed-data__sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 480px;
  max-width: 619px;
}

.section-managed-data__sidebar-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-managed-data__sidebar-heading h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-green-dark);
}

.section-managed-data__sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #dcfefd;
}

.section-managed-data__sidebar-icon img {
  width: 24px;
  height: auto;
}

.section-managed-data__sidebar-info p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

.section-managed-data__sidebar-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 177px;
  width: 177px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-managed-data__sidebar-badges li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-green-medium);
  font-size: 16px;
  color: var(--color-white);
}

.section-managed-data__badge-icon {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* -- Document-type cards ----------------------------------------------- */
.section-managed-data__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: auto;
  padding: 18px 16px;
  border-radius: 12px;
  background: #f2f2f2;
}

.section-managed-data__card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: var(--color-green-dark);
}

.section-managed-data__card ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  color: #333;
}

.section-managed-data__card li {
  position: relative;
  padding-left: 20px;
  line-height: 1.3;
}

.section-managed-data__card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
}

.section-managed-data__ref {
  margin-left: 8px;
  font-size: 14px;
  color: #828282;
  text-decoration: underline;
  white-space: nowrap;
}

.section-managed-data__note {
  max-width: 968px;
  margin: 40px auto 0;
  font-size: 13px;
  line-height: 1.35;
  color: #666;
  text-align: center;
}

/* ==========================================================================
   Mobile (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .section-managed-data {
    padding: 56px 24px;
  }

  .section-managed-data__head {
    gap: 18px;
    padding-bottom: 32px;
    text-align: center;
  }

  .section-managed-data__title {
    gap: 18px;
    font-size: 28px;
    letter-spacing: 1.4px;
    line-height: 1.5;
  }

  .section-managed-data__rule {
    width: 64px;
    height: 4px;
    background: #83eee9;
  }

  .section-managed-data__lead {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: normal;
    color: #4f4f4f;
  }

  .section-managed-data__lead br {
    display: none;
  }

  .section-managed-data__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-managed-data__sidebar {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    width: 100%;
    padding: 18px 16px;
    border-radius: 12px;
  }

  .section-managed-data__sidebar-info {
    flex: none;
    max-width: none;
  }

  .section-managed-data__sidebar-badges {
    flex: none;
    width: 100%;
  }

  .section-managed-data__card {
    width: 100%;
  }

  .section-managed-data__note {
    max-width: none;
  }
}

.section-final-cta {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 60px 20px;
  background: linear-gradient(to top,
      #e6ffff 0%,
      rgba(225, 254, 254, 0.98) 45.063%,
      rgba(131, 238, 233, 0.7) 100.06%);
}

.section-final-cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  width: 100%;
}

.section-final-cta__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 50px;
  line-height: 1.35;
  letter-spacing: 5px;
  text-align: center;
  color: #0b3633;
}

.section-final-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
}

/* Yellow "資料ダウンロード" button — reuses the global .btn-download look,
   sized up to match this section's larger call-to-action button. */
.section-final-cta .btn-download.section-final-cta__btn-download {
  gap: 16px;
  height: 64px;
  padding: 13px 16px 13px 24px;
  font-size: 16px;
  letter-spacing: 0.8px;
  box-shadow: 0 14px 20px -4px rgba(4, 95, 88, 0.4);
}

.section-final-cta .btn-download.section-final-cta__btn-download img {
  width: 30px;
  height: auto;
}

/* Outline "お問い合わせ" button — teal outline on a light background,
   distinct enough from the header/footer's white-outline button
   (.btn-outline-white) to warrant its own class. */
.section-final-cta__btn-outline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 13px 16px 13px 24px;
  border: 2px solid var(--color-green-medium);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--color-green-dark);
  white-space: nowrap;
}

.section-final-cta__btn-outline img {
  width: 38px;
  height: auto;
}

@media (max-width: 767px) {
  .section-final-cta {
    padding: 60px 20px;
  }

  .section-final-cta__container {
    max-width: 335px;
  }

  .section-final-cta__heading {
    font-size: 28px;
    letter-spacing: 0;
  }

  .section-final-cta__buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
    padding-top: 0;
  }

  .section-final-cta .btn-download.section-final-cta__btn-download {
    width: 100%;
    justify-content: space-between;
  }

  .section-final-cta__btn-outline {
    width: 100%;
  }
}

/* ==========================================================================
   Section 9 - Achievements / trust badges (D:5:1003 / M:369:1881)
   ========================================================================== */
.section-achievements {
  background: var(--color-white);
  padding: 80px 20px;
}

.section-achievements__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  max-width: 1100px;
  margin: 0 auto;
}

.section-achievements__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 2px;
  color: #0b3434;
}

.section-achievements__rule {
  display: block;
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: #83eee9;
}

/* -- Cards (JPX listing / ISMS certification) -------------------------- */
.section-achievements__cards {
  display: flex;
  gap: 20px;
  width: 100%;
}

.section-achievements__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 540px;
  padding: 35px 25px;
}

.section-achievements__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.section-achievements__logo img {
  display: block;
}

.section-achievements__caption {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-align: center;
  color: #333;
  white-space: nowrap;
}

.section-achievements__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 490px;
}

.section-achievements__card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #333;
}

.section-achievements__card-text {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: #333;
}

/* -- Badges row ---------------------------------------------------------- */
.section-achievements__badges {
  display: flex;
  width: 100%;
  margin: 40px 0 0;
  padding: 20px 0 0;
  list-style: none;
}

.section-achievements__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  padding: 0 10px;
}

.section-achievements__badge img {
  display: block;
  margin-bottom: 12px;
}

.section-achievements__badge p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: #333;
}

/* ==========================================================================
   Mobile (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .section-achievements {
    background: linear-gradient(to bottom, #f7f7f7 0%, #ffffff 34%);
    padding: 64px 24px;
  }

  .section-achievements__inner {
    gap: 64px;
  }

  .section-achievements__title {
    gap: 18px;
    font-size: 28px;
    letter-spacing: 2.8px;
    color: #0b3633;
  }

  .section-achievements__rule {
    width: 64px;
    height: 4px;
  }

  .section-achievements__cards {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .section-achievements__card {
    flex: none;
    width: 100%;
    max-width: 326px;
    padding: 0;
    gap: 24px;
  }

  .section-achievements__logo {
    gap: 8px;
    margin-bottom: 0;
  }

  .section-achievements__card-body {
    gap: 8px;
    max-width: none;
  }

  .section-achievements__card-title {
    font-weight: 700;
    letter-spacing: 1px;
  }

  .section-achievements__card-text {
    margin-top: 0;
    line-height: 1.35;
  }

  .section-achievements__badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 20px;
    max-width: 321px;
    margin: 0;
    padding: 0;
  }

  .section-achievements__badge {
    flex: 0 0 calc(50% - 10px);
    padding: 0;
  }

  .section-achievements__badge img {
    margin-bottom: 9px;
  }

  .section-achievements__badge p {
    font-size: 12px;
    white-space: normal;
  }

  /* Reorder to match the mobile 2x2 grid: J-Startup, CNET, METI, I-Challenge */
  .section-achievements__badge--j-startup {
    order: 1;
  }

  .section-achievements__badge--cnet {
    order: 2;
  }

  .section-achievements__badge--meti {
    order: 3;
  }

  .section-achievements__badge--ichallenge {
    order: 4;
  }
}

/* ==========================================================================
   Section 6 - Download CTA banner (D:5:443 / M:349:2089)
   ========================================================================== */
.section-download-cta {
  background: var(--color-green-medium);
}

.section-download-cta__container {
  position: relative;
  max-width: 1122px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
}

/* Desktop-only grouping of heading + button into one column (see HTML
   comment) — hidden entirely on mobile, where the --mobile heading/button
   render as flat flex items of the container instead. */
.section-download-cta__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-width: 280px;
}

/* -- Decorative background blob -----------------------------------------
   Desktop's circle is baked into .section-download-cta__images now (Figma
   nests it inside the "Image" frame there); this element only renders on
   mobile, where Figma still keeps it as a separate layer (366:1591). */
.section-download-cta__blob {
  position: absolute;
  max-width: none;
  pointer-events: none;
  z-index: 0;
  display: none;
}

/* -- Heading -------------------------------------------------------------- */
.section-download-cta__heading {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.35;
  color: var(--color-white);
}

.section-download-cta__heading--mobile {
  display: none;
}

/* -- Button --------------------------------------------------------------- */
.section-download-cta__button {
  position: relative;
  z-index: 1;
  width: fit-content;
  box-shadow: 0 10px 24px 0 rgba(4, 95, 88, 0.4);
}

.section-download-cta__button--mobile {
  display: none;
}

/* -- Screenshot cards -------------------------------------------------------
   Single flattened export of Figma's "Image" node (5:457, 553x332) — the
   two overlapping cards and the decorative circle are baked into the
   asset itself, so no CSS shadow/positioning hack is needed. The node no
   longer has a frame-level drop-shadow effect, so the export's canvas
   matches its layout box exactly (no shadow-blur bleed to size around). */
.section-download-cta__images {
  width: 100%;
  height: auto;
  z-index: 1;
}

.section-download-cta__images--desktop {
  max-width: 553px;
}

.section-download-cta__images--mobile {
  display: none;
}

/* ==========================================================================
   Mobile (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .section-download-cta {
    padding: 0 20px;
  }

  .section-download-cta__container {
    max-width: 400px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px 24px;
    text-align: center;
  }

  .section-download-cta__content {
    display: none;
  }

  .section-download-cta__blob--mobile {
    display: block;
    top: 50%;
    right: 50%;
    width: 401px;
    transform: translate(50%, -50%);
  }

  .section-download-cta__heading--desktop {
    display: none;
  }

  .section-download-cta__heading--mobile {
    display: block;
    font-size: 24px;
    text-align: center;
  }

  .section-download-cta__button--desktop {
    display: none;
  }

  .section-download-cta__button--mobile {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .section-download-cta__images {
    height: auto;
  }

  .section-download-cta__images--desktop {
    display: none;
  }

  .section-download-cta__images--mobile {
    display: block;
    max-width: 326px;
  }
}

/* ==========================================================================
   Section 10 — ご利用ユーザー様の声 (User testimonials / case studies)
   Figma: 9SRwH5O3JmSxJHOUi4z08W, node 5:1074 (desktop) / 369:1946 (mobile)
   ========================================================================== */
.section-testimonials {
  background: #3edcd5;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-testimonials__container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Heading ---- */
.section-testimonials__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 52px;
}

.section-testimonials__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: 2px;
  text-align: center;
  color: #0b3434;
}

.section-testimonials__break {
  display: none;
}

.section-testimonials__underline {
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-white);
}

.section-testimonials__arrow {
  background-color: rgba(0, 0, 0, 0.6);
  --swiper-theme-color: #fff;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --swiper-navigation-size: 30px;
}
.section-testimonials__arrow:after{
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2240%22%20viewBox%3D%220%200%2018%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.43445%202.43457L14.6567%2019.5457L2.43445%2036.6568%22%20stroke%3D%22white%22%20stroke-width%3D%224.86853%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  content: '';
  width: 34px;
  height: 34px;
  transform: translateX(10%);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  background-position: center;
}

.section-testimonials__arrow.swiper-button-prev:after{
  rotate: 180deg;
}
.swiper-button-disabled{
  visibility: hidden;
}

@media (max-width: 767px) {
  .section-testimonials__arrow {
    width: 45px;
    height: 45px;
  }
  .section-testimonials__arrow:after{
    width: 22px;
    height: 22px;
  }
}


/* ---- Card slider ---- */
.section-testimonials__slider {
  width: 100%;
  overflow: hidden;
}

.section-testimonials__card {
  width: 480px;
  height: auto;
  background: var(--color-white);
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.section-testimonials__photo {
  width: 100%;
  overflow: hidden;
}

.section-testimonials__photo img {
  width: 100%;
  height: auto;
}

.section-testimonials__body {
  padding: 30px 40px;
}

.section-testimonials__meta {
  margin: 0 0 20px;
}

.section-testimonials__company {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  color: #333;
}

.section-testimonials__industry {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  color: #888;
}

.section-testimonials__headline {
  margin: 0 0 25px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 33.6px;
  color: var(--color-green-dark);
}

.section-testimonials__compare {
  display: flex;
  flex-direction: column;
}

.section-testimonials__block+.section-testimonials__block {
  margin-top: 25px;
}

.section-testimonials__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--color-white);
  white-space: nowrap;
}

.section-testimonials__tag--before {
  background: #8c8c8c;
}

.section-testimonials__tag--after {
  background: var(--color-green-medium);
}

.section-testimonials__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  color: #333;
}

.section-testimonials__highlight {
  color: var(--color-green-medium);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .section-testimonials {
    padding: 64px 0;
  }

  .section-testimonials__container {
    max-width: 100%;
  }

  .section-testimonials__heading {
    gap: 12px;
    margin-bottom: 32px;
  }

  .section-testimonials__title {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 2.8px;
    color: #0b3633;
  }

  .section-testimonials__break {
    display: block;
  }

  .section-testimonials__card {
    width: 326px;
    border-radius: 24px;
  }

  .section-testimonials__body {
    padding: 12px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .section-testimonials__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .section-testimonials__company,
  .section-testimonials__industry {
    letter-spacing: 0.8px;
  }

  .section-testimonials__industry {
    margin: 0;
    color: #828282;
  }

  .section-testimonials__headline {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.8px;
  }

  .section-testimonials__compare {
    gap: 12px;
  }

  .section-testimonials__block+.section-testimonials__block {
    margin-top: 0;
  }

  .section-testimonials__tag {
    letter-spacing: 0.6px;
  }

  .section-testimonials__tag--before {
    background: #828282;
  }

  .section-testimonials__text {
    line-height: 1.8;
    letter-spacing: 0.8px;
  }
}

/* ==========================================================================
   Section 1 - Hero (D:5:22 / M:349:1950)
   ========================================================================== */
.section-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-green-dark) 0%, #00a799 122.31%);
}

.section-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.section-hero__blur {
  position: absolute;
  display: block;
  mix-blend-mode: color-dodge;
}

.section-hero__blur--gray {
  width: 512px;
  height: 512px;
  left: 8%;
  top: -170px;
  background: url('../img/box/sec1-bg-blur-circle-gray.svg') center / contain no-repeat;
}

.section-hero__blur--teal {
  width: 1034px;
  height: 1034px;
  right: -280px;
  bottom: -480px;
  background: url('../img/box/sec1-bg-blur-circle-teal.svg') center / contain no-repeat;
}

.section-hero__blur--teal-sm {
  display: none;
}

.section-hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 42px 24px;
}

.section-hero__content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
}

/* ---- tag ---- */
.section-hero__tag {
  display: inline-block;
  align-self: flex-start;
  background: #dcfefd;
  color: #0b3633;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  padding: 8px;
  border-radius: 4px;
}

/* ---- heading / lead ---- */
.section-hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.2;
  color: var(--color-white);
  margin: 26px 0 0;
  white-space: nowrap;
}

.section-hero__lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-white);
  margin: 22px 0 0;
}

/* ---- visual illustration ---- */
.section-hero__visual {
  position: absolute;
  top: 0;
  right: -60px;
  width: 50%;
  max-width: 657px;
  min-width: 320px;
}

.section-hero__illustration {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- actions ---- */
.section-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 0;
}

.section-hero__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 13px 16px 13px 24px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.section-hero__btn span{
  font: inherit;
}

.section-hero__btn--primary {
  background: var(--color-yellow);
  color: var(--color-green-dark);
  font-weight: 600;
  box-shadow: 0 10px 24px 0 rgba(4, 95, 88, 0.4);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.section-hero__btn--primary:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.section-hero__btn--primary:hover img {
  filter: brightness(0) invert(1);
}

.section-hero__btn--outline {
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: var(--color-white);
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.section-hero__btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-green-dark);
}

.section-hero__btn--primary span {
  flex: 1 0 0;
}

.section-hero__btn-icon {
  display: block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* ---- authority stats ---- */
.section-hero__stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  margin: 34px 0 0;
}

.section-hero__stat {
  display: block;
  width: 196px;
  height: auto;
}

/* ==========================================================================
   Mobile (M:349:1950)
   ========================================================================== */
@media (max-width: 767px) {
  .section-hero__blur--gray {
    display: none;
  }

  .section-hero__blur--teal {
    width: 507px;
    height: 507px;
    right: auto;
    left: 48px;
    top: 165px;
    bottom: auto;
  }

  .section-hero__blur--teal-sm {
    display: block;
    width: 213px;
    height: 213px;
    left: -70px;
    top: -60px;
    background: url('../img/box/sec1-bg-blur-circle-teal.svg') center / contain no-repeat;
  }

  .section-hero__inner {
    padding: 40px 24px;
  }

  .section-hero__content {
    max-width: none;
    gap: 24px;
  }

  .section-hero__tag {
    font-size: 16px;
    padding: 6px 12px;
  }

  .section-hero__heading {
    font-size: 32px;
    line-height: 1.375;
    margin: 0;
    white-space: normal;
    text-shadow: 0 12px 30px rgba(8, 41, 38, 0.08);
  }

  .section-hero__lead {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
    margin: 0;
  }

  .section-hero__visual {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }

  .section-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
  }

  .section-hero__btn--primary {
    width: 100%;
  }

  .section-hero__btn--outline {
    width: 100%;
  }

  .section-hero__stats {
    justify-content: center;
    gap: 11.7px;
    margin: 0;
    flex-wrap: wrap;
  }

  .section-hero__stat {
    width: 157.6px;
  }
}

/* ==========================================================================
   Section 3 - Pain points (D:5:137 / M:349:2011)
   ========================================================================== */
.section-pain-points {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0b3633;
  padding: 80px 20px;
}

/* -- Desktop / tablet layout -------------------------------------------- */
.section-pain-points__desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1120px;
}

.section-pain-points__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 4px;
  text-align: center;
  color: var(--color-white);
}

.section-pain-points__rule {
  display: block;
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: #83eee9;
}

.section-pain-points__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: 966px;
}

.section-pain-points__illustration {
  flex: 0 0 auto;
  width: 260px;
}

.section-pain-points__illustration img {
  width: 100%;
}

.section-pain-points__card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 38px;
  list-style: none;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.1);
}

.section-pain-points__card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 32px;
  height: 32px;
  background: var(--color-white);
  border-radius: 4px;
  transform: translateY(-50%) rotate(45deg);
  z-index: 0;
}

.section-pain-points__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.section-pain-points__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.section-pain-points__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.45;
  color: #0b3633;
}

/* -- Mobile layout (hidden above the breakpoint) ------------------------- */
.section-pain-points__mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.section-pain-points__mobile-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 1.4px;
  text-align: center;
  color: var(--color-white);
}

.section-pain-points__mobile-rule {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: #83eee9;
}

.section-pain-points__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-pain-points__mobile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--color-white);
  border-radius: 12px;
}

.section-pain-points__mobile-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.section-pain-points__mobile-text {
  flex: 1 1 0%;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: #0b3633;
}

/* ==========================================================================
   Mobile (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .section-pain-points {
    padding: 56px 24px;
  }

  .section-pain-points__desktop {
    display: none;
  }

  .section-pain-points__mobile {
    display: flex;
  }
}

/* ==========================================================================
   Section 4: そのお悩み SmartDrive Boxで解決
   (Figma fileKey 9SRwH5O3JmSxJHOUi4z08W — Desktop 26:54 / Mobile 357:1421)
   ========================================================================== */

.section-features {
  background: var(--color-white);
  padding: 96px 24px;
  overflow: hidden;
}

.section-features__inner {
  width: 100%;
  max-width: 1070px;
  margin: 0 auto;
}

/* ---- Heading ---- */
.section-features__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  margin: 0 auto 96px;
}

.section-features__heading h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 4px;
  color: #0b3633;
}

.section-features__rule {
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: #83eee9;
}

/* ---- Feature row (shared) ---- */
/* Row structure/mechanism ported from smartdrive.co.jp/box/lp/mycar/'s .sd-sol-row:
   alternation via nth-child(row-reverse/row) rather than a per-row modifier class,
   and a checklist styled as ul.point-list with a CSS ::before checkmark instead of
   an <img> per item. Sizing/colors kept as our own design (Figma-derived), not
   copied from the reference site. */
.sd-sol-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 96px;
}

.sd-sol-row:last-child {
  margin-bottom: 64px;
}

.sd-sol-rows .sd-sol-row:nth-child(2n+1) {
  flex-direction: row;
}

.sd-sol-rows .sd-sol-row:nth-child(2n) {
  flex-direction: row-reverse;
}

/* Media / illustration column */
.sd-sol-img-wrapper {
  position: relative;
  flex: 1 1 0%;
  aspect-ratio: 1 / 0.973;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 555px;
}

.feature-row__decor {
  position: absolute;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.feature-row__decor--gray {
  inset: 0;
  width: 100%;
  height: 100%;
}

.feature-row__decor--teal {
  width: 38%;
  height: 38%;
  right: 0;
  bottom: 0;
}

.feature-row__decor img {
  width: 84%;
  height: auto;
}

/* Last row's gray decor sits behind the phone screenshots — remove the
   multiply blend there so it doesn't darken/shadow them. */
.sd-sol-row:last-child .feature-row__decor--gray {
  mix-blend-mode: normal;
}

.sd-sol-img-wrapper>img,
.sd-sol-img-wrapper>video {
  position: relative;
  z-index: 1;
  width: 470px;
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
}

.feature-row__phones {
  position: relative;
  z-index: 1;
  display: none;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.feature-row__phones img {
  width: 46%;
  border-radius: 12px;
}

/* Text content column */
.sd-sol-text {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 420px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sd-sol-text h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
  letter-spacing: 2.3px;
  color: #333;
}

.sd-sol-text p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.sd-sol-text ul.point-list {
  width: 100%;
  margin: 0;
  padding: 18px;
  list-style: none;
  background: #f2f2f2;
  border-radius: 12px;
}

.sd-sol-text ul.point-list li {
  position: relative;
  padding: 0 0 0 36px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.8px;
  color: #333;
}

.sd-sol-text ul.point-list li+li {
  margin-top: 12px;
}

.sd-sol-text ul.point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-image: url('../img/box/sec4-icon-checkmark.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.feature-row__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.feature-row__note img {
  width: 20px;
  height: auto;
}

.feature-row__note span {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.6px;
  color: var(--color-black);
  text-decoration: underline;
}

/* ---- CTA buttons ---- */
.section-features__cta {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.feature-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 13px 16px 13px 24px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.feature-btn span{
  font: inherit;
}

.feature-btn img {
  width: 38px;
  height: auto;
}

.feature-btn--filled {
  background: var(--color-yellow);
  color: var(--color-green-dark);
  box-shadow: 0 10px 24px 0 rgba(4, 95, 88, 0.4);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.feature-btn--filled:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.feature-btn--filled:hover img {
  filter: brightness(0) invert(1);
}

.feature-btn--outline {
  border: 2px solid var(--color-green-medium);
  color: var(--color-green-dark);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover per Figma variant 516:6465 — solid teal fill, white text + white icon. */
.feature-btn--outline:hover {
  background: var(--color-green-medium);
  color: var(--color-white);
}

.feature-btn--outline:hover img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Mobile (<=767px) — stacked layout matching Figma Mobile 357:1421
   ========================================================================== */
@media (max-width: 767px) {
  .section-features {
    padding: 64px 20px;
  }

  .section-features__heading {
    gap: 18px;
    margin-bottom: 64px;
  }

  .section-features__heading h2 {
    font-size: 28px;
    letter-spacing: 2.8px;
  }

  /* !important needed here to beat .sd-sol-rows .sd-sol-row:nth-child(...)'s
     higher specificity — same technique the reference site uses. */
  .sd-sol-row {
    flex-direction: column !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
  }

  .sd-sol-img-wrapper {
    order: 1;
    flex: none;
    width: 100%;
  }

  .sd-sol-img-wrapper>img,
  .sd-sol-img-wrapper>video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87%;
    max-width: none;
  }

  .sd-sol-img--desktop-only {
    display: none;
  }

  .feature-row__phones--mobile-only {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    gap: 0;
  }

  .sd-sol-text {
    order: 2;
    width: 100%;
    max-width: none;
    align-items: flex-start;
  }

  .sd-sol-text h3 {
    font-size: 23px;
  }

  .sd-sol-text p {
    font-size: 16px;
    line-height: 2;
  }

  .sd-sol-text ul.point-list li {
    font-size: 15px;
  }

  .section-features__cta {
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
  }

  .feature-btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Section 5 - Use cases by need (D:5:303 / M:349:2047)
   ========================================================================== */
.section-use-cases {
  background: #eaf8f7;
  padding: 96px 24px 108px;
}

.section-use-cases__container {
  max-width: 1180px;
  margin: 0 auto;
}

.section-use-cases__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 62px;
  text-align: center;
}

.section-use-cases__title {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 4px;
  color: #0b3633;
  word-break: break-word;
}

.section-use-cases__rule {
  display: block;
  width: 94px;
  height: 8px;
  margin: 18px auto 0;
  border-radius: 4px;
  background: #2bcabc;
}

.section-use-cases__lead {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 2px;
  color: #333;
  word-break: break-word;
}

.section-use-cases__br-mobile {
  display: none;
}

.section-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 20px;
}

.section-use-cases__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 20px;
  padding: 28px 21px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 12px 15px rgba(8, 41, 38, 0.08);
  text-align: center;
}

.section-use-cases__card-title {
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  word-break: break-word;
}

.section-use-cases__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 136px;
  overflow: hidden;
}

.section-use-cases__icon img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.section-use-cases__card-desc {
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.35;
  color: #4f4f4f;
  word-break: break-word;
}

/* ==========================================================================
   Mobile (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .section-use-cases {
    padding: 56px 24px;
  }

  .section-use-cases__head {
    gap: 18px;
    max-width: none;
    padding-bottom: 48px;
  }

  .section-use-cases__title {
    font-size: 28px;
    letter-spacing: 1.4px;
    line-height: 1.5;
  }

  .section-use-cases__rule {
    width: 64px;
    height: 4px;
    margin-top: 18px;
    background: #83eee9;
  }

  .section-use-cases__lead {
    font-size: 16px;
    line-height: 1.375;
    letter-spacing: normal;
    color: #4f4f4f;
  }

  .section-use-cases__br-mobile {
    display: inline;
  }

  .section-use-cases__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .section-use-cases__card {
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
  }

  .section-use-cases__card-title {
    font-size: 20px;
  }

  .section-use-cases__icon {
    display: none;
  }

  .section-use-cases__card-desc {
    font-size: 16px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Section 11 — Pricing (SmartDrive Box 料金体系)
   Figma: 9SRwH5O3JmSxJHOUi4z08W — node 345:3738 (desktop) / 369:1980 (mobile)
   ========================================================================== */

.section-pricing {
  padding: 96px 0;
  background: var(--color-white);
}

.section-pricing__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  max-width: 968px;
}

/* Heading
   ------------------------------------------------------------------------ */
.section-pricing__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.section-pricing__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 4px;
  color: #0b3633;
  text-align: center;
  white-space: nowrap;
}

.section-pricing__title-underline {
  display: block;
  width: 94px;
  height: 8px;
  border-radius: 4px;
  background: #83eee9;
}

/* Cards
   ------------------------------------------------------------------------ */
.section-pricing__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 32px 40px;
  width: 100%;
}

.pricing-card {
  background: var(--color-white);
  box-shadow: 0 10px 16px 0 rgba(2, 98, 120, 0.2);
  border-radius: 12px;
}

.pricing-card--price {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 799px;
  padding: 42px 32px;
}

.pricing-card__price {
  margin: 0;
  font-family: var(--font-heading);
  color: #2a706b;
  text-align: center;
}

.pricing-card__price-label {
  font-weight: 700;
  font-size: 24px;
  color: #282828;
  margin-right: 8px;
}

.pricing-card__price-amount {
  font-weight: 700;
  font-size: 70px;
}

.pricing-card__price-unit {
  font-weight: 700;
  font-size: 24px;
}

.pricing-card--option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 380px;
  padding: 32px 24px;
}

.pricing-card__icon {
  flex-shrink: 0;
  width: 74px;
  height: auto;
}

.pricing-card__option-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-card__option-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #282828;
  white-space: nowrap;
}

.pricing-card__option-price {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #282828;
}

.pricing-card__notes {
  width: 800px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  color: #4f4f4f;
}

/* Free trial CTA
   ------------------------------------------------------------------------ */
.pricing-trial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 799px;
  padding: 32px;
  background: #dcfefd;
  border-radius: 24px;
}

.pricing-trial__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #2a706b;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-align: center;
  white-space: nowrap;
}

.pricing-trial__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: 4.2px;
  color: var(--color-black);
  text-align: center;
}

.pricing-trial__desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  color: #333;
  text-align: center;
}

.pricing-trial__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px 13px 24px;
  background: var(--color-yellow);
  border-radius: 8px;
  box-shadow: 0 8px 20px 0 rgba(4, 95, 88, 0.4);
  transition: background-color 0.15s ease;
}

.pricing-trial__button:hover {
  background: var(--color-green-dark);
}

.pricing-trial__button:hover .pricing-trial__button-icon {
  filter: brightness(0) invert(1);
}

.pricing-trial__button span {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: #2a706b;
  transition: color 0.15s ease;
}

.pricing-trial__button:hover span {
  color: var(--color-white);
}

.pricing-trial__button-icon {
  flex-shrink: 0;
  width: 38px;
  height: auto;
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .section-pricing {
    padding: 64px 0;
  }

  .section-pricing__container {
    gap: 64px;
    max-width: 100%;
  }

  .section-pricing__heading {
    width: 100%;
  }

  .section-pricing__title {
    width: 100%;
    font-size: 28px;
    letter-spacing: 2.8px;
    white-space: normal;
  }

  .section-pricing__title-underline {
    background: #3edcd5;
  }

  .section-pricing__cards {
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    margin: 0 auto;
  }

  .pricing-card--price {
    width: 100%;
    padding: 18px;
  }

  .pricing-card__price-label {
    font-size: 19px;
  }

  .pricing-card__price-amount {
    font-size: 60px;
  }

  .pricing-card--option {
    width: 100%;
    padding: 18px;
    justify-content: center;
  }

  .pricing-card__option-name {
    white-space: normal;
  }

  .pricing-card__notes {
    width: 100%;
  }

  .pricing-trial {
    width: 100%;
    margin: 0 auto;
    padding: 24px;
  }

  .pricing-trial__heading {
    font-size: 32px;
    letter-spacing: normal;
  }

  .pricing-trial__desc {
    font-size: 15px;
  }

  .pricing-trial__button {
    width: 100%;
  }
}


/* ==========================================================================
   Reference-note popup (opened from .section-managed-data__ref badges)
   Ported from smartdrive.co.jp/box/lp/mycar/'s .sd-modal-overlay pattern
   ========================================================================== */
.section-managed-data__ref {
  cursor: pointer;
}

.sd-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 10px;
}

.sd-modal-overlay.is-open {
  display: flex;
}

.sd-modal-content {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 12px;
  max-width: 420px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  color: #333;
}

.sd-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #999999;
  background: none;
  border: none;
  padding: 0;
}

.sd-modal-content h4 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-green-dark);
}

.sd-modal-content p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.sd-modal-sample-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.sd-modal-citation {
  margin-top: 12px;
  font-size: 13px;
  color: #666;
}

.sd-modal-citation a {
  color: var(--color-green-medium);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .sd-modal-content {
    padding: 32px 20px;
  }
}

/* ==========================================================================
   電子車検証制度 risk popup (opened from .feature-row__note, section 1)
   Ported from test-common.net/box/lp/top1-2/'s .sd-modal-overlay for this
   same trigger — structure/copy/image sources kept verbatim.
   ========================================================================== */
.sd-modal-content--wide {
  max-width: 850px;
  padding: 50px 30px 40px;
}

.sd-modal-alert-box {
  background-color: #f5f5f5;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 25px;
}

.sd-modal-alert-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.sd-modal-alert-header img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.sd-modal-alert-header h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #d93025;
}

.sd-modal-alert-body {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.sd-modal-fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1.2 1 0%;
}

.sd-modal-fact-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.sd-modal-fact-list li:last-child {
  margin-bottom: 0;
}

.sd-modal-fact-list li::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  color: #d93025;
}

.sd-modal-img-area {
  flex: 0.8 1 0%;
  text-align: center;
}

.sd-modal-img-area img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.sd-modal-img-caption {
  margin: 5px 0 0;
  font-size: 10px;
  color: #999;
  text-align: center;
}

.sd-modal-solution-area {
  background-color: #fff5f5;
  padding: 24px;
  border-radius: 8px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.sd-modal-solution-text {
  flex: 1.2 1 0%;
}

.sd-modal-solution-text strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  color: #d93025;
}

.sd-modal-solution-text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.sd-modal-app-img {
  flex: 0.8 1 0%;
  text-align: center;
}

.sd-modal-app-img img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 850px) {
  .sd-modal-content--wide {
    padding: 40px 8px 30px;
  }

  .sd-modal-alert-body,
  .sd-modal-solution-area {
    flex-direction: column;
    gap: 20px;
  }

  .sd-modal-img-area,
  .sd-modal-app-img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}


.mobilebr {
  display: none;
}

@media (max-width: 400px) {
  .mobilebr {
    display: block;
  }
}

.sd-sol-row:last-child img {
  box-shadow: none;
}

/* ==========================================================================
   Mobile-only tap-to-zoom lightbox for .doctabs__panel-image (D:530:6541)
   "ダブルクリックで拡大（アマゾンのプロダクトページのような）" — Amazon-style
   double-tap-to-zoom, plus native pinch-zoom via touch-action:pinch-zoom.
   The image only displays within .doctabs-lightbox__viewport (matching the
   design's "UIframe" bounds) — that box has a fixed size and overflow:auto,
   so pinching/panning past its edges is clipped rather than growing over
   the close button, which sits outside it in the overlay's own free space.
   ========================================================================== */
.doctabs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px 24px;
  background: rgba(0, 0, 0, 0.9);
}

.doctabs-lightbox.is-open {
  display: flex;
}

.doctabs-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
}

.doctabs-lightbox__close img {
  width: 16px;
  height: 16px;
}

.doctabs-lightbox__hint {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

.doctabs-lightbox__viewport {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  touch-action: none;
  position: relative;
  height: calc(100% - 176px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.doctabs-lightbox__viewport img {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.doctabs-lightbox__viewport img.is-panning {
  transition: none;
}

.doctabs-lightbox__thumbs {
  display: flex;
  gap: 8px;
  width: calc(100% - 48px);
  max-width: 480px;
}

.doctabs-lightbox__thumb {
  flex: 1 1 0%;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f6f5;
}

.doctabs-lightbox__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctabs-lightbox__thumb[aria-selected="true"] {
  border-color: var(--color-green-medium);
}

.doctabs-mobileexp {
  font-size: 12px;
  text-align: center;
  margin-top: 39px;
  color: #4F4F4F;
  display: none;
}


@media ((max-width: 767px)) {
  .doctabs-mobileexp {
    display: block;
  }
}