/* Baseline text normalization (trim ineffective declarations) */
.figma-text {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}

/* ===== Additions: App header, typography fixes, reusable buttons ===== */

/* Global baseline */
html,
body {
    margin: 0;
    padding: 0;
}
body {
    font-family: Inter, Arial, sans-serif;
    color: var(--figma-color-color_333333);
    background: #fff;
}
/* Typography corrections for CJK to reduce awkward last-character wraps */
.figma-text {
    word-break: keep-all; /* avoid breaking between CJK glyphs excessively */
    line-break: strict; /* stricter CJK line breaking */
    hyphens: none; /* never hyphenate */
    text-wrap: balance; /* try to balance lines (where supported) */
}
.nowrap {
    white-space: nowrap;
}

/* ===========================
    HEADER（PC）
=========================== */
.app-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  position: sticky;
 top: 0;
 z-index: 1000;
}
.header-container {
  max-width: 65%;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
 height: 30px;
 opacity: 0;
}

/* PCナビ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 60px;
}
.header-nav a {
  color: #666666;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.header-nav .btn-primary {
  color: #fff;
  width: 154px;
  font-size: 20px;
}


/* ===========================
    ハンバーガーボタン（PCでは非表示）
=========================== */
.header-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  position: relative;
  cursor: pointer;
}
.header-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--figma-color-color_ff8757);
  border-radius: 999px;
  transition: 0.2s ease;
}
.header-toggle span:nth-child(1) { top: 12px; }
.header-toggle span:nth-child(2) { top: 19px; }
.header-toggle span:nth-child(3) { top: 26px; }

/* ×アイコンになるとき */
.header-toggle.is-open span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}
.header-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.header-toggle.is-open span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}


/* ===========================
   スマホのみ
=========================== */
@media (max-width: 480px) {
  .app-header {
    box-shadow: none;
    border: none;
    position: fixed;     /* 画面上に固定 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 110;        /* メニューより上に */
    background: transparent;
  }

  .header-container {
    max-width: 100%;
    padding: 10px 16px;
  }

  /* ハンバーガー表示 */
  .header-toggle {
    background-color: #fff;
    display: inline-flex;
    justify-content: center;  /* ボタン内で線を中央寄せ */
    align-items: center;
    z-index: 120;             /* オーバーレイよりも上に */
  }

  .header-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;          /* 画面全体を覆う */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f8f8f8;
    padding-top: 170px;
    gap: 40px;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.35s ease;
  }


   /* --- 開いた状態 --- */
  .header-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* メニュー内リンク */
  .header-nav a {
    font-size: 18px;
    color: #666;
  }

  /* 無料査定ボタン */
  .header-nav .btn-primary {
    width: 45%;
    padding: 16px 0;
    font-size: 18px;
    border-radius: 40px;
    margin-top: 25px;
  }
  /* メニューオープン時は背面をスクロールさせない */
  body.menu-open {
    overflow: hidden;
  }
}






/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 43px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: var(--figma-color-color_ff8757);
    color: #ffffff;
}
.btn-primary:hover {
    filter: brightness(0.95);
}

/* Generic clickable affordance for exported elements we bind */
.clickable,
[role="button"] {
    cursor: pointer;
}


/* Fallback: avoid tiny horizontal scrollbars caused by fractional positions */
body {
    /* Allow exported content to extend to full width instead of being forcibly hidden */
    overflow-x: visible;
}

/* Advanced CJK spacing: slightly improve punctuation kerning for Japanese */
.figma-text {
    font-feature-settings: "palt" 1;
    /* Trim leading full-width space and allow end-trim where supported */
    text-spacing-trim: space-first allow-end;
}

/* Helpers applied dynamically to reduce orphaned last-line single-glyph wraps */
.tighten-1 {
    letter-spacing: -0.02em;
}
.tighten-2 {
    letter-spacing: -0.03em;
}

/* Normalize box sizing globally to stabilize layout metrics */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prefer hanging punctuation where supported to reduce awkward line breaks */
.figma-text {
    hanging-punctuation: allow-end;
}

/* ===== Landing page text wrapping and alignment fixes =====
   Goal: reduce single-character orphan wraps and improve inline alignment
   without modifying hero images, shapes, or exported absolute positions. */

/* Unify control over exported inline styles on text nodes */
.figma-text {
    /* allow CSS to control wrapping even if inline styles exist */
    white-space: normal !important;
    /* balance lines to avoid single-character last lines (modern browsers) */
    text-wrap: balance !important;
    /* CJK-friendly behavior: avoid overly aggressive breaks */
    word-break: keep-all !important;
    /* as a fallback, allow breaking anywhere rather than forcing overflow */
    overflow-wrap: anywhere !important;
    /* very slight tracking reduction helps keep last characters on the line */
    letter-spacing: -0.01em !important;

    /* neutralize width caps injected inline on exported <p> */
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: inline !important;
    vertical-align: baseline !important;
}






/* Landing: start content a bit higher under fixed header */
body.landing {
    padding-top: 0px;
}

/* Emphasize short time/turnaround phrases (matches "60秒" and "1営業日").
   Reuses Figma primary orange so it stays consistent with the "査定スタート" button.
   Increased letter-spacing to slightly separate characters for improved emphasis. */
.highlight-cta {
    color: var(--figma-color-color_ff8757) !important;
    font-weight: 700 !important;
    /* Slightly larger than surrounding text while respecting the parent font-size */
    font-size: 1.35em;
    display: inline-block; /* keeps layout stable for inline spans */
    line-height: 1;
    vertical-align: baseline;
    /* Slightly increased character spacing for these highlighted phrases */
    letter-spacing: 0.05em !important;
}




/* ===== SALES SUPPORT / 売却支援サービス　===== */

/* リード文 */
.services__lead {
  margin: 0; color: #333; text-align: center;
  font: 400 20px/30px Inter, Arial, sans-serif;
  word-break: break-word;
}
.services__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 32px; 
  max-width: 900px;
  margin: 3rem auto;
}

/* カード共通 */
.services__card {
   background: #fef5e1;
   box-shadow: 0 4px 4px rgba(255,216,201,1);
   border-radius: 10px;
  width: 381px; 
  height: auto; 
  text-align: center;
  padding: 40px 20px;
}
 .services__cardTitle {
  width: 330px; height: 36px; margin: 0; 
  text-align: center;
  color: var(--figma-color-color_213d7e); 
  font: 600 30px/36.31px Inter, Arial, sans-serif;
}

.services__txt {
  margin: 0; 
  color: #333;
  text-align: left;
  font: 400 18px/30px Inter, Arial, sans-serif;
}
.card-icon img {
  width: 150px; 
  height: 150px; 
}
/* ====================================
 ～1440px（ノートPC）
==================================== */
@media (max-width: 1440px) {

  .services__cards {
    max-width: 760px;
    gap: 28px;
  }

  .services__card {
    width: 100%;
    padding: 32px 20px;
  }

  .services__cardTitle {
    font-size: 26px;
    line-height: 32px;
    width: 100%;
  }

  .card-icon img {
    width: 130px;
    height: 130px;
  }

  .services__txt {
    font-size: 16px;
    line-height: 26px;
  }
}

/* ====================================
～840px（タブレット）
==================================== */
@media (max-width: 840px) {

  .services__cards {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 20px;
  }

  .services__card {
    width: 100%;
    padding: 28px 16px;
  }

  .services__cardTitle {
    font-size: 22px;
    line-height: 28px;
  }

  .card-icon img {
    width: 110px;
    height: 110px;
  }

  .services__txt {
    font-size: 15px;
    line-height: 24px;
  }

  .services__lead {
    font-size: 18px;
    line-height: 28px;
    padding: 0 16px;
  }
}

