@charset "utf-8";

/* Font Size */
h2 { font-size: var(--font28);font-family: var(--fontJp);letter-spacing: .3em}
h3 { font-size: var(--font24)}
h4 { font-size: var(--font20);}
h5 { font-size: var(--font18);}

h2 {
	text-align: center;
	position: relative;
	z-index: 2;
}


h2.title_line {
  font-size: var(--font25);
}
h2.title_line:after {
	content: "";
	width: 1px;
	height: 220px;
	background: #777;
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: 40px;
}
section {
	margin-top: 150px;
}

@media screen and (max-width: 1280px) {
  h2.title_line:after {
    height: 17vw;
    margin-top: 3.125vw;
  }
  section {
    margin-top: 11vw;
  }
}

@media screen and (max-width: 767px) {
  body#Plan main {
    padding-top: 70px;
  }
}



/* ----------[プラン ヘッド]---------- */

#plan_head {
  background-color: #ece7dd;
  padding-top: min(var(--100vw_1280) * 180 , 180px);
  padding-bottom: min(var(--100vw_1280) * 160 , 160px);
}


#plan_head h2 {
  letter-spacing: .05em;
  text-align: left;
}

.plan_head_ph {
  display: flex;
}
.plan_head_ph_L {
  width: 50%;
}
.plan_head_ph_R {
  width: 50%;
  max-width: 640px;
}
.plan_head_txt_wrap{
  position: relative;
  width: min(var(--100vw_1280) * 615 , 615px);
  margin-left: auto;
  margin-right: 0;
}
.plan_head_txt{
  width: min(var(--100vw_1280) * 546 , 546px);
  margin-left: auto;
  margin-right: 0;
  margin-bottom: min(var(--100vw_1280) * 150 , 150px);
}
.plan_head_txt h2 {
  margin-bottom: 0.8em;
}
.plan_head_txt h2 br:last-of-type {
  display: none
}
.plan_head_txt p {
  font-size: var(--font18);
}

.plan_ph01 {
  margin-right: min(var(--100vw_1280) * 80 , 80px);
}
.plan_ph02 {
  width: min(var(--100vw_1280) * 295 , 295px);
  margin-left: auto;
  margin-right: 0;
  z-index: 2;
  transform: translateY(-30%);
}
.plan_ph03 {
  width: min(var(--100vw_1280) * 437 , 437px);
  position: absolute;
  bottom: 0;
  left: 0;
}
.plan_ph_sp {display: none;}


@media screen and (max-width: 1320px) {
  .plan_head_txt{
    margin-right: 2vw;
  }
  .plan_ph01 {
    margin-right: 1vw;
  }
}

@media screen and (max-width: 1000px) {
  .plan_ph01 {
    margin-right: 0;
  }
  .plan_head_txt {
    margin-bottom: 6vw;
  }
  .plan_head_txt h2 br {
    display: block;
  }
  .plan_head_ph_R figure {
    display: none;
  }
  .plan_ph_sp {
    display: flex;
    justify-content: space-between;
    margin: 0 2vw;
  }
  .plan_ph_sp figure img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保ちつつエリアを埋める */
    object-position: center; /* 中央を基準に配置（調整可能） */
  }

}
@media screen and (max-width: 767px) {
  #plan_head h2 {
    text-align: center;
  }
  .plan_head_txt h2 br:last-of-type {
    display: none;
  }
  .plan_head_ph {
    flex-direction: column;
    width: 96vw;
    margin-left: auto;
    margin-right: auto;
  }
  .plan_head_ph_R {order: 1;width: 100%}
  .plan_head_ph_L {order: 2;width: 100%}
  .plan_head_txt_wrap,
  .plan_head_txt {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
}

/* ----------/[プラン ヘッド]---------- */



/* ----------[プラン ヘッド スライド]---------- */
.plan_head_slide {
  margin-top: min(var(--100vw_1280) * 94 , 94px);
  overflow: hidden;
}
.plan_head_slide h3 {
  font-family: var(--fontJp);
  font-size: var(--font31);
  margin-bottom: 0.8em;
}
.plan_head_slide h3 span {
  font-size: var(--font22);
}
.plan_head_slide li img:last-of-type {
  display: none;
}

/* スライダー全体の左端を画面に合わせる */
.slider .slick-list {
  padding-left: 0 !important;
  /* 右側に次のスライドを見せるための余白を作る（お好みで調整してください） */
  padding-right: 20% !important; 
  overflow: visible !important; /* はみ出た右側のスライドを可視化 */
}

/* 各スライドの幅を微調整して綺麗に収める */
.slider .slick-slide {
  box-sizing: border-box;
  /* padding-right: 15px; スライド同士の間の隙間 */
}

