﻿@charset "UTF-8";

/* ===============================================
  * 共通 *
=============================================== */

.global-contents__inner {
  width: 100%;
  padding: 0;
}


/* Section */

.l-top__section {
  --padding-horizontal-section: 5.5rem;
  --design-width: 120rem;

  padding-block: 4rem;
  background-color: var(--color-project-bg);
}

@media (min-width: 768px) {
  .l-top__section {
    padding-block: 7rem;
  }
}

.l-top__section[data-bg] {
  background-color: var(--color-project-white);
}

.l-top__section-inner {
  display: grid;
  row-gap: 2.5rem;

  width: min(100%, calc(var(--design-width) + (var(--padding-horizontal-section) * 2)));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .l-top__section-inner {
    row-gap: 3rem;

    padding-inline: var(--padding-horizontal-section);
  }
}

.l-top__section-inner--full {
  width: 100%;
  padding-inline: 0;
}

.l-top__section .c-page-title {
  margin-block: 0;
}


/* Swiper */

.l-top__section .swiper {
  display: grid;
  width: 100%;
}

.l-top__section .swiper-wrapper {
  min-width: 0;
}


/* Heading */

.global-content__fluid-wrapper--full:has(.c-heading__text) {
  padding-inline: var(--padding-horizontal-global);
}


/* Common Top Slide */

.l-top__common-slider {
  --swiper-navigation-size: 5rem;
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-width: .6rem;
  --swiper-pagination-bullet-height: .6rem;
  --swiper-pagination-margin-top: 1.5rem;
  --swiper-pagination-gap: 1rem;
  --swiper-navigation-size: 2.2rem;
  --swiper-navigation-position: var(--padding-horizontal-global, 1.5rem);

  position: relative;
}

@media (min-width: 768px) {
  .l-top__common-slider {
    --swiper-navigation-size: 3.5rem;
    --swiper-navigation-position: calc((var(--swiper-navigation-size) + 2rem) * -1);
  }
}

.l-top__common-slider:has(.swiper) {
  opacity: 0;
  transition: opacity var(--transition-default);
}

@media (prefers-reduced-motion: reduce) {
  .l-top__common-slider:has(.swiper) {
    transition: none;
  }
}

.l-top__common-slider:has(.swiper-initialized) {
  opacity: 1;
}

.l-top__common-slider [class*="swiper-button"] {
  width: var(--swiper-navigation-size);

  color: var(--color-project-gray-dark);
}

.l-top__common-slider [class*="swiper-button"]::after {
  content: none;
}

.l-top__common-slider [class*="swiper-button-"] {
  width: var(--swiper-navigation-size, 2.2rem);
}

.l-top__common-slider [class*="swiper-button-"]::after {
  content: none !important;
}

.l-top__common-slider .swiper-button-prev {
  left: var(--swiper-navigation-position);
}

.l-top__common-slider .swiper-button-next {
  right: var(--swiper-navigation-position);
}

.l-top__common-slider .swiper-button-next svg {
  scale: -1 1;
}

.l-top__common-slider .swiper-pagination {
  position: static;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--swiper-pagination-gap, 1rem);

  margin-top: var(--swiper-pagination-margin-top, 1.5rem);
}

@media (min-width: 768px) {
  .l-top__common-slider .swiper-pagination {
    display: none;
  }
}

.l-top__common-slider .swiper-pagination-bullet {
  background-color: var(--color-project-gray-light);

  opacity: 1 !important;

  transition: background-color var(--transition-default);
}

.l-top__common-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-project-pink-primary);
}