/* ====================================
   ～480px（スマホ）
==================================== */
@media (max-width: 480px) {

  .services__cards {
    grid-template-columns: 1fr; /* ★スマホは1列に変更 */
    gap: 18px;
    padding: 0 10px;
    max-width: 80%;
  }

  .services__card {
    width: 100%;
    padding: 24px 14px;
  }

  .services__cardTitle {
    font-size: 20px;
    line-height: 26px;
    width: 100%;
  }

  .card-icon img {
    width: 100px;
    height: 100px;
  }

  .services__txt {
    font-size: 14px;
    line-height: 24px;
  }

  .services__lead {
    font-size: 14px;
    line-height: 26px;
    padding: 0 10px;
  }
}


/* ===== PROJECT / 団地再生  ===== */
 .project {
  background-color: #fef5e1; /* bg-color_fef5e1 相当 */
}
/* 見出し・リード */
.project-title {
  margin: 0; 
  text-align: center;
  color: #213d7e; 
  font: 600 40px/55px Inter, Arial, sans-serif;
}
.project__lead {
 margin: 0; 
 text-align: center; 
 color:#333;
  font: 500 24px/40px Inter, Arial, sans-serif;
}
/* リボン＋白字タイトル */
 .project__ribbon {
  width: 615px; 
  margin: 2rem auto;
  position: relative;
}
.project__ribbonSvg {
display: block;
}
.project__ribbonText {
  color: #fff;
  font: 600 28px/55px Inter, Arial, sans-serif;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 pointer-events: none;
  z-index: 2;
}

.project__cards {
  display: flex;
  gap: 30px;
  margin: 3rem auto;
}

/* 3カード共通 */
 .project__card {
  width: 391px; 
  height: 508px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(255,210,192,1);
  border-radius: 15px;
  padding: 30px;
}

.project__miniTitle {
  text-align: center;
  color: var(--figma-color-color_213d7e); 
  margin-bottom: 20px;
  font: 600 36px/43.57px Inter, Arial, sans-serif;
}
.project__text {
  margin: 0; 
  color: #333;
  font: 400 18px/33px Inter, Arial, sans-serif;
}
.project__media {
  margin: 10px 0;
}
.project__media img {
  width: 95%;
}

