@charset "UTF-8";

/* mv
---------------------------------------------- */
.mv {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.mvWrap {
  position: relative;
  opacity: 0;
  transform: scale(1.05);
  transition: .6s ease;
  z-index: 0;
}
.loaded .mvWrap {
  opacity: 1;
  transform: scale(1);
}
.mvWrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.5);
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / .5);
  /* border-radius: 50%; */
  z-index: 1;
}
.loaded .mvWrap::before {
  animation: mvAnime forwards 1.4s ease-out;
}
/* .mv__txt {
  position: absolute;
  top: 50%;
  left: calc(135 / 1500 * 100%);
  transform: translateY(-50%);
  width: calc(600 / 1500 * 100%);
  z-index: 1;
} */

@keyframes mvAnime {
  99% {
    transform: translate(-50%, -50%) scale(2);
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@media screen and (max-width: 768px) {
  /* .mv__txt {
    top: calc(35 / 550 * 100%);
    left: 50%;
    transform: translateX(-50%);
    width: calc(280 / 375 * 100%);
  } */
}

/* intro
---------------------------------------------- */
.intro {
  background: linear-gradient(135deg, rgba(30, 80, 160, 1) 0%, rgba(28, 126, 181, 1) 70%, rgba(30, 80, 160, 1) 100%);
  padding-block: clamp(70px, 2.41rem + 4.1vw, 100px) clamp(80px, 0.41rem + 9.56vw, 150px);
}
.introHead {
  text-align: center;
}
.intro__copy + .intro__copy {
  margin-top: 3em;
}
.introNav {
  margin-top: clamp(40px, -1.43rem + 8.2vw, 100px);
}
.introNavList {
  gap: 2px calc(3 / 1200 * 100%);
}
.introNavList > li {
  width: calc((100% - 6px) / 3);
}
.introNavList__btn {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center;
}
.introNavList__btn .txt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: clamp(16px, 0.61rem + 0.82vw, 22px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  padding: 1em .5em;
  text-align: center;
}
.introNavList__btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8edf5;
  padding-block: 10px;
}

@media screen and (max-width: 767px) {
  .introHead {
    width: 95%;
  }
  .intro__copy + .intro__copy {
    margin-top: 2em;
  }
  .introNavList > li {
    width: 100%;
  }
  .introNavList__btn {
    display: flex;
    align-items: stretch;
  }
  .introNavList__btn .txt {
    flex: 1;
    justify-content: flex-start;
    height: 90px;
    font-weight: 500;
    padding-left: 1em;
    text-align: left;
  }
  .introNavList__btn .icon {
    width: calc(60 / 320 * 100%);
  }
}

/* sec
---------------------------------------------- */
.secHead {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.sec__ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: clamp(24px, -0.87rem + 4.92vw, 60px);
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
  z-index: 1;
}
.secHead__num {
  position: absolute;
  bottom: -15%;
  left: -2.5%;
  font-size: clamp(240px, -0.74rem + 32.79vw, 480px);
  opacity: .3;
  z-index: 1;
}

.secIntro {
  background: linear-gradient(135deg, rgba(30, 80, 160, 1) 0%, rgba(28, 126, 181, 1) 70%, rgba(30, 80, 160, 1) 100%);
  padding-block: clamp(50px, 1.16rem + 4.1vw, 80px);
}
.secIntro__copy {
  width: 95%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .secHead__num {
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
  }
}

/* sec01
---------------------------------------------- */
.area {
  position: relative;
  padding-top: clamp(60px, 0.47rem + 6.83vw, 110px);
  z-index: 0;
}
.area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(44vw,660px);
  background : linear-gradient(90deg, rgba(30, 80, 160, 0.1) 0%, rgba(30, 80, 160, 0) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0% 100%);
}
.areaMap {
  position: relative;
  margin-top: -20px;
  z-index: 0;
}
.areaMap__btn {
  position: absolute;
  width: calc(236 / 1200 * 100%);
  aspect-ratio: 236 / 50;
  transition: background-color .4s;
  z-index: 1;
}
.areaMap__btn--omiya {
  top: 11.2%;
  right: 20.8%;
}
.areaMap__btn--urawa {
  top: 35.2%;
  right: 5.1%;
}
.areaMap__btn--kawagoe {
  top: 55.2%;
  left: 1.7%;
  width: calc(276 / 1200 * 100%);
  aspect-ratio: 276 / 50;
}
.areaMap__btn--kawaguchi {
  right: 1.6%;
  bottom: 19.1%;
}

