/* bottom-carousel.css */
/* Bottom Carousel */
.bottom-carousel {
  --swiper-navigation-color: var(--color-black);
  --swiper-pagination-color: var(--color-amber);
  --swiper-pagination-bullet-inactive-color: var(--color-gray);
  --swiper-pagination-bullet-inactive-opacity: 1;

  background: var(--color-white);
}
.bottom-carousel .carousel__container {
  max-width: var(--max-width-2xl);
  padding: var(--spacing-5) var(--spacing-10) var(--spacing-4);
  margin: 0 auto;
}
@media (max-width: 960px) {
  .bottom-carousel .carousel__container {
    padding: var(--spacing-5) 0 var(--spacing-4);
  }
}
.bottom-carousel .carousel__swiper {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-4);
}
.bottom-carousel .carousel__swiper .swiper-slide {
  width: var(--size-300);
  height: auto;
}
.bottom-carousel .carousel__swiper--single-slide {
  margin-bottom: var(--spacing-1);
}
.bottom-carousel .carousel__swiper--single-slide .swiper-wrapper {
  width: fit-content;
  margin: 0 auto;
}
.bottom-carousel .carousel__swiper--single-slide .swiper-slide {
  width: var(--size-300);
  max-width: var(--size-300);
}
.bottom-carousel .carousel__swiper--two-slides {
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
  margin-bottom: var(--spacing-1);
}
@media (max-width: 767.98px) {
  .bottom-carousel .carousel__swiper--two-slides {
    overflow: visible;
    padding-bottom: var(--spacing-1);
    margin-bottom: 0;
  }

  .bottom-carousel .carousel__swiper--two-slides .swiper-wrapper {
    width: 100% !important;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    transform: none !important;
  }

  .bottom-carousel .carousel__swiper--two-slides .swiper-slide {
    width: 100% !important;
    max-width: var(--size-320);
    margin: 0 !important;
  }
}
.bottom-carousel .carousel__swiper--two-slides .swiper-wrapper {
  width: fit-content;
  margin: 0 auto;
}
.bottom-carousel .carousel__swiper--two-slides .swiper-slide {
  width: var(--size-480);
  max-width: var(--size-480);
}
.bottom-carousel .carousel__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.bottom-carousel .carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.bottom-carousel .carousel__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
}
.bottom-carousel .carousel__nav-button {
  display: flex;
  width: var(--size-32);
  height: var(--size-32);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}
.bottom-carousel .carousel__nav-button:hover {
  opacity: 0.7;
}
.bottom-carousel .carousel__nav-button.swiper-button-disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.bottom-carousel .carousel__nav-button svg {
  width: var(--size-18);
  height: var(--size-18);
  color: var(--color-gray-lightest);
}
.bottom-carousel .carousel__pagination {
  display: flex;
  width: fit-content !important;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}
.bottom-carousel .carousel__autoplay-toggle {
  position: relative;
  display: inline-flex;
  width: var(--size-32);
  height: var(--size-32);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--color-text-brown);
  transition: opacity var(--transition-fast);
}
.bottom-carousel .carousel__autoplay-toggle:hover {
  opacity: 0.7;
}
.bottom-carousel .carousel__autoplay-toggle::after {
  display: block;
  width: 1px;
  height: var(--size-24);
  margin-left: var(--spacing-4);
  background: var(--color-border-gray);
  content: "";
}
.bottom-carousel .carousel__autoplay-icon {
  display: none;
  width: var(--size-18);
  height: var(--size-18);
}
.bottom-carousel .carousel__autoplay-toggle[aria-pressed="false"] .carousel__autoplay-icon--pause {
  display: inline-flex;
}
.bottom-carousel .carousel__autoplay-toggle[aria-pressed="true"] .carousel__autoplay-icon--play {
  display: inline-flex;
}
.bottom-carousel .carousel__autoplay-icon--pause svg,
.bottom-carousel .carousel__autoplay-icon--play svg {
  width: var(--size-20);
  height: var(--size-20);
  color: var(--color-gray-lightest);
}
/* Swiper Pagination */
.bottom-carousel .swiper-pagination-bullet {
  width: var(--size-6);
  height: var(--size-6);
  padding: 0;
  border: none;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-gray-lightest);
  opacity: 1;
  transition: all var(--transition-fast);
}
.bottom-carousel .swiper-pagination-bullet:hover {
  opacity: 0.7;
}
.bottom-carousel .swiper-pagination-bullet-active {
  width: 9px;
  height: 9px;
  background: var(--color-amber);
}

.bottom-carousel__mount:empty {
  display: none;
}

.bottom-carousel__loading {
  padding: var(--spacing-10);
  color: var(--color-text-gray);
  font-size: var(--size-14);
  text-align: center;
}

