@charset "utf-8";

/* ✅ 基準幅ベース設定 */
:root {
  --base-width-sp: 375;
  --base-width-pc: 1440;

  /* モバイル基準 */
  --vw-sp: calc(100vw / var(--base-width-sp));
  /* PC基準 */
  --vw-pc: calc(100vw / var(--base-width-pc));
}

/* 基本：モバイル基準。数値はFigma px値 */
.section-spacer{
  --spacer-sp: 40;  /* SPデフォルト高さ(px) */
  --spacer-pc: 40;  /* PCデフォルト高さ(px) */
  width: 100%;
  height: calc(var(--spacer-sp) * var(--vw-sp));
}

@media (min-aspect-ratio: 1/1){
  .section-spacer{
    height: calc(var(--spacer-pc) * var(--vw-pc));
  }
}
/* ここまでが定数                                       ***********************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/* メインブロック*/
.main-block {
  width: calc(325 * (100vw / var(--base-width-sp)));
  margin-inline: auto;
  margin-top: calc(28 * (100vw / var(--base-width-sp)));
}

@media (min-aspect-ratio: 1/1) {
  .main-block {
    width: calc(1000 * (100vw / var(--base-width-pc)));
      margin-top: calc(21 * (100vw / var(--base-width-sp)));
  }
}

/* 各セクションの共通設定：PC　モバイル　共通*/
.section-top-title,
.section-overview,
.section-details {
  width: 100%;
}


/*****************************************************************************************************************************/
/* セクション間スペーサー */
/* セクション間スペーサー（モバイル） */
.section-spacer {
  height: calc(40 * var(--vw-sp));
}

/* 横長（ランドスケープ）はPC基準に切替 */
@media (min-aspect-ratio: 1/1) {
  .section-spacer {
    height: calc(40 * var(--vw-pc));
  }
}
/*****************************************************************************************************************************/
/* トップタイトル：縦長基準 */
.section-top-title .cl_div_sec1_detail{
  width: calc(330 * var(--vw-sp));
  height: calc(21 * var(--vw-sp));
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: left;  /* 横中央 */
  margin: 0;                /* 親に対して左上寄せ（デフォルト配置） */
  padding: 0;
}
.section-top-title .cl_div_sec1_detail p{
  font-size: calc(12 * var(--vw-sp));
  letter-spacing: 0.05em;   /* 文字間隔 5%相当 */
  line-height: 1;
  margin: 0;
}

/* 横長（PC基準） */
@media (min-aspect-ratio: 1/1){
  .section-top-title .cl_div_sec1_detail{
    width: calc(330 * var(--vw-pc));
    height: calc(21 * var(--vw-pc));
  }
  .section-top-title .cl_div_sec1_detail p{
    font-size: calc(14 * var(--vw-pc));
  }
}


/*****************************************************************************************************************************/
/* 物件種別と物件名 */

/* モバイル基準 */
/* ========== モバイル基準（縦） ========== */
.overview-desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;                 /* Figma: align-items:flex-start */
  gap:calc(5 * var(--vw-sp));
  box-sizing: border-box;
  width: calc(325 * var(--vw-sp));         /* Figma: width 325px */
  height: calc(65 * var(--vw-sp));         /* Figma: height 65px */
  margin: 0 auto;                          /* 親に対して中央寄せ */
}

.overview-block { width: 100%; }

/* 見出しブロック（種別バッジ + 物件名） */
.heading-block {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw-sp));            /* SPは10px */
  align-items: flex-start;
  padding: 0;
  width: 100%;
}

/* 1行目：種別バッジ（Frame 7） */
.heading-block p:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(5 * var(--vw-sp)) calc(10 * var(--vw-sp)); /* 5px 10px */
  gap: calc(7 * var(--vw-sp));             /* 7px */
  min-height: calc(31 * var(--vw-sp));     /* 31px */
  background: #FEE600;
  color: #231815;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--vw-sp));      /* 14px */
  line-height: 1.5;                        /* 150%（=約21px相当） */
  letter-spacing: 0.05em;
  box-sizing: border-box;
  /* 幅は可変：Figma指定(123px)は固定せず内容に合わせる */
}

/* 2行目：物件名（SPは16/24） */
.heading-block p:last-child {
  display: flex;
  align-items: center;
  color: #231815;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--vw-sp));      /* 16px */
  line-height: 1.5;                        /* = 24px相当 */
  letter-spacing: 0.05em;
}