.areaList {
  margin-top: clamp(60px, 1.13rem + 5.46vw, 100px);
}

.areaItem + .areaItem {
  margin-top: 10px;
}

.areaItem .p-caption {
  background-color: rgb(51 51 51 / .5);
  padding: 4px 7px;
}

.areaItemHead {
  /* height: 180px; */
  padding-inline: calc(80 / 1200 * 100%) calc(60 / 1200 * 100%);
  padding-block: min(calc(60 / 1200 * 100%),60px);
}
.areaItemHead__ttl {
  font-size: clamp(22px, 0.19rem + 2.46vw, 40px);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.areaItem__btn {
  display: flex;
  align-items: stretch;
  width: calc(360 / 1060 * 100%);
  box-shadow: 0 0 6px rgba(0 0 0 / .2);
  transition: background-color .2s, opacity .4s;
}
.areaItem__btn .txt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, 0.48rem + 0.82vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding-block: .8em;
  text-align: center;
}
.areaItem__btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 60px;
  background-color: #fff;
  z-index: 0;
}
.areaItem__btn .icon .avg-arrow {
  opacity: 1;
  transition: opacity .2s;
}
.areaItem__btn.open .icon .avg-arrow {
  opacity: 0;
}
.areaItem__btn .icon .close {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  opacity: 0;
  transition: opacity .2s;
  z-index: 1;
}
.areaItem__btn .icon .close::before,
.areaItem__btn .icon .close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100%;
  height: 1px;
  z-index: 0;
}
.areaItem__btn .icon .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.areaItem__btn.open .icon .close {
  opacity: 1;
  transition: opacity .2s;
}

.areaItemBody {
  display: none;
}

.areaItemIntro {
  color: #fff;
  padding-block: clamp(40px, -2.09rem + 9.56vw, 110px) clamp(90px, 3rem + 5.46vw, 130px);
}
.areaItem__ttl {
  font-size: clamp(24px, -2.17rem + 7.65vw, 80px);
  letter-spacing: 0.05em;
  text-align: center;
}

.areaItemMerit {
  margin-top: 60px;
  overflow: hidden;
}
/* .areaItemMerit > li {
  width: calc((100% - 60px) / 3);
} */
.areaItemMerit__ttl {
  font-size: clamp(23px, 0.59rem + 1.78vw, 36px);
  letter-spacing: 0.05em;
  margin-top: 1em;
  text-align: center;
}
.areaItemIntro__txt {
  margin-top: 60px;
  text-align: center;
}

.areaSlider {
  position: relative;
  padding-block: clamp(90px, 1.69rem + 8.2vw, 150px) clamp(40px, -1.43rem + 8.2vw, 100px);
  z-index: 0;
}
.areaSlider::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 120px;
  z-index: 1;
}
.areaSlider__ttl {
  font-size: 54px;
  letter-spacing: 0.05em;
  text-align: center;
}
.areaSlider__inner {
  width: 95%;
  max-width: 1000px;
  margin-inline: auto;
}
.areaSliderBox {
  display: grid;
  grid-template-columns: calc(470 / 1000 * 100%) calc(500 / 1000 * 100%);
  gap: 30px calc(30 / 1000 * 100%);
  margin-top: 90px;
}
.areaSliderBox__item:first-child {
  grid-area: 1/1/3/2;
}

.areaSlider__txt {
  margin-top: 60px;
  text-align: center;
}

.areaSlider .swiper-button-prev,
.areaSlider .swiper-button-next {
  width: 100px;
  height: 100px;
  margin: 0;
  transform: translateY(-50%);
}
.areaSlider .swiper-button-prev .avg-arrow {
  width: 28px;
  height: 40px;
  transform: rotate(90deg);
}
.areaSlider .swiper-button-next .avg-arrow {
  width: 28px;
  height: 40px;
  transform: rotate(-90deg);
}
.areaSlider .swiper-button-prev .avg-arrow .cls-1,
.areaSlider .swiper-button-next .avg-arrow .cls-1 {
  stroke: #fff;
}

.areaSlider .swiper-pagination {
  inset: auto;
  margin-top: 80px;
}
.areaSlider .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid;
  margin-inline: 10px!important;
}

:root {
  --color-omiya: #ac8666;
  --color-urawa: #56a7c0;
  --color-kawaguchi: #5480b4;
  --color-kawagoe: #789966;
}

