@charset "utf-8";

/**
 *
 *  ページ用CSS
 *nearby
 */

/*--------------------------------------------------------------------------
	Overwright
---------------------------------------------------------------------------*/
.content{
	font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}

.secCopy {
  color: #003264;
  font-size: clamp(20px, 0.22rem + 2.32vw, 30px);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.secTxt {
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 2.2;
}

.ib {
  display: inline-block;
}

.pageTitle {
  font-family: "EB Garamond", serif;
  font-size: clamp(30px, -0.58rem + 4.65vw, 64px);
  letter-spacing: .1em;
  line-height: 1;
  color: #163b76;
  text-align: center;
}
.pageTitle::after {
  content: '';
  display: block;
  width: 100px;
  height: 1px;
  background-color: #8a9dba;
  margin-top: 20px;
  margin-inline: auto;
}

.pageCopy {
  font-size: clamp(18px, 0.54rem + 1.64vw, 30px);
  letter-spacing: 0.05em;
  line-height: 2;
}
.pageCopy--center {
  text-align: center;
}
.pageTitle + .pageCopy {
  margin-top: 2.5em;
}
.pageCopy + .secTxt {
  margin-top: 2.5em;
}

.opa {
	transition: opacity .5s;
}

@media (hover: hover) and (pointer: fine) {
	.opa:hover {
		opacity: .7;
	}
}

@media screen and (max-width: 768px) {
  .pageTitle + .pageCopy {
    margin-top: 1em;
  }
  .pageCopy + .secTxt {
    margin-top: 1em;
  }
}

/* swipe
---------------------------------------------- */
.swipe{
  position: relative;
  overflow: auto;
  -ms-overflow-style:none;
}
.swipe::-webkit-scrollbar{
  display: none;
}
.swipeInner{
  position: relative;
}
.swipeInner::after{
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  height: 1px;
}
.swipeInner img{
  vertical-align: top;
}
.swipeCaution{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../asset/img/nearby/icon_scrollCaution.svg) no-repeat center/203px auto rgba(51,51,51,.8);
  pointer-events: none;
  transition: .4s ease;
}
.swipeCaution.is-hidden{
  opacity: 0;
  visibility: visible;
}

/* kv
---------------------------------------------- */
.kv {
  position: relative;
  z-index: 0;
}

.kv__title {
  color: #fff;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.kv__title .en {
  display: block;
  font-size: clamp(48px, 1.85rem + 3.83vw, 76px);
  text-shadow: 0 0 40px rgb(0 0 0 / 1), 0 0 40px rgb(0 0 0 / .4);
  line-height: 1;
}
.kv__title .ja {
  display: block;
  font-size: clamp(16px, 0.97rem + 0.82vw, 22px);
  text-shadow: 0 0 40px rgb(0 0 0 / 1), 0 0 40px rgb(0 0 0 / .4);
  margin-top: 10px;
}

/* intro
---------------------------------------------- */
.intro {
  padding-block: 150px;
  position: relative;
  z-index: 0;
}
.intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(235, 235, 235, 1) 0%, rgba(250, 250, 250, 1) 50%, rgba(230, 230, 230, 1) 100%);
  z-index: -1;
}

.intro__copy {
  font-size: clamp(18px, 0.54rem + 1.64vw, 30px);
  letter-spacing: 0.1em;
  line-height: 1.9;
}

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

.introSliderControl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 5%;
  width: calc(850 / 1000 * 100%);
  margin-top: 20px;
  margin-left: auto;
  position: absolute;
  right: 0;
}
.introSliderControl .swiper-pagination {
  width: auto;
  position: static;
  transform: revert;
  color: #999;
  font-size: clamp(20px, 1.16rem + 1.09vw, 28px);
  font-family: "EB Garamond", serif;
  letter-spacing: 0.1em;
}
.introSliderControl .swiper-scrollbar {
  flex: 1;
  height: 1px;
  background: #ccc;
}
.introSliderControl .swiper-scrollbar-drag {
  background: #666;
}

.introSliderControl .swiper-scrollbar,
.introSliderControl .swiper-pagination-progressbar {
  flex: 1;
  height: 1px;
  background: #ccc;
	position: relative;
	inset: auto;
}
.introSliderControl .swiper-scrollbar-drag,
.introSliderControl .swiper-pagination-progressbar-fill {
  background: #003c7a;
	transform: scale(1);
	transition: .4s;
}