/* おすすめポイント（SP） */
.points-block p {
  width: calc(325 * var(--vw-sp));         /* Figma: width 325px */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: calc(12 * var(--vw-sp));      /* 12px */
  line-height: 1.7;                        /* 170% ≈ 20px */
  color: #231815;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}


/* ========== PC/横長 ========== */
@media (min-aspect-ratio: 1/1) {
  .overview-desc {
    width: calc(350 * var(--vw-pc));       /* 350px */
    height: calc(70 * var(--vw-pc));       /* 70px */
    margin: 0;                             /* 左寄せ */
    align-items: flex-start;
  }

  .heading-block {
    gap: calc(10 * var(--vw-pc));          /* PCは15px */
  }

  .heading-block p:first-child {
    padding: calc(5 * var(--vw-pc)) calc(10 * var(--vw-pc)); /* 5px 10px */
    gap: calc(7 * var(--vw-pc));           /* 7px */
    min-height: calc(31 * var(--vw-pc));   /* 31px */
    font-size: calc(14 * var(--vw-pc));    /* 14px */
    line-height: 1.5;                      /* 150% */
  }

  /* PCの物件名は 24/24（Line-height 100%） */
  .heading-block p:last-child {
    font-size: calc(24 * var(--vw-pc));    /* 24px */
    line-height: 1;                        /* 100%（=24px相当） */
  }

  /* おすすめポイント（PC） */
  .points-block p {
    width: 100%;       /* Figma: width 722px */
    font-size: calc(14 * var(--vw-pc));    /* 14px */
    line-height: 1.5;                      /* 150% ≈ 21px */
    text-align: center;
  }
}

/*****************************************************************************************************************************/
/* 概要：モバイル基準 */
.section-overview {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: calc(61 / var(--base-width-sp) * 100vw);
}

.section-overview .overview-desc {
  width: 100%;
  height: auto;
  min-height: calc(120 * var(--vw-sp));
}

/* モバイル（縦並び） */
.section-overview .overview-spec {
  display: flex;
  flex-direction: column;
  align-items: center; /* モバイルでは中央寄せ */
  gap: calc(20 * var(--vw-sp));
  margin-top: calc(15 * var(--vw-sp));
}

/* 横長（PC基準） */
@media (min-aspect-ratio: 1/1) {
  .section-overview {
    margin-top: calc(93 / var(--base-width-pc) * 100vw);
  }

  .section-overview .overview-desc {
    width: 100%;
    height: auto;
    min-height: calc(105 * var(--vw-pc));
  }

  .section-overview .overview-spec {
    flex-direction: row;          /* 横並び */
    align-items: flex-start;      /* 上寄せ */
    justify-content: flex-start;  /* 左寄せ */
    gap: calc(20 * var(--vw-pc)); /* ギャラリーと概要の間隔 */
    height: auto;
      margin-top: calc(15 * var(--vw-pc));
  }

  /* ギャラリーは左寄せ＆固定幅 */
  .section-overview .overview-spec .gallery-block {
    flex-shrink: 0;
    width: calc(500 * var(--vw-pc));  /* PC時は固定幅 */
    align-items: flex-start;          /* 中身も左寄せ */
  }

  /* 概要は右側で可変 */
  .section-overview .overview-spec .spec-block {
    flex: 1;
    align-items: end;
  }
}

/*****************************************************************************************************************************/
/* 画像ギャラリー　物件概要 */
.gallery-block .swiper,
.gallery-block .swiper-wrapper,
.gallery-block .swiper-slide { box-sizing: border-box; }
.gallery-block img { display:block; width:100%; height:100%; object-fit:cover; }

.gallery-block {
  display:flex;
  flex-direction:column;
  align-items:center; /* モバイル時は中央寄せ */
  width: calc(325 * var(--vw-sp)); /* モバイル時は固定幅 */
}

/* --- モバイル（縦） --- */
.gallery-main {
  width: 100%;
  height: calc(205 * var(--vw-sp));
  margin-bottom: calc(4 * var(--vw-sp));
  overflow: hidden;
}
.gallery-main .swiper-slide {
  display: flex;              /* 画像を中央寄せ */
  align-items: center;
  justify-content: center;
  background: #f7f7f7;        /* レターボックスの背景色（好みで） */
  overflow: hidden;           /* 念のための保険 */
  min-width: 0;               /* Safari対策 */
  min-height: 0;
}

.gallery-main .swiper-slide img {
  /* 枠サイズに合わせつつ、縦横比を維持して“収める” */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.tab-panel[hidden] { display: none !important; }
.tab-panel.is-active { display: block; }

.gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-thumbs {
  width: 100%;
  height: calc(32 * var(--vw-sp));
  overflow: hidden;
}
.gallery-thumbs .swiper-wrapper { align-items:stretch; }
.gallery-thumbs .swiper-slide {
  height: 100%;
  opacity: .45;
  cursor: pointer;
}
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }

/* --- PC（横=アスペクト比1以上） --- */
@media (min-aspect-ratio: 1/1) {
  .gallery-main {
    width: 100%;
    height: calc(316 * var(--vw-pc));
    margin-bottom: calc(20 * var(--vw-pc));
  }
  .gallery-thumbs {
    width: 100%;
    height: calc(49 * var(--vw-pc));
  }
}

.gallery-main .swiper-wrapper {
  margin-top: 0 !important;
}

@media (min-aspect-ratio: 1/1) {
.gallery-main .swiper-wrapper {
  margin-top: 0 !important;
}
}
/*****************************************************************************************************************************/
/* 物件概要全体 */
.spec-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: calc(20 * var(--vw-sp)); /* 情報ブロックとアクションブロックの間隔 */
}

@media (min-aspect-ratio: 1/1) {
  .spec-block {
    width: calc(450 * var(--vw-pc));
    height: auto;
    gap: calc(20 * var(--vw-pc));
  }
}

/* =============================
   ▼（赤帯の下中央）— 擬似要素で描画
============================= */
.bonus-inner{
  position: relative; /* ▼の基準 */
  margin: 0;          /* 以前の負のマージンは無効化 */
  margin-bottom: calc(10 * var(--vw-sp)); /* ▼の高さぶんスペース確保 */
}
.bonus-inner::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-10 * var(--vw-sp)); /* ▼を下に突き出す（密着なら -1px） */
  width: 0; height: 0;
  border-left:  calc(13 * var(--vw-sp)) solid transparent;
  border-right: calc(13 * var(--vw-sp)) solid transparent;
  border-top:   calc(10 * var(--vw-sp)) solid #C40A09; /* 赤帯と同色 */
}
@media (min-aspect-ratio: 1/1){
  .bonus-inner{ margin-bottom: calc(10 * var(--vw-pc)); }
  .bonus-inner::after{
    bottom: calc(-10 * var(--vw-pc));
    border-left:  calc(13 * var(--vw-pc)) solid transparent;
    border-right: calc(13 * var(--vw-pc)) solid transparent;
    border-top:   calc(10 * var(--vw-pc)) solid #C40A09;
  }
}

/* =============================
   情報ブロック（価格～仲介手数料率）
============================= */
.spec-info-group {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--vw-sp)); /* 行間固定 */
  width: 100%;
}
@media (min-aspect-ratio: 1/1) {
  .spec-info-group { gap: calc(5 * var(--vw-pc)); }
}