/* areaItem--omiya */
.areaItem--omiya .areaItemHead {
  background: linear-gradient(135deg, rgba(189, 159, 132, 1) 0%, rgba(172, 134, 102, 1) 30%, rgba(205, 183, 163, 1) 100%);
}
.areaItem--omiya .areaItem__btn {
  background-color: var(--color-omiya);
  border: 1px solid #d5c3b2;
}
.areaItem--omiya .areaItem__btn.open {
  background-color: #bd9f84;
}
.areaItem--omiya .areaItem__btn .cls-1 {
  stroke: var(--color-omiya);
}
.areaItem--omiya .areaItem__btn .icon .close::before,
.areaItem--omiya .areaItem__btn .icon .close::after {
  background-color: var(--color-omiya);
}
.areaItem--omiya .areaItemIntro {
  background-color: var(--color-omiya);
}
.areaItem--omiya .areaItemMerit__ttl {
  color: #eee7e0;
}
.areaItem--omiya .areaSlider {
  background: linear-gradient(180deg, rgba(247, 243, 240, 1) 0%, rgba(238, 231, 224, 1) 100%);
}
.areaItem--omiya .areaSlider::before {
  background-color: #d5c3b2;
}
.areaItem--omiya .areaSlider__ttl {
  color: var(--color-omiya);
}
.areaItem--omiya .areaSlider .swiper-button-prev,
.areaItem--omiya .areaSlider .swiper-button-next {
  background-color: var(--color-omiya);
}
.areaItem--omiya .areaMeritSlider .swiper-pagination-bullet,
.areaItem--omiya .areaSlider .swiper-pagination-bullet {
  border-color: #d5c3b2;
}
.areaItem--omiya .areaMeritSlider .swiper-pagination-bullet-active,
.areaItem--omiya .areaSlider .swiper-pagination-bullet-active {
  background: var(--color-omiya);
}

/* areaItem--urawa */
.areaItem--urawa .areaItemHead {
  background: linear-gradient(135deg, rgba(120, 185, 205, 1) 0.57%, rgba(86, 167, 192, 1) 30%, rgba(154, 202, 217, 1) 100%);
}
.areaItem--urawa .areaItem__btn {
  background-color: var(--color-urawa);
  border: 1px solid #abd3df;
}
.areaItem--urawa .areaItem__btn.open {
  background-color: #78b9cd;
}
.areaItem--urawa .areaItem__btn .cls-1 {
  stroke: var(--color-urawa);
}
.areaItem--urawa .areaItem__btn .icon .close::before,
.areaItem--urawa .areaItem__btn .icon .close::after {
  background-color: var(--color-urawa);
}
.areaItem--urawa .areaItemIntro {
  background-color: var(--color-urawa);
}
.areaItem--urawa .areaItemMerit__ttl {
  color: #ddedf2;
}
.areaItem--urawa .areaSlider {
  background: linear-gradient(180deg, rgba(238, 246, 249, 1) 0%, rgba(221, 237, 242, 1) 100%);
}
.areaItem--urawa .areaSlider::before {
  background-color: #abd3df;
}
.areaItem--urawa .areaSlider__ttl {
  color: var(--color-urawa);
}
.areaItem--urawa .areaSlider .swiper-button-prev,
.areaItem--urawa .areaSlider .swiper-button-next {
  background-color: var(--color-urawa);
}
.areaItem--urawa .areaMeritSlider .swiper-pagination-bullet,
.areaItem--urawa .areaSlider .swiper-pagination-bullet {
  border-color: #abd3df;
}
.areaItem--urawa .areaMeritSlider .swiper-pagination-bullet-active,
.areaItem--urawa .areaSlider .swiper-pagination-bullet-active {
  background: var(--color-urawa);
}