.introSliderNav {
  display: flex;
  align-items: center;
  column-gap: calc(20 / 270 * 100%);
  margin-top: 50px;
}
.introSliderNav .swiper-button-prev,
.introSliderNav .swiper-button-next {
  position: static;
  width: calc(60 / 270 * 100%);
  height: auto;
  margin-top: 0 !important;
}
.introSliderNav .swiper-button-next {
  transform: scaleX(-1);
}
.introSliderNav .swiper-button-prev::after,
.introSliderNav .swiper-button-next::after {
  content: '';
}

@media screen and (min-width: 769px) {
  .introWrap {
    display: grid;
    grid-template-columns: calc(1000 / 1500 * 100%) 1fr;
    align-items: flex-end;
    gap: 0 calc(80 / 1500 * 100%);
  }

  .introHead {
    padding-right: 5%;
  }
  .introSlide {
    grid-area: 1/1/3/2;
  }

  .introBottom {
    align-self: flex-end;
    width: 90%;
    max-width: 270px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .intro {
    padding-block: 60px;
  }

  .introHead {
    width: calc(300 / 375 * 100%);
    margin-inline: auto;
  }

  .intro__copy {
    line-height: 2;
  }

  .introSlide {
    margin-top: 30px;
  }
  .introSlide__img {
    width: calc(340 / 375 * 100%);
  }
  .introSliderControl {
    width: calc(300 / 375 * 100%);
    margin-inline: auto;
    position: static;
  }

  .introSliderNav {
    justify-content: flex-end;
    column-gap: 10px;
    margin-top: 0;
  }
  .introSliderNav .swiper-button-prev,
  .introSliderNav .swiper-button-next {
    width: 40px;
  }

  .introBottom {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 40px;
    width: calc(300 / 375 * 100%);
    margin-top: 10px;
    margin-inline: auto;
  }
}

/* landplan
---------------------------------------------- */
.landplan {
  padding-block: 130px 150px;
  position: relative;
  z-index: 0;
}
.landplan::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24%;
  background: linear-gradient(135deg, rgba(235, 235, 235, 1) 0%, rgba(250, 250, 250, 1) 50%, rgba(230, 230, 230, 1) 100%);
  z-index: -1;
}

.landplanImg {
  max-width: 1260px;
  margin-top: 50px;
  position: relative;
  z-index: 0;
}
.landplanImg__img .p-caption {
  right: 45%;
}
.landplanImg__text {
  position: absolute;
  bottom: 10%;
  right: 5%;
  font-size: clamp(18px, 1.17rem + 0.82vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.9;
  z-index: 1;
}

.landplanSlide {
  max-width: 1240px;
  margin-top: 90px;
}

.landplanSlider .swiper-slide {
  width: calc(282 / 1200 * 100%);
  height: auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0 0 0 / .1);
}
.landplanSlider__body {
  padding: 20px calc(30 / 282 * 100%);
}
.landplanSlider__title {
  display: flex;
  align-items: center;
  gap: 7%;
  padding-bottom: .8em;
  border-bottom: 1px solid #8a9dba;
}
.landplanSlider__title .num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(76, 99, 155, 1) 0%, rgba(22, 59, 118, 1) 70%);
  border-radius: 50%;
  color: #fff;
  font-family: "Cormorant Infant", serif;
  font-size: 25px;
  line-height: 1;
  text-align: center;
}
.landplanSlider__title .text {
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.landplanSlider__text {
  color: #666;
  margin-top: 1.5em;
}

@media screen and (min-width: 769px) {
  .landplanSlider .swiper-wrapper {
    justify-content: space-between;
  }
  .landplanSliderControl {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .landplan {
    padding-block: 60px;
  }
  .landplan::before {
    height: 24%;
  }

  .landplanImg {
    max-width: 560px;
    margin-top: 20px;
  }
  .landplanImg__img .p-caption {
    right: 30%;
  }
  .landplanImg__text {
    margin-top: 2em;
    position: static;
  }

  .landplanSlide {
    width: calc(300 / 335 * 100%);
    margin-top: 30px;
  }

  .landplanSlider .swiper-slide {
    width: 100%;
  }
  .landplanSlider__body {
    padding: 20px 30px 30px;
  }
  .landplanSlider__text {
    margin-top: 1em;
  }

  .landplanSliderControl {
    display: flex;
    align-items: center;
    column-gap: 4%;
    width: 100%;
    margin-top: 20px;
  }
  .landplanSliderControl .swiper-pagination {
    width: auto;
    position: static;
    transform: revert;
    color: #999;
    font-size: 20px;
    font-family: "EB Garamond", serif;
    letter-spacing: 0.1em;
  }
  .landplanSliderControl .swiper-scrollbar {
    flex: 1;
    height: 1px;
    background: #ccc;
  }
  .landplanSliderControl .swiper-scrollbar-drag {
    background: #163b76;
  }

  .landplanSliderControl .swiper-scrollbar,
  .landplanSliderControl .swiper-pagination-progressbar {
    flex: 1;
    height: 1px;
    background: #ccc;
    position: relative;
    inset: auto;
  }
  .landplanSliderControl .swiper-scrollbar-drag,
  .landplanSliderControl .swiper-pagination-progressbar-fill {
    background: #163b76;
    transform: scale(1);
    transition: .4s;
  }
}

/* green
---------------------------------------------- */
.green {
  padding-block: 150px;
}

.greenWrap {
  display: flex;
  align-items: center;
  gap: 40px calc(70 / 1200 * 100%);
  max-width: 1240px;
  margin-top: 90px;
}

.greenImg {
  width: calc(790 / 1200 * 100%);
}

.greenList {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px calc(10 / 790 * 100%);
}
.greenList__name {
  font-size: clamp(10px, 0.37rem + 0.82vw, 16px);
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-top: .5em;
  text-align: center;
}

.greenContents {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .green {
    padding-block: 60px;
  }

  .greenWrap {
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    margin-top: 40px;
    padding-inline: 0;
  }

  .greenImg {
    width: 100%;
  }

  .greenList {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px calc(3.75 / 375 * 100%);
  }
  .greenList__name {
    font-size: 9px;
    letter-spacing: 0;
  }

  .greenContents {
    flex: revert;
    width: calc(300 / 375 * 100%);
    margin-inline: auto;
  }
}

/* facade
---------------------------------------------- */
.facade {
  padding-block: 150px;
  position: relative;
  z-index: 0;
}
.facade::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(235, 235, 235, 1) 0%, rgba(250, 250, 250, 1) 50%, rgba(230, 230, 230, 1) 100%);
  z-index: -1;
}

