@charset "utf-8";

/* =====================================================
   SP共通ルール（sp.jpg準拠）
   ・PCで画像が左（.l）→ SPも背景画像を左寄せ
   ・PCで画像が右（.r）→ SPも背景画像を右寄せ
   ・画像は背景化して opacity:.3、テキストを上に重ねる
   ・cover は不使用。width指定＋height:auto
   ===================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:#fff;
  margin-top:70px; /* ヘッダー高さ分を確保（topでは領域を取れず下段に被るため） */
}
/* ===== セクション共通 ===== */
.sec{
  position:relative;
  overflow:hidden;
  padding:3.5rem 0;
}
.sec-img{
  position:absolute;
  top:0;
  z-index:0;
  width:78%;
  opacity:var(--op-bg);
  pointer-events:none;
}
.sec-img.fadeIn_left,
.sec-img.fadeIn_right{opacity:var(--op-bg);transition:transform 2s;}
.sec-img.is-show{opacity:var(--op-bg);}
.sec.l .sec-img{left:0;}
.sec.r .sec-img{right:0;}
.sec-txt{padding-top:1.5rem;}

/* SPでは円形写真キャプションを非表示 */
.sec-img .cap{display:none;}

/* ===== 見出し ===== */
.ttl-en{margin-bottom:1.25rem;}
.ttl-en img{width:auto;height:2.6rem;}
.ttl{margin-bottom:1.5rem;}

/* ===== アイコン ===== */
.icon{width:5rem;margin:1rem 0 0 auto;}
.icon img{width:100%;}

/* ===== view more ===== */
.btn{width:40%;margin:2rem auto 1.5rem;} /* 下に1.5remのスペース */

/* ===== 写真列・スライダー ===== */
.ph-row{
  width:var(--w-in);
  margin:1.5rem auto 0;
  flex-direction:column;
  gap:1.5rem;
}
.slides{gap:1rem;padding-right:1rem;}
.slides li{width:calc(100vw / 2.3 - 1rem);display:flex;}
.ph-ph{bottom:3rem;}


/* ===== KV / PRIME STYLE ===== */
.kv{
  background:var(--c-bg2);
  padding:2.5rem 0 2rem;
  text-align:center;
}
.kv-logo{margin-bottom:1.25rem;}
.kv-logo img{width:72%;margin-inline:auto;}
.kv-ttl{margin-bottom:1.25rem;}
.kv-lead{margin-bottom:1.75rem;text-align:left;}
.kv-lead br{display:none;}
.kv-map{width:100%;}
.kv-cap{text-align:right;margin-top:.5rem;padding-right:1rem;}

/* ===== スライダー速度（枚数×12s） ===== */
.kichi .track{animation-duration:96s;} /* 8枚 */
.loc .track{animation-duration:72s;}   /* 6枚 */

/* ===== KICHIJOJI ===== */
/* MAP下の白帯に背景色を追加（PCと同処理のSP版・要素位置は不変） */
.kichi{background:linear-gradient(to bottom, var(--c-bg2) 6rem, transparent 6rem);}
.kichi-top .sec-img{width:82%;left:-12%;}
.kichi-top .lead br{display:none;}
.kichi .slider{margin-top:2rem;}

/* ===== セクション間の余白（coming soonと次の円形写真が詰まるため） ===== */
.loc,.acc,.plan{margin-top:3rem;}

/* ===== LOCATION ===== */
.loc-top .sec-txt{padding-top:6rem;} /* 見出しブロックを下げ、円形写真の上部を見せる */
.loc-top .sec-img{width:82%;right:-12%;}
.loc-top .lead br{display:none;}
.loc .slider{margin-top:2rem;}

/* ===== ACCESS ===== */
.acc-top .sec-txt{padding-top:6rem;} /* 見出しブロックを下げる */
.acc-top .sec-img{width:82%;left:-12%;}
.acc-top .lead br{display:none;}
.acc .slider{margin-top:2rem;}

/* ===== PLAN ===== */
.plan .sec-txt{padding-top:6rem;} /* 見出しブロックを下げる */
.plan .sec-img{width:82%;right:-12%;}
.plan .lead br{display:none;}

/* ===== BANNER（SPは縦積み・中央） ===== */
.bnr{
  display:flex;
  flex-direction:column;
  width:var(--w-in);
  margin-inline:auto;
  margin-bottom:1.5rem;
}
.bnr-img{position:relative;}
.bnr-img img{width:100%;height:auto;}
.bnr-img .cap{
  position:absolute;
  right:.75rem;
  bottom:.5rem;
  color:#fff;
  font-family:var(--f-en);
  text-shadow:0 0 .25rem rgba(0,0,0,.35);
}
.bnr-body{
  background:var(--c-grn);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2rem 1.5rem;
}
.bnr-ttl{margin-bottom:.75rem;}
.bnr-ttl img{width:60%;margin-inline:auto;}
.bnr-sub{
  font-size:clamp(0.7rem, 0.3vw + 0.62rem, 0.85rem);
  letter-spacing:.12em;
  margin-bottom:1.25rem;
}
.bnr-list{
  width:82%;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-bottom:1.25rem;
}
.bnr-list li{
  background:#fff;
  color:var(--c-grn);
  font-size:clamp(0.75rem, 0.3vw + 0.66rem, 0.9rem);
  letter-spacing:.28em;
  padding:.35rem .5rem;
}
.bnr-soon{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--f-en);
  font-size:clamp(0.8rem, 0.35vw + 0.7rem, 0.95rem);
  letter-spacing:.18em;
}
.bnr-soon::after{
  content:"";
  width:3rem;
  height:1px;
  background:currentColor;
}

/* ===== 注釈 ===== */
.note-area{padding:2.5rem 0 3rem;}
.note-area .note br{display:none;}

/* ===== スライドページャー（SPは小さく・下端寄せ） ===== */
.hero-pager{bottom:.4rem;gap:.45rem;}
.hero-pager i{width:.3rem;height:.3rem;}

/* ===== トップメインスライド（ボタンは小さく・枠ぎりぎり） ===== */
.hero-btn{
  top:1rem;
  right:.4rem;
  font-size:.65rem;
  letter-spacing:.12em;
  padding:.2rem .6rem;
}

/* ===== ページTOPへ戻る ===== */
.ptop{
  right:1rem;
  bottom:5rem; /* 下部固定ナビの高さ分 */
  width:2.8rem;
  height:2.8rem;
}

/* ===== 物件メリット帯（8段・上下端の罫なし） ===== */
.feat{padding:.5rem 6%;}
.feat-list{
  grid-template-columns:1fr;
}
.feat-list li{
  padding:1rem .5rem;
}
.feat-list li + li{border-top:1px solid #fff;}

/* ===== ハンバーガーメニュー（その他ページの表示に合わせる／TOPのみ適用） ===== */
/* 書体：TOPはbodyのNoto Serif JPを継承して太く見えるため、他ページと同じ明朝系へ */
#g-nav{
  font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
  font-weight:400;
}
#g-nav li{line-height:1.5;}
/* 「トップ」の見切れ対策：中央基準（top:160px＋translateY(-50%)）だと
   リストが長い場合に先頭がパネル上端の外へ出るため、上基準に変更 */
#g-nav ul{
  top:0;
  transform:translate(-50%,0);
  padding:0 0 8rem; /* 下端の見切れ防止（#g-navがtop:70pxぶん下がるため） */
}