/* concept.css */
/* Concept */
.concept {
  /* 16px minimum inset on all sides; vreserve = top gutter + close (36px) + gap + bottom gutter */
  --concept-video-modal-gutter: 16px;
  --concept-video-modal-vreserve: calc(
    var(--concept-video-modal-gutter) +
    36px +
    var(--spacing-2) +
    var(--concept-video-modal-gutter)
  );
  position: relative;
  overflow: hidden;
  padding: var(--spacing-18) 0;
  background: var(--color-white);
}
.concept__decoration {
  position: absolute;
  width: 260px;
  height: 460px;
  pointer-events: none;
}
@media (max-width: 960px) {
  .concept__decoration {
    width: 200px;
    height: 500px;
  }
}
.concept__decoration--top-left {
  top: 0;
  left: 0;
  border-radius: 0 0 50% 50% / 0 0 100px 100px;
  background: linear-gradient(173.64deg, rgb(255 251 210 / 10%) 31.38%, #fffbd2 88.05%);
}
.concept__decoration--bottom-right {
  right: 0;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  background: linear-gradient(173.64deg, #fffbd2 31.38%, rgb(255 251 210 / 10%) 88.05%);
}
.concept__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-xl);
  margin: 0 auto;
}
@media (max-width: 960px) {
  .concept__container {
    padding: 0 var(--spacing-4);
  }
}
.concept__title {
  margin-bottom: var(--spacing-6);
  color: var(--color-black);
  font-size: var(--size-30);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}
@media (max-width: 960px) {
  .concept__title {
    font-size: var(--size-24);
  }
}
.concept__title br {
  display: none;
}
@media (max-width: 960px) {
  .concept__title br {
    display: block;
  }
}
.concept__heading {
  margin-bottom: var(--spacing-10);
  color: var(--color-black);
  font-size: var(--size-26);
  font-weight: lighter;
  line-height: var(--line-height-normal);
}
@media (max-width: 960px) {
  .concept__heading {
    margin-bottom: var(--spacing-14);
    font-size: var(--size-22);
  }
}
.concept__heading__br--mobile {
  display: none;
}
@media (max-width: 960px) {
  .concept__heading__br--mobile {
    display: block;
  }
}
.concept__video-wrapper {
  margin-bottom: var(--spacing-10);
}
@media (max-width: 960px) {
  .concept__video-wrapper {
    margin-bottom: var(--spacing-14);
  }
}
.concept__video {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-2);
}
.concept__video-trigger {
  width: 100%;
}
.concept__video-thumb {
  display: block;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.concept__video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.concept__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 116px;
  height: 82px;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  border-radius: 14px;
  background: #f00;
  transform: translate(-50%, -50%);
}
/* Keep original SVG size on mobile */
@media (max-width: 960px) {
  .concept__video-play {
    width: 68px;
    height: 48px;
    padding-top: 0;
  }

  .concept__video-play svg {
    width: 24px !important;
    height: 24px !important;
  }
}
.concept__video-play svg {
  width: 80px;
  height: 80px;
  color: var(--color-white);
}
.concept__video-label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
}
.concept__video-caption {
  color: var(--color-black);
  font-size: var(--size-12);
}
@media (max-width: 960px) {
  .concept__video-caption {
    font-size: var(--size-12);
  }
}
.concept__video-modal {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  display: none;
  width: 100vw;
  height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: var(--concept-video-modal-gutter);
  overflow-y: auto;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.concept__video-modal.is-open {
  display: flex;
  pointer-events: auto;
  touch-action: none;
}
.concept__video-overlay {
  position: absolute;
  background: rgb(0 0 0 / 70%);
  inset: 0;
}
.concept__video-modal-content {
  position: relative;
  z-index: 1;
  display: flex;

  /* Shrink width on short viewports so 16:9 height fits (landscape / low dvh) */
  width: min(
    1278px,
    100%,
    calc((100vh - var(--concept-video-modal-vreserve)) * 16 / 9),
    calc((100dvh - var(--concept-video-modal-vreserve)) * 16 / 9)
  );
  max-width: 100%;
  flex-direction: column;
  flex-shrink: 1;
  align-items: flex-end;
  margin-block: auto;
}
.concept__video-modal-close {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  margin-bottom: var(--spacing-2);
  background: var(--color-white);
  cursor: pointer;
}
.concept__video-modal-close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}
.concept__video-modal-close svg {
  width: 16px;
  height: 16px;
}
.concept__video-modal-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - var(--concept-video-modal-vreserve));
  align-self: stretch;
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 9;
  background: var(--color-black);
}
.concept__video-modal-frame.is-playing .concept__video-modal-play {
  opacity: 0;
  pointer-events: none;
}
.concept__video-modal-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.concept__video-modal-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-6);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  box-shadow: var(--shadow-sm);
  color: var(--color-white);
  cursor: pointer;
  font-size: var(--size-16);
  font-weight: var(--font-weight-bold);
  gap: var(--spacing-2);
  transform: translate(-50%, -50%);
  transition:
    background var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}