/* セクション下のコピー */
 .project__footerCopy {
  margin: 5rem auto; 
  text-align: center; 
  color: var(--figma-color-color_ff8757);
  font: 500 32px/50px Inter, Arial, sans-serif;
}
/* ===============================
   ～1440px（ノートPC）
================================ */
@media (max-width: 1440px) {

  .project__cards {
    gap: 24px;
    justify-content: center;
  }

  .project__card {
    width: 340px;
    height: auto;
  }

  .project-title {
    font-size: 34px;
    line-height: 48px;
  }

  .project__lead {
    font-size: 20px;
    line-height: 34px;
  }

  .project__footerCopy {
    font-size: 26px;
    line-height: 40px;
  }
}
/* ===============================
   ～840px（タブレット）
================================ */
@media (max-width: 840px) {

  .project__cards {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .project__card {
    width: 45%;
    min-width: 300px;
  }

  .project-title {
    font-size: 30px;
    line-height: 44px;
  }

  .project__lead {
    font-size: 18px;
    line-height: 30px;
  }

  .project__footerCopy {
    font-size: 22px;
    line-height: 34px;
  }

  .project__ribbon {
    width: 80%;
  }

  .project__ribbonText {
    font-size: 22px;
  }
}
/* ===============================
   ～480px（スマホ）
   ★カードは1カラムへ
================================ */
@media (max-width: 480px) {

  .project__cards {
    max-width: 80%;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  .project__card {
    width: 100%;
    padding: 24px 18px;
    height: auto;
  }

  .project-title {
    font-size: 24px;
    line-height: 36px;
    padding: 0 10px;
  }

  .project__lead {
    font-size: 16px;
    line-height: 26px;
    padding: 0 10px;
  }

  .project__media img {
    width: 100%;
    max-width: 260px;
  }

  .project__miniTitle {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .project__text {
    font-size: 14px;
    line-height: 26px;
  }

  .project__footerCopy {
    font-size: 16px;
    line-height: 28px;
    padding: 0 10px;
    margin: 2rem auto;
  }

  .project__ribbon {
    width: 100%;
  }

  .project__ribbonText {
    font-size: 14px;
  }
}

/* ===== DIFFERENCE (買取と仲介) ===== */

/* カード全体の並び */
.difference__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
  width: 90%;
  margin: 40px auto;
}

/* カード共通 */
.difference__card {
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 上部のタイトル帯 */
.difference__cardHeader {
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
.difference__cardTitle {
  margin: 0;
}
/* 左：買取（オレンジ） */
.difference__card--kaitori .difference__cardHeader {
  background: #ff8757;
}

/* 右：仲介（グレー） */
.difference__card--chukai .difference__cardHeader {
  background: #888;
}

/* 図部分 */
.difference__cardBody {
  padding: 30px 20px;
  text-align: center;
}

.difference__media img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.difference-mess {
  font-size: 36px;
  color: var(--figma-color-color_213d7e);
  font-weight: 600;
  text-align: center;
  margin: 5rem auto;
}
/* 文字の上にドットを付ける */
.dot-word {
  position: relative;
  padding-top: 14px; /* ドットの分だけ余白 */
  display: inline-block;
}

/* ドット */
.dot-word::before {
  content: "●";
  color: var(--figma-color-color_ff8757);      /* ドットの色（オレンジ） */
  font-size: 20px;      /* ドットの大きさ */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.difference__meritBand{
  background:#ff8757; 
  border-radius:10px;
  width:623px;
  margin: auto;
   align-items:center; 
  text-align:center;
  color:#fff; 
  font:600 36px/72px Inter, Arial, sans-serif;
}

/* グレーのメリットパネル */
.difference__points{
  max-width: 1100px;
  padding: 4rem 4rem 3rem; 
  height:805px; 
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 32px 48px; 
  background:#f6f6f6; 
  border-radius:15px; 
  box-shadow:0 4px 4px rgba(96,96,96,.25);
  margin: 0 auto;
}
/* 1つのポイント行全体 */
.difference__point {
  display: grid;
  grid-template-columns: 24px 1fr;  /* 左：アイコン / 右：テキストブロック */
  column-gap: 22px;
  align-items: flex-start;
}
/* --- チェックアイコン全体（丸い背景） --- */
.checkmark {
  width: 35px;
  height: 35px;
  background: #ff8757;
  border-radius: 50%;
  display: block;
  position: relative;
}
/* --- CSS だけで作るチェックマーク --- */
.checkmark::before {
  content: "";
  position: absolute;
  left: 11px;   /* 調整 */
  top: 6px;    /* 調整 */
  width: 12px;
  height: 18px;
  border-right: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  transform: rotate(45deg);
  border-radius: 1px;
  box-sizing: border-box;
}

/* タイトル＋本文を縦積みするブロック（右側） */
.point__content {
  display: flex;
  flex-direction: column;
}

/* タイトル */
.point__title {
  margin: 0 0 1rem;
  font-size: 22px;
  font-weight: 600;
  color: var(--figma-color-color_213d7e);
}

/* テキスト */
.point__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #666;
}

/* 注意書き */
.difference__note{
 color:#333;
  font:400 18px/30px Inter, Arial, sans-serif;
  text-align: center;
}
/* ===============================
   ～1440px（ノートPC）
================================ */
@media (max-width: 1440px) {

  .difference__cards {
    gap: 28px;
  }

  .difference-mess {
    font-size: 30px;
  }

  .difference__meritBand {
    width: 500px;
    font-size: 30px;
    line-height: 60px;
  }

  .difference__points {
    padding: 3rem 3rem 2rem;
    gap: 28px 40px;
  }
}
/* ===============================
   ～840px（タブレット）
================================ */
@media (max-width: 840px) {

  .difference__cards {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 32px;
  }

  .difference__card {
    max-width: 600px;
    margin: 0 auto;
  }

  .difference-mess {
    font-size: 26px;
    line-height: 1.6;
    padding: 0 20px;
  }

  .difference__meritBand {
    width: 90%;
    font-size: 26px;
    line-height: 60px;
  }

  .difference__points {
    grid-template-columns: 1fr;
    padding: 2.5rem 2rem;
    height: auto;
    gap: 32px;
  }

  .point__title {
    font-size: 20px;
  }

  .point__text {
    font-size: 16px;
    line-height: 1.6;
  }
}
/* ===============================
   ～480px（スマホ）
================================ */
@media (max-width: 480px) {

  .difference__cards {
    gap: 24px;
    width: 88%;
  }

  .difference__card {
    width: 100%;
  }

  .difference__cardHeader {
    font-size: 22px;
    padding: 8px 0;
  }

  .difference__cardBody {
    padding: 20px 10px;
  }

  .difference-mess {
    font-size: 22px;
    margin: 3rem auto;
    padding: 0 10px;
  }

  .dot-word::before {
    font-size: 14px;
  }

  .difference__meritBand {
    width: 100%;
    font-size: 22px;
    line-height: 50px;
  }

  .difference__points {
    padding: 2rem 1.5rem;
    gap: 24px;
  }

  .difference__point {
    grid-template-columns: 28px 1fr;
    column-gap: 16px;
  }

  .checkmark {
    width: 28px;
    height: 28px;
  }
  .checkmark::before {
    left: 8px;
    top: 4px;
    width: 10px;
    height: 14px;
    border-width: 3px;
  }

  .point__title {
    font-size: 16px;
  }

  .point__text {
    font-size: 14px;
    line-height: 1.6;
  }

  .difference__note {
    font-size: 14px;
    line-height: 22px;
    padding: 0 10px;
  }
}


/* ===== Flow / ご依頼から売却までの流れ ===== */
#flow{
  background: var(--figma-color-color_fef5e1);
}

/* リボン */
.flow__ribbon {
  width: 464px;
  height: 73px;
  margin: 0 auto 24px;
  background: var(--figma-color-color_ff8757);
  border-radius: 6px;
  position: relative;
}
.flow__ribbon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -27px;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-top: 27px solid var(--figma-color-color_ff8757);
}
 .flow__ribbonText {
  display: block;
  color: #fff;
  font: 600 28px/73px Inter, Arial, sans-serif;
  text-align: center;
}

/* タイトル */
.flow__title {
  margin: 32px auto 8px;
  text-align: center;
  color: var(--figma-color-color_213d7e);
  font: 600 36px/1.2 Inter, Arial, sans-serif;
}
 .flow__underline {
  width: 145px;
  height: 3px;
  margin: 2rem auto 28px;
  background: var(--figma-color-color_ff8757);
  border-radius: 999px;
}

/* ===== リスト ===== */
.flow__list {
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  display: grid;
  gap: 40px;
  width: 80%;
}

.flow__item {
  position: relative;
}
.flow__card {
  background: #ffffff;
  border-radius: 10px;
  padding: 18px 24px 18px 160px;  /* 左を広くしてバッジ分を確保 */
  box-shadow: 0 4px 8px rgba(255, 215, 199, 0.9);
}
 .flow__card {
  grid-column: 2 / 3;
  min-height: 180px;               /* ← バッジと同じ高さに固定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}
/* 縦長の数字バッジ */
.flow__badge {
  position: absolute;
  left: 20px;
  top: 0;
  width: 100px;
  height: 100%;
  background: var(--badge-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #213d7e;
  font-weight: 700;
  font-size: 20px;
}
/* 下三角（→ バッジ色と自動連動） */
.flow__badge::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -18px;

  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 18px solid var(--badge-color);
}
/* 各色をCSS変数に定義 */
.flow__badge--c1 { --badge-color: #ffebe3; }
.flow__badge--c2 { --badge-color: #ffddcf; }
.flow__badge--c3 { --badge-color: #ffc2a9; }
.flow__badge--c4 { --badge-color: #ffb699; }
.flow__badge--c5 { --badge-color: #ff9e77; }
.flow__badge--c6 { --badge-color: #ff8757; color: #fff; }

/* 中の数字 */
.flow__badge span {
  display: block;
  font-size: 40px;
}

/* ステップタイトル */
 .flow__step {
  margin: 0 0 8px;
  font: 500 24px/1.35 Inter, Arial, sans-serif;
  color: var(--figma-color-color_213d7e);
}
 .flow__desc {
  margin: 0;
  font: 400 18px/1.8 Inter, Arial, sans-serif;
  color: #666666;
}

/* 注意書き */
.flow__note {
  margin: 22px auto 0;
  text-align: center;
  font: 400 18px/30px Inter, Arial, sans-serif;
  color: #666666;
  max-width: 680px;
}
/* ===============================
   ～1440px（ノートPC）
================================ */
@media (max-width: 1440px) {

  .flow__ribbon {
    width: 420px;
    height: 68px;
  }
  .flow__ribbonText {
    font-size: 24px;
    line-height: 68px;
  }

  .flow__title {
    font-size: 32px;
  }

  .flow__list {
    width: 90%;
    gap: 36px;
  }

  .flow__card {
    padding-left: 150px;
  }

  .flow__step {
    font-size: 22px;
  }
  .flow__desc {
    font-size: 17px;
  }
}
/* ===============================
   ～840px（タブレット）
================================ */
@media (max-width: 840px) {

  .flow__ribbon {
    width: 350px;
    height: 64px;
  }
  .flow__ribbonText {
    font-size: 22px;
    line-height: 64px;
  }

  .flow__title {
    font-size: 28px;
  }

  .flow__list {
    width: 100%;
    gap: 32px;
  }

  .flow__badge {
    width: 80px;
    left: 10px;
  }
  .flow__badge::after {
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-top-width: 15px;
  }

  .flow__card {
    padding-left: 120px;
  }

  .flow__step {
    font-size: 20px;
  }
  .flow__desc {
    font-size: 16px;
    line-height: 1.7;
  }
}
/* ===============================
   ～480px（スマホ）
================================ */
@media (max-width: 480px) {

  .flow__ribbon {
    width: 90%;
    height: 54px;
  }
  .flow__ribbonText {
    font-size: 18px;
    line-height: 54px;
  }

  .flow__title {
    font-size: 22px;
    margin-top: 42px;
  }

  .flow__underline {
    width: 90px;
    margin: 1.5rem auto;
  }

  /* ---- リスト ---- */
  .flow__list {
    width: 88%;
    gap: 28px;
  }

  .flow__badge {
    width: 60px;
    height: 60px;
    top: -10px;          /* カードに触れるぐらいの位置 */
    left: 10px;          /* 左端に固定 */
    transform: none;     /* 中央寄せ解除 */
    border-radius: 50%;  /* 丸形 */
  }
  .flow__badge span {
    font-size: 24px;
  }

  /* --- カード側の余白調整（バッジ避け） --- */
  .flow__card {
    padding: 24px 18px 18px 18px;
    margin-top: 20px; /* バッジがカードにかぶらないよう余白付与 */
  }
  /* --- ステップタイトル中央寄せ --- */
  .flow__step {
    text-align: center;
    width: 100%;
    font-size: 20px;
  }

  .flow__desc {
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
  }

  .flow__note {
    font-size: 14px;
    line-height: 22px;
    padding: 0 10px;
  }


  /* --- バッジを丸形＋左上に固定 --- */
  .flow__item {
    padding-top: 0; /* 余白リセット */
  }

  /* 三角形削除（丸の場合は不要） */
  .flow__badge::after {
    display: none;
  }

  .flow__badge span {
    font-size: 22px;
    line-height: 1;
  }
}

/* ===== VOICE / 利用者の声 ===== */

 .voice__item{
  width: 800px;
  display: flex;
  gap: 50px;
  align-items: center;
  margin: 2rem auto;
}

/* 顔写真 */
 .voice__avatar img{
  width: 135px;
}

 .voice__text{
  font: 500 20px/40px Inter, Arial, sans-serif;  
  color: #333333;
}
.voice__name{
  font: 400 20px/24px Inter, Arial, sans-serif;
  color: #213d7e;
}


 img.voice-decoration{
  position: absolute;
  right: -24px;
  bottom: 50px;
  max-width: 180px;
  height: auto;
  pointer-events: none;
}

/* =============================
   ノートPC（769px〜1024px）
============================= */

@media (max-width: 1024px) {

  .voice__item {
    width: 90%;
    gap: 36px;
  }

  .voice__avatar img {
    width: 120px;
  }

  .voice__text {
    font-size: 18px;
    line-height: 34px;
  }

  .voice__name {
    font-size: 18px;
  }

  .voice-decoration {
    right: -10px;
    bottom: 40px;
    max-width: 160px;
  }
}


/* =============================
    タブレット（481px〜768px）
============================= */

@media (max-width: 768px) {

  .voice__item {
    width: 95%;
    gap: 28px;
  }

  .voice__avatar img {
    width: 110px;
  }

  .voice__text {
    font-size: 17px;
    line-height: 32px;
  }

  .voice__name {
    font-size: 17px;
  }

  .voice-decoration {
    right: 0;
    bottom: 30px;
    max-width: 130px;
  }
}


/* =============================
   スマホ（〜480px）
============================= */

@media (max-width: 480px) {

  .voice__item {
    width: 100%;
    gap: 20px;
  }

  .voice__avatar img {
    width: 80px;
  }

  .voice__text {
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    margin: 0;
  }

  .voice__name {
    font-size: 14px;
    margin-top: 4px;
  }

  .voice-decoration {
    position: static;
    display: block;
    margin: 30px auto 0;
    max-width: 120px;
  }
  img.voice-decoration {
        position: static;
    display: block;
    margin: 30px auto 0;
    max-width: 120px;
  }
}


/* ===== Thanks page (resources/views/thanks.blade.php) ===== */
.page-thanks .figma-export-root {
  display: block; /* override global flex only on thanks page */
}
.page-thanks .thanks-canvas {
  background-color: #ffffff;
  width: 100%;
  position: relative;
  /* overflow は設定しない（現状のグローバル上書き: .figma-export-root .block { overflow: visible !important; } を維持） */
}
.page-thanks .thanks-inner {
  max-width: 900px;
  margin: 120px auto 80px;
  padding: 0 16px;
  text-align: center;
}
.page-thanks .thanks-title {
  font-size: 28px;
  font-weight: 700;
  color: #213d7e;
  margin: 0 0 16px;
}
.page-thanks .thanks-message {
  font-size: 20px;
  color: #333333;
  margin: 0 0 12px;
}
.page-thanks .thanks-actions {
  margin-top: 24px;
}
.page-thanks .thanks-button {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #213d7e;
  text-decoration: none;
  background: #ffffff;
}
/* ===============================
   480px 以下（スマホ）
   =============================== */
@media (max-width: 480px) {
  .page-thanks .thanks-message {
  font-size: 12px;
}
}


/* ===== Contact Confirm (確認画面) ===== */
.page-contact-confirm .confirm-canvas {
  background-color: #ffffff;
  width: 100%;
  min-height: 800px;
  position: relative;
}
.page-contact-confirm .confirm-container {
  max-width: 1000px;
  margin: 80px auto 40px;
  padding: 0 16px;
}
.page-contact-confirm .confirm-title {
  font-size: 28px;
  font-weight: 700;
  color: #213d7e;
  margin: 0 0 16px;
}
.page-contact-confirm .confirm-lead {
  font-size: 16px;
  color: #333333;
  margin: 0 0 24px;
}
.page-contact-confirm .confirm-box {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}
.page-contact-confirm .confirm-table {
  width: 100%;
  border-collapse: collapse;
}
.page-contact-confirm .confirm-table th {
  text-align: left;
  width: 220px;
  padding: 10px;
}
.page-contact-confirm .confirm-table td {
  padding: 10px;
}
.page-contact-confirm .confirm-table tr:not(:last-child) th,
.page-contact-confirm .confirm-table tr:not(:last-child) td {
  border-bottom: 1px solid #e5e5e5;
}
.page-contact-confirm .is-prewrap {
  white-space: pre-wrap;
}
.page-contact-confirm .confirm-actions {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  justify-content: center;
  align-items: center;
}
.page-contact-confirm .confirm-back {
  display: inline-block;
  padding: 14px 28px;
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #213d7e;
  text-decoration: none;
  background: #ffffff;
  min-width: 160px;
  text-align: center;
}
.page-contact-confirm .confirm-submit {
  padding: 14px 32px;
  font-size: 18px;
  border: none;
  border-radius: 28px;
  background: #ff8757;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  min-width: 180px;
}
.page-contact-confirm .confirm-errors {
  margin-top: 16px;
  color: #b00020;
}
.page-contact-confirm .footer-block {
  width: 100%;
  height: 636px;
  position: relative;
}


/* ===== Real Estate / 不動産業者の方へ ===== */

 .subheading{
  margin: 10px 0;
  text-align: center;
  font-weight: 700;
  color: var(--ttl-blue);
  font-size: clamp(16px, 3.6vw, 36px);
  position: relative; /* ← 左右中央配置には不要だけど、下線装飾用に残してOK */
  display: block;     /* またはデフォルトのままでもOK */
}

/* 見出し下のオレンジ帯（丸みのあるライン） */
 .subheading::after{
  content: "";
  display: block;
  height: 23px;
  width: 888px;
  background: #ffe9e0;
  margin: 0 auto;
}

/* リード文：中央寄せ＆やや広めの行間 */
.lead{
  justify-items: center;
}
.lead p{
  margin: 0;
  font-size: 24px;
  color: var(--figma-color-color_333333);
  margin: 2rem 0;
  text-align: center;
}
 .lead p:last-child{
  font-size: 24px;
  color: #777; /* 注記の弱色 */
}

/* ---------- Contact（オレンジのカード） ---------- */
.real_estate_content{
  background: var(--figma-color-color_ff8757);
  border-radius: 5px;
  width: 1000px;
  padding-block: clamp(24px, 4.5vw, 40px);
  margin: 7rem auto 3rem;
}

.contact-title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #fff;
  font-size: clamp(20px, 4vw, 32px);
}

/* 3カラムのレイアウト */
 .contact-list {
  margin: clamp(12px, 3vw, 20px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.contact-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 28px) 10px;
  position: relative;
}
.contact-row--mail {
  text-decoration: none;
  color: inherit;
}
 .contact-row + .contact-row {
  border-left: 2px solid rgba(255, 255, 255, 0.45);
}

/* 円ラッパー（80px） */
.contact-icon{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 8px;
  flex: 0 0 auto; /* 高さ計算の安定化 */
}

/* 中のアイコン（48px） */
 .contact-icon img{
  width: 48px;
  height: 48px;
  object-fit: contain;
  display:block;
}
 .contact-label {
  margin: 5px 0;
  font-weight: 700;
  color: #fff;
  font-size: 20px;
}

.contact-value {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 2.8vw, 22px);
  letter-spacing: 0.02em;
}
.contact-value a {
  color: #fff;
  text-decoration: none;
  word-break: break-all;
}

/* ===============================
   1440px 以下（ノートPC）
   =============================== */
@media (max-width: 1440px) {
  .real_estate_content {
    width: min(1000px, 80%);
    margin: 5rem auto 3rem;
  }

  .contact-row {
    padding-inline: 8px;
  }
}


/* ===============================
   840px 以下（タブレット）
   =============================== */
@media (max-width: 840px) {
  .real_estate_content {
    width: 94%;
    margin: 4rem auto 2.5rem;
    border-radius: 8px;
  }

  .contact-title {
    font-size: 22px;
  }

  /* 2カラムに落とす */
  .contact-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-row {
    padding: 16px 6px;
  }

  /* 横罫線に変更（列ごとに左線が出ないように） */
  .contact-row + .contact-row {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  .contact-icon {
    width: 72px;
    height: 72px;
  }
  .contact-icon img {
    width: 40px;
    height: 40px;
  }

  .contact-label {
    font-size: 18px;
  }

  .contact-value {
    font-size: 16px;
  }
}


/* ===============================
   480px 以下（スマホ）
   =============================== */
@media (max-width: 480px) {
  .real_estate_content {
    width: 80%;
    margin: 3rem auto 2rem;
    border-radius: 0;
    padding-block: 20px;
  }

  .contact-title {
    font-size: 18px;
    line-height: 1.5;
  }
  .subheading::after {
    width: 90%;
    height: 10px;
  }
  .lead p {
    font-size: 14px;
    margin: 20px 0;
  }
  .lead p:last-child {
    font-size: 14px;
  }

  /* 1カラム縦並び */
  .contact-list {
    grid-template-columns: 1fr;
  }

  .contact-row {
    padding: 14px 12px;
  }

  .contact-row + .contact-row {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  .contact-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
  }
  .contact-icon img {
    width: 34px;
    height: 34px;
  }

  .contact-label {
    font-size: 16px;
  }

  .contact-value {
    font-size: 15px;
  }
}

/* ===== PROBLEM / こんなお悩みありませんか？ ===== */
#problem.problem {
  position: relative;
  padding-block: clamp(20px, 8vw, 100px);
}

#problem .section-container {
  padding: 0 0 5rem 0;
}

/* Problem section: draw a chevron (down arrow) at the bottom to smoothly connect to the next section */
#problem.problem.problem-has-decoration::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* overlap next section to avoid gaps */
  height: clamp(90px, 12vw, 180px);
  background: var(--figma-color-color_fef5e1); /* same as next section */
  /* Downward chevron */
  clip-path: polygon(0 32%, 50% 85%, 100% 32%, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

/* fine-tune on small screens */
@media (max-width: 480px) {
  #problem.problem.problem-has-decoration::after {
    height: clamp(60px, 18vw, 120px);
    clip-path: polygon(0 28%, 50% 88%, 100% 28%, 100% 100%, 0 100%);
  }
}

#problem .problem-grid-cards {
  list-style: none;
  margin: clamp(20px, 4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 3vw, 28px);
}

#problem .problem-card {
  background: #ffffff;
  border: 2px solid var(--figma-color-color_ff8757);
  border-radius: 12px;
  box-shadow: 0 0 20px 2px rgba(255, 210, 192, 0.6);
  padding: clamp(14px, 3.2vw, 18px);
  display: grid;
  align-content: start;
  gap: clamp(10px, 2.4vw, 14px);
}

#problem .problem-media {
  margin: 0;
}
#problem .problem-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

#problem .problem-card p {
  margin: 0;
  color: var(--figma-color-color_ff8757);
  font-family: Inter, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 3.6vw, 20px);
  line-height: 1.6;
  text-align: center;
}

/* ===== ノートPC以下（～1440px） ===== */
@media (max-width: 1440px) {
  #problem .problem-grid-cards {
    max-width: 1100px;
    margin-inline: auto;
  }
}