/* 各行（ラベル＋値） */
.spec-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #FFFFFF;
  width: 100%;
  height: calc(41 * var(--vw-sp));
}
.spec-row-tall { height: calc(62 * var(--vw-sp)); }
@media (min-aspect-ratio: 1/1) {
  .spec-row      { height: calc(41 * var(--vw-pc)); }
  .spec-row-tall { height: calc(62 * var(--vw-pc)); }
}

/* 左ラベル部分 */
.spec-label {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FEE600;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: #231815;
  letter-spacing: 0.05em;
  line-height: 1.5;
  width: calc(150 * var(--vw-sp));
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: calc(11 * var(--vw-sp));
  padding: calc(2 * var(--vw-sp)) calc(5 * var(--vw-sp)) calc(3 * var(--vw-sp));
}
@media (min-aspect-ratio: 1/1) {
  .spec-label{
    width: calc(450 * var(--vw-pc));
    font-size: calc(13 * var(--vw-pc));
    padding: calc(7 * var(--vw-pc)) calc(10 * var(--vw-pc)) calc(9 * var(--vw-pc));
  }
}

/* 右値部分（左余白：SP=10px / PC=5px） */
.spec-value {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--vw-sp));
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: calc(14 * var(--vw-sp));
  line-height: 1.5;
  color: #231815;
  width: calc(285 * var(--vw-sp));
  box-sizing: border-box;
  padding: calc(10 * var(--vw-sp)) calc(10 * var(--vw-sp)) calc(10 * var(--vw-sp)) calc(10 * var(--vw-sp));
}
@media (min-aspect-ratio: 1/1) {
  .spec-value{
    max-width: calc(285 var(--vw-pc));
    font-size: calc(14 * var(--vw-pc));
    gap: calc(10 * var(--vw-pc));
    padding: calc(10 * var(--vw-pc)) calc(10 * var(--vw-pc)) calc(10 * var(--vw-pc)) calc(5 * var(--vw-pc));
  }
}

/* =============================
   アクションブロック（特典＋ボタン）
============================= */
.spec-action-group{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: calc(10 * var(--vw-sp)); /* 特典とボタンの間隔 */
}
@media (min-aspect-ratio: 1/1){
  .spec-action-group{ gap: calc(10 * var(--vw-pc)); }
}

/* 特典 */
.spec-bonus{
  display: flex;
  flex-direction: column; /* ▼を縦方向に配置 */
  align-items: center;
  width: 100%;
}
.bonus-inner{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #C40A09;
  width: calc(250 * var(--vw-sp));
  height: calc(45 * var(--vw-sp));
  gap: calc(10 * var(--vw-sp));
  padding: calc(5 * var(--vw-sp)) calc(10 * var(--vw-sp)) calc(10 * var(--vw-sp));
}
.bonus-text{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--vw-sp));
  line-height: 1.5;
  color: #FFFFFF;
}
/* 任意：赤帯内の装飾（使うならそのまま） */
.bonus-arrow{
  width: calc(26 * var(--vw-sp));
  height: calc(12 * var(--vw-sp));
  background: #C40A09;
  transform: rotate(-180deg);
}
@media (min-aspect-ratio: 1/1){
  .bonus-inner{
    width: calc(250 * var(--vw-pc));
    height: calc(45 * var(--vw-pc));
    gap: calc(10 * var(--vw-pc));
    padding: calc(5 * var(--vw-pc)) calc(10 * var(--vw-pc)) calc(10 * var(--vw-pc));
  }
  .bonus-text{ font-size: calc(16 * var(--vw-pc)); }
  .bonus-arrow{
    width: calc(26 * var(--vw-pc));
    height: calc(12 * var(--vw-pc));
  }
}

/* お問い合わせボタン */
.spec-btn{
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(45 * var(--vw-sp));
  gap: calc(10 * var(--vw-sp));
  background: #FEE600;
  border: calc(2 * var(--vw-sp)) solid #231815;
}
.btn-text{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--vw-sp));
  color: #231815;
}
.btn-arrow{
  width: calc(11 * var(--vw-sp));
  height: calc(6 * var(--vw-sp));
  background: #231815;
  transform: rotate(90deg);
}
@media (min-aspect-ratio: 1/1){
  .spec-btn{ height: calc(45 * var(--vw-pc)); border: calc(2 * var(--vw-pc)) solid #231815; }
  .btn-text{ font-size: calc(16 * var(--vw-pc)); }
  .btn-arrow{ width: calc(11 * var(--vw-pc)); height: calc(6 * var(--vw-pc)); }
}

/* リンク装飾をオフ（既存の枠・背景はそのまま） */
.spec-btn { text-decoration: none; color: inherit; }
.spec-btn:link,
.spec-btn:visited,
.spec-btn:hover,
.spec-btn:active,
.spec-btn:focus {
  text-decoration: none;
  color: inherit;
}


/*****************************************************************************************************************************/
/*物件詳細*/
/* ルートは既存の --vw-sp / --vw-pc を使用 */

.section-details {
  width: 100%;
}

/* SPのタブ文字を中央寄せにする */
.details-tabs .tab-btn{
  justify-content: center; /* ← これで中央に */
  text-align: center;      /* 念のためキープ */
}


/* 2段縦並びの土台 */
.details-block {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw-sp)); /* 好みで調整OK */
  width: 100%;
  box-sizing: border-box;
}