@media (max-width: 960px) {
  .concept__video-modal-play {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--size-14);
  }
}
.concept__video-modal-play:hover {
  background: var(--color-secondary-hover);
}
.concept__video-modal-play:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-white);
  outline-offset: var(--focus-ring-offset);
}
.concept__video-modal-play:disabled {
  opacity: 0;
  pointer-events: none;
}
.concept__video-modal-play-icon {
  display: flex;
  width: var(--size-20);
  height: var(--size-20);
  align-items: center;
  justify-content: center;
}
.concept__video-modal-play-icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-white);
}
.concept__video-modal-play-text {
  line-height: var(--line-height-none);
}
.concept__accordion-item {
  border: 1px solid var(--color-border-gray);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.concept__accordion-item:not([open]):hover {
  border-color: var(--color-secondary-hover);
}
.concept__accordion-item:not([open]):hover .concept__accordion-title,
.concept__accordion-item:not([open]):hover .concept__accordion-icon {
  color: var(--color-secondary-hover);
}
.concept__accordion-item[open]:has(> .concept__accordion-summary:hover) {
  border-color: var(--color-secondary-hover);
}
.concept__accordion-item[open]:has(> .concept__accordion-summary:hover) .concept__accordion-title,
.concept__accordion-item[open]:has(> .concept__accordion-summary:hover) .concept__accordion-icon {
  color: var(--color-secondary-hover);
}
.concept__accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5) var(--spacing-4);
  cursor: pointer;
  list-style: none;
}
.concept__accordion-summary::-webkit-details-marker {
  display: none;
}
.concept__accordion-title {
  color: var(--color-black);
  font-size: var(--size-16);
  font-weight: var(--font-weight-bold);
}
.concept__accordion-icon {
  display: flex;
  width: var(--size-24);
  height: var(--size-24);
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  font-size: var(--size-18);
  font-weight: var(--font-weight-bold);
}
.concept__accordion-icon::before {
  content: "+";
}
details[open] .concept__accordion-icon::before {
  content: "−";
}
.concept__accordion-content {
  padding: var(--spacing-10);
  border-top: 1px solid var(--color-border-gray);
}
@media (max-width: 960px) {
  .concept__accordion-content {
    padding: var(--spacing-6);
  }
}
/* Detail stack within accordion */
.concept__detail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-14);
}
/* 56px */
@media (max-width: 960px) {
  .concept__detail-stack {
    gap: var(--spacing-10); /* 40px on mobile */
  }
}
.concept__detail-block {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
}
/* 40px */
@media (max-width: 767px) {
  .concept__detail-block {
    flex-direction: column;
    gap: var(--spacing-4); /* 16px on mobile */
  }
}
.concept__detail-block:first-child .concept__detail-image img {
  width: 229px;
  height: 187px;
  padding-top: 11px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .concept__detail-block:first-child .concept__detail-image img {
    width: 100%;
    height: auto;
  }
}
.concept__detail-block:last-child .concept__detail-image img {
  width: 222px;
  height: 187px;
  padding: 4px 0;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .concept__detail-block:last-child .concept__detail-image img {
    width: 100%;
    height: auto;
  }
}
.concept__detail-text {
  display: flex;
  max-width: 560px;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-2);
}
/* 8px */
@media (max-width: 960px) {
  .concept__detail-text {
    max-width: 100%;
  }
}
.concept__detail-title {
  color: var(--color-black);
  font-size: var(--size-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}
.concept__detail-description {
  min-width: 560px;
  color: var(--color-black);
  font-size: var(--size-14);
  font-weight: var(--font-weight-normal);
}
@media (max-width: 960px) {
  .concept__detail-description {
    min-width: 100%;
  }
}
.concept__detail-image {
  overflow: hidden;
  width: 280px;
  flex-shrink: 0;
  border-radius: var(--radius-sm); /* 6px */
  background: var(--color-cream);
}
@media (max-width: 767px) {
  .concept__detail-image {
    width: 100%;
  }
}
.concept__detail-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* contribution.css */
/* Environment Contribution */
.contribution {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-18) 0;
  background: var(--color-accent-yellow);
}
@media (max-width: 960px) {
  .contribution {
    padding: var(--spacing-18) var(--spacing-4);
  }
}
.contribution__decoration {
  position: absolute;
  width: 260px;
  height: 460px;
  pointer-events: none;
}
@media (max-width: 960px) {
  .contribution__decoration {
    width: 200px;
    height: 500px;
  }
}
.contribution__decoration--top-left {
  top: 0;
  left: 0;
  border-radius: 0 0 50% 50% / 0 0 100px 100px;
  background: linear-gradient(173.64deg, rgb(255 251 210 / 10%) 31.38%, #fffbd2 88.05%);
}
.contribution__decoration--bottom-right {
  right: 0;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  background: linear-gradient(173.64deg, #fffbd2 31.38%, rgb(255 251 210 / 10%) 88.05%);
}
.contribution__container {
  position: relative;
  max-width: var(--max-width-xl);
  margin: 0 auto;
}
.contribution__card {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 5px 16px rgb(74 31 6 / 5%);
}
@media (max-width: 960px) {
  .contribution__card {
    flex-direction: column;
  }
}
.contribution__text {
  display: flex;
  max-width: 426px;
  flex-direction: column;
  padding: 0 var(--spacing-10);
  gap: var(--spacing-3);
}
@media (max-width: 960px) {
  .contribution__text {
    width: 100%;
    padding: var(--spacing-6) var(--spacing-4);
  }
}
.contribution__title-line {
  color: var(--color-black);
  font-size: var(--size-30);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
@media (max-width: 960px) {
  .contribution__title-line {
    font-size: var(--size-24);
  }
}
.contribution__description {
  color: var(--color-black);
  font-size: var(--size-16);
  line-height: var(--line-height-relaxed);
}
.contribution__note {
  color: var(--color-text-gray);
  font-size: var(--size-12);
  line-height: var(--line-height-relaxed);
}
@media (max-width: 960px) {
  .contribution__note__br--pc {
    display: none;
  }
}
.contribution__image-wrapper {
  display: flex;
  min-height: 448px;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-8);
  margin-right: auto;
  gap: var(--spacing-5);
  text-align: center;
  word-break: break-all;
}
@media (max-width: 960px) {
  .contribution__image-wrapper {
    width: fit-content;
    height: auto;
    min-height: auto;
    padding: var(--spacing-4);
    padding-top: 0;
    padding-bottom: var(--spacing-6);
    margin-left: auto;
  }
}
.contribution__energy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.contribution__energy-value {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-2);
  line-height: var(--line-height-none);
}
.contribution__energy-number-wrapper {
  display: flex;
  color: var(--color-secondary);
  font-family: var(--font-family-en);
  font-size: 72px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
}
@media (max-width: 960px) {
  .contribution__energy-number-wrapper {
    font-size: 50px;
  }
}
.contribution__energy-number {
  /* Reserve width for max value (e.g. 8,114,970) to prevent layout shift during count-up */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.3px !important;
}
.contribution__energy-unit {
  align-self: flex-end;
  padding-bottom: var(--spacing-2);
  color: var(--color-black);
  font-family: var(--font-family-en);
  font-size: var(--size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
  word-break: keep-all;
}
@media (max-width: 960px) {
  .contribution__energy-unit {
    padding-bottom: var(--spacing-1);
  }
}
.contribution__timestamp {
  width: 100%;
  margin: 0;
  color: var(--color-text-gray);
  font-size: var(--size-14);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-none);
  text-align: left;
}
.contribution__forest {
  flex-wrap: nowrap;
  gap: var(--spacing-3);
}
@media (max-width: 960px) {
  .contribution__forest {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.contribution__forest-caption {
  margin: 0;
  margin-left: 48px;
  color: var(--color-black);
  font-size: var(--size-16);
  font-weight: var(--font-weight-bold);
  text-align: left;
}
@media (max-width: 960px) {
  .contribution__forest-caption {
    margin-left: 44px;
  }
}
.contribution__forest-value {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-2);
}
.contribution__forest-equal {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 24px;
  flex-shrink: 0;
  align-self: center;
  margin-right: var(--spacing-4);
}
@media (max-width: 960px) {
  .contribution__forest-equal {
    width: 25px;
    height: 20px;
  }
}
.contribution__forest-equal::before,
.contribution__forest-equal::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 8px;
  background: var(--color-text-gray);
  content: "";
}
@media (max-width: 960px) {
  .contribution__forest-equal::before,
  .contribution__forest-equal::after {
    height: calc(20px / 3);
  }
}
.contribution__forest-equal::before {
  top: 0;
}
.contribution__forest-equal::after {
  bottom: 0;
}
.contribution__forest-number-wrapper {
  display: flex;
  color: var(--color-secondary);
  font-family: var(--font-family-en);
  font-size: 82px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
}
@media (max-width: 960px) {
  .contribution__forest-number-wrapper {
    font-size: 52px;
  }
}
.contribution__forest-number {
  /* Reserve width for max value (e.g. 220,000) to prevent layout shift during count-up */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.3px !important;
}
.contribution__forest-unit {
  align-self: end;
  padding-bottom: var(--spacing-3);
  color: var(--color-black);
  font-size: var(--size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
  word-break: keep-all;
}
@media (max-width: 960px) {
  .contribution__forest-unit {
    padding-bottom: var(--spacing-1);
  }
}
.contribution__tree-illustration {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 284px;
  height: 114px;
  align-items: flex-end;
  align-self: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-2) 0;
}
.contribution__ground {
  width: 100%;
  height: 52px;
  border-radius: 50%;
  background: var(--color-border-light);
}
.contribution__trees {
  position: absolute;
  bottom: 26px;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--spacing-4);
  gap: var(--spacing-4);
}
.contribution__tree {
  width: 2.7rem;
  height: auto;
}