/* ===== タブレット（～840px） ===== */
@media (max-width: 840px) {
  #problem .problem-grid-cards {
    /* 幅が狭くなるので gap を少し小さく */
    gap: 18px;
  }

  #problem .problem-card {
    padding: 12px;
  }

  #problem .problem-card p {
    font-size: 15px;
  }
}

/* ===== スマホ（～480px） ===== */
@media (max-width: 480px) {
  #problem .problem-grid-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;   
    margin-top: 16px;
    max-width: 90%;
  }

  #problem .problem-card {
    padding: 10px 8px;
  }

  #problem .problem-card p {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* ===== 団地プラスの特徴 / FEATURES ===== */

#features {
  background-color: var(--figma-color-color_fef5e1);
  padding-bottom: 3rem;
}
.white {
  color: #fff;
  font-weight: 600;
}
/* Neutralize legacy absolute layout for .features section on landing page */
body.landing #features.features {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
}
.features-lead .features-label {
  width: fit-content;
  text-align: center;
  font-size: 24px;
  background-color: var(--figma-color-color_ff8757);
  padding: 5px 10px;
  color: #fff;
  margin: 2rem 0 0;
}
.features-lead {
  color: var(--figma-color-color_213d7e);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 3rem;
}
.featuires-grid {
  display: grid;
  gap: 65px;
  padding: 40px 0 80px;
  justify-content: center;
}