/* タブ置き場：SP 325×77、中身は後で */
.details-tabs {
  width: calc(325 * var(--vw-sp));
  height: calc(77 * var(--vw-sp));
  margin: 0 auto;               /* SPは中央寄せ（親幅=325なら見た目変わらない） */
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* タブのULはリセットだけ。装飾は後で */
.tabs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;                 /* 後でタブ並べやすいように */
  align-items: center;
  gap: calc(8 * var(--vw-sp));   /* 仮の間隔。後で上書き可能 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 内容ブロック：幅100%、高さは可変 */
.details-content {
  width: 100%;
  box-sizing: border-box;
}

/* パネルの初期状態（JS導入前の素振り） */
.tab-panel[hidden] { display: none; }

/* ---- PC（横長） ---- */
@media (min-aspect-ratio: 1/1) {
  .details-block {
    gap: calc(1 * var(--vw-pc)); /* PC側の縦間隔（任意） */
  }

  /* タブ置き場：PC 718×50、左寄せ */
  .details-tabs {
    width: calc(718 * var(--vw-pc));
    height: calc(50 * var(--vw-pc));
    margin: 0;                   /* 左寄せ */
  }

  .tabs-list {
    gap: calc(8 * var(--vw-pc)); /* 後で本番値に */
  }
}

/* ===== タブ置き場（器） ===== */
/* SP: 325 x 77 / 中央寄せ・折返しOK */
.details-tabs{
  width: calc(325 * var(--vw-sp));
  height: calc(77 * var(--vw-sp));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: calc(7 * var(--vw-sp));
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
  /* 多タブ時の横スクロールを許容したいなら↓を有効に
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  */
}

/* ===== タブボタン（共通） ===== */
.tab-btn{
  /* サイズ：76 x 35 */
  width:  calc(76 * var(--vw-sp));
  height: calc(35 * var(--vw-sp));

  /* 内側パディング：7 10 9 */
  padding: calc(7 * var(--vw-sp)) calc(10 * var(--vw-sp)) calc(9 * var(--vw-sp));
  box-sizing: border-box;

  display: flex;
  flex-direction: row;         /* 文字だけだがFigmaはrow */
  justify-content: space-between;
  align-items: center;

  /* 角丸・枠線（デフォは非アクティブ=白ボタン） */
  background: #FFFFFF;
  border: 0.5px solid #BBBBBB;
  border-radius: calc(5 * var(--vw-sp));

  /* タイポ */
  margin: 0 auto;             /* Figmaの”0 auto”相当 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: calc(10 * var(--vw-sp));
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #231815;

  white-space: normal;         /* <br>での2行表記を許可 */
  text-align: center;
  cursor: pointer;
}

/* 2行ラベルの行間を少し整える（任意） */
.tab-btn br { line-height: 1.2; }

/* アクティブ（Figma: メインカラーで塗り） */
.tab-btn.is-active,
.tab-btn[aria-selected="true"]{
  background: #FEE600;
  border: none;                /* Figma上は枠なし */
}

/* フォーカス可視化（アクセシビリティ） */
.tab-btn:focus-visible{
  outline: 2px solid #231815;
  outline-offset: 2px;
}

/* ===== PC切替 ===== */
/* ---- 既存のモバイル用はそのまま。PCだけ上書き ---- */
@media (min-aspect-ratio: 1/1){
  /* タブ置き場：718×50、左寄せ、ギャップ3px、1行 */
  .details-tabs{
    width:  calc(718 * var(--vw-pc));
    height: calc(50 * var(--vw-pc));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(3 * var(--vw-pc));
    padding: 0;
    margin: 0;              /* 左寄せ */
    box-sizing: border-box;
    flex-wrap: nowrap;       /* 1行固定（溢れを許容するなら auto に） */
    overflow: hidden;        /* いっぱいの想定。スクロールにしたいなら auto */
  }

  /* タブボタン：100×50、角丸(10px 10px 0 0)、内側(7 10 9)、中央寄せ */
  .tab-btn{
        height: calc(50 * var(--vw-pc));
    padding: calc(7 * var(--vw-pc)) calc(10 * var(--vw-pc)) calc(9 * var(--vw-pc));
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: center;      /* PCは中央寄せ */
    align-items: center;
    gap: calc(10 * var(--vw-pc));

    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: calc(14 * var(--vw-pc));
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #231815;
    text-align: center;

    background: #FFFFFF;                 /* 非アクティブ */
    border: 0.5px solid #BBBBBB;
    border-radius: calc(10 * var(--vw-pc)) calc(10 * var(--vw-pc)) 0 0;
    cursor: pointer;
  }

  /* アクティブ：黄色で塗り、枠は消す */
  .tab-btn.is-active,
  .tab-btn[aria-selected="true"]{
    background: #FEE600;
    border-color: transparent;
  }

  /* フォーカス（任意で可視化） */
  .tab-btn:focus-visible{
    outline: 2px solid #231815;
    outline-offset: 2px;
  }
}



/*****************************************************************************************************************************/
/*詳細タブ*/
/* コンテナ */
.details-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  border-top: #FEE600 solid 4px;
  margin-top: calc(20 * var(--vw-sp));
}
@media (min-aspect-ratio: 1/1){
  .details-content{
    gap: 0;
    border-top: #FEE600 solid 4px;
    margin: 0;
  }
}

/* 見出しブロック：幅100%、高さ SP=24 / PC=36 */
.details-title{
  width: 100%;
  height: calc(24 * var(--vw-sp));
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */
  box-sizing: border-box;
  padding: calc(36 * var(--vw-sp)) 0;
  background-color: #ffffff;
}
.details-title h2{
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--vw-sp)); /* SP:16px */
  line-height: 1.5;                   /* 150% */
  letter-spacing: 0.05em;             /* 5% */
  text-align: center;
  color: #231815;
}
@media (min-aspect-ratio: 1/1){
  .details-title{
    height: calc(36 * var(--vw-pc));
    padding: calc(60 * var(--vw-pc)) 0;
    background-color: #ffffff;
  }
  .details-title h2{
    font-size: calc(24 * var(--vw-pc)); /* PC:24px */
  }
}

/* パネル領域：幅100%、高さは中身依存 */
.details-panels{ 
  width: 100%;
  box-sizing: border-box;
  padding: calc(30 * var(--vw-sp)) calc(20 * var(--vw-sp));
  background-color: #ffffff;
}
.tab-panel[hidden]{ display:none; }

