@charset "UTF-8";

.preview-category {
  margin-block: 75px;
}

.preview-category-title {
  border-bottom: 1px solid #a98b14;
  padding-bottom: 16px;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.preview-category-title small {
  display: inline-block;
  font-size: 13px;
  margin-left: 20px;
}

/* mapBtnBox */
.mapBtnBox {
  width: 100%;
  max-width: 200px;
}
.mapBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5em;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: #000;
  border-radius: 50vw;
  color: #fff;
  font-family: YakuHanMP, 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 1em;
  transition: opacity .4s;
}
#higashi .mapBtn {
  background-color: color-mix(in srgb, #004417, #fff 10%);
}
#ikebukuro .mapBtn {
  background-color: #af3d77;
}

.mapBtnBox .icon {
  font-size: 16px;
}

/* mapModal */
.mapModal .modal__container {
  max-width: 600px;
  background-color: transparent;
  padding-inline: 0;
}
.mapModal .modal__close {
  top: 0;
  right: 0;
  background-color: #333;
  color: #fff;
  width: 30px;
  aspect-ratio: 1;
  font-size: 20px;
  line-height: 1;
}

.sectionTitle--large::after {
  content: none;
}


@media screen and (max-width: 768px) {
  .preview-category {
    margin-block: 35px 55px;
  }

  .preview-category-title {
    font-size: 19px;
    margin-bottom: 25px;
  }
  .preview-category-title small {
    display: block;
    margin: 5px 0 0;
  }

  /* mapBtnBox */
  .mapBtnBox {
    margin-top: 20px;
  }
  .mapBtn {
    padding: .5em;
  }
}


.location-preview .renewal-lifestyle-link {
  margin-top: 200px;
}
.location-preview .renewal-lifestyle-intro {
  text-align: center;
  margin-bottom: 80px;
}
.location-preview .renewal-lifestyle-intro .sectionText {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.9;
}
.location-preview .preview-heading.inner--narrow,
.location-preview .preview-heading + .preview-lead {
  max-width: 1760px;
}
.location-preview .preview-heading + .preview-lead {
  text-align: left;
}
.location-preview .preview-area-map.inner--narrow {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.location-preview .preview-area-map img {
  display: block;
  width: 100%;
}
.location-preview .preview-area.inner--narrow {
  max-width: 1568px;
}
.location-preview .preview-area .preview-cards {
  max-width: none;
  width: 100%;
  gap: 76px 48px;
}

.preview-categoryWrap {
  display: grid;
  grid-template-columns: 1fr calc(1168 / 1568 * 100%);
  grid-template-rows: auto 1fr;
  column-gap: 40px;
}

.locationSliderControl {
  display: flex;
  align-items: center;
  column-gap: 25px;
}
.locationSliderControl .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 25px;
  width: auto !important;
  position: static;
}
.locationSliderControl .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: #d9d9d9;
  margin: 0 !important;
  opacity: 1;
}
/* .locationSliderControl .swiper-pagination-bullet-active {
  background-color: #000;
} */
#higashi .locationSliderControl .swiper-pagination-bullet-active {
  background-color: color-mix(in srgb, #004417, #fff 30%);
}
#ikebukuro .locationSliderControl .swiper-pagination-bullet-active {
  background-color: color-mix(in srgb, #af3d77, #fff 30%);
}
.locationSliderControl .swiper-button-next,
.locationSliderControl .swiper-button-prev {
  width: 40px;
  aspect-ratio: 1;
  color: #000;
  margin-top: 0 !important;
  position: static;
}
.locationSliderControl .swiper-button-next::after,
.locationSliderControl .swiper-button-prev::after {
  font-size: 24px;
}

.location-preview .preview-category-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 24px;
  border-bottom: none;
  line-height: 1.4;
  padding-bottom: 20px;
  margin-bottom: 36px;
}