/* dr.css */
/* DR Column – Old design, new layout (image left, content right). */
.dr {
  padding: var(--spacing-18) 0;
  background: var(--color-cream);
}
@media (max-width: 960px) {
  .dr {
    padding: var(--spacing-18) var(--spacing-4);
  }
}
.dr__container {
  max-width: var(--max-width-xl);
  margin: 0 auto;
}
.dr__card {
  position: relative;
  padding: var(--spacing-10);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 5px 16px rgb(74 31 6 / 5%);
}
@media (max-width: 960px) {
  .dr__card {
    padding: var(--spacing-4);
  }
}
.dr__header {
  margin-bottom: var(--spacing-6);
}
@media (max-width: 960px) {
  .dr__header {
    margin-bottom: var(--spacing-4);
  }
}
/* Up to 3 DR items: one row on desktop, stack on small screens */
.dr__articles {
  display: grid;
  width: 100%;
  gap: var(--spacing-4);
}
@media (max-width: 960px) {
  .dr__articles {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 960.02px) {
  .dr__articles[data-dr-article-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .dr__articles[data-dr-article-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dr__articles[data-dr-article-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Narrow columns: image on top (2–3 cards per row) */
.dr__articles[data-dr-article-count="2"] .dr__article,
.dr__articles[data-dr-article-count="3"] .dr__article {
  height: 100%;
  flex-direction: column;
  padding: var(--spacing-4);
}
.dr__articles[data-dr-article-count="2"] .dr__media,
.dr__articles[data-dr-article-count="3"] .dr__media {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}
.dr__articles[data-dr-article-count="2"] .dr__content,
.dr__articles[data-dr-article-count="3"] .dr__content {
  min-width: 0;
  flex: 1;
}
/* Side accent bar only for single-card layout */
.dr__card:has([data-dr-article-count="2"]) .dr__indicator,
.dr__card:has([data-dr-article-count="3"]) .dr__indicator {
  display: none;
}
.dr__title {
  margin-bottom: var(--spacing-3);
  color: var(--color-black);
  font-size: var(--size-30);
  font-weight: var(--font-weight-bold);
}
@media (max-width: 960px) {
  .dr__title {
    font-size: var(--size-24);
  }
}
.dr__article {
  position: relative;
  display: flex;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-4);
  border: 1px solid var(--color-border-gray);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  gap: var(--spacing-5);
  transition: box-shadow var(--transition-base);
}
@media (max-width: 960px) {
  .dr__article {
    flex-direction: column;
    padding: var(--spacing-4);
  }
}
.dr__article:hover {
  box-shadow: var(--shadow-sm);
}
.dr__media {
  overflow: hidden;
  min-width: 0;
  flex: 0 0 30%;
}
@media (max-width: 960px) {
  .dr__media {
    flex: 0 0 auto;
  }
}
.dr__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dr__content {
  display: flex;
  flex: 1;
  gap: var(--spacing-5);
}
.dr__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-2);
}
.dr__article-title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--size-20);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}
.dr__article-description {
  margin: 0;
  color: var(--color-black);
  font-size: var(--size-14);
  line-height: var(--line-height-normal);
}
.dr__cta {
  align-self: flex-end;
  margin-top: auto;
}
.dr__indicator {
  position: absolute;
  top: 51px;
  left: 0;
  width: 4px;
  height: 23px;
  background: var(--color-primary);
}
@media (max-width: 960px) {
  .dr__indicator {
    top: 23px;
  }
}