/* ボタンブロック：SP=縦並び / PC=横並び、幅100% */
.details-actions{
  width: 100%;
  display: flex;
  flex-direction: column;                  /* SP 縦並び */
  gap: calc(10 * var(--vw-sp));
}
@media (min-aspect-ratio: 1/1){
  .details-actions{
    flex-direction: row;                   /* PC 横並び */
    gap: calc(12 * var(--vw-pc));
  }
  .details-panels{ 
  padding: calc(30 * var(--vw-pc)) calc(20 * var(--vw-pc));
  padding-top: 0;
}
}

/* ボタン：幅100%（PCは均等に伸ばす）、装飾は最小限 */
.action-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 * var(--vw-sp)) calc(10 * var(--vw-sp));
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: #231815;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--vw-sp));
  border: calc(2 * var(--vw-sp)) solid #231815;
  background: #FEE600; /* 適宜変更可 */
}
@media (min-aspect-ratio: 1/1){
  .action-btn{
    flex: 1; /* 横並び時に均等幅 */
    font-size: calc(14 * var(--vw-pc));
    padding: calc(12 * var(--vw-pc)) calc(10 * var(--vw-pc));
    border-width: calc(2 * var(--vw-pc));
  }
}

/* セカンダリ（必要なら色差） */
.action-secondary{
  background: #FFFFFF;
  border-color: #231815;
}





/* ========= ボタンブロック（共通） ========= */
.details-actions{
  width: 100%;
  display: flex;
  flex-direction: column; /* SP: 縦並び */
  justify-content: center;
  align-items: flex-start;
  gap: calc(10 * var(--vw-sp));
  box-sizing: border-box;
  margin-top: calc(20 * var(--vw-sp));
}

/* ボタン共通 */
.action-btn{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--vw-sp));
  width: 100%;
  height: calc(45 * var(--vw-sp));
  padding: calc(10 * var(--vw-sp));
  border: calc(2 * var(--vw-sp)) solid #231815;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: calc(13 * var(--vw-sp));
  line-height: 1.2;
  color: #231815;
  position: relative;
  overflow: hidden;
}

/* 左側アイコン（共通ベース） */
.action-btn::before{
  content: "";
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 右側の三角（→） */
.action-btn::after{
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0; height: 0;
  border-top:    calc(6 * var(--vw-sp)) solid transparent;
  border-bottom: calc(6 * var(--vw-sp)) solid transparent;
  border-left:   calc(11 * var(--vw-sp)) solid currentColor;
}

/* プライマリ（黄色／メールアイコン） */
.action-primary{
  background:#FEE600;
  color:#231815;
}
.action-primary::before{
  width: max(calc(23 * var(--vw-sp)), 20px);
  height:max(calc(17 * var(--vw-sp)), 16px);
  -webkit-mask: url('/wp-content/themes/cocoon-child-master/assets/icons/mail.svg') no-repeat center / contain;
  mask:         url('/wp-content/themes/cocoon-child-master/assets/icons/mail.svg') no-repeat center / contain;
  background-color: currentColor;
}
/*
.action-primary::after{
  border-left-color:#FFFFFF;
}
*/
/* セカンダリ（黒／電話アイコン） */
.action-secondary{
  background:#231815;
  color:#FFFFFF;
  border-color:#231815;
}
.action-secondary::before{
  width: max(calc(12 * var(--vw-sp)), 16px);
  height:max(calc(23 * var(--vw-sp)), 20px);
  -webkit-mask: url('/wp-content/themes/cocoon-child-master/assets/icons/phone.svg') no-repeat center / contain;
  mask:         url('/wp-content/themes/cocoon-child-master/assets/icons/phone.svg') no-repeat center / contain;
  background-color: currentColor;
}
/*
.action-secondary::after{
  border-left-color:#FFFFFF;
}
*/
/* ========= PC（横長） ========= */
@media (min-aspect-ratio: 1/1){
  .details-actions{
    flex-direction: row;
    align-items: center;
    gap: calc(30 * var(--vw-pc));
    margin-top: calc(40 * var(--vw-pc));
  }
  .details-actions .action-btn{
    --btn-w-pc: 320;
    width: calc(var(--btn-w-pc) * var(--vw-pc));
    flex: 0 0 calc(var(--btn-w-pc) * var(--vw-pc));
    gap: calc(10 * var(--vw-pc));
    height: calc(45 * var(--vw-pc));
    padding: calc(10 * var(--vw-pc));
    border-width: calc(2 * var(--vw-pc));
    font-size: calc(14 * var(--vw-pc));
  }
  .action-btn::after{
    border-top-width:    calc(6 * var(--vw-pc));
    border-bottom-width: calc(6 * var(--vw-pc));
    border-left-width:   calc(11 * var(--vw-pc));
  }
  .action-primary::before{
    width:  max(calc(23 * var(--vw-pc)), 20px);
    height: max(calc(17 * var(--vw-pc)), 16px);
  }
  .action-secondary::before{
    width:  max(calc(12 * var(--vw-pc)), 16px);
    height: max(calc(23 * var(--vw-pc)), 20px);
  }
}


/*****************************************************************************************************************************/
/*info section*/
p {
  margin-bottom: 0px;
}

.info-section {
  position: relative;
  width: 100%;
  height: calc(376 / var(--base-width-sp) * 100vw);
  background-color: #f4f4f4;
  overflow: hidden;
  z-index: 0;
}

.info-background {
  position: absolute;
  width: calc(1442.02 / var(--base-width-sp) * 100vw);
  height: calc(621.51 / var(--base-width-sp) * 100vw);
  left: calc(-607.76 / var(--base-width-sp) * 100vw);
  top: calc(-244 / var(--base-width-sp) * 100vw);
  background: url('/wp-content/themes/cocoon-child-master/assets/images/fv/top-bottom_R.jpg') center bottom / cover no-repeat;
  z-index: 0;
}

.info-content {
  position: absolute;
  top: calc(1 / var(--base-width-sp) * 100vw);
  left: 50%;
  transform: translateX(-50%);
  width: calc(325 / var(--base-width-sp) * 100vw);
  height: calc(375 / var(--base-width-sp) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 / var(--base-width-sp) * 100vw) 0;
  gap: calc(30 / var(--base-width-sp) * 100vw);
  z-index: 1;
}

.info-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 / var(--base-width-sp) * 100vw);
  width: 100%;
  text-align: center;
}