/* areaItem--kawaguchi */
.areaItem--kawaguchi .areaItemHead {
  background: linear-gradient(135deg, rgba(118, 153, 195, 1) 0%, rgba(84, 128, 180, 1) 30%, rgba(152, 179, 210, 1) 100%);
}
.areaItem--kawaguchi .areaItem__btn {
  background-color: var(--color-kawaguchi);
  border: 1px solid #a9bfd9;
}
.areaItem--kawaguchi .areaItem__btn.open {
  background-color: #7699c3;
}
.areaItem--kawaguchi .areaItem__btn .cls-1 {
  stroke: var(--color-kawaguchi);
}
.areaItem--kawaguchi .areaItem__btn .icon .close::before,
.areaItem--kawaguchi .areaItem__btn .icon .close::after {
  background-color: var(--color-kawaguchi);
}
.areaItem--kawaguchi .areaItemIntro {
  background-color: var(--color-kawaguchi);
}
.areaItem--kawaguchi .areaItemMerit__ttl {
  color: #dde6f0;
}
.areaItem--kawaguchi .areaSlider {
  background: linear-gradient(90deg, rgba(238, 246, 249, 1) 0%, rgba(221, 237, 242, 1) 100%);
}
.areaItem--kawaguchi .areaSlider::before {
  background-color: #a9bfd9;
}
.areaItem--kawaguchi .areaSlider__ttl {
  color: var(--color-kawaguchi);
}
.areaItem--kawaguchi .areaSlider .swiper-button-prev,
.areaItem--kawaguchi .areaSlider .swiper-button-next {
  background-color: var(--color-kawaguchi);
}
.areaItem--kawaguchi .areaMeritSlider .swiper-pagination-bullet,
.areaItem--kawaguchi .areaSlider .swiper-pagination-bullet {
  border-color: #a9bfd9;
}
.areaItem--kawaguchi .areaMeritSlider .swiper-pagination-bullet-active,
.areaItem--kawaguchi .areaSlider .swiper-pagination-bullet-active {
  background: var(--color-kawaguchi);
}

/* areaItem--kawagoe */
.areaItem--kawagoe .areaItemHead {
  background: linear-gradient(135deg, rgba(147, 173, 133, 1) 0%, rgba(120, 153, 102, 1) 30%, rgba(174, 194, 163, 1) 100%);
}
.areaItem--kawagoe .areaItem__btn {
  background-color: var(--color-kawagoe);
  border: 1px solid #bbccb3;
}
.areaItem--kawagoe .areaItem__btn.open {
  background-color: #93ad85;
}
.areaItem--kawagoe .areaItem__btn .cls-1 {
  stroke: var(--color-kawagoe);
}
.areaItem--kawagoe .areaItem__btn .icon .close::before,
.areaItem--kawagoe .areaItem__btn .icon .close::after {
  background-color: var(--color-kawagoe);
}
.areaItem--kawagoe .areaItemIntro {
  background-color: var(--color-kawagoe);
}
.areaItem--kawagoe .areaItemMerit__ttl {
  color: #e4ebe0;
}
.areaItem--kawagoe .areaSlider {
  background: linear-gradient(180deg, rgba(241, 245, 240, 1) 0%, rgba(228, 235, 224, 1) 100%);
}
.areaItem--kawagoe .areaSlider::before {
  background-color: #bbccb3;
}
.areaItem--kawagoe .areaSlider__ttl {
  color: var(--color-kawagoe);
}
.areaItem--kawagoe .areaSlider .swiper-button-prev,
.areaItem--kawagoe .areaSlider .swiper-button-next {
  background-color: var(--color-kawagoe);
}
.areaItem--kawagoe .areaMeritSlider .swiper-pagination-bullet,
.areaItem--kawagoe .areaSlider .swiper-pagination-bullet {
  border-color: #bbccb3;
}
.areaItem--kawagoe .areaMeritSlider .swiper-pagination-bullet-active,
.areaItem--kawagoe .areaSlider .swiper-pagination-bullet-active {
  background: var(--color-kawagoe);
}

@media (hover: hover) and (pointer: fine) {
  .areaMap__btn:hover {
    background-color: rgb(255 255 255 / .3);
  }
}

