@charset "utf-8";

/* 共通 */

p {
    font-size: 1.6rem;
    color: #384941;
}

/* 各中見出し */



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　　▼間取りページCSS
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* =========================================================
   間取りプラン切り替えタブ（カンプ再現・2列グリッド）
========================================================= */

/* タブボタンの配置（2列グリッド） */
.plan-tab-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横に2等分 */
  gap: 12px;                            /* ボタン間の余白 */
  width: 100%;
}

/* ボタン本体（非アクティブ状態） */
.plan-tab-buttons .plan-btn {
  aspect-ratio: 2.2 / 1;      /* カンプの長方形比率 */
  min-height: 58px;
  background-color: #cfd3d6;  /* カンプのライトグレー */
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 1.2rem 8px;      /* 三角用の下余白を確保 */
  box-sizing: border-box;
  transition: background-color 0.25s ease;
  width: 100%;
}

/* ボタン内のプラン名テキスト */
.plan-tab-buttons .plan-btn__text {
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: #ffffff;             /* 非アクティブ時も白文字 */
  line-height: 1;
}

/* 下向き三角アイコン（非アクティブ時） */
.plan-tab-buttons .plan-btn::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ffffff; /* 白色の三角 */
}

/* --------------------------------------------------
   アクティブ（選択中）のスタイル
-------------------------------------------------- */
.plan-tab-buttons .plan-btn.active {
  background-color: #5E5F49;  /* 選択時の深緑色 */
}

/* --------------------------------------------------
   コンテンツパネル（表示・非表示アニメーション）
-------------------------------------------------- */
.plan-content {
  animation: tabFadeIn 0.35s ease-out forwards;
}

.plan_one_image img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   ポイントカルーセル（チラ見せ仕様）
========================================================= */

.point-carousel-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 1.6rem 0 3.2rem;
}

/* スライダー全体の左端余白 */
.point-carousel .slick-list {
  /* padding-left: 5% !important;  */
  overflow: visible;           /* 右側のチラ見せを画面端まで突き抜けて見せる */
}

/* カード1枚のサイズ定義 */
.point-card {
  width: 77vw;                 /* 画面幅の82%（右側18%で次のカードをチラ見せ） */
  max-width: 320px;            /* PCやタブレットで大きくなりすぎない上限値 */
  margin-right: 20px;          /* カード同士の間隔 */
  outline: none;
}

/* カード内の画像 */
.point-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
   上部ヘッダー（数字・ドット・矢印）
-------------------------------------------------- */
.point-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 01, 02 などの大きな数字 */
.point-card__number {
  font-size: 3.6rem;
  font-family: serif, 'Noto Sans JP', sans-serif;
  color: #9ab49d;              /* カンプのくすみグリーン */
  line-height: 1;
}

/* ドットインジケーター（3つの小四角） */
.point-card__dots {
  display: flex;
  gap: 5px;
  margin-left: 1.2rem;
  margin-right: auto;          /* 左詰めで数字の横に置く */
}

.point-card__dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: transparent;
  border: 1px solid #9ab49d;
}

.point-card__dots span.is-active {
  background-color: #9ab49d;   /* 現在位置は塗りつぶし */
}

/* 右上の「≫」アイコン */
.point-card__next-arrow {
  color: #9ab49d;
  font-size: 1.8rem;
  letter-spacing: -0.1em;
  font-weight: 300;
}

/* --------------------------------------------------
   テキスト & 画像エリア
-------------------------------------------------- */
.point-card__title {
  font-size: 1.8rem;
  line-height: 1.5;
  color: #231815;
  margin-top: 1.6rem;
  font-weight: 500;
}

.point-card__thumb {
  margin-top: 1.6rem;
  width: 100%;
}

.point-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.point-card__desc {
  font-size: 1.3rem;
  line-height: 2.0;
  color: #444444;
  margin-top: 1.6rem;
}

/* =========================================================
   【重要】カルーセルによる親要素の横幅肥大化（突き抜け）防止
========================================================= */

/* 1. 中央カラムがカルーセルに引っ張られて横に広がるのを防ぐ */
.centercolumn {
  min-width: 0 !important;
  
}

/* 2. タブパネルも画面幅内に固定する */
.plan-tab-contents,
.tab_contents.plan-content {
  min-width: 0;
  width: 100%;
}

/* 3. 間取り図画像を中央90%幅に確実に収める */
.plan_one_image {
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.plan_one_image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4. カルーセル外枠の横幅突き抜けを防止 */
.point-carousel-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* スライダーが親を押し広げるのを防ぐ */
}

m.plan-tab-contents, .tab_contents.plan-content {
  padding-top: 0;
}