.locationSlider {
  grid-area: 1/2/3/3;
  /* width: calc(1320 / 1920 * 100vw); */
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.location-preview .preview-card {
  display: flex;
  flex-direction: column;
}
.location-preview .preview-card h4 {
  font-size: 22px;
}
.location-preview .preview-card * + .itemList {
  margin-top: 30px;
}
.location-preview .preview-card .mapBtnBox {
  margin-top: auto;
  padding-top: 24px;
}
.location-preview .preview-card .mapBtn {
  margin-top: 0;
  height: auto;
}

@media (min-width: 769px) {
  .location-preview .preview-card:only-child,
  .location-preview .preview-card--feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    align-content: start;
  }
  .location-preview .preview-card:only-child > figure,
  .location-preview .preview-card--feature > figure {
    grid-column: 1;
    grid-row: 1 / span 4;
  }
  .location-preview .preview-card:only-child > :not(figure),
  .location-preview .preview-card--feature > :not(figure) {
    grid-column: 2;
  }
  .location-preview .preview-card:only-child h4,
  .location-preview .preview-card--feature h4 {
    margin-top: 0;
  }
  .location-preview .preview-card:only-child .mapBtnBox,
  .location-preview .preview-card--feature .mapBtnBox {
    margin-top: 0;
  }

  .location-preview .preview-card .itemList {
    display: grid;
    grid-template-columns: auto auto;
    gap: .5em 1.5em;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .location-preview .preview-area .preview-cards,
  .location-preview .preview-card:only-child,
  .location-preview .preview-card--feature {
    column-gap: 32px;
  }
  .location-preview .preview-card h4 {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .location-preview .preview-area .preview-cards {
    gap: 64px 44px;
  }
  .location-preview .preview-category-title {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 16px;
    padding-bottom: 16px;
    margin-bottom: 28px;
  }
  .location-preview .preview-card h4 {
    font-size: 18px;
  }

  .location-preview .preview-area.inner--narrow {
    max-width: 560px;
  }

  .preview-categoryWrap {
    display: block;
  }

  .locationSlider {
    margin-inline: auto;
  }

  .locationSliderControl {
    justify-content: center;
    margin-top: 40px;
  }
}


/* Reuse the Family / Child pageTab typography, gutters and button spacing. */
.location-area-links .pageTab__inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Keep two of the original three tab widths, centered. */
@media (min-width: 769px) {
  .location-area-links .pageTab__inner {
    width: calc((100% - 100px) * 2 / 3);
    max-width: calc(1760px * 2 / 3);
  }
}
@media (max-width: 767px) {
  .location-area-links .pageTab__inner {
    grid-template-columns: 1fr;
  }
}

/* PDF reference: left-aligned introduction with generous spacing below the map. */
.location-preview .preview-area-map + .preview-lead {
  max-width: 1568px;
  text-align: left;
  padding-top: clamp(60px, 9vw, 160px);
  /* The tab adds 25px above its label: 175px + 25px = 200px. */
  padding-bottom: clamp(80px, 10vw, 175px);
}
.location-preview .preview-area-map + .preview-lead .sectionCopy-20 {
  font-size: clamp(22px, 2vw, 36px);
  line-height: 1.7;
}
.location-preview .preview-area-map + .preview-lead .sectionText {
  margin-top: 25px;
  font-size: 18px;
  line-height: 1.9;
}
.location-preview .preview-area-title {
  font-size: clamp(20px, 1.5vw, 28px);
}
@media (max-width: 768px) {
  .location-preview .preview-area-map + .preview-lead {
    max-width: 560px;
  }
}

/* Match the space below both area navigations. */
.location-preview #higashi.preview-area,
.location-preview #ikebukuro.preview-area {
  margin-top: 127.5px;
}
@media (max-width: 768px) {
  .location-preview #higashi.preview-area,
  .location-preview #ikebukuro.preview-area {
    margin-top: 90px;
  }
}

/* Sentence breaks are for desktop; mobile copy flows naturally. */
@media (max-width: 768px) {
  .location-preview .location-sentence-break {
    display: none;
  }
}

/* Match the adjacent supplied facility image without altering the original photo. */
.location-preview .preview-card--santoku figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 410;
  object-fit: cover;
  object-position: center 40%;
}

/* Space between the medical cards and the second area navigation. */
.location-preview #higashi + .location-area-links {
  margin-top: clamp(80px, 12vw, 220px);
}

/* Increase only the gaps between adjacent facility categories by 1.5. */
.location-preview .preview-category + .preview-category {
  margin-top: 112.5px;
}
@media (max-width: 768px) {
  .location-preview .preview-category + .preview-category {
    margin-top: 82.5px;
  }
}

/* Short leading rule for each facility category. */
.location-preview .preview-category-title {
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  column-gap: 16px;
}
.location-preview .preview-category-title::before {
  content: '';
  flex: 0 0 30px;
  height: 1px;
  margin-top: calc(0.7em - 2px);
  background: currentColor;
}
.location-preview .preview-category-title > .cinzel {
  min-width: 0;
}