/* 1. デフォルトのフォント（「•」の文字）を完全に消去 */
.slider .slick-dots li button::before {
  display: none !important;
}

/* 2. ドットのボタン自体を丸型にして、白丸・黒フチにする（非アクティブ時） */
.slider .slick-dots li button {
  width: 14px;       /* ドットの横幅 */
  height: 14px;      /* ドットの縦幅 */
  padding: 0;
  border: 1px solid rgba(0,0,0,.5); /* フチ：2pxの黒線 */
  border-radius: 50%;        /* 正円にする */
  cursor: pointer;
  transition: all 0.3s ease;            /* 切り替え時のアニメーション */
}

/* 3. アクティブ（現在表示中）のドットのスタイル */
.slider .slick-dots li.slick-active button {
  background-color: #000; /* アクティブ時は中を黒で塗りつぶす */
  border-color: #000;
}

/* 4. ドットが並ぶエリア全体のサイズ調整（ボタンのサイズ変更に伴うズレ防止） */
.slider .slick-dots li {
  width: 14px;       /* 上記のbuttonのwidthに合わせる */
  height: 14px;      /* 上記のbuttonのheightに合わせる */
  margin: 0 6px;     /* ドット同士の左右の間隔 */
}

  .slider .slick-dots {
    top:max( -55px , var(--100vw_1280) * -60);
    bottom: inherit;
    text-align: right;
    width: min(100% , 1280px);
    margin-left: auto;
    margin-right: 0;
  }

@media screen and (max-width: 1320px) {
  .plan_head_slide h3 {
    padding-left: 2vw;
  }
}

@media screen and (max-width: 1000px) {
  .plan_head_slide h3 {
    text-align: center;
  }
  .plan_head_slide li img:first-of-type {
    display: none;
  }
  .plan_head_slide li img:last-of-type {
    display: block;
  }
  .slider .slick-list {
    padding-right: 10% !important;
  }

  .slider .slick-dots {
    top:inherit;
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
}


/* ----------/[プラン ヘッド / スライド]---------- */







/* ----------[ランドプラン]---------- */

#land_plan {
  text-align: center;
}
#land_plan h2 {
  margin-bottom: 1.2em;
}
#land_plan h2 div {
  font-family: var(--fontJp);
  margin-bottom: 0.8em;
}
#land_plan p {
  font-size: var(font18);
}


@media screen and (max-width: 767px) {
  #land_plan p {
    text-align: left;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  #land_plan figure figcaption.rb_cap {
    bottom: 0;
  }

}


/* ----------/[ランドプラン]---------- */



/* ----------[南西方向を望む写真]---------- */


#view {
  text-align: center;
}
#view h2 {
  margin-bottom: 1.2em;
}
#view h2 div {
  font-family: var(--fontJp);
  margin-bottom: 0.8em;
}
#view h2 small {
  font-size: 75%;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 767px) {
  #view .ann {
    padding-left: 2vw;
    padding-right: 2vw;
  }

}
/* ----------/[南西方向を望む写真]---------- */


/* ----------[プラン]---------- */

#plan_list {
  text-align: center;
  background-color: #ebe6dc;
  padding-top: min(var(--100vw_1280) * 100 , 100px);
  padding-bottom: min(var(--100vw_1280) * 100 , 100px);
}
#plan_list h2 {
  margin-bottom: 2em;
}
#plan_list h2 div {
  font-family: var(--fontJp);
  margin-bottom: 0.8em;
}

#plan_list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#plan_list li {
  width: min(var(--100vw_1280) * 600 , 600px);
  margin-bottom: min(var(--100vw_1280) * 80 , 80px);
  position: relative;
}

a.intro_link {
  position: absolute;
  bottom: min(var(--100vw_1280) * 44 , 44px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42%;
  height: 3em;
  border: 1px solid #fff;
  border-radius: 1.5em;
  gap:0.8em;
  transition: .4s;
  color: #fff;
}
a.intro_link svg {
  height: 1em;
  width: auto;
}

a.intro_link:hover {
  background-color: rgba(255,255,255,.8);
  color: #000;
  box-shadow: 3px 3px 10px rgba(0,0,0,.3);
}
a.intro_link polygon {
  transition: .4s;
  fill:#fff;
}
a.intro_link:hover polygon {
  fill:#c00;
}

@media screen and (max-width: 1320px) {
  #plan_list ul {
    width: 96vw;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  #plan_list h2 {
    margin-bottom: 0;
  }
  #plan_list ul {
    flex-direction: column;
  }

  #plan_list li {
    width: 100%;
  }
  a.intro_link {
    font-size: calc(var(--100vw_767) *25);
    width: 75%;
    bottom: 7vw;
  }

}


/* ----------/[プラン]---------- */