/* faq-custom.css */
@media (max-width: 960px) {
  .faq {
    padding: var(--spacing-18) var(--spacing-4);
  }
}
.faq__card {
  padding: var(--spacing-18) 0 var(--spacing-10);
}
.faq__title {
  font-size: var(--size-30);
}
@media (max-width: 960px) {
  .faq__title {
    font-size: var(--size-24);
  }
}

/* intro.css */
/* Introduction */
.intro {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--spacing-10) 0;
  background: var(--color-white);
}
@media (max-width: 960px) {
  .intro {
    padding: var(--spacing-10) 0 0;
  }
}
.intro__container {
  position: relative;
  z-index: 100;
  display: grid;
  max-width: var(--max-width-3xl);
  margin: 0 var(--spacing-10);
  gap: var(--spacing-14);
  grid-template-columns: 1fr 586px;
}
@media (max-width: 960px) {
  .intro__container {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .intro__container {
    margin: 0 var(--spacing-4);
    gap: 0;
    grid-template-columns: 1fr;
  }
}
.intro__content {
  display: flex;
  flex-direction: column;
  margin-top: 64px;
  gap: var(--spacing-6);
}
@media (max-width: 960px) {
  .intro__content {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .intro__content {
    align-items: center;
    margin-bottom: var(--spacing-6);
  }
}
.intro__logo img {
  width: 346px;
  height: auto;
}
@media (max-width: 960px) {
  .intro__logo img {
    width: 272px;
  }
}
.intro__heading {
  color: var(--color-black);
  font-size: var(--size-26);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}
@media (max-width: 960px) {
  .intro__heading {
    max-width: 198px;
    font-size: var(--size-22);
  }

  .intro__heading br {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .intro__heading {
    text-align: center;
  }
}
.intro__heading br {
  display: none;
}
.intro__text {
  font-size: var(--size-18);
  line-height: var(--line-height-relaxed);
}
.intro__text .tooltip__trigger-icon {
  top: 33%;
}
@media (max-width: 960px) {
  .intro__text .tooltip__trigger-icon {
    top: 33%;
  }
}
.intro__illustration {
  display: flex;
  max-width: 586px;
  justify-content: center;
  margin: 0 auto;
}
.intro__illustration img {
  width: 100%;
  height: auto;
}
.intro__gloss {
  display: inline-flex;
  align-items: center;
  color: var(--color-blue);
  gap: var(--spacing-1);
  text-decoration: underline;
}

/* news-banner.css */
/* News Banner */
.news-banner {
  border-bottom: 1px solid var(--color-border-light);
  margin: 0 auto;
  background: var(--color-white);
  font-size: var(--size-12);
}
.news-banner__icon {
  min-width: var(--size-24);
  height: var(--size-24);
  color: var(--color-amber-dark);
}
.news-banner__container {
  display: flex;
  max-width: var(--max-width-2xl);
  align-items: center;
  padding: var(--spacing-3) var(--spacing-10);
  margin: 0 auto;
  gap: var(--spacing-2);
}
@media (max-width: 960px) {
  .news-banner__container {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-3) var(--spacing-4);
  }
}
.news-banner__arrow {
  margin-left: var(--spacing-3);
  color: var(--color-amber-dark);
}
.news-banner__loading {
  flex: 1;
  color: var(--color-text-gray);
  font-size: var(--size-12);
}
.news-banner__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-2);
}
@media (max-width: 960px) {
  .news-banner__list {
    gap: var(--spacing-4);
  }
}
.news-banner__list[hidden] {
  display: none;
}
.news-banner__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
@media (max-width: 960px) {
  .news-banner__item {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
  }
}
.news-banner__item[hidden] {
  display: none;
}
.news-banner__link {
  display: flex;
  flex: 1;
  align-items: center;
  color: var(--color-black);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
@media (max-width: 960px) {
  .news-banner__link {
    width: 100%;
    flex: none;
  }
}
.news-banner__link[hidden] {
  display: none;
}
.news-banner__link:hover {
  opacity: 0.7;
}
.news-banner__date {
  margin-right: var(--spacing-2);
  color: var(--color-text-gray);
  font-family: var(--font-family-en);
}
@media (max-width: 960px) {
  .news-banner__date {
    font-size: var(--size-14);
  }
}
.news-banner__text {
  display: flex;
  flex: 1;
  align-items: center;
  color: var(--color-black);
}
@media (max-width: 960px) {
  .news-banner__text {
    font-size: var(--size-12);
  }
}
.news-banner__text p {
  font-size: var(--size-14);
  text-decoration: underline;
}

/* news.css */
/* News */
.news {
  padding: var(--spacing-18) 0;
  background: var(--color-cream);
}
@media (max-width: 960px) {
  .news {
    padding: var(--spacing-18) var(--spacing-4);
  }
}
/* White background for news page */
.news-page .news {
  background: var(--color-white);
}
.news__container {
  max-width: var(--max-width-lg);
  margin: 0 auto;
}
.news__title {
  margin-bottom: var(--spacing-6);
  color: var(--color-black);
  font-size: var(--size-30);
  font-weight: var(--font-weight-bold);
}
@media (max-width: 960px) {
  .news__title {
    font-size: var(--size-24);
  }
}
.news__list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-6);
  gap: var(--spacing-3);
}
.news__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.news__item {
  border: 1px solid var(--color-border-gray);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.news__item:not([open]):hover {
  border-color: var(--color-secondary-hover);
}
.news__item:not([open]):hover .news__item-title,
.news__item:not([open]):hover .news__toggle {
  color: var(--color-secondary-hover);
}
.news__item[open]:has(> .news__summary:hover) {
  border-color: var(--color-secondary-hover);
}
.news__item[open]:has(> .news__summary:hover) .news__item-title,
.news__item[open]:has(> .news__summary:hover) .news__toggle {
  color: var(--color-secondary-hover);
}
.news__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5) var(--spacing-6);
  cursor: pointer;
  gap: 20px;
  list-style: none;
}
@media (max-width: 960px) {
  .news__summary {
    padding: var(--spacing-4);
  }
}
.news__summary::-webkit-details-marker {
  display: none;
}
.news__info {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--spacing-6);
}
@media (max-width: 960px) {
  .news__info {
    display: grid;
    gap: var(--spacing-3);
  }
}
.news__info-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.news__date {
  min-width: 90px;
  margin-right: var(--spacing-4);
  color: var(--color-text-gray);
  font-family: var(--font-family-en);
  font-size: var(--size-12);
}
.news__badge {
  min-width: 120px;
  padding: 2px var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--size-12);
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.news__badge--important {
  background: var(--color-secondary-hover);
  color: var(--color-white);
}
.news__badge--notice {
  background: var(--color-blue);
  color: var(--color-white);
}
.news__badge--outage {
  background: var(--color-text-gray);
  color: var(--color-white);
}
.news__badge--maintenance {
  background: var(--color-primary);
  color: var(--color-white);
}
.news__badge--campaign {
  background: var(--color-secondary);
  color: var(--color-white);
}
.news__item-title {
  flex: 1;
  color: var(--color-black);
  font-size: var(--size-14);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}
