@charset "utf-8";

.mv{
  display:flex;
  flex-direction:column-reverse;
  padding:2.5rem 0 0;
}
.mv-bg{
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  width:100%;
  margin-top:1.75rem;
}
.mv-bg img{
  position:relative;
  width:100%;
  height:auto;
}
.mv-bg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 12%,#000 34%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 12%,#000 34%);
}
/* ===== 共通レイアウト ===== */

.mv-in{
  width:90%; margin-top:3.5rem;
}
.mv-eye{
  margin-bottom:.75rem;
}
.mv-ttl{
  margin-bottom:1rem;
}
.reason-ttl{
  text-align:center;
  font-size:clamp(1.3rem,3.4vw + .5rem,3rem);
  font-weight:700;
  color:var(--wh);
  line-height:1.4;
  letter-spacing:.04em;
}
.flow-ttl{
  text-align:center;
  font-size:clamp(1.3rem,3.4vw + .5rem,3rem);
  font-weight:700;
  color:var(--mrv-dk);
  line-height:1.35;
  letter-spacing:.02em;
}

.mrg-ttl{
  text-align:center;
  font-size:clamp(1.3rem,3.4vw + .5rem,3rem);
  font-weight:700;
  color:var(--mrv-dk);
  line-height:1.35;
  letter-spacing:.02em;
}
.plan-sub {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-inline: auto !important; /* 親の text-align に負けないよう中央化 */
  margin-block: clamp(1rem, 3%, 2rem);
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(100deg, #144c51 0%, #175660 38%, #1b626d 72%, #20707c 100%);
  border-radius: 3.125rem;
  font-size: clamp(1.125rem, 1.3vw + 0.72rem, 1.625rem);
  font-weight: 700;
  color: var(--wh);
  line-height: 1.5;
  text-align: center;
}
.mv-sub{
  margin-bottom:1rem;
}
.mv-lead{
  margin-bottom:1.5rem;
}

.mv-pt {
  display: flex;
  flex-direction: column; /* 縦1列に配置 */
  align-items: stretch;
  gap: clamp(0.5rem, 1.5vw, 1rem); /* 可変余白 */
}

.mv-pt li {
  width: 100%;
  padding: 3% 2%; /* 可変パディング */
  font-size: clamp(1rem, 1.4vw, 1.4rem); /* 可変フォントサイズ */font-weight: normal
}


/* ===== 管理会社の見直し訴求 ===== */
.mrv{
  padding:3rem 0 2.75rem;
}
.mrv-eye{
  margin-bottom:.75rem;
}
.mrv-ttl{
  margin-bottom:1.25rem;
}
.mrv-tx{
  margin-bottom:1.5rem;
}
.mrv-q{
  margin-bottom:1.5rem;
  padding:1.25rem 1.25rem;
}
.mrv-tag{
  flex-direction:column;
  gap:.625rem;
  margin-bottom:1.5rem;
}
.mrv-tag li{
  padding:.75rem 1rem;
}

/* ===== 管理会社変更の流れ ===== */
.flow{
  padding:3rem 0 3.25rem;
}
.flow-eye{
  margin-bottom:.75rem;
}
.flow-ttl{
  margin-bottom:1rem;
}
.flow-lead{
  margin-bottom:1.75rem;
}
.flow-list{
  flex-direction:column;
  gap:1rem;
}
.flow-list li{
  width:100%;
  padding:1.25rem 1.25rem 1.5rem;
}
.flow-num{
  margin-bottom:.75rem;
}
.flow-st{
  margin-bottom:.75rem;
}

/* ===== 選ばれる理由 ===== */
.reason{
  padding:3rem 0 3.5rem;
}
.reason-eye{
  margin-bottom:.75rem;text-align: center;
}
.reason-ttl{
  margin-bottom:1.75rem;text-align: center;
}
.reason-list{
  flex-direction:column;
  gap:1.25rem;
}
.card{
  width:100%;
  padding:1.75rem 1.25rem 2rem;
}
.num{
  width:2.875rem;
  height:2.875rem;
  margin-bottom:1rem;
}
.card-ttl{
  margin-bottom:.75rem;
}
.card-sub{
  margin-bottom:.625rem;
}
.card-w .card-tx{
  margin-bottom:1.5rem;
}

/* ----- 実績データ ----- */
.data{
  flex-direction:column;
  width:100%;
  gap:1rem;
}
.data-it{
  padding:1.25rem 1rem 1.5rem;
}

/* ===== お問い合わせ誘導 ===== */
.cta{
  padding:2.75rem 0 3rem;
}
.cta-box{
  padding:2.25rem 6% 2.5rem;
}
.cta-ttl{
  margin-bottom:1rem;
}
.cta-tx{
  width:100%;
  margin:0 auto 1.75rem;
  text-align:left;
}
.cta-btn{
  width:100%;
  padding:1.125rem 1.5rem;
}

/* ===== 大規模修繕：ページ見出し ===== */
.phead{
  display:flex;
  flex-direction:column-reverse;
  padding:6rem 0 0;
}
.phead-bg{
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  width:100%;
  margin-top:1.75rem;
}
.phead-bg img{
  position:relative;
  width:100%;
  height:auto;
}
.phead-bg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 12%,#000 34%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 12%,#000 34%);
}
.phead-in{
  width:90%;
}
.phead-body{
  width:100%;
}
.phead-eye{
  margin-bottom:.75rem;
}
.phead-ttl{
  margin-bottom:1.25rem;
}

/* ===== 大規模修繕：中間マージンのカット ===== */
.mrg{
  padding:3rem 0 3.25rem;
}
.mrg-eye{
  margin-bottom:.75rem;
}
.mrg-ttl{
  margin-bottom:1.25rem;
}
.mrg-tx + .mrg-tx{
  margin-top:.5rem;
}

/* ----- 関係図 ----- */
.rel{
  width:100%;
  margin:2rem auto 0;
  padding:1.75rem 5% 2rem;
}
.rel-box{
  width:100%;
  padding:1rem 1rem;
}
.rel-arw{
  width:100%;
  gap:.75rem;
  padding:.875rem 0;
}
.rel-out{
  width:100%;
  gap:.75rem;
  margin-top:.5rem;
}
.rel-out li{
  padding:.875rem 1rem;
}

/* ===== 大規模修繕：長期修繕計画 ===== */
.plan{
  padding:3rem 0 3.25rem;
}
.plan-eye{
  margin-bottom:.75rem;
}
.plan-ttl{
  margin-bottom:1.25rem;
}
.plan-sub{
  margin:0 0 1.75rem;
  padding:.75rem 1.5rem;
}
.plan-list{
  flex-direction:column;
  gap:1.25rem;
}
.pcard{
  width:100%;
  padding:1.75rem 1.25rem 2rem;
}
.pnum{
  margin:0 auto 1rem;
}
.pcard-ttl{
  margin-bottom:.75rem;
}
.plan-img{
  width:100%;
  margin:1.75rem auto 0;
}
.plan-msg{
  margin-top:1.75rem;
}

/* ===== 上部へ戻る ===== */
.ptop{
  right:1rem;
  bottom:1rem;
  width:3rem;
  height:3rem;
}

/* ===== 見出しの左寄せ（文字拡大時の崩れ防止） ===== */
.mrv-eye,
.mrv-ttl,
.reason-eye,
.reason-ttl,
.card-ttl,
.flow-eye,
.flow-ttl,
.flow-lead,
.flow-st,
.cta-ttl,
.mrg-eye,
.mrg-ttl,
.mrg-tx,
.plan-eye,
.plan-ttl,
.plan-msg{
  text-align:left;
}