/* 各カード */
.feature-card {
  width: 1080px;
  height: 510px;
  background: #fff;
  border-radius: 20px;
  padding: 60px;
  position: relative;
  box-shadow: 0px 0px 20px 1px rgba(255,211,193,1.0000);
}

/* 番号 - カード左上 */
.feature-number {
  position: absolute;
  top: -54px;
  left: 40px;
  font-size: 80px;
  font-weight: 800;
  font-family: Roboto, Arial, sans-serif;
  color: var(--figma-color-color_ff8757);
}

/* 02は右上にしたい場合はこれ */
.feature-card--reverse .feature-number {
  right: 20px;
  left: auto;
}
/* 内容の横並びを flex で作る */
.feature-content {
  display: flex;
  align-items: center;
}

/* テキスト 6割 */
.feature-text {
  flex: 0 0 60%;
}
/* 画像 4割 */
.feature-image {
  flex: 0 0 40%;
}
/* --- 反転カード（2だけ） → 5:5 --- */
.feature-card--reverse .feature-text {
  flex: 0 0 55%;
}
.feature-card--reverse .feature-image {
  flex: 0 0 45%;
}

.feature-image {
  flex: 0 0 320px;
  max-width: 320px;
}
.feature-image img {
  width: 400px;
  height: auto;
  display: block;
}

/* 反転レイアウト（02だけ左右入れ替え） */
.feature-card--reverse .feature-content {
  flex-direction: row-reverse;
  justify-content: space-between;
}


/* テキスト */
.feature-text h3 {
  color: var(--figma-color-color_213d7e);
  font-size: 30px;
  font-weight: 700;
  margin: 12px 0;
  line-height: 1.6;
}

.feature-text p {
  font-size: 18px;
  font-weight: 500;;
  color: #333;
  line-height: 1.8;
  margin-bottom: 18px;
}

.feature-text ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.feature-text ul li {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  font-weight: 500;;
  color: var(--figma-color-color_213d7e);
  line-height: 2.2;
}
.feature-text ul li::before {
  content: "";
  width: 10px;         
  height: 10px;
  background: var(--figma-color-color_ff8757);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;         /* 行間に影響しないよう調整 */
  transform: translateY(-50%);
}

/* =========================
   ～1440px（ノートPC）
   ========================= */
@media (max-width: 1440px) {

  .feature-card {
    width: 90%;
    height: auto;
    padding: 50px;
    margin: auto;
  }

  .feature-image img {
    width: 320px;
  }

  .feature-number {
    font-size: 70px;
    left: 30px;
  }
  .feature-card--reverse .feature-number {
    right: 20px;
  }

  .feature-text h3 {
    font-size: 26px;
  }

  .feature-text p,
  .feature-text ul li {
    font-size: 16px;
  }
}


/* =========================
   ～840px（タブレット）
   ========================= */
@media (max-width: 840px) {

  .feature-card {
    width: 100%;
    padding: 40px 30px;
  }

  .feature-content {
    gap: 25px;
  }

  /* テキストと画像の割合を均等に近づける */
  .feature-text {
    flex: 0 0 55%;
  }
  .feature-image {
    flex: 0 0 45%;
    max-width: 260px;
  }

  .feature-image img {
    width: 260px;
  }

  /* 番号縮小 */
  .feature-number {
    font-size: 60px;
    top: -40px;
    left: 20px;
  }
  .feature-card--reverse .feature-number {
    right: 20px;
  }
}


/* =========================
   ～480px（スマホ）
   ========================= */