.info-label {
  font-family: 'Oswald', sans-serif;
  font-size: calc(14 / var(--base-width-sp) * 100vw);
  color: #ffffff;
  letter-spacing: 0.15em;
  line-height: 1;
}

.info-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(24 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.info-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(30 / var(--base-width-sp) * 100vw);
  width: 100%;
}

.info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 / var(--base-width-sp) * 100vw);
  padding: calc(10 / var(--base-width-sp) * 100vw);
  width: 100%;
  height: calc(90 / var(--base-width-sp) * 100vw);
  background-color: #ffffff;
  border: 2px solid #231815;
  text-decoration: none;
}

.info-btn-icon img {
  width: calc(89 / var(--base-width-sp) * 100vw);
  height: calc(81 / var(--base-width-sp) * 100vw);
  object-fit: contain;
}

.info-btn-text {
  font-family: 'Noto Sans JP';
  font-size: calc(20 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  color: #231815;
  letter-spacing: 0.05em;
  text-align: center;
}


@media screen and (min-aspect-ratio: 1/1) {

  .info-section {
    height: calc(320 / var(--base-width-pc) * 100vw);
  }

  .info-background {
    width: calc(1513 / var(--base-width-pc) * 100vw);
    height: calc(652 / var(--base-width-pc) * 100vw);
    left: calc(-27 / var(--base-width-pc) * 100vw);
    top: calc(-318 / var(--base-width-pc) * 100vw);
  }

  .info-content {
    top: calc(58 / var(--base-width-pc) * 100vw);
    width: calc(831 / var(--base-width-pc) * 100vw);
    height: calc(217 / var(--base-width-pc) * 100vw);
    gap: calc(30 / var(--base-width-pc) * 100vw);
    padding: 0;
  }

  .info-title {
    width: calc(400 / var(--base-width-pc) * 100vw);
    height: calc(75 / var(--base-width-pc) * 100vw);
    gap: calc(5 / var(--base-width-pc) * 100vw);
  }

  .info-label {
    font-size: calc(16 / var(--base-width-pc) * 100vw);
    height: calc(16 / var(--base-width-pc) * 100vw);
  }

  .info-heading {
    font-size: calc(36 / var(--base-width-pc) * 100vw);
    height: calc(54 / var(--base-width-pc) * 100vw);
  }

  .info-buttons {
    flex-direction: row;
    justify-content: center;
    gap: calc(31 / var(--base-width-pc) * 100vw);
    width: 100%;
    height: calc(112 / var(--base-width-pc) * 100vw);
  }

  .info-btn {
    flex-direction: row;
    width: calc(400 / var(--base-width-pc) * 100vw);
    height: 100%;
    padding: calc(10 / var(--base-width-pc) * 100vw);
    gap: calc(10 / var(--base-width-pc) * 100vw);
  }

  .info-btn-icon img {
    width: calc(100 / var(--base-width-pc) * 100vw);
    height: calc(91 / var(--base-width-pc) * 100vw);
  }

  .info-btn-text {
    font-size: calc(24 / var(--base-width-pc) * 100vw);
    height: calc(36 / var(--base-width-pc) * 100vw);
  }
}


/****************************************************************************************************************************/
/* 物件詳細：戸建て用*/
/* =========================================================
   物件詳細（戸建て） Figma準拠
   ========================================================= */
.panel-details{
  width: 100%;
  box-sizing: border-box;
}

/* ===== SP/PC 共通骨格 ===== */
.pd-grid{
  display: grid;
  grid-template-columns: 1fr; /* SP: 1カラム */
  width: 100%;
}

.pd-col{
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 行（空欄でも高さ揃え） */
.pd-item{
  display: flex;
  flex-direction: row;
  align-items: stretch;                 /* 子要素を行高にストレッチ */
  width: 100%;
  min-height: calc(40 * var(--vw-sp));  /* SP既定の行高 */
}

/* ラベル/値 共通（行高にフィット） */
.pd-label,
.pd-value{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;                         /* 行高に追従 */
  padding: calc(10 * var(--vw-sp));
  font-family: 'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  letter-spacing: .05em;
  color: #231815;
  line-height: 1.7;
  font-size: calc(10 * var(--vw-sp));
}

/* ラベル（SP）: 幅固定＋縮ませない */
.pd-label{
  width: calc(100 * var(--vw-sp));
  flex: 0 0 calc(100 * var(--vw-sp));   /* ← 幅固定（縮まない） */
  max-width: calc(100 * var(--vw-sp));
  flex-shrink: 0;
  background: #F5F4ED;
  border-bottom: 1px solid rgba(170,170,170,5);
  font-weight: 600;
}

/* 値（SP）: 折り返し可・隣のラベルを押さない */
.pd-value{
  flex: 1 1 auto;
  min-width: 0;                         /* ← これがないとラベルが押される */
  border-bottom: 1px solid rgba(170,170,170,.5);
  font-weight: 300;
  gap: calc(6 * var(--vw-sp));
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 行高が大きい行（例：交通２） */
.pd-item--tall{
  min-height: calc(80 * var(--vw-sp));
}
.pd-item--tall .pd-label,
.pd-item--tall .pd-value{
  align-items: flex-start;              /* 折返し時は上揃え */
}

/* 薄い区切りにしたい行のラベル用（任意で付与） */
.pd-label--light{
  border-bottom: 1px solid #BBBBBB;
}

/* ===== PC レイアウト ===== */
@media (min-aspect-ratio: 1/1){
  .pd-grid{
    grid-template-columns: calc(400 * var(--vw-pc)) calc(400 * var(--vw-pc)); /* 2カラム */
    column-gap: calc(34 * var(--vw-pc));
    row-gap: 0;
    width: calc(834 * var(--vw-pc));
    margin: 0 auto;
  }

  .pd-item{
    min-height: calc(64 * var(--vw-pc));
  }
  .pd-item--tall{
    min-height: calc(88 * var(--vw-pc));
  }

  .pd-label,
  .pd-value{
    padding: calc(20 * var(--vw-pc)) calc(10 * var(--vw-pc));
    font-size: calc(12 * var(--vw-pc));
  }

  /* ラベル（PC）: 幅固定＋縮ませない */
  .pd-label{
    width: calc(120 * var(--vw-pc));
    flex: 0 0 calc(120 * var(--vw-pc)); /* ← 幅固定（縮まない） */
    max-width: calc(120 * var(--vw-pc));
    border-bottom: 1px solid rgba(170,170,170,5);
    font-weight: 600;
  }

  /* 値（PC） */
  .pd-value{
    flex: 1 1 auto;
    min-width: 0;                       /* 折返し時の押し出し防止 */
    border-bottom: 1px solid rgba(170,170,170,.5);
    font-weight: 300;
  }
}


/****************************************************************************************************************************/
/* 費用支払い*/
.panel-cost{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

.panel-cost__title{
  margin: 0 0 calc(24 * var(--vw-sp));
  text-align: center;
  color: #231815;
  letter-spacing: .05em;
  line-height: 1.5;
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--vw-sp));            /* PCで24px */
}

/* 右カラムのラベルを薄線にしたいときは
   HTML側で .pd-label--light を付与（既存CSSが効く） */

/* ==== PC（横長） ==== */
@media (min-aspect-ratio: 1/1){
  .panel-cost__title{
    margin-bottom: calc(40 * var(--vw-pc));
    font-size: calc(24 * var(--vw-pc));
  }
}

/****************************************************************************************************************************/
/* 設備*/
.panel-equipment{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/****************************************************************************************************************************/
/* 周辺環境*/
/* =========================
   周辺環境（モバイルファースト）
   ========================= */
.panel-environment{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/* グリッド：SPは1カラム、中央寄せ。Figma：幅 ≒ 280px */
.pe-grid{
  width: calc(280 * var(--vw-sp));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(20 * var(--vw-sp)); /* セクション全体のgapは親で確保済だが、カード間も余白 */
}

/* カード（画像＋キャプション） */
.pe-card{
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--vw-sp)); /* 画像とテキストの間隔：SP 15 */
  margin: 0;
}

/* サムネイル：Figma比率 370x260 ≒ 1.423（SPの281x197.46もほぼ同比） */
.pe-thumb{
  width: 100%;
  aspect-ratio: 370 / 260;
  background: #D9D9D9; /* 画像未登録時の背景 */
  overflow: hidden;
  position: relative;
}
.pe-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-thumb.is-empty .pe-thumb__placeholder{
  display: block;
  width: 100%;
  height: 100%;
}

/* キャプション：SP 12px, LH 170% */
.pe-caption{
  font-family: 'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  font-weight: 300;
  font-size: calc(12 * var(--vw-sp));
  line-height: 1.7;
  letter-spacing: .05em;
  color: #231815;
  /* Figmaの一部は高さ20/40指定だが、可変テキストに対応して自然に折返し */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================
   PC（横長）レイアウト
   ========================= */
@media (min-aspect-ratio: 1/1){
  /* グリッド：2カラム／幅 780px／gap 40px */
  .pe-grid{
    width: calc(780 * var(--vw-pc));
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(40 * var(--vw-pc));
    row-gap: calc(40 * var(--vw-pc));
  }

  .pe-card{
    gap: calc(15 * var(--vw-pc)); /* 画像とテキスト間：PC 15 */
  }

  .pe-caption{
    font-size: calc(14 * var(--vw-pc)); /* Figma 14px */
    line-height: 1.7;
  }
}


/****************************************************************************************************************************/
/* reform*/
/* Reform パネル（pd-*骨格を共用） */
.panel-reform{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/****************************************************************************************************************************/
/* 担当・特記*/
.panel-special{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/****************************************************************************************************************************/
/* MAP*/
/* =========================
   地図（モバイルファースト）
   ========================= */
.panel-map{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/* ラッパ：SP時はFigma基準幅 ≒ 280px */
.pm-wrap{
  width: calc(280 * var(--vw-sp));
  margin: 0 auto;
}

/* マップ領域：SP比率 280x234 */
.pm-map{
  width: 100%;
  aspect-ratio: 280 / 234;
  position: relative;
  overflow: hidden;
  background: #D9D9D9; /* 画像/地図未読込時の下地 */
  border: none;
}

/* Iframeは全面フィット */
.pm-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 未登録時のプレースホルダ */
.pm-map.is-empty .pm-placeholder{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12 * var(--vw-sp));
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  font-size: calc(12 * var(--vw-sp));
  color: #555;
  text-align: center;
}

/* =========================
   PC（横長）— Figma幅/比率に追従
   ========================= */
@media (min-aspect-ratio: 1/1){
  /* PC基準：全体幅 1000、マップ本体 886x740 */
  .pm-wrap{
    width: calc(886 * var(--vw-pc));
  }
  .pm-map{
    aspect-ratio: 886 / 740;
  }
  .pm-map.is-empty .pm-placeholder{
    padding: calc(16 * var(--vw-pc));
    font-size: calc(14 * var(--vw-pc));
  }
}

/****************************************************************************************************************************/
/* vr*/
/* =========================
   VR（モバイルファースト）
   ========================= */
.panel-vr{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/* SP: 1カラム / 幅 ≒ 280 */
.pv-grid{
  width: calc(280 * var(--vw-sp));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(20 * var(--vw-sp)); /* environment と同等の縦間隔 */
}

.pv-card{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--vw-sp));
  margin: 0;
}

/* 16:9 で動画領域を固定（どんな埋め込みでもフィットさせる） */
.pv-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #000;
}
.pv-embed iframe,
.pv-embed video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 未登録時のプレースホルダ */
.pv-empty{
  width: 100%;
  text-align: center;
  font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  font-size: calc(12 * var(--vw-sp));
  color: #555;
  padding: calc(12 * var(--vw-sp));
}

/* =========================
   PC（横長）
   ========================= */
@media (min-aspect-ratio: 1/1){
  /* environment と同じく 2カラム / 幅 780 / gap 40 */
  .pv-grid{
    width: calc(780 * var(--vw-pc));
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(40 * var(--vw-pc));
    row-gap: calc(40 * var(--vw-pc));
  }
  .pv-card{
    gap: calc(12 * var(--vw-pc));
  }
  .pv-empty{
    font-size: calc(14 * var(--vw-pc));
    padding: calc(16 * var(--vw-pc));
  }
}

/* CSS指定追加分*/
/*販売価格*/
.spec-value.dt-hanbai-price-style {
  font-size: calc(18 * var(--vw-sp));
  font-weight: 600;
  color: red;
}

/*ディスカウント*/
.pd-value.dt-discount-style {
  font-size: calc(16 * var(--vw-sp));
  font-weight: 500;
  color: red;
}

.spec-value--brokerage {
  display: flex;
  align-items: baseline;
  gap: .5em;
  padding: 0;
  line-height: 0;
  align-items: center;
}
.spec-value--brokerage .spec-value__rate { line-height: 1; font-weight: 700; }
.spec-value--brokerage .spec-value__rate .num { 
  font-size: calc(24 * var(--vw-sp));
  font-variant-numeric: tabular-nums;
  color: red;
  padding-right: 2px;
}
.spec-value--brokerage .spec-value__rate .unit { 
  font-size: .6em; margin-left: .15em; font-weight: 500;
}
.spec-value--brokerage .spec-value__suffix { font-size: .95rem; }

.spec-value.spec-value-prefix {
  width: auto;
}

@media (min-aspect-ratio: 1/1){

  .spec-value.dt-hanbai-price-style {
    font-size: calc(20 * var(--vw-pc));
    font-weight: 600;
    color: red;
  }

  /*ディスカウント*/
  .pd-value.dt-discount-style {
    font-size: cacl(18 * var(--vw-pc));
    font-weight: 500;
    color: red;
  }

  .spec-value--brokerage { display: flex; align-items: baseline; gap: 0; }
  .spec-value--brokerage .spec-value__rate { line-height: 1; font-weight: 700; }
  .spec-value--brokerage .spec-value__rate .num { 
    font-size: calc(20 * var(--vw-pc));
    font-variant-numeric: tabular-nums;
    padding-right: 2px;
  }
  .spec-value--brokerage .spec-value__rate .unit { 
    font-size: .6em; margin-left: .15em; font-weight: 500;
  }
  .spec-value--brokerage .spec-value__suffix { font-size: .95rem; }

}

.u-br--sp {}

@media (min-aspect-ratio: 1/1){
  .u-br--sp { display: none; }
}



/* ==============================================
   追加・修正：資料請求ボタンとレイアウト調整（最終版）
   ============================================== */

/* 1. デバイスによる表示・非表示の切り替え */
.u-hide-sp { display: none !important; }
.u-hide-pc { display: flex !important; }

@media (min-aspect-ratio: 1/1) {
  .u-hide-pc { display: none !important; }
  .u-hide-sp { display: block !important; }
}

/* 2. 資料請求ボタンのデザイン修正 */
.spec-btn.spec-btn--material {
  background-color: #fecb82; /* ご指定の色 */
  border-color: #231815;     /* 枠線は黒 */
  color: #231815;            /* 文字色も黒（視認性確保） */
  margin-top: calc(15 * var(--vw-sp)); /* スマホ時の上余白 */
}

/* ホバー時は少し薄く */
.spec-btn.spec-btn--material:hover {
  opacity: 0.8;
  color: #231815;
}

/* 矢印・アイコンの色（黒に統一） */
.spec-btn.spec-btn--material::after {
  border-left-color: #231815;
}
.spec-btn.spec-btn--material::before {
  background-color: #231815; 
}


/* 3. 【重要】PCレイアウトでの位置・幅の厳密な調整 */
@media (min-aspect-ratio: 1/1) {
  
  /* 左右カラムの高さを揃える（右ボタンと底辺を合わせるため） */
  .section-overview .overview-spec {
    align-items: stretch !important;
  }

  /* 左カラム（ギャラリー）のレイアウト設定 */
  .section-overview .overview-spec .gallery-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 幅を固定値変数で再定義し、ブレを防ぐ */
    width: calc(450 * var(--vw-pc)) !important; 
    max-width: calc(500 * var(--vw-pc)) !important;
  }

  /* ボタンエリアの設定 */
  .gallery-action-pc {
    /* 幅を画像ギャラリー（500）に厳密に合わせる */
    width: 100%;
    max-width: calc(500 * var(--vw-pc)); 
    
    /* 下揃えのための設定 */
    margin-top: auto; 
    padding-top: calc(20 * var(--vw-pc));
    
    /* 余計な横ズレを防ぐ */
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  /* ボタン自体のマージンリセット */
  .spec-btn.spec-btn--material {
    margin-top: 0;
    width: 100%; /* エリア幅いっぱいに広げる */
  }
}