/* PDF lifestyle link: centered copy and two-tab width above the full-width image. */
.location-preview .renewal-lifestyle-intro .mapBox__inner {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
.location-preview .renewal-lifestyle-intro .sectionCopy-20 {
  font-size: 30px;
}
.location-preview .renewal-lifestyle-link .pageTab + .kvImg {
  margin-top: 80px;
}
@media (min-width: 769px) {
  .location-preview .renewal-lifestyle-link .lifestyle-tabs__inner {
    width: calc((100% - 100px) * 2 / 3);
    max-width: calc(1760px * 2 / 3);
  }
}
@media (max-width: 768px) {
  .location-preview .renewal-lifestyle-intro {
    margin-bottom: 40px;
  }
  .location-preview .renewal-lifestyle-intro .sectionCopy-20 {
    font-size: 22px;
  }
  .location-preview .renewal-lifestyle-intro .sectionText {
    font-size: 16px;
    margin-top: 24px;
  }
  .location-preview .renewal-lifestyle-link .pageTab + .kvImg {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .location-preview .preview-area-map + .preview-lead .sectionText {
    margin-top: 28px;
    font-size: 16px;
  }
}

/* Keep area labels on one line at tablet widths within the approved tab width. */
.pageTab__btn[href="#higashi"]::before {
  background-color: color-mix(in srgb, #004417, #fff 80%);
}
.pageTab__btn[href="#higashi"]::after {
  background-color: color-mix(in srgb, #004417, #fff 30%);
}

.pageTab__btn[href="#ikebukuro"]::before {
  background-color: color-mix(in srgb, #af3d77, #fff 80%);
}
.pageTab__btn[href="#ikebukuro"]::after {
  background-color: #af3d77;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .location-area-links .pageTab__btn {
    padding-inline: 12px;
  }
  .location-area-links .pageTab__text .en {
    font-size: clamp(20px, 2.5vw, 24px);
    white-space: nowrap;
  }
}

/* Preserve a clear heading/body hierarchy on smaller screens. */
@media (min-width: 769px) and (max-width: 1024px) {
  .location-preview .preview-area-map + .preview-lead .sectionCopy-20 {
    font-size: 28px;
  }
}
@media (max-width: 768px) {
  .location-preview .preview-area-map + .preview-lead .sectionCopy-20 {
    font-size: 24px;
  }
}

.pageTab__contentsList {
  display: grid;
  place-content: center;
  padding-top: 20px;
  opacity: .3;
  transition: .4s;
}
.pageTab__btn.is-active + .pageTab__contentsList,
.pageTab__btn:hover + .pageTab__contentsList {
  opacity: 1;
}
.pageTab__btn[href="#higashi"] + .pageTab__contentsList {
  color: #004417;
}
.pageTab__btn[href="#ikebukuro"] + .pageTab__contentsList {
  color: #af3d77;
}

.pageTab__contents {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em 2em;
  max-width: 360px;
  margin-inline: auto;
}
.pageTab__contents + .pageTab__contents {
  margin-top: 10px;
}
.pageTab__contents > li {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .pageTab__contents {
    gap: 0.5em 2em;
  }
  .pageTab__contents + .pageTab__contents {
    margin-top: 10px;
  }
  .pageTab__contents > li {
    font-size: 16px;
  }
}


/* commonKv
---------------------------------------------- */
.commonKv {
  padding-top: 80px;
}

.commonMap {
  margin-top: 100px;
}
.commonMap__inner {
  display: grid;
  grid-template-columns: auto calc(1195 / 1760 * 100%);
  gap: 20px 5%;
}

.commonKv__img {
  clip-path: inset(0 100% 0 0);
  transition: .7s .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.loaded .commonKv__img {
  clip-path: inset(0);
}

@media screen and (max-width: 767px) {
  .commonKv {
    padding-top: 40px;
  }

  .commonMap {
    margin-top: 0;
  }
  .commonMap__inner {
    grid-template-columns: 1fr;
  }
  .commonMap .sectionHead {
    padding-bottom: 0;
  }
  .commonMap__img .imgcap {
    right: auto;
    bottom: -1em;
    left: 0;
  }
}


/* lifeInfo
---------------------------------------------- */
.lifeInfo {
  margin-top: 200px;
}

.lifeInfo__title {
  font-size: 18px;
  letter-spacing: 0.02em;
}

.lifeInfoWrap {
  display: grid;
  grid-template-columns: calc(1030 / 1760 * 100%) 1fr;
  gap: 40px calc(80 / 1760 * 100%);
  margin-top: 60px;
}

.lifeInfoTab {
  grid-area: 1/1/1/3;
  display: flex;
}
.lifeInfoTab__btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: calc(100% / 6);
  color: #000;
  font-size: 18px;
  font-family: YakuHanMP, 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 1.5em .2em;
  opacity: .3;
  text-align: center;
  transition: 0.4s ease-in-out;
  z-index: 0;
}
.lifeInfoTab__btn.active,
.lifeInfoTab__btn:hover {
  opacity: 1;
}
.lifeInfoTab__btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: 0.4s ease-in-out;
  z-index: 1;
}

#map {
  grid-area: 2/1/3/2;
  position: relative;
  height: 600px;
}
.lifeInfoBody {
  grid-area: 2/2/3/3;
  height: 600px;
  background-color: #fff;
}
.lifeInfoBody__inner {
  height: 100%;
  padding-block: 10px;
  overflow-y: auto;
}
.lifeInfoList {
  display: none;
  position: relative;
}
.lifeInfoList.active {
  display: block;
  animation: lifeinfolist 0.5s;
}
@keyframes lifeinfolist {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.lifeInfoList__list {
}
.lifeInfoList__btn {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border-bottom: 1px solid #231815;
  cursor: pointer;
  font-family: YakuHanMP, 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  padding: 1.2em 15%;
  padding-left: 0;
  text-align: left;
}
.lifeInfoList__list > li:last-child .lifeInfoList__btn {
  border-bottom: none;
}
.lifeInfoList__list > li .num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: .5em;
  width: 32px;
  aspect-ratio: 1;
  background: #A98B14;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-family: YakuHanMP, YuMincho, 'Yu Mincho', 'Noto Serif JP', serif;
  text-align: center;
}
.lifeInfoList__list > li .txt {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5em 10%;
  padding-left: 3em;
  align-items: baseline;
}
.lifeInfoList__list > li .name {
  font-size: 13px;
  /* letter-spacing: 0.05em; */
  line-height: 1.4;
}
.lifeInfoList__list > li .name .small {
  font-size: 10px;
}
.lifeInfoList__list > li .time {
  font-size: 13px;
  /* letter-spacing: 0.05em; */
  line-height: 1.4;
  margin-left: auto;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .lifeInfo {
    margin-top: 50px;
  }
  .lifeInfoWrap {
    display: block;
    width: 100vw;
    margin-top: 30px;
    margin-inline: calc(50% - 50vw);
  }

  .lifeInfoTab {
    flex-wrap: wrap;
  }
  .lifeInfoTab__btn {
    width: calc((100% / 3));
    height: 50px;
    font-size: 12px;
  }
  .lifeInfoTab__btn::before {
    height: 2px;
  }

  #map {
    height: 300px;
  }

  .lifeInfoBody {
    height: 275px;
  }
  .lifeInfoBody__inner {
    padding-inline: 15px;
  }
}


/*  fade animation
--------------------------------------------------*/
@keyframes fadeSlide{ from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; }}
.fade_slide.inview{ animation-name: fadeSlide; animation-fill-mode:both; animation-duration:1s; visibility: visible !important; opacity: 0;}