@media screen and (min-width: 768px) {
  .areaItemMerit {
    padding-bottom: 1em;
  }
  .areaItemMerit .swiper-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .areaItemMerit .swiper-slide {
    width: calc((100% - 60px) / 3);
  }
  .areaItemMerit .swiper-pagination {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .area::before {
    height: min(89vw,660px);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  }
  .areaMap {
    width: calc(340 / 375 * 100%);
    margin-top: 30px;
  }
  .areaMap__btn {
    width: calc(70 / 340 * 100%);
    aspect-ratio: 70 / 30;
  }
  .areaMap__btn--omiya {
    top: 7.2%;
    right: 22.3%;
  }
  .areaMap__btn--urawa {
    top: 33.2%;
    right: 3%;
  }
  .areaMap__btn--kawagoe {
    top: 59.2%;
    left: 2.9%;
    width: calc(105 / 340 * 100%);
    aspect-ratio: 105 / 30;
  }
  .areaMap__btn--kawaguchi {
    right: 2.9%;
    bottom: 11%;
  }

  .areaItemHead {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 120px; */
    padding-inline: 20px;
  }
  .areaItemHead__ttl {
    font-size: 22px;
    text-align: center;
  }
  .areaItem__btn {
    width: 100%;
    max-width: 200px;
    height: 40px;
    margin-top: 14px;
    margin-inline: auto;
  }
  .areaItem__btn .txt {
    justify-content: start;
    padding-left: 1.5em;
    font-size: 14px;
  }
  .areaItem__btn .icon {
    width: 38px;
  }
  .areaItem__btn .icon .avg-arrow {
    width: 11px;
    height: 16px;
  }

  .areaItemMerit {
    width: 100%;
    /* row-gap: 28px; */
    margin-top: 25px;
    padding-inline: 27.5px;
  }

  .areaMeritSlider .swiper-pagination {
    inset: auto;
    margin: 25px 0 0;
  }
  .areaMeritSlider .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background: #fff;
    border: 1px solid;
    margin-inline: 10px !important;
  }

  .areaItemMerit__ttl {
    margin-top: 1em;
  }
  .areaItemIntro__txt {
    margin-top: 30px;
  }

  .areaSlider::before {
    top: -45px;
    height: 90px;
  }
  .areaSlider__ttl {
    font-size: 24px;
  }
  .areaSlider__inner {
    width: calc(320 / 375 * 100%);
    max-width: 560px;
  }
  .areaSliderBox {
    grid-template-columns: calc(150 / 320 * 100%) calc(160 / 320 * 100%);
    gap: 10px calc(10 / 320 * 100%);
    margin-top: 30px;
  }

  .areaSlider__txt {
    margin-top: 1.2em;
    text-align: justify;
    word-break: break-all;
  }

  .areaSlider .swiper-pagination {
    margin-top: 30px;
  }

}

/* access
---------------------------------------------- */
.access {
  position: relative;
  padding-block: clamp(80px, -4.18rem + 19.13vw, 220px) clamp(80px, -5.49rem + 21.86vw, 240px);
  z-index: 0;
}
.access::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(44vw,660px);
  background : linear-gradient(90deg, rgba(30, 80, 160, 0.1) 0%, rgba(30, 80, 160, 0) 100%);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0% 100%);
}

.accessBox {
  margin-top: clamp(50px, 1.16rem + 4.1vw, 80px);
}

.accessItem + .accessItem {
  margin-top: clamp(45px, 1.17rem + 3.42vw, 70px);
}

.accessItem__ttl {
  position: relative;
  font-size: 30px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  padding-left: 1.2em;
  z-index: 0;
}
.accessItem__ttl::before {
  content: '';
  position: absolute;
  top: .35em;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid;
  z-index: 0;
}
.accessItem__img {
  position: relative;
  margin-top: 30px;
  z-index: 0;
}
.accessItem__swipe {
  scroll-behavior: smooth;
}
/* @media (prefers-reduced-motion) {
  .accessItem__swipe {
    scroll-behavior: auto;
  }
} */

.accessItem__prev,
.accessItem__next {
  display: grid;
  place-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 50px;
  background-color: rgb(255 255 255 / .8);
  box-shadow: 0 0 6px rgba(0 0 0 / .3);
  z-index: 1;
}
.accessItem__prev {
  left: 0;
}
.accessItem__next {
  right: 0;
}
.accessItem__next .svg-swipe {
  transform: scaleX(-1);
}

.accessItem__img .cls-1{
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.accessItemList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(40 / 1200 * 100%);
  position: relative;
  margin-top: 30px;
  z-index: 0;
}
.accessItemList::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 10px;
  transition: 2s .3s ease;
  z-index: -1;
}
.accessItemList.inview::before {
  width: 100%;
}

.accessItemList__name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
  font-size: clamp(18px, 0.47rem + 1.37vw, 28px);
  letter-spacing: 0.1em;
  text-shadow: 0 0 5px rgb(0 0 0 / .9);
  text-align: center;
  z-index: 1;
}

/* accessItem--takasaki */
.accessItem--takasaki .accessItem__ttl {
  color: #ef8432;
}
.accessItem--takasaki .accessItem__img .cls-1{
  stroke:#ef8432;
}
.accessItem--takasaki .accessItemList::before {
  background-color: #ef8432;
}

/* accessItem--shonan */
.accessItem--shonan .accessItem__ttl {
  color: #d92528;
}
.accessItem--shonan .accessItem__img .cls-1{
  stroke:#d92528;
}
.accessItem--shonan .accessItemList::before {
  background-color: #d92528;
}