@media (max-width: 480px) {

  .features-lead {
    font-size: 14px;
    margin-bottom: 0;
  }
  .features-lead .features-label {
  font-size: 14px;
  padding: 5px 10px;
  margin: 0 0 .8rem;
  display: inline-block;
}
  .featuires-grid {
    gap: 40px;
    padding-bottom: 40px;
    max-width: 90%;
    margin: auto;
  }

  .feature-card {
    padding: 28px 20px;
    height: auto;
  }

  /* スマホは完全に縦積みにする */
  .feature-content {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  /* 反転カードの反転を解除（スマホでは上下になるため） */
  .feature-card--reverse .feature-content {
    flex-direction: column;
  }

  .feature-text,
  .feature-image {
    flex: none;
    width: 100%;
  }

  .feature-image {
    max-width: 80%;
    margin: 0 auto;
  }

  .feature-image img {
    width: 80%;
    margin: auto;
  }

  /* 番号を縮めて中央寄せ */
  .feature-number {
    font-size: 48px;
    left: 16px;
    top: -32px;
  }

  .feature-card--reverse .feature-number {
    right: auto;
    left: 16px;
  }

  .feature-text h3 {
    font-size: 22px;
  }

  .feature-text p,
  .feature-text ul li {
    font-size: 14px;
  }
}

/* ========== Cases カルーセル ========== */

#cases {
  background: var(--figma-color-color_f9f8f8);
}

.case-index-radio,
.carousel__radio {
  display: none;
}

[data-case] {
  display: none;
}

/* どのケースを表示するか */
#case-1:checked ~ [data-case="1"],
#case-2:checked ~ [data-case="2"],
#case-3:checked ~ [data-case="3"],
#case-4:checked ~ [data-case="4"] {
  display: block;
}

.outer-panel {
  max-width: 960px;
  margin: 0 auto;
  padding: 50px;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2500);
}

.case-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.stack > * + * {
  margin-top: 12px;
}

.case-col__title {
  font-size:26px;
  text-align: center;
  color: var(--figma-color-color_213d7e);
}

/* テキスト部分 */
.case-meta {
  width: 90%;
  margin: auto;
}

.case-meta-ttl {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--figma-color-color_213d7e);
}

.case-meta p {
  line-height: 1.8;
  font-size: 18px;
}

.case-price {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-weight: 500;
  font-size: 18px;
}

.case-price__tag {
  padding: 8px 16px;
  background: #ff7f32;
  color: #fff;
  border-radius: 4px;
  margin-right: 10px;
}

.case-price__value {
  color: #ff7f32;
  font-size: 24px;
}

/* ========== Before / After 内側カルーセル ========== */

.carousel {
  position: relative;
}

/* スライド表示領域 */
.carousel__viewport {
  position: relative;
  width: 80%;
  aspect-ratio: 3 / 4; /* 画像比率はお好みで */
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
  margin: auto;
}

/* 各スライド（背景画像を貼る箱） */
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-size: contain;
  background-position: center;
}

/* 1〜5枚目のどれを表示するか（全カルーセル共通で効く） */
.carousel .carousel__radio:nth-of-type(1):checked ~ .carousel__viewport .carousel__slide:nth-child(1),
.carousel .carousel__radio:nth-of-type(2):checked ~ .carousel__viewport .carousel__slide:nth-child(2),
.carousel .carousel__radio:nth-of-type(3):checked ~ .carousel__viewport .carousel__slide:nth-child(3),
.carousel .carousel__radio:nth-of-type(4):checked ~ .carousel__viewport .carousel__slide:nth-child(4),
.carousel .carousel__radio:nth-of-type(5):checked ~ .carousel__viewport .carousel__slide:nth-child(5) {
  opacity: 1;
}

/* ドット */
.carousel__dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 6px;
}

.carousel__dots label {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

/* アクティブなドットの色 */
.carousel .carousel__radio:nth-of-type(1):checked ~ .carousel__dots label:nth-child(1),
.carousel .carousel__radio:nth-of-type(2):checked ~ .carousel__dots label:nth-child(2),
.carousel .carousel__radio:nth-of-type(3):checked ~ .carousel__dots label:nth-child(3),
.carousel .carousel__radio:nth-of-type(4):checked ~ .carousel__dots label:nth-child(4),
.carousel .carousel__radio:nth-of-type(5):checked ~ .carousel__dots label:nth-child(5) {
  background: #ff7f32;
  border-color: #ff7f32;
}

/* 内側カルーセルの矢印 */

.carousel__arrow {
  position: absolute;
  background: unset;
  border: unset;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  cursor: pointer;
}

/* 左右位置 */
.carousel__arrow--left {
  left: 40px;
}

.carousel__arrow--right {
  right: 40px;
}

/* 矢印そのものはCSSで三角を描いてもOKだし、背景画像にしてもOK */
/* ここでは単純に ◀ ▶ 風に */
.carousel__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform-origin: center;
}

.carousel__arrow--left::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.carousel__arrow--right::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* ========== 真ん中の三角（Before→After） ========== */

.case-arrow-triangle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 30px solid #213d7e;
}

.case-before-after {
  position: relative;
}

/* ========== 外側カルーセルの矢印 ========== */

.outer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  display: none; /* デフォルト非表示 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  z-index: 10;
}

.outer-arrow svg {
  display: block;
}

.outer-arrow--left {
  left: 6%;
}

.outer-arrow--right {
  right: 6%;
}

/* 今表示中のケースに対応する矢印だけ出す */
#case-1:checked ~ .outer-arrow[data-from="1"],
#case-2:checked ~ .outer-arrow[data-from="2"],
#case-3:checked ~ .outer-arrow[data-from="3"],
#case-4:checked ~ .outer-arrow[data-from="4"] {
  display: flex;
}

/* ========== 外側ドット ========== */

.outer-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 2rem 0 3rem;
}

.outer-dots label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c6c6c6;
  cursor: pointer;
}

/* アクティブのドット */
#case-1:checked ~ .outer-dots label:nth-child(1),
#case-2:checked ~ .outer-dots label:nth-child(2),
#case-3:checked ~ .outer-dots label:nth-child(3),
#case-4:checked ~ .outer-dots label:nth-child(4) {
  background: #ff7f32;
  border-color: #ff7f32;
}

/* ========== 画像用のクラス例（任意で差し替え） ========== */

.bg-case1-before-1 { background-image: url('/images/2069_374.png'); }
.bg-case1-before-2 { background-image: url('/images/cases/before_02.png'); }
.bg-case1-before-3 { background-image: url('/images/cases/before_03.png'); }
.bg-case1-before-4 { background-image: url('/images/cases/before_04.png'); }
.bg-case1-before-5 { background-image: url('/images/cases/before_05.png'); }

.bg-case1-after-1 { background-image: url('/images/2069_373.png'); }
.bg-case1-after-2 { background-image: url('/images/cases/after_02.png'); }
.bg-case1-after-3 { background-image: url('/images/cases/after_03.png'); }
.bg-case1-after-4 { background-image: url('/images/cases/after_04.png'); }
.bg-case1-after-5 { background-image: url('/images/cases/after_05.png'); }

/* ============================================================
   Case 2
   ============================================================ */
.bg-case2-before-1 { background-image: url('/images/cases/case02/before_01.png'); }
.bg-case2-before-2 { background-image: url('/images/cases/case02/before_02.png'); }
.bg-case2-before-3 { background-image: url('/images/cases/case02/before_03.png'); }
.bg-case2-before-4 { background-image: url('/images/cases/case02/before_04.png'); }
.bg-case2-before-5 { background-image: url('/images/cases/case02/before_05.png'); }

.bg-case2-after-1  { background-image: url('/images/cases/case02/after_01.png'); }
.bg-case2-after-2  { background-image: url('/images/cases/case02/after_02.png'); }
.bg-case2-after-3  { background-image: url('/images/cases/case02/after_03.png'); }
.bg-case2-after-4  { background-image: url('/images/cases/case02/after_04.png'); }
.bg-case2-after-5  { background-image: url('/images/cases/case02/after_05.png'); }

/* ============================================================
   Case 3
   ============================================================ */
.bg-case3-before-1 { background-image: url('/images/cases/case03/before_01.png'); }
.bg-case3-before-2 { background-image: url('/images/cases/case03/before_02.png'); }
.bg-case3-before-3 { background-image: url('/images/cases/case03/before_03.png'); }
.bg-case3-before-4 { background-image: url('/images/cases/case03/before_04.png'); }
.bg-case3-before-5 { background-image: url('/images/cases/case03/before_05.png'); }