/* fade in */
@keyframes fadeIn{ from { opacity: 0; } to { opacity: 1; } }
.fi.inview{ animation-name: fadeIn; animation-fill-mode:both; animation-duration:.5s; visibility: visible !important; opacity: 0;}

/* fade in up */
@keyframes fadeInUp{ from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; }}
.fi_u.inview{ animation-name: fadeInUp; animation-fill-mode:both; animation-duration:.5s; visibility: visible !important; opacity: 0;}

/* fade in down */
@keyframes fadeInDown{ from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; }}
.fi_d.inview{ animation-name: fadeInDown; animation-fill-mode:both; animation-duration:.5s; visibility: visible !important; opacity: 0;}

/* fade in right */
@keyframes fadeInRight{ from { opacity: 0; transform: translate(10px,0); } to { opacity: 1; transform: none; } }
.fi_r.inview{ animation-name: fadeInRight; animation-fill-mode:both; animation-duration:.5s; visibility: visible !important; opacity: 0;}

/* fade in left */
@keyframes fadeInLeft{ from { opacity: 0; transform: translate(-10px,0); }to { opacity: 1; transform: none; }}
.fi_l.inview{ animation-name: fadeInLeft; animation-fill-mode:both; animation-duration:.5s; visibility: visible !important; opacity: 0;}