/* accessItem--keihin */
.accessItem--keihin .accessItem__ttl {
  color: #00b1de;
}
.accessItem--keihin .accessItem__img .cls-1{
  stroke:#00b1de;
}
.accessItem--keihin .accessItemList::before {
  background-color: #00b1de;
}
/* accessItem--saikyo */
.accessItem--saikyo .accessItem__ttl {
  color: #00ac84;
}
.accessItem--saikyo .accessItem__img .cls-1{
  stroke:#00ac84;
}
.accessItem--saikyo .accessItemList::before {
  background-color: #00ac84;
}
/* accessItem--ikebukuro */
.accessItem--ikebukuro .accessItem__ttl {
  color: #ef8432;
}
.accessItem--ikebukuro .accessItem__img .cls-1{
  stroke:#ef8432;
}
.accessItem--ikebukuro .accessItemList::before {
  background-color: #ef8432;
}

.access .propertyBtn {
  margin-top: clamp(50px, -0.15rem + 6.83vw, 100px);
}

@media screen and (min-width: 769px) {
  .accessItem__prev,
  .accessItem__next {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .access::before {
    height: min(89vw,660px);
    clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
  }

  .accessItem__ttl {
    font-size: 18px;
  }
  .accessItem__ttl::before {
    width: 12px;
    height: 12px;
    border-width: 3px;
  }
  .accessItem__img {
    width: 100%;
    margin-top: 20px;
  }
  .accessItem__img .swipeInner {
    padding-inline: calc(27.5 / 375 * 100%);
  }

  .accessItemList {
    width: calc(340 / 375 * 100%);
    gap: calc(8 / 340 * 100%);
    margin-top: 20px;
  }
  .accessItemList::before {
    height: 5px;
  }
  .accessItemList__img .p-caption {
    padding: 4px;
  }
  .accessItemList__name {
    top: 46%;
    white-space: nowrap;
  }
  .accessItemList__name._sp-small {
    font-size: 16px;
  }
}

/* design
---------------------------------------------- */
.design {
  position: relative;
  padding-block: clamp(60px, -0.18rem + 8.2vw, 120px) clamp(80px, -2.87rem + 16.39vw, 200px);
  z-index: 0;
}
.design::before {
  content: '';
  position: absolute;
  top: max(-27vw,-410px);
  left: 0;
  width: 100%;
  height: min(44vw,660px);
  background : linear-gradient(90deg, rgba(30, 80, 160, 0.1) 0%, rgba(30, 80, 160, 0) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0% 100%);
}

.designSlider {
  margin-top: clamp(50px, 1.16rem + 4.1vw, 80px);
  overflow: hidden;
}
.designSlider__item {
  position: relative;
  width: calc(750 / 1500 * 100%);
  z-index: 0;
}
.designSlider__item--l {
  width: calc(1330 / 1500 * 100%);
}
.designSlider__copy {
  position: absolute;
  bottom: 6.25%;
  left: 3.5%;
  color: #fff;
  z-index: 1;
}
.designSlider__copy .en {
  font-size: clamp(24px, -1.52rem + 6.28vw, 70px);
  letter-spacing: 0.05em;
}
.designSlider__copy .ja {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: clamp(10px, -0.16rem + 1.64vw, 22px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-top: 1em;
}
.designSlider__copy .ja::before {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background-color: #fff;
}

.designSlider__count {
  position: absolute;
  bottom: 3%;
  right: 2%;
  color: #fff;
  font-size: clamp(14px, 0.22rem + 1.37vw, 24px);
  letter-spacing: 0.2em;
  z-index: 1;
}

.designSlider .swiper-button-prev,
.designSlider .swiper-button-next {
  width: 80px;
  height: 140px;
  background-color: rgb(255 255 255 / .8);
  margin: 0 !important;
  transform: translateY(-50%);
}
.designSlider .swiper-button-prev::after,
.designSlider .swiper-button-next::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 62px;
  -webkit-mask-image: url(../img/icon_arrow-large.svg);
  mask-image: url(../img/icon_arrow-large.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: rgba(30, 80, 160, .6);
  z-index: 1;
}
.designSlider .swiper-button-prev::after {
  left: calc(50% - 10px);
}
.designSlider .swiper-button-next::after {
  right: calc(50% - 10px);
  transform: translate(-50%, -50%) scaleX(-1);
}

.design .propertyBtn {
  margin-top: clamp(50px, -0.15rem + 6.83vw, 100px);
}

@media screen and (max-width: 768px) {
  .design::before {
    top: 0;
    height: min(89vw,660px);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
  }

  .designSlider__copy {
    bottom: 6.25%;
    left: 3.5%;
  }
  .designSlider__copy .ja {
    gap: .5em;
  }
  .designSlider__copy .ja::before {
    width: 6.25px;
  }

  .designSlider__count {
    top: 4%;
    right: 4%;
    bottom: auto;
  }
}

/* archive
---------------------------------------------- */
.archiveArea {
  padding-block: clamp(60px, -0.18rem + 8.2vw, 120px) clamp(30px, -4.68rem + 13.66vw, 130px);
}

.archiveArea__headline {
  font-size: clamp(26px, 0.7rem + 1.92vw, 40px);
  letter-spacing: 0.2em;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 40px;
  text-align: center;
}
.archiveArea__headline::after {
  content: '';
  display: block;
  width: 150px;
  height: 1px;
  background-color: rgb(255 255 255 / .5);
  margin-top: 20px;
  margin-inline: auto;
}

.archiveArea__ttl {
  font-size: clamp(18px, 0.34rem + 1.64vw, 30px);
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-align: center;
}

.archiveSliderWrap {
  position: relative;
  z-index: 0;
}

.archiveSlider {
  position: relative;
  /* max-width: 1200px; */
  margin-top: 40px;
  margin-inline: auto;
  padding-inline: 13%;
  overflow: hidden;
  z-index: 0;
}
.archiveSlider .swiper-wrapper {
  width: 100%;
  max-width: 100%;
  /* justify-content: center; */
  /* max-width: 1110px; */
}

.archiveSlider .swiper-slide {
  display: flex;
  flex-direction: column;
  /* width: calc(350 / 1110 * 100%); */
  /* width: 350px; */
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0 0 0 / .3);
  opacity: .6;
  transition: opacity .4s;
}
.archiveSlider .template--omiya,
.archiveSlider .template--urawa,
.archiveSlider .template--kawaguchi,
.archiveSlider .template--tokorozawa,
.archiveSlider .template--others {
  display: none;
}

.archiveSlider__img img {
  width: 100%;
}

.archiveSlider__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 25px calc(25 / 340 * 100%);
}
.archiveSlider__name {
  font-size: clamp(18px, 0.99rem + 0.27vw, 20px);
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
}
.archiveSlider__content {
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin-block: 1.5em 1em;
  padding-bottom: 1em;
}