.facadeBox {
  max-width: 1240px;
  margin-top: 90px;
}
.facadeBox + .facadeBox {
  margin-top: 120px;
}

.facadeBox__inner {
  display: flex;
  align-items: center;
  gap: 25px calc(100 / 1200 * 100%);
}

.facadeHead {
  width: calc(740 / 1200 * 100%);
}

.facadeBody {
  flex: 1;
}
.facade__copy {
  letter-spacing: 0;
}

@media screen and (min-width: 769px) {
  .facadeBox.reverse .facadeBox__inner {
    flex-direction: row-reverse;
  }
}

@media screen and (max-width: 768px) {
  .facade {
    padding-block: 60px;
  }

  .facadeBox {
    width: calc(300 / 375 * 100%);
    max-width: 560px;
    margin-top: 40px;
    padding-inline: 0;
  }
  .facadeBox + .facadeBox {
    margin-top: 50px;
  }

  .facadeBox__inner {
    flex-direction: column;
  }

  .facadeHead {
    width: 100%;
  }

  .facadeBody {
    width: 100%;
  }
  .facade__copy {
    letter-spacing: .05em;
  }
}

/* concept
---------------------------------------------- */
.concept {
  padding-block: 150px;
}

.conceptWrap {
  display: flex;
  gap: 25px calc(100 / 1200 * 100%);
  max-width: 1240px;
  margin-top: 80px;
}

.conceptHead {
  flex: 1;
}

.conceptContents {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.concept__copy {
  margin-top: -.5em;
}
.pageCopy + .concept__text {
    margin-block: 1.5em 1em;
}

.profile {
  border-top: 1px solid #999;
  margin-top: auto;
  padding-top: 30px;
}
.profile__name {
  font-size: 26px;
  letter-spacing: 0.15em;
  text-align: right;
}
.profile__name .small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.conceptBody {
  width: calc(540 / 1200 * 100%);
}

@media screen and (max-width: 768px) {
  .concept {
    padding-block: 60px;
  }

  .conceptWrap {
    flex-direction: column;
    width: calc(300 / 375 * 100%);
    max-width: 560px;
    margin-top: 30px;
    padding-inline: 0;
  }

  .conceptHead {
    width: 100%;
  }

  .conceptContents {
    display: block;
    height: auto;
  }

  .concept__copy {
    margin-top: .05em;
  }
  .pageCopy + .concept__text {
      margin-block: 1em 1.5em;
  }

  .profile {
    margin-top: 0;
    padding-top: 25px;
  }
  .profile__name {
    font-size: 20px;
  }

  .conceptBody {
    width: 100%;
  }
}