/* =========================================================
   style.css — TOPページ固有スタイル
   FV / Grand Open / Concept / Land Plan / Location / Page Up
   ========================================================= */

/* ---------- セクション共通 ---------- */
.sec{ position:relative; overflow:hidden; }
.sec--beige{ background:var(--beige); }
.sec--white{ background:#fff; }
/* 装飾(.deco z-index:11)より前面に出して、カンプ同様
   「装飾は本文の背面」に見えるようにする */
.inner{ position:relative; z-index:12; }

/* 装飾（ブロブ・ドット）共通 ※"bg"画像はCSS背景として配置 */
.deco{
  position:absolute;
  z-index:11;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
/* 各装飾の配置・背景（PDFカンプの座標に合わせて配置）
   ※ グランドオープン(.grandopen)は上部300pxがFVと重なるため、
     カンプ上のY座標から重なり分を差し引いた値で指定 */

/* ② グランドオープン */
/* 左上：ティールのブロブ＋白斜線（カンプ y≈1250 / 左端・幅約286px） */
.deco-go1{ top:40px; left:0; width:286px; aspect-ratio:286/354; background-image:url(../img/bg01.png); }
/* 右上：ミントのドット円（カンプ y≈1290 / 右端・幅約240px） */
.deco-go2{ top:330px; right:0; width:240px; aspect-ratio:239/236; background-image:url(../img/bg07.png); }
/* 右：黄色の光彩＋水色斜線円（カンプ y≈1640 / 右端・縦長） */
.deco-go3{ top:750px; right:0; width:200px; aspect-ratio:200/571; background-image:url(../img/bg13.png); }
/* 左下：黄色の光彩（カンプ y≈1850 / 左 約165px） */
.deco-go4{ top:880px; left:150px; width:110px; aspect-ratio:177/581; background-image:url(../img/bg03.png); }
/* 左下端：黄色のブロブ＋白ドット（カンプ y≈2300 / 左端） */
.deco-go5{ bottom:0; left:0; width:210px; aspect-ratio:333/336; background-image:url(../img/bg05.png); }
/* 右下：水色の斜線円（カンプ y≈2030 / 右端・幅約240px） */
.deco-go6{ bottom:120px; right:0; width:240px; aspect-ratio:239/237; background-image:url(../img/bg15.png); }

/* ③ Concept */
/* 01カード左：ピンクのドット円（カンプ y≈3060 / 左 約55px・幅約240px） */
.deco-cn1{ top:400px; left:55px; width:240px; aspect-ratio:241/238; background-image:url(../img/bg06.png); }
/* 02カード右下：ミントのドット円（カンプ y≈3480 / 右端・幅約240px） */
.deco-cn2{ top:820px; right:0; width:240px; aspect-ratio:239/236; background-image:url(../img/bg07.png); }
/* 03カード左：薄オレンジのドット円 */
.deco-cn3{ top:1150px; left:20px; width:230px; aspect-ratio:250/249; background-image:url(../img/bg12.png); }
/* 04カード右：水色のドット円 */
.deco-cn4{ top:1400px; right:20px; width:230px; aspect-ratio:239/236; background-image:url(../img/bg09.png); }

/* ④ Land Plan */
/* 左上：ティールの大きなブロブ＋白斜線（カンプ y≈4640 / 左端・幅約290px） */
.deco-lp1{ top:70px; left:0; width:290px; aspect-ratio:286/354; background-image:url(../img/bg01.png); }
/* 右上：白のドット円（カンプ y≈4660 / 右端・幅約240px） */
.deco-lp2{ top:90px; right:0; width:240px; aspect-ratio:216/216; background-image:url(../img/bg10.png); }
/* 左下：薄オレンジのドット円（カンプ y≈5500 / 左 約165px） */
.deco-lp3{ bottom:0; left:150px; width:200px; aspect-ratio:250/249; background-image:url(../img/bg12.png); }
/* 右下：水色の斜線円 */
.deco-lp4{ bottom:150px; right:0; width:240px; aspect-ratio:239/237; background-image:url(../img/bg15.png); }

/* ⑤ Location */
/* 左上：ピンクのドット円（カンプ y≈6610 / 左 約120px・幅約240px） */
.deco-lc1{ top:270px; left:120px; width:240px; aspect-ratio:241/238; background-image:url(../img/bg06.png); }
/* 右中：水色のドット円（カンプ y≈6850 / 右端・幅約270px） */
.deco-lc2{ top:510px; right:0; width:270px; aspect-ratio:239/236; background-image:url(../img/bg09.png); }
/* 左下：ミントのドット円 */
.deco-lc3{ bottom:60px; left:20px; width:200px; aspect-ratio:239/236; background-image:url(../img/bg07.png); }

/* 波形の区切り（"bg"画像・全幅／背景として配置） */
.wave{
  width:100%;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
}
.wave--1{ aspect-ratio:1280 / 88; background-image:url(../img/page_bg01.png); }
.wave--2{ aspect-ratio:1280 / 85; background-image:url(../img/page_bg02.png); }
.wave--3{ aspect-ratio:1280 / 85; background-image:url(../img/page_bg03.png); }
.wave--4{ aspect-ratio:1280 / 90; background-image:url(../img/page_bg04.png); }

/* セクション見出し（茶バナー画像）＋リード（キャッチ画像） */
.sec-tit{ text-align:center; }
.sec-tit img{ display:inline-block; }
.sec-catch{ text-align:center; margin-top:34px; }
.sec-catch img{ display:inline-block; }

/* ---------- ① ファーストビュー ---------- */
.fv{
line-height:0;
margin-top:-84px;
z-index:10;
position:relative;
}
.fv img{
width:100%;
}

/* ---------- ② グランドオープン ---------- */
.grandopen{
padding:378px 0 88px;
margin-top:-300px;
text-align:center;
}
.grandopen__visual{ margin:0 auto; text-align:center; }
.grandopen__visual img{ width:1040px; margin:0 auto; }
.grandopen__desc{
  font-size:16px;
  line-height:2.5;
  letter-spacing:.12em;
  margin:40px 0 0;
}
.grandopen__price{ margin:44px auto 0; }
.grandopen__price img{ width:890px; margin:0 auto; }
.grandopen__ctas{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:38px;
}
.grandopen__ctas img{ width:311px; }

/* ---------- ③ Concept ---------- */
.concept{ padding:72px 0 96px; }
.concept__list{
  display:grid;
  grid-template-columns:350px 350px;
  justify-content:center;
  gap:56px 110px;
  margin-top:56px;
}
.concept__item{ text-align:center; }
.concept__img img{ width:350px; margin:0 auto; }
.concept__border img{ width:350px; margin:14px auto; }
.concept__text{
  font-size:14px;
  line-height:2.15;
  letter-spacing:.04em;
  padding:0 30px;
text-align:left;
}

/* ---------- ④ Land Plan ---------- */
.landplan{ padding:72px 0 96px; }
.landplan__map{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  margin-top:30px;
  position:relative;
}
/* 区画図エリアに敷かれる白い横帯（landplan_bg.png） */
.landplan__map::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:31%;
width:100%;
height:32%;
background:url(../img/landplan_bg.png) center/100% 100% no-repeat;
z-index:0;
}
.landplan__map .map::before{
content:'';
background:url(../img/landplan_bg01.png);
background-position:center left;
background-size:cover;
background-repeat:no-repeat;
width:159px;
height:140px;
width:22%;
height:27%;
position:absolute;
top:33%;
left:-25%;
}
.landplan__map .map::after{
content:'';
background:url(../img/landplan_bg02.png);
background-position:center left;
background-size:cover;
background-repeat:no-repeat;
/*width:177px;*/
/*height:213px;*/
width:23%;
height:38%;
position:absolute;
top:25%;
right:-14%;
}
@media (max-width:1200px){
.landplan__map .map::before{
content:'';
background:transparent;
}
.landplan__map .map::after{
content:'';
background:transparent;
}
}

.landplan__map > *{ position:relative; z-index:1; }
/* 左右イラストは区画図の上部（白帯）に沿わせて配置 */
.landplan__map .illust-l{
  width:159px; aspect-ratio:159 / 140;
  margin-top:220px;
  background:url(../img/landplan_bg01.png) center/contain no-repeat;
}
.landplan__map .map img{ width:750px; }
.landplan__map .illust-r{
  width:177px; aspect-ratio:177 / 213;
  margin-top:180px;
  background:url(../img/landplan_bg02.png) center/contain no-repeat;
}
.landplan__points{
  display:grid;
  grid-template-columns:repeat(3,220px);
  justify-content:center;
  gap:30px 70px;
  margin:56px auto 0;
}
.landplan__points img{ width:220px; }
.landplan__more{ text-align:center; margin-top:50px; }
.landplan__more img{ width:340px; margin:0 auto; }

.landplan__more a,.landplan__more a:hover{
pointer-events:none!important;
opacity:1!important;
}

/* ---------- ⑤ Location ---------- */
.location{ padding:72px 0 96px; }
.location__list{
  display:flex;
  justify-content:center;
  gap:56px;
  margin-top:54px;
}
.location__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:301px;
}
.location__img img{ width:301px; }
.location__text{
  font-size:15px;
  line-height:2;
  letter-spacing:.02em;
  text-align:center;
  margin-top:14px;
}
.location__border img{ width:250px; margin-top:12px; }
.location__more{ text-align:center; margin-top:50px; }
.location__more img{ width:341px; margin:0 auto; }