.news__toggle {
  display: flex;
  width: var(--size-24);
  height: var(--size-24);
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  font-size: var(--size-20);
  line-height: 1;
}
.news__toggle::before {
  content: "+";
}
details[open] .news__toggle::before {
  content: "−";
}
.news__content-detail {
  padding: 0 var(--spacing-6) var(--spacing-5) var(--spacing-6);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: 1px solid var(--color-border-light);
}
@media (max-width: 960px) {
  .news__content-detail {
    padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
  }
}
.news__rich-text {
  padding-top: var(--spacing-4);
  color: var(--color-black);
  font-size: var(--size-14);
  line-height: var(--line-height-relaxed);
}
/* Rich text elements styling */
.news__rich-text p {
  margin-bottom: var(--spacing-3);
}
.news__rich-text p:last-child {
  margin-bottom: 0;
}
.news__rich-text h1,
.news__rich-text h2,
.news__rich-text h3,
.news__rich-text h4,
.news__rich-text h5,
.news__rich-text h6 {
  margin-bottom: var(--spacing-2);
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
.news__rich-text h2 {
  font-size: var(--size-18);
}
.news__rich-text h3 {
  font-size: var(--size-16);
}
.news__rich-text ul,
.news__rich-text ol {
  padding-left: var(--spacing-6);
  margin-bottom: var(--spacing-3);
}
.news__rich-text li {
  margin-bottom: var(--spacing-1);
}
.news__rich-text a {
  color: var(--color-blue);
  text-decoration: underline;
}
.news__rich-text a:hover {
  color: var(--color-blue);
}
.news__rich-text strong {
  font-weight: var(--font-weight-bold);
}
.news__rich-text em {
  font-style: italic;
}
.news__rich-text code {
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-gray-light);
  font-family: monospace;
  font-size: var(--size-12);
}
.news__rich-text pre {
  padding: var(--spacing-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-3);
  background: var(--color-gray-light);
  overflow-x: auto;
}
.news__rich-text pre code {
  padding: 0;
  background: none;
}
.news__rich-text blockquote {
  padding-left: var(--spacing-4);
  border-left: 4px solid var(--color-border-gray);
  margin-bottom: var(--spacing-3);
  color: var(--color-text-gray);
  font-style: italic;
}
.news__rich-text hr {
  border: 0;
  border-top: 1px solid var(--color-border-light);
  margin: var(--spacing-4) 0;
}
.news__button-wrapper {
  display: flex;
  max-width: 200px;
  height: var(--size-46);
  justify-content: center;
  margin: 0 auto;
}
.news__button-wrapper .btn__icon {
  width: var(--size-12);
  height: var(--size-12);
}
.news__empty {
  padding: var(--spacing-6);
  color: var(--color-text-gray);
  font-size: var(--size-14);
  text-align: center;
}