.bg-case3-after-1  { background-image: url('/images/cases/case03/after_01.png'); }
.bg-case3-after-2  { background-image: url('/images/cases/case03/after_02.png'); }
.bg-case3-after-3  { background-image: url('/images/cases/case03/after_03.png'); }
.bg-case3-after-4  { background-image: url('/images/cases/case03/after_04.png'); }
.bg-case3-after-5  { background-image: url('/images/cases/case03/after_05.png'); }

/* ============================================================
   Case 4
   ============================================================ */
.bg-case4-before-1 { background-image: url('/images/cases/case04/before_01.png'); }
.bg-case4-before-2 { background-image: url('/images/cases/case04/before_02.png'); }
.bg-case4-before-3 { background-image: url('/images/cases/case04/before_03.png'); }
.bg-case4-before-4 { background-image: url('/images/cases/case04/before_04.png'); }
.bg-case4-before-5 { background-image: url('/images/cases/case04/before_05.png'); }

.bg-case4-after-1  { background-image: url('/images/cases/case04/after_01.png'); }
.bg-case4-after-2  { background-image: url('/images/cases/case04/after_02.png'); }
.bg-case4-after-3  { background-image: url('/images/cases/case04/after_03.png'); }
.bg-case4-after-4  { background-image: url('/images/cases/case04/after_04.png'); }
.bg-case4-after-5  { background-image: url('/images/cases/case04/after_05.png'); }

.outer-arrows-mobile {
  display: none; /* PCでは非表示 */
}


/* =======================================
    〜480px
======================================= */
@media (max-width: 480px) {

  /* ===============================
     全体レイアウト調整
  =============================== */

  .outer-panel {
    padding: 20px;
    box-shadow: none;
  }

  /* Before / After を縦並びに変更 */
  .grid-2col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Before/After 間の三角形は不要 */
  .case-arrow-triangle {
    display: none;
  }

  /* タイトル調整 */
  .case-col__title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  /* メタ情報（物件情報部分） */
  .case-meta {
    width: 100%;
  }
  .case-meta-ttl {
    font-size: 18px;
    text-align: center;
  }
  .case-meta p {
    font-size: 14px;
    text-align: center;
  }
  .case-price {
    justify-content: center;
  }


  /* ===============================
     内側 Before/After スライダー
  =============================== */

  /* スライド領域 */
  .carousel__viewport {
    width: 80%;
    aspect-ratio: 3 / 4; /* スマホでは縦長に */
  }

  /* 内側スライダーの矢印位置微調整 */
  .carousel__arrow--left {
    left: 50px;
  }
  .carousel__arrow--right {
    right: 50px;
  }


  /* ===============================
     外側スライダー（ケース切替）
     ※スマホでは従来矢印は非表示
  =============================== */

  /* PC用外側矢印を非表示 */
  .outer-arrow {
    display: none !important;
  }

  /* dots（番号下のポチ）を中央寄せ */
  .outer-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 1.5rem 0 2rem;
  }

  /* ===============================
     ★スマホ専用の外側矢印配置
     ＜ ・ ・ ・ ・ ＞ の形で dots の左右に配置
  =============================== */

  .outer-arrows-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin: 20px 0 30px;
  }

  /* スマホ用矢印 */
  .outer-arrows-mobile .outer-arrow {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #213d7e;
    border-radius: 50%;
    background: #fff;
  }

  .outer-arrows-mobile svg {
    width: 18px;
    height: 18px;
    stroke: #213d7e;
  }

}


/* ===== FAQ / よくあるご質問) ====*/
#faq {
  background-color: var(--figma-color-color_f9f8f8);
}
.faq-accordion {
    width: 80%;
    margin: 1rem auto 3rem;
}
.answer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  column-gap: 12px;
  margin: 10px 0;
}
.answer p {
  font-size: 18px;
  margin: 0;
  line-height: 1.6;
} 
.question {
  font-size:18px;
}
/* Each item line separator (previously SVG lines in export) */
.faq-item {
    border-top: 1px solid var(--figma-color-color_666666);
    padding: 16px 0;
}
.faq-item:last-of-type {
    border-bottom: 1px solid var(--figma-color-color_666666);
}

/* Clickable question row */
.faq-item summary {
    list-style: none; /* hide default marker in Firefox */
    display: flex;
    align-items: baseline;
    gap: 12px;
    cursor: pointer;
    outline: none;
    align-items: center;
}
.faq-item summary::-webkit-details-marker {
    display: none;
} /* hide default marker in WebKit */


.q,
.a {
    font-family: Inter, Arial, sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 4px;
    display: inline-block;
    min-width: 1em;
}
.q {
  color: var(--figma-color-color_666666); 
}
.a {
  color: var(--figma-color-color_e16736);
}

/* Keyboard focus (subtle) */
.faq-item summary:focus-visible {
    outline: 2px solid rgba(33, 61, 126, 0.18);
    outline-offset: 2px;
}

/* Plus/Minus marker on right of summary (closed: ＋, open: －) */
.faq-item summary {
    position: relative;
    padding-right: 36px; /* keep text clear of the marker */
}
.faq-item summary::after {
    content: "＋"; /* full-width plus */
    color: var(--figma-color-color_666666);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.faq-item[open] summary::after {
    content: "－"; /* full-width minus */
}


/* ======================================
 ノートPC（769px〜1024px）
====================================== */

@media (max-width: 1024px) {

  .faq-accordion {
    width: 90%;
  }

  .answer p {
    font-size: 17px;
  }

  .question {
    font-size: 17px;
  }

  .q, .a {
    font-size: 34px;
  }
}


/* ======================================
 タブレット（481px〜768px）
====================================== */

@media (max-width: 768px) {

  .faq-accordion {
    width: 95%;
  }

  .faq-item summary {
    gap: 10px;
    padding-right: 30px;
  }

  .q, .a {
    font-size: 30px;
    letter-spacing: 2px;
  }

  .question {
    font-size: 16px;
  }

  .answer p {
    font-size: 16px;
    line-height: 1.55;
  }

  .faq-item summary::after {
    font-size: 22px;
    right: 4px;
  }
}


/* ======================================
スマホ（〜480px）
====================================== */

@media (max-width: 480px) {

  .faq-accordion {
    width: 90%;
  }

  .faq-item {
    padding: 14px 0;
  }

  /* Q と 質問を縦並び気味に調整 */
  .faq-item summary {
    gap: 8px;
    padding-right: 24px;
  }

  .q, .a {
    font-size: 22px;
    letter-spacing: 1px;
  }

  .question {
    font-size: 14px;
    line-height: 1.4;
  }

  .answer {
    grid-template-columns: auto 1fr; /* 変わらずOK */
    column-gap: 8px;
  }

  .answer p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* プラス・マイナスアイコンを少し小さく */
  .faq-item summary::after {
    font-size: 20px;
    right: 0px;
  }
}
/* Footer instance used by the absolute FAQ stack */
.footer-block--faq-stack { width:100%; height:636px; position:absolute; left:0; top:15558px; z-index:0; }


/* --- CTA /　簡易フォーム ---*/

#quick-estimate {
  background: #f3f3f3;
  padding: 60px 0;
}

/* 中央寄せコンテナ */
.quick-estimate__container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* 白いカード部分 */
.quick-estimate__card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  padding: 40px 60px;
  text-align: center;
  position: relative;
}

/* 青い丸バッジ */
.quick-estimate__badge {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #1c7cbf;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.quick-estimate__badge span {
  color: #fff;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
}

/* 見出しテキスト */
.quick-estimate__headline {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 500;
  color: #555;
  letter-spacing: .8px;
}

.quick-estimate__headline-strong {
  color: var(--figma-color-color_ff8757);
  font-weight: 700;
  font-size: 30px;
}

