/* ==========================================================================
   202601 不動産売買ページ限定設定
   構造：モバイルファースト（共通・スマホ設定 → PC用上書き）
   ========================================================================== */

/* --- 1. ベース・共通要素（スマホ基準） --- */
/* ヒーローセクション（配置調整） */
.boxWide.headingBoxHero.sales .heroSection {
  margin-top: -14rem; /* スマホ時の位置調整 */
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

/* コンテンツエリアのレイアウト変更 */
.boxWide.headingBoxHero.sales .heroContentBody {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
/* 見出し：h1 */
.boxWide.headingBoxHero.sales .heroHeader {
  text-align: center;
}

.boxWide.headingBoxHero.sales .heroHeader h1 {
  margin-top: 0;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1.5;
  font-weight: 700;
  background-color: transparent;
  color: #333;
}

/* 特殊見出し（飾り・ラベル） */
.headingRadial.sales {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: -7%;
  left: 50%;
  transform: translateX(-50%);
}

.headingRadial.sales:before,
.headingRadial.sales:after {
  content: "";
  display: block;
  width: 38px;
  aspect-ratio: 48 / 47;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.headingRadial.sales:before {
  background-image: url(/_assets/img/common/h2LineL.svg);
}
.headingRadial.sales:after {
  background-image: url(/_assets/img/common/h2LineR.svg);
}

.headingRadial.sales > span,
.headingRadial > span {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  font-weight: 700;
  text-align: center;
}

/* 赤いラベル */
.boxWide.headingBoxHero.sales .headingRadial .red {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(to bottom, #ff1a1a, #d60000);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  line-height: 1;
}

/* カラム・コンテンツ */
.boxWide.headingBoxHero.sales .Columnwrapper {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  gap: 1rem;
}

.boxWide.headingBoxHero.sales .heroColumn {
  width: 100%;
}

/* フォームエリア */
.boxWide.headingBoxHero.sales .boxSconForm {
  background-color: #f7f7f7;
  padding: 20px 15px;
  border-radius: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
}

.boxWide.headingBoxHero.sales .boxSconForm .formtableBody {
  width: 100%;
  padding: 0;
  margin-top: 0.5rem;
}

/* --- 2. CTAカード関連（右側） --- */

.boxWide.headingBoxHero.sales .heroCtaCard {
  position: relative;
  background-color: #f4f5ef;
  padding: 1.5rem 0.85rem 1rem 0.85rem;
  border-radius: 5px;
  margin-top: 2rem;
  overflow: visible;
}

.boxWide.headingBoxHero.sales .ctaLabel {
  position: absolute;
  top: -20%;
  left: 22%;
  background-color: #ffd500;
  padding: 10px 25px;
  font-weight: bold;
  border-radius: 5px;
  font-size: 1rem;
  white-space: nowrap;
  z-index: 3;
}

.boxWide.headingBoxHero.sales .ctaLabel::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-top: 10px solid #ffd500;
  border-right: 10px solid transparent;
}

.boxWide.headingBoxHero.sales .ctaBody .ctaArea {
  display: flex;
  gap: 5px;
  align-items: center;
}
/* 左側：2の比率 */
.boxWide.headingBoxHero.sales .ctaIconArea {
  flex: 2.5;
  min-width: 0;
}

/* 右側：8の比率 */
.boxWide.headingBoxHero.sales .ctaInfoArea {
  flex: 7.5;
  min-width: 0;
}

/* 画像の調整 */
.boxWide.headingBoxHero.sales .ctaIconArea img {
  width: 100%;
  height: auto;
  display: block;

  /* absoluteの代わりにこれを使う */
  position: relative;
  top: -35px;
  margin-bottom: -25px;
}

.boxWide.headingBoxHero.sales .ctaTel {
  display: flex;
  align-items: center;
}

.boxWide.headingBoxHero.sales .ctaTel a {
  font-size: 1.85rem;
  font-weight: bold;
  color: #119dc0;
  text-decoration: none;
  line-height: 1;
}

.boxWide.headingBoxHero.sales .ctaTel img {
  width: 35px;
  height: auto;
}
.boxWide.headingBoxHero.sales .ctaNote {
  font-size: 0.85rem;
  text-align: center;
}

/* --- 3. PC用上書き設定（750px以上） --- */
@media (min-width: 750px) {
  /* 背景とグリッド設定 */
  .boxWide.headingBoxHero.sales {
    display: grid;
    grid-template-columns: 1fr 1280px 1fr;
    grid-column: 1 / 4;
    height: 567px;
    background: var(--img) no-repeat center / cover;
  }

  /* ヒーローセクション（配置調整） 少し下にずらす*/
  .boxWide.headingBoxHero.sales .heroSection {
    margin-top: 2rem;
  }
  /* カラム・コンテンツ */
  .boxWide.headingBoxHero.sales .Columnwrapper {
    flex-direction: row;
    margin-top: 1.5rem;
  }

  /* 見出し：h1 */
  .boxWide.headingBoxHero.sales .heroHeader h1 {
    font-size: 1.75rem;
  }

  /* 特殊見出し（飾り・ラベル） */
  .headingRadial.sales {
    top: 6%;
  }

  .headingRadial.sales > span,
  .headingRadial > span {
    flex-direction: row;
  }

  /* フォームエリア */
  .boxWide.headingBoxHero.sales .boxSconForm {
    margin-top: 0;
    padding: 3rem;
  }
  .boxWide.headingBoxHero.sales .boxSconForm .formtableBody {
    margin-top: 2.5rem;
  }

  /* --- 2. CTAカード関連（右側） --- */
  .boxWide.headingBoxHero.sales .heroCtaCard {
    padding: 0 1rem;
  }

  .boxWide.headingBoxHero.sales .ctaLabel {
    position: absolute;
    top: -25%;
    left: 20%;
    font-size: 1.5rem;
  }

  /* 画像の調整 */
  .boxWide.headingBoxHero.sales .ctaIconArea img {
    top: -25px;
  }

  .boxWide.headingBoxHero.sales .ctaTel {
    display: flex;
    align-items: center;
  }

  .boxWide.headingBoxHero.sales .ctaTel a {
    font-size: 3.5rem;
  }

  .boxWide.headingBoxHero.sales .ctaTel img {
    width: 60px;
    height: auto;
  }

  .boxWide.headingBoxHero.sales .ctaNote {
    font-size: 1.25rem;
    margin-top: 0.75rem;
  }
}

/* 画面幅が750px以上のとき */
@media screen and (min-width: 750px) {
  .ctaNote.sp {
    display: none !important;
  }
}

/* 画面幅が749px以下のとき（逆にPC用を消す場合） */
@media screen and (max-width: 749px) {
  .ctaNote.pc {
    display: none !important;
  }
}

/* 画面幅が450の時だけフォームのマージンを狭くする */
@media screen and (max-width: 450px) {
  .boxSconForm .formtableConfirm .btn_G-Y {
    margin-top: 0;
  }
}

/* --- 共通レイアウト --- */

.box.boxSconFootCTA.sales {
  /* clamp(最小値, 推奨値, 最大値) */
  margin-top: clamp(2rem, 10vw, 5rem);
}

.salesSection {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.salesColumnWrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.salesColumn {
  width: 100%;
}

/* --- 左側：ボタン型CTA (査定) --- */
.salesBtnCard {
  position: relative;
  margin-top: 2rem;
}

.salesBtnLabel {
  position: absolute;
  top: -20px;
  left: 15px;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  background: linear-gradient(to bottom, #ff1a1a, #d60000);
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.salesBtnMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, #ffeb00, #ffd500);
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.1s;
  border-bottom: 6px solid #e6b800;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/*ホバー */
.salesBtnMain:hover {
  opacity: 1;
  background: linear-gradient(to bottom, #fff033, #ffdd00);
  transform: translateY(2px);
  border-bottom-width: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/*アクティブ（クリックした瞬間） */
.salesBtnMain:active {
  transform: translateY(6px);
  border-bottom-width: 0;
  box-shadow: none;
}

.salesBtnText {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
}

.salesBtnContent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.salesBtnIcon img {
  width: 40px;
  height: auto;
  display: block;
}

.salesBtnText {
  color: #333;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.salesBtnArrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #333;
}

/* --- 右側：電話型CTA --- */
.salesCtaCard {
  position: relative;
  background-color: #f4f5ef;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 2.5rem;
}

.salesCtaLabel {
  position: absolute;
  top: -25%;
  left: 60%;
  transform: translateX(-50%);
  background-color: #ffd500;
  padding: 0.5rem;
  font-weight: bold;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 3;
}

/* 黄色のラベル下の三角 */
.salesCtaLabel::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  border-top: 8px solid #ffd500;
  border-right: 8px solid transparent;
}

.salesCtaArea {
  display: flex;
  gap: 10px;
  align-items: center;
}

.salesCtaIconArea {
  flex: 2.5;
}
.salesCtaInfoArea {
  flex: 7.5;
}

.salesCtaIconArea img {
  width: 100%;
  position: relative;
  top: -40px;
  margin-bottom: -40px;
}

.salesCtaTel {
  display: flex;
  align-items: center;
  gap: 5px;
}

.salesCtaTel a {
  font-size: 1.8rem;
  font-weight: bold;
  color: #119dc0;
  text-decoration: none;
}

.salesCtaTel img {
  width: 30px;
  height: auto;
}

.ctaNote {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* PCでの動作：クリックを無効にする */
@media screen and (min-width: 750px) {
  .salesSconBtn[href^="tel:"] {
    cursor: default;
    pointer-events: none;
  }
}

/* スマホでの動作：クリックを有効にする */
@media screen and (max-width: 749px) {
  .salesSconBtn[href^="tel:"] {
    pointer-events: auto;
  }
}

/* --- デバイス別出し分け --- */
@media screen and (min-width: 750px) {
  .salesColumnWrapper {
    flex-direction: row; /* 横並び */
    align-items: flex-end;
  }

  .salesBtnCard {
    padding: 1.25rem 1.25rem 0 1.25rem;
    margin-top: 0;
  }
  .salesBtnText {
    font-size: 2rem;
  }
  .salesBtnMain {
    padding: 2.4rem 2rem;
  }
  .salesBtnLabel {
    font-size: 1.25rem;
    top: 0;
    left: 10%;
  }

  .salesCtaIconArea img {
    top: -25px;
  }

  .salesCtaCard {
    margin-top: 0;
    flex-grow: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  .salesCtaLabel {
    left: 20%;
    transform: none;
    font-size: 1.3rem;
    top: -30px;
  }
  .salesCtaTel a {
    font-size: 2.5rem;
  }
  .salesCtaTel img {
    width: 50px;
  }
  .ctaNote {
    font-size: 0.95rem;
    margin-top: 0.75rem;
  }

  /* 表示制御 */
  .ctaNote.sp {
    display: none !important;
  }
}

/* --- 追従バナー：ベース設定 --- */
.salesSconFix {
  height: 80px;
  position: fixed;
  background-color: rgba(17, 47, 86, 0.6);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.15s;
  display: flex;
  align-items: center;
  padding: 0 10px;
  /* 【最重要】初期状態は「強制的に」画面の下に隠す */
  transform: translateY(100%) !important;
  transition: transform 0.4s ease-in-out;
  pointer-events: none;
}

/* --- 表示条件：is-visible クラスがついた時だけ 0（表示）に戻す --- */
/* !important をつけることで、初期状態の translateY(100%) を上書きします */
.salesSconFix.is-visible {
  transform: translateY(0) !important;
  pointer-events: auto;
}

/* --- 非表示条件：フッター到達時（これも隠す） --- */
body.isFooterIntersecting .salesSconFix {
  transform: translateY(100%) !important;
}

/* ボタン並びのコンテナ */
.salesSconFlex {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- ボタン共通スタイル --- */
.salesSconBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px; /* 80pxの中でバランスの良い高さ */
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.salesSconIcon img {
  width: 20px; /* アイコンサイズ */
  height: auto;
  display: block;
}

.salesSconText {
  line-height: 1.2;
}

/* --- 各ボタンの配色（画像 da95b9 を踏襲） --- */
.salesSconBtn.white {
  background-color: #fff;
  color: #333;
}

.salesSconBtn.yellow {
  background: linear-gradient(to bottom, #ffeb00, #ffd500);
  color: #333;
}

/* --- PC用調整（750px以上） --- */
@media screen and (min-width: 750px) {
  .salesSconFlex {
    width: 50%;
  }
  .salesSconBtn {
    font-size: 1.25rem;
    gap: 12px;
  }
  .salesSconIcon img {
    width: 28px;
  }
  .salesSconFlex {
    gap: 20px;
    padding: 0 40px;
  }
}

/* 画面幅が749px以下のとき（逆にPC用を消す場合） */
@media screen and (max-width: 749px) {
  .pc-only {
    display: none !important;
  }
}

/* 飯田グループの物件の売却相談ページ */
.sales.hero {
  padding: 1rem 0;
  line-height: 1.5;
}
/* --- PC用調整（750px以上） --- */
@media screen and (min-width: 750px) {
  .salesColumn.hero {
    width: 50%;
    margin-top: 1rem;
  }

  .salesColumn.hero .salesBtnCard {
    padding: 1.25rem 1.25rem 0 0;
  }

  .salesColumn.hero .salesBtnCard .salesBtnLabel {
    left: 3%;
  }
  /* 画像hover */
  .logo-link {
    display: inline-block;
    cursor: pointer;
  }

  .logo-link img {
    display: block;
    height: auto;
    transition: transform 0.4s ease;
  }

  .logo-link:hover img {
    transform: scale(1.1);
  }
}