.archiveSlider__details {
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin-bottom: 20px;
}
.archiveSlider__details tr + tr > th {
  padding-top: 10px;
}
/* .archiveSlider__details th {
  display: none;
}
.archiveSlider__details tr:last-of-type {
  display: none;
} */

.archiveSlider__btnBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px calc(10 / 295 * 100%);
  margin-top: auto;
}
.archiveSlider__btnBox .btn {
  font-size: 14px;
  padding: .75em .2em;
  min-height: 35px;
}
.archiveSlider .btn--hp {
  grid-area: 1/1/2/3;
  background: linear-gradient(90deg, rgba(155, 131, 91, 1) 0%, rgba(189, 173, 147, 1) 50%, rgba(155, 131, 91, 1) 99.87%);
}
.archiveSlider .btn--reserve {
  background: linear-gradient(90deg, rgba(51, 51, 51, 1) 0%, rgba(114, 114, 114, 1) 50%, rgba(51, 51, 51, 1) 99.97%);
}
.archiveSlider .btn--request {
  background: linear-gradient(90deg, rgba(30, 80, 160, 1) 0%, rgba(97, 132, 188, 1) 50%, rgba(30, 80, 160, 1) 100%);
}

.archiveSliderWrap .swiper-pagination {
  display: none;
  inset: auto;
  margin-top: 30px;
}
.archiveSliderWrap .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  margin-inline: 0 !important;
}
.archiveSliderWrap .swiper-pagination-bullet-active {
  background: #fff;
}
.archiveSliderWrap .swiper-button-prev,
.archiveSliderWrap .swiper-button-next {
  width: 80px;
  height: 140px;
  background-color: rgb(255 255 255 / .8);
  margin: 0 !important;
  transform: translateY(-50%);
}
.archiveSliderWrap .swiper-button-prev::after,
.archiveSliderWrap .swiper-button-next::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 62px;
  -webkit-mask-image: url(../img/icon_arrow-large.svg);
  mask-image: url(../img/icon_arrow-large.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 1;
}
.archiveSliderWrap .swiper-button-prev::after {
  left: calc(50% - 10px);
}
.archiveSliderWrap .swiper-button-next::after {
  right: calc(50% - 10px);
  transform: translate(-50%, -50%) scaleX(-1);
}