/* フォームレイアウト */
.quick-estimate__form {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* セレクト3つの横並び */
.quick-estimate__fields {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: auto;
}

.quick-estimate__field {
  flex: 1;
}

/* セレクトボックスの見た目 */
.quick-estimate__field select {
  width: 80%;
  height: 48px;
  padding: 0 40px 0 16px;
  font-size: 16px;
  border: 1px solid #777;
  border-radius: 3px;
  appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 10px 6px;
  background-color: #fff;
}

/* 右下にイラスト配置 */
.quick-estimate__illust {
  position: absolute;
  right: -20px;   /* 少しはみ出させる */
  bottom: -10px;
  width: 160px;
  pointer-events: none;
  user-select: none;
}
/* ===============================
   1440px 以下（ノートPC）
   =============================== */
@media (max-width: 1440px) {
  .quick-estimate__container {
    max-width: 900px;
    padding: 0 16px;
  }

  .quick-estimate__card {
    padding: 32px 40px;
  }

  .quick-estimate__fields {
    width: 100%;
    gap: 25px;
  }

  .quick-estimate__field select {
    width: 100%;
  }

  .quick-estimate__illust {
    right: -10px;
    width: 140px;
  }
}


/* ===============================
   840px 以下（タブレット）
   =============================== */
@media (max-width: 840px) {
  #quick-estimate {
    padding: 40px 0;
  }

  .quick-estimate__container {
    max-width: 720px;
  }

  .quick-estimate__card {
    padding: 28px 24px;
    text-align: left;
  }

  .quick-estimate__headline {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.6;
  }

  .quick-estimate__headline-strong {
    font-size: 24px;
  }

  .quick-estimate__form {
    gap: 28px;
  }

  /* セレクトを縦並びに */
  .quick-estimate__fields {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .quick-estimate__field select {
    width: 100%;
  }

  /* バッジを少し小さく、位置を修正 */
  .quick-estimate__badge {
    top: -30px;
    left: -10px;
    width: 110px;
    height: 110px;
  }

  .quick-estimate__badge span {
    font-size: 24px;
  }

  /* イラストも少し内側＆小さく */
  .quick-estimate__illust {
    right: 8px;
    bottom: -40px;
    width: 120px;
  }
}


/* ===============================
   480px 以下（スマホ）
   =============================== */
@media (max-width: 480px) {
  #quick-estimate {
    padding: 32px 0;
  }

  .quick-estimate__card {
    padding: 24px 16px;
    margin: 0 2rem;
  }

  .quick-estimate__badge {
    top: -24px;
    left: 8px;
    width: 96px;
    height: 96px;
  }

  .quick-estimate__badge span {
    font-size: 20px;
  }

  .quick-estimate__headline {
    margin-top: 16px;
    font-size: 16px;
    text-align: center;
    padding-left: 2rem;
  }

  .quick-estimate__headline-strong {
    font-size: 20px;
  }

  .quick-estimate__form {
    gap: 24px;
  }

  .quick-estimate__fields {
    gap: 12px;
  }

  /* スマホではイラストをカードの下に配置 */
  .quick-estimate__illust {
    position: static;
    display: block;
    margin: 16px auto 0;
    width: 120px;
  }
}



/* ==============================
   フォーム全体
============================== */

.contact-form {
  max-width: 80%;      
  margin: 0 auto;
  color: #333;
}

/* セクションの塊（物件情報 / お客様情報 / 査定について） */
.form-sections {
  display: flex;
  flex-direction: column;
}

/* 各セクション */
.form-section {
  padding-bottom: 3rem;
  width: 70%;
  margin: auto;
}

/* オレンジの帯タイトル */
.form-section-title {
  margin: 0 0 5rem;
  padding: 12px 0;
  text-align: center;
  background: #ff8757;
  color: #fff;
  font-weight: 700;
  font-size: 30px;
}

/* ==============================
   フィールド共通
============================== */

/* ラベル＋入力のセットをまとめるグループ */
.field-group {
  display: flex;
  flex-direction: column;
  margin: 2rem 0;
  border-bottom: solid 1px var(--figma-color-color_999999);
  padding-bottom: 2rem;
}
.field-block {
    border-bottom: solid 1px var(--figma-color-color_999999);
  padding-bottom: 2rem;
}
/* 1フィールド（ラベル＋入力） */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 1rem;
}

/* 「査定物件住所」「物件名」などの大きめラベル */
.group-label {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}
/* 物件名（フル幅） */
.property-group .full {
  width: 100%;
  margin-bottom: 24px;
}

/* 号棟・号室 横並び */
.property-group .row {
  display: flex;
  gap: 40px;  /* 号棟と号室の間隔 */
  align-items: flex-start;
  flex-direction: row;
}

/* 小サイズ入力（号棟/号室） */
.property-group .small {
  flex: 1;
}
/* 各フィールドのラベル */
.field-label {
  font-size: 20px;
  font-weight: 500;
  color: #555;
  margin-bottom: 10px;
}

/* 必須バッジ */
.required {
  display: inline-block;
  margin-left: 4px;
  padding: 5px 10px;
  font-size: 20px;
  color: #fff;
  background: #FF7171;
  border-radius: 6px;
}

/* テキスト入力 */
.form-input {
  width: 100%;
  height: 60px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #f8f8f8;
  font-size: 18px;
  color: #333;
  box-sizing: border-box;
}

/* テキストエリア */
.form-textarea {
  width: 100%;
  min-height: 120px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 0;
  background: #f8f8f8;
  font-size: 20px;
  resize: vertical;
  box-sizing: border-box;
}

/* 単位付き入力（㎡ / 円 / 万円） */
.inline {
  display: flex;
  align-items: center;
  gap: 20px;
}

.inline .unit {
  font-size: 20px;
  color: #555;
  white-space: nowrap;
}

/* 注意書き */
.note {
  grid-column: 1 / -1; /* 2カラムの下にまたがる */
  margin: 4px 0 0;
  font-size: 18px;
  color: #888;
}
/* 補助入力（その他の自由入力）を最初は隠す */
.field.optional-note {
  display: none;
  margin-left: 32px; /* ラジオの下に少しインデントして補助っぽくする */
}

/* ==============================
   ラジオボタン
============================== */

.field.radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 20px;
}

.radio {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==============================
   送信ボタン
============================== */

.actions {
  text-align: center;
}

.form-cta {
  display: inline-block;
  min-width: 300px;
  padding: 18px 64px;
  border: none;
  border-radius: 999px;
  background: #ff8757;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.form-cta:hover {
  opacity: 0.9;
}
.form-section > .field-group:last-of-type,
.form-section > .field-block:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* ==============================
   スマホ調整
============================== */

@media (max-width: 768px) {
  .contact-form {

  }
  .field-group {
    margin: 1.5rem 0;
    padding-bottom: 1rem;
  }
  .form-section-title {
    margin-bottom: 2rem;
    font-size: 18px;
  }
  .form-section {
    width: 100%;
    padding-bottom: 1rem;
  }
  .group-label ,
  .field-label {
    font-size: 16px;
  }
   .form-input{
    height: 45px;
   }
  .form-input ,
  .radio-list {
    font-size: 14px;
  }
  .inline .unit {
    font-size: 14px;
  }

  .required {
    font-size: 14px;
  }
  .note {
    margin: 0;
    font-size: 13px;
  }
  .property-group .full {
    margin-bottom: 14px; 
  }

  .field-group.grid-2col {
    grid-template-columns: 1fr;
  }
  .form-cta {
    max-width: 200px;
    min-width: auto;
    padding: 12px 64px;
    font-size: 16px;

  }
}
/* ==============================
   heroセクション
============================== */

/* PC用ヒーロー枠（マスク役） */
.hero-pc {
  width: 100%;
  height: 980px;      /* 表示したい高さに合わせて調整 */
  overflow: hidden;    /* はみ出した部分をカットする */
  position: relative;
}

/* PC用画像 */
.hero-pc img {
  width: 75%;
  height: auto;        
  display: block;
  margin: -190px auto 0; /* 上をカットするために画像を上にずらす */
}


.hero-sp {
  display: none;
}

@media (max-width: 1440px) {
.hero-pc {
    height: 705px; 
}
}

/* ---- スマホでSP版を表示 ---- */
@media (max-width: 480px) {
  .hero-pc {
    display: none;
  }

  .hero-sp {
    display: block;
    margin-bottom: 2rem;
    width: 100%;
  }
 .hero-sp img {
    max-width: 100%;
    
}