/* service-lineup.css */
/* Service Lineup */
.service-lineup {
  position: relative;
  padding: var(--spacing-18) 0;
  padding-top: 40px;
  background: var(--color-accent-yellow);
}
@media (max-width: 960px) {
  .service-lineup {
    padding: var(--spacing-10) 0 var(--spacing-18);
    padding-top: 48px;
    margin-top: -10px;
  }
}
.service-lineup .curve-svg,
.service-lineup .curve-svg-mobile {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
  line-height: 0;
}
.service-lineup .curve-svg svg,
.service-lineup .curve-svg-mobile svg {
  position: relative;
  display: block;
  width: 100%;
}
.service-lineup .curve-svg .shape-fill,
.service-lineup .curve-svg-mobile .shape-fill {
  fill: var(--color-accent-yellow);
}
.service-lineup .curve-svg {
  top: -120px;
}
@media (max-width: 767px) {
  .service-lineup .curve-svg {
    display: none;
  }
}
.service-lineup .curve-svg svg {
  height: 120px;
}
.service-lineup .curve-svg-mobile {
  top: -52px;
}
@media (min-width: 767.02px) {
  .service-lineup .curve-svg-mobile {
    display: none;
  }
}
.service-lineup .curve-svg-mobile svg {
  height: 132px;
}
.service-lineup__container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-xl);
  margin: 0 auto;
}
@media (max-width: 960px) {
  .service-lineup__container {
    padding: 0 var(--spacing-4);
  }
}
.service-lineup__title {
  margin-bottom: var(--spacing-4);
  color: var(--color-black);
  font-size: var(--size-30);
  font-weight: var(--font-weight-bold);
  text-align: center;
}
@media (max-width: 960px) {
  .service-lineup__title {
    margin-bottom: var(--spacing-6);
    font-size: var(--size-24);
  }
}
.service-lineup__title__no {
  font-size: var(--size-25);
}
@media (max-width: 960px) {
  .service-lineup__title__no {
    font-size: var(--size-18);
  }
}
.service-lineup__title br {
  display: none;
}
@media (max-width: 960px) {
  .service-lineup__title br {
    display: block;
  }
}
.service-lineup__subtitle {
  margin-bottom: var(--spacing-4);
  font-size: var(--size-16);
  text-align: center;
}
@media (max-width: 960px) {
  .service-lineup__subtitle {
    margin-bottom: var(--spacing-6);
  }
}
.service-lineup__decoration {
  width: var(--spacing-14);
  border-top: 2px solid var(--color-primary);
  margin: 0 auto var(--spacing-4);
}
@media (max-width: 960px) {
  .service-lineup__decoration {
    margin-bottom: var(--spacing-6);
  }
}
.service-lineup__description {
  max-width: 612px;
  margin: 0 auto;
  margin-bottom: var(--spacing-10);
  font-size: var(--size-16);
  line-height: var(--line-height-relaxed);
}
@media (max-width: 960px) {
  .service-lineup__description br {
    display: none;
  }
}
.service-lineup__frame {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}
@media (max-width: 960px) {
  .service-lineup__frame {
    flex-direction: column;
  }
}
.service-lineup__column {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-5);
}
.service-lineup__column--action {
  width: var(--size-320);
}
@media (max-width: 960px) {
  .service-lineup__column--action {
    width: 100%;
  }
}
.service-lineup__column--link {
  flex: 1;
}
.service-lineup__divider {
  width: 1px;
  margin: var(--spacing-5) 0;
  background: var(--color-text-light);
}
@media (max-width: 960px) {
  .service-lineup__divider {
    width: auto;
    height: 1px;
    margin: 0 var(--spacing-4);
  }
}
.service-lineup__banner {
  display: flex;
  height: var(--spacing-14);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-black);
  font-size: var(--size-16);
  line-height: var(--line-height-normal);
  text-align: center;
}
.service-lineup__logo-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.service-lineup__logo-box {
  display: flex;
  height: var(--size-168);
  align-items: center;
  justify-content: center;
}
.service-lineup__logo-image {
  height: var(--size-80);
}
.service-lineup__cards-group {
  display: flex;
  flex: 1;
  gap: var(--spacing-2);
}
@media (max-width: 960px) {
  .service-lineup__cards-group {
    flex-direction: column;
    gap: var(--spacing-8);
  }
}
.service-lineup__card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-8) var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: var(--color-white);
  text-decoration: none;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