/* is-center 物件数が3以下 */
.archiveSlider.is-center .swiper-wrapper {
  justify-content: center;
}
.archiveSlider.is-center .swiper-slide:last-of-type {
  margin-right: 0!important;
}

/* archiveArea--omiya */
.archiveArea--omiya {
  background: linear-gradient(135deg, rgba(189, 159, 132, 1) 0%, rgba(172, 134, 102, 1) 30%, rgba(205, 183, 163, 1) 100%);
}
.archiveArea--omiya .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: #ac8666;
}
.archiveArea--omiya .swiper-button-prev::after,
.archiveArea--omiya .swiper-button-next::after {
  background-color: #ac8666;
}

/* archiveArea--urawa */
.archiveArea--urawa {
  background : linear-gradient(135deg, rgba(120, 185, 205, 1) 0.57%, rgba(86, 167, 192, 1) 30%, rgba(154, 202, 217, 1) 100%);
}
.archiveArea--urawa .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: #56a7c0;
}
.archiveArea--urawa .swiper-button-prev::after,
.archiveArea--urawa .swiper-button-next::after {
  background-color: #56a7c0;
}

/* archiveArea--kawaguchi */
.archiveArea--kawaguchi {
  background: linear-gradient(135deg, rgba(118, 153, 195, 1) 0%, rgba(84, 128, 180, 1) 30%, rgba(152, 179, 210, 1) 100%);
}

/* archiveArea--tokorozawa */
.archiveArea--tokorozawa {
  background: linear-gradient(135deg, rgba(147, 173, 133, 1) 0%, rgba(120, 153, 102, 1) 30%, rgba(174, 194, 163, 1) 100%);
}
.archiveArea--tokorozawa .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: #789966;
}
.archiveArea--tokorozawa .swiper-button-prev::after,
.archiveArea--tokorozawa .swiper-button-next::after {
  background-color: #789966;
}

/* archiveArea--others */
.archiveArea--others {
  background : linear-gradient(135deg, rgba(173, 173, 173, 1) 0%, rgba(153, 153, 153, 1) 30%, rgba(194, 194, 194, 1) 100%);
}
.archiveArea--others .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background: #999;
}
.archiveArea--others .swiper-button-prev::after,
.archiveArea--others .swiper-button-next::after {
  background-color: #666;
}

@media screen and (min-width: 961px) {
  .archiveSlider .swiper-slide-next,
  .archiveSlider .swiper-slide-next + .swiper-slide,
  .archiveSlider .swiper-slide-next + .swiper-slide + .swiper-slide {
    opacity: 1;
  }
}

@media screen and (min-width: 769px) {
  .archiveSlider .swiper-slide-next,
  .archiveSlider .swiper-slide-next + .swiper-slide {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  .archiveArea__headline {
    margin-bottom: 25px;
  }
  .archiveArea__headline::after {
    width: 124px;
    margin-top: 15px;
  }

  .archiveSlider {
    padding-inline: calc(27.5 / 375 * 100%);
  }
  .archiveSlider .swiper-wrapper {
    width: 100%;
  }
  .archiveSlider .swiper-slide {
    width: 100%;
    opacity: 1;
  }

  .archiveSlider__content,
  .archiveSlider__details {
    font-size: 12px;
  }

  .archiveSlider__btnBox .btn {
    font-size: 13px;
    padding-inline: .2em;
  }

  .archiveSliderWrap .swiper-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  .archiveSliderWrap .swiper-button-prev,
  .archiveSliderWrap .swiper-button-next {
    display: none;
  }
}

/* fixedBtn
---------------------------------------------- */
@media screen and (max-width: 768px) {
  .fixedBtn {
    position: fixed;
    right: 0;
    bottom: 20px;
    width: 30px;
    opacity: 0;
    transition: opacity .4s;
    visibility: hidden;
    z-index: 10000;
  }
  .fixedBtn.inview {
    opacity: 1;
    visibility: visible;
  }
  .fixedBtn__btn {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* pageTop
---------------------------------------------- */
.pageTop {
  position: fixed;
  right: 40px;
  bottom: 70px;
  width: 80px;
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 1;
}
.pageTop.inview {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  .pageTop {
    right: 0;
    bottom: 80px;
    width: 30px;
    aspect-ratio: revert;
  }
  /* .pageTop.is-active {
    opacity: 1;
    visibility: visible;
  } */
}