/* ---------- ⑥ ページアップ ---------- */
.pageup{ background:var(--beige); padding:56px 0; text-align:center; }
.pageup a{ display:inline-block; transition:transform .2s; }
.pageup a:hover{ transform:translateY(-4px); }
.pageup img{ width:121px; margin:0 auto; }

/* =========================================================
   スマートフォン（〜768px）
   コンテンツ幅は100% / 横幅指定は % を基本とする
   ========================================================= */
@media (max-width:768px){

  /* ---- ベース ---- */
  body{ min-width:0; }
  .container{ width:100%; }
  .sec{ overflow:hidden; }

  /* 見出しバナー／リード画像 */
  .sec-tit img{ max-width:78%; }
  .sec-catch{ margin-top:22px; }
  .sec-catch img{ max-width:90%; }

  /* 装飾はサイズを抑える（セクションのoverflowで見切れOK） */
  .deco{ max-width:36%; height:auto; }
  /* SPで非表示にする背景装飾（bg01,02,03,04,05,11,12,13,14） */
  .deco--pc{ display:none; }

  /* ---- ① FV ---- */
  .fv{ margin-top:0; }
  .fv img{ width:100%; }

  /* ---- ② グランドオープン ---- */
  .grandopen{
    margin-top:-20%;
    padding:20% 0 56px;
  }
  .grandopen__visual img{ width:88%; }
  .grandopen__desc{
    width:90%;
    margin:26px auto 0;
    font-size:3.5vw;
    line-height:2.1;
    letter-spacing:.04em;
  }
  .grandopen__price{ margin:30px auto 0; }
  .grandopen__price img{ width:90%; }
  .grandopen__ctas{ gap:4%; margin-top:26px; padding:0 5%; }
  .grandopen__ctas a{ width:47%; }
  .grandopen__ctas img{ width:100%; }

  /* ---- ③ Concept（1カラム） ---- */
  .concept{ padding:48px 0 64px; }
  .concept__list{
    grid-template-columns:1fr;
    gap:48px;
    width:86%;
    margin:40px auto 0;
  }
  .concept__img img{ width:100%; }
  .concept__border img{ width:100%; }
  .concept__text{
  font-size:3.6vw;
  padding:0;
text-align:center;
}

  /* ---- ④ Land Plan ---- */
  .landplan{ padding:48px 0 64px; }
  .landplan__map{
    flex-direction:column;
    align-items:center;
    gap:10px;
    width:92%;
    width:100%;
padding:0 4%;
    margin:26px auto 0;
  }
  .landplan__map .illust-l,
  .landplan__map .illust-r{ display:none; }
  .landplan__map .map{ width:100%; }
  .landplan__map .map img{ width:100%; }
  .landplan__points{
    grid-template-columns:repeat(2,1fr);
    gap:20px 4%;
    width:86%;
    margin:40px auto 0;
  }
  .landplan__map::before{
  top: 50%;
  }
  .landplan__points img{ width:100%; }
  .landplan__more{ margin-top:36px; }
  .landplan__more img{ width:66%; }

  /* ---- ⑤ Location（1カラム） ---- */
  .location{ padding:48px 0 64px; }
  .location__list{
    flex-direction:column;
    align-items:center;
    gap:40px;
    width:86%;
    margin:40px auto 0;
  }
  .location__item{ width:100%; max-width:360px; }
  .location__img img{ width:100%; }
  .location__text{ font-size:4vw; }
  .location__border img{ width:100%; }
  .location__more{ margin-top:36px; }
  .location__more img{ width:66%; }

  /* ---- ⑥ ページアップ ---- */
  .pageup{ padding:40px 0; }
  .pageup img{ width:88px; }
}