@media (max-width: 960px) {
  .service-lineup__card:last-child {
    margin-bottom: 0;
  }
}
.service-lineup__card:hover {
  background-color: var(--color-secondary-hover);
}
.service-lineup__card--coming-soon {
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 960px) {
  .service-lineup__card--coming-soon {
    min-height: 176px;
  }
}
.service-lineup__card--coming-soon .service-lineup__card-arrow-wrapper,
.service-lineup__card--coming-soon .service-lineup__card-description,
.service-lineup__card--coming-soon .service-lineup__card-title {
  display: none;
}
.service-lineup__card--coming-soon .service-lineup__service-label {
  z-index: 1;
}
.service-lineup__card--coming-soon::after {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgb(0 0 0 / 55%);
  color: var(--color-white);
  content: "近日リリース予定";
  font-size: var(--size-16);
  font-weight: var(--font-weight-bold);
  inset: 0;
  letter-spacing: 0.08em;
}
.service-lineup__service-label {
  position: absolute;
  top: calc(-1 * var(--spacing-4));
  padding: 0 var(--spacing-2);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-secondary);
  font-family: var(--font-family-en);
  font-size: var(--size-17);
  font-weight: var(--font-weight-bold);
}
.service-lineup__card-description {
  margin-bottom: var(--spacing-2);
  color: var(--color-white);
  font-size: var(--size-14);
  line-height: var(--line-height-normal);
}
.service-lineup__card-title {
  color: var(--color-white);
  font-family: var(--font-family-en);
  font-size: var(--size-26);
  line-height: var(--line-height-tight);
}
.service-lineup__card-arrow-wrapper {
  position: absolute;
  right: var(--spacing-4);
  bottom: calc(50% - var(--size-24) / 2);
  display: flex;
  width: var(--size-16);
  height: var(--size-32);
  align-items: center;
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}
.service-lineup__card-arrow {
  position: absolute;
  left: calc(50% - var(--size-20) / 4);
  width: var(--size-12);
  height: var(--size-12);
  color: var(--color-secondary);
}

/* top-carousel.css */
/* Carousel */
.carousel {
  --swiper-navigation-color: var(--color-black);
  --swiper-pagination-color: var(--color-amber);
  --swiper-pagination-bullet-inactive-color: var(--color-gray);
  --swiper-pagination-bullet-inactive-opacity: 1;

  background: var(--color-cream-light);
}
.carousel__container {
  max-width: var(--max-width-2xl);
  padding: var(--spacing-5) var(--spacing-10) var(--spacing-4);
  margin: 0 auto;
}
@media (max-width: 960px) {
  .carousel__container {
    padding: var(--spacing-5) 0 var(--spacing-4);
  }
}
.carousel__swiper {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-4);
}
.carousel__swiper .swiper-slide {
  width: var(--size-300);
  height: auto;
}
.carousel__swiper--single-slide {
  margin-bottom: var(--spacing-1);
}
.carousel__swiper--single-slide .swiper-wrapper {
  width: fit-content;
  margin: 0 auto;
}
.carousel__swiper--single-slide .swiper-slide {
  width: var(--size-300);
  max-width: var(--size-300);
}
.carousel__swiper--two-slides {
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
  margin-bottom: var(--spacing-1);
}
@media (max-width: 767.98px) {
  .carousel__swiper--two-slides {
    overflow: visible;
    padding-bottom: var(--spacing-1);
    margin-bottom: 0;
  }

  .carousel__swiper--two-slides .swiper-wrapper {
    width: 100% !important;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    transform: none !important;
  }

  .carousel__swiper--two-slides .swiper-slide {
    width: 100% !important;
    max-width: var(--size-320);
    margin: 0 !important;
  }
}
.carousel__swiper--two-slides .swiper-wrapper {
  width: fit-content;
  margin: 0 auto;
}
.carousel__swiper--two-slides .swiper-slide {
  width: var(--size-480);
  max-width: var(--size-480);
}
.carousel__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.carousel__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
}
.carousel__nav-button {
  display: flex;
  width: var(--size-32);
  height: var(--size-32);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}
.carousel__nav-button:hover {
  opacity: 0.7;
}
.carousel__nav-button.swiper-button-disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.carousel__nav-button svg {
  width: var(--size-18);
  height: var(--size-18);
  color: var(--color-gray-lightest);
}
.carousel__pagination {
  display: flex;
  width: fit-content !important;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}
.carousel__autoplay-toggle {
  position: relative;
  display: inline-flex;
  width: var(--size-32);
  height: var(--size-32);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--color-text-brown);
  transition: opacity var(--transition-fast);
}
.carousel__autoplay-toggle:hover {
  opacity: 0.7;
}
.carousel__autoplay-toggle::after {
  display: block;
  width: 1px;
  height: var(--size-24);
  margin-left: var(--spacing-4);
  background: var(--color-border-gray);
  content: "";
}
.carousel__autoplay-icon {
  display: none;
  width: var(--size-18);
  height: var(--size-18);
}
.carousel .carousel__autoplay-toggle[aria-pressed="false"] .carousel__autoplay-icon--pause {
  display: inline-flex;
}
.carousel .carousel__autoplay-toggle[aria-pressed="true"] .carousel__autoplay-icon--play {
  display: inline-flex;
}
.carousel .carousel__autoplay-icon--pause svg,
.carousel .carousel__autoplay-icon--play svg {
  width: var(--size-20);
  height: var(--size-20);
  color: var(--color-gray-lightest);
}

/* Swiper Pagination */
.carousel .swiper-pagination-bullet {
  width: var(--size-6);
  height: var(--size-6);
  padding: 0;
  border: none;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-gray-lightest);
  opacity: 1;
  transition: all var(--transition-fast);
}
.carousel .swiper-pagination-bullet:hover {
  opacity: 0.7;
}

.carousel .swiper-pagination-bullet-active {
  width: 9px;
  height: 9px;
  background: var(--color-amber);
}

.carousel__mount:empty {
  display: none;
}

.carousel__loading {
  padding: var(--spacing-10);
  background: var(--color-cream-light);
  color: var(--color-text-gray);
  font-size: var(--size-14);
  text-align: center;
}