空き家の解体前に相談したいこと｜岡山市で売却・活用と比べる考え方

<!– ミニクルホーム｜Googleマップ口コミスライダー（WordPress カスタムHTML用） –>
<section id=”mh-google-voice” class=”mhgv” aria-labelledby=”mhgv-title”>
<style>
#mh-google-voice,
#mh-google-voice * { box-sizing: border-box; }

#mh-google-voice {
–mhgv-green: #0d766e;
–mhgv-green-dark: #075b56;
–mhgv-green-light: #eaf7f5;
–mhgv-yellow: #f5b301;
–mhgv-text: #253238;
–mhgv-muted: #6b7478;
–mhgv-border: #dde7e5;
–mhgv-bg: #f6faf9;
–mhgv-white: #ffffff;
width: 100%;
padding: 64px 16px;
background: var(–mhgv-bg);
color: var(–mhgv-text);
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”,
“Hiragino Kaku Gothic ProN”, “Hiragino Sans”,
“Yu Gothic”, Meiryo, sans-serif;
}

#mh-google-voice .mhgv-inner {
width: min(1180px, 100%);
margin: 0 auto;
}

#mh-google-voice .mhgv-heading {
text-align: center;
margin-bottom: 34px;
}

#mh-google-voice .mhgv-kicker {
display: inline-block;
margin: 0 0 8px;
color: var(–mhgv-green);
font-size: 13px;
font-weight: 800;
letter-spacing: .12em;
}

#mh-google-voice h2 {
margin: 0;
font-size: clamp(26px, 3.3vw, 38px);
line-height: 1.35;
letter-spacing: .02em;
}

#mh-google-voice .mhgv-lead {
max-width: 760px;
margin: 12px auto 0;
font-size: 15px;
line-height: 1.9;
color: var(–mhgv-muted);
}

#mh-google-voice .mhgv-slider {
position: relative;
}

#mh-google-voice .mhgv-viewport {
overflow: hidden;
border-radius: 18px;
touch-action: pan-y;
}

#mh-google-voice .mhgv-track {
display: flex;
gap: 20px;
will-change: transform;
transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

#mh-google-voice .mhgv-card {
flex: 0 0 calc((100% – 40px) / 3);
min-width: 0;
display: flex;
flex-direction: column;
min-height: 360px;
padding: 26px 24px 24px;
background: var(–mhgv-white);
border: 1px solid var(–mhgv-border);
border-radius: 18px;
box-shadow: 0 12px 35px rgba(20, 65, 62, .08);
}

#mh-google-voice .mhgv-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
}

#mh-google-voice .mhgv-label {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 11px;
border-radius: 999px;
background: var(–mhgv-green-light);
color: var(–mhgv-green-dark);
font-size: 12px;
line-height: 1.4;
font-weight: 800;
}

#mh-google-voice .mhgv-stars {
color: var(–mhgv-yellow);
font-size: 18px;
letter-spacing: 1px;
white-space: nowrap;
}

#mh-google-voice .mhgv-card h3 {
margin: 0 0 14px;
font-size: 19px;
line-height: 1.55;
color: #1d2b30;
}

#mh-google-voice .mhgv-review {
margin: 0;
font-size: 15px;
line-height: 1.95;
color: #3e4a4f;
}

#mh-google-voice .mhgv-person {
display: flex;
align-items: center;
gap: 11px;
margin-top: auto;
padding-top: 22px;
}

#mh-google-voice .mhgv-avatar {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(–mhgv-green);
color: #fff;
font-weight: 900;
}

#mh-google-voice .mhgv-person strong {
display: block;
font-size: 14px;
}

#mh-google-voice .mhgv-person span {
display: block;
margin-top: 2px;
color: var(–mhgv-muted);
font-size: 11px;
}

#mh-google-voice .mhgv-arrow {
position: absolute;
top: 50%;
z-index: 5;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: var(–mhgv-green-dark);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
font-size: 30px;
cursor: pointer;
transform: translateY(-50%);
}

#mh-google-voice .mhgv-arrow:hover {
background: var(–mhgv-green);
color: #fff;
}

#mh-google-voice .mhgv-prev {
left: -24px;
}

#mh-google-voice .mhgv-next {
right: -24px;
}

#mh-google-voice .mhgv-dots {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
}

#mh-google-voice .mhgv-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: #c7d5d3;
cursor: pointer;
}

#mh-google-voice .mhgv-dot.is-active {
width: 25px;
border-radius: 10px;
background: var(–mhgv-green);
}

#mh-google-voice .mhgv-actions {
margin-top: 30px;
text-align: center;
}

#mh-google-voice .mhgv-map-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
padding: 12px 24px;
border-radius: 999px;
background: var(–mhgv-green);
color: #fff !important;
text-decoration: none !important;
font-size: 15px;
font-weight: 800;
box-shadow: 0 8px 20px rgba(13,118,110,.18);
}

#mh-google-voice .mhgv-map-btn:hover {
background: var(–mhgv-green-dark);
}

#mh-google-voice .mhgv-note {
max-width: 900px;
margin: 18px auto 0;
color: #7b8386;
font-size: 11px;
line-height: 1.75;
text-align: center;
}

@media (max-width: 1024px) {
#mh-google-voice .mhgv-card {
flex-basis: calc((100% – 20px) / 2);
}

#mh-google-voice .mhgv-prev {
left: -12px;
}

#mh-google-voice .mhgv-next {
right: -12px;
}
}

@media (max-width: 680px) {
#mh-google-voice {
padding: 46px 12px;
}

#mh-google-voice .mhgv-heading {
margin-bottom: 24px;
}

#mh-google-voice .mhgv-track {
gap: 14px;
}

#mh-google-voice .mhgv-card {
flex-basis: 100%;
min-height: 340px;
padding: 22px 20px;
}

#mh-google-voice .mhgv-arrow {
width: 42px;
height: 42px;
font-size: 26px;
}

#mh-google-voice .mhgv-prev {
left: -6px;
}

#mh-google-voice .mhgv-next {
right: -6px;
}
}
</style>

<div class=”mhgv-inner”>

<header class=”mhgv-heading”>
<p class=”mhgv-kicker”>CUSTOMER VOICE</p>

<h2 id=”mhgv-title”>お客様の声</h2>

<p class=”mhgv-lead”>
Googleマップへ寄せられたミニクルホームのお客様の声を、
プライバシーに配慮して一部抜粋・匿名化してご紹介します。
</p>
</header>

<div class=”mhgv-slider” data-mhgv-slider>

<button
class=”mhgv-arrow mhgv-prev”
type=”button”
aria-label=”前のお客様の声へ”>
‹
</button>

<div class=”mhgv-viewport”>

<div class=”mhgv-track”>

<!– 口コミ1 –>
<article class=”mhgv-card”>

<div class=”mhgv-card-top”>
<span class=”mhgv-label”>正直な物件説明</span>
<span class=”mhgv-stars”>★★★★★</span>
</div>

<h3>
まさに正直不動産。注意点まで教えてくれました
</h3>

<p class=”mhgv-review”>
まさに正直不動産。気になっていた物件について、
事故物件であることや管理面の注意点なども教えてくれました。
安心して物件探しを任せられました。
</p>

<div class=”mhgv-person”>
<span class=”mhgv-avatar”>A</span>

<div>
<strong>ご利用者A様</strong>
<span>Googleマップの口コミより一部抜粋</span>
</div>
</div>

</article>

<!– 口コミ2 –>
<article class=”mhgv-card”>

<div class=”mhgv-card-top”>
<span class=”mhgv-label”>入居・退去の対応</span>
<span class=”mhgv-stars”>★★★★★</span>
</div>

<h3>
入居時も退去時も丁寧に対応してくれました
</h3>

<p class=”mhgv-review”>
入居時も退去時も丁寧に対応してくださり助かりました。
LINEでの対応も文字に残るので、
電話だけより確認しやすいです。
</p>

<div class=”mhgv-person”>
<span class=”mhgv-avatar”>B</span>

<div>
<strong>ご利用者B様</strong>
<span>Googleマップの口コミより一部抜粋</span>
</div>
</div>

</article>

<!– 口コミ3 –>
<article class=”mhgv-card”>

<div class=”mhgv-card-top”>
<span class=”mhgv-label”>難しい条件の部屋探し</span>
<span class=”mhgv-stars”>★★★★★</span>
</div>

<h3>
難しい条件でも迅速かつ柔軟に対応
</h3>

<p class=”mhgv-review”>
難しい条件の中、迅速かつ柔軟な対応で、
ようやく住めるところが見つかりました。
不安なこともLINEで相談できて助かりました。
</p>

<div class=”mhgv-person”>
<span class=”mhgv-avatar”>C</span>

<div>
<strong>ご利用者C様</strong>
<span>Googleマップの口コミより一部抜粋</span>
</div>
</div>

</article>

<!– 口コミ4 –>
<article class=”mhgv-card”>

<div class=”mhgv-card-top”>
<span class=”mhgv-label”>遠方からの引越し</span>
<span class=”mhgv-stars”>★★★★★</span>
</div>

<h3>
遠方からの引越しも丁寧にサポート
</h3>

<p class=”mhgv-review”>
遠方からの引越しで分からないことだらけでしたが、
何から何まで丁寧に対応してくださり、
本当に助かりました。
</p>

<div class=”mhgv-person”>
<span class=”mhgv-avatar”>D</span>

<div>
<strong>ご利用者D様</strong>
<span>Googleマップの口コミより一部抜粋</span>
</div>
</div>

</article>

<!– 口コミ5 –>
<article class=”mhgv-card”>

<div class=”mhgv-card-top”>
<span class=”mhgv-label”>地域情報・物件提案</span>
<span class=”mhgv-stars”>★★★★★</span>
</div>

<h3>
土地の事情も分かり、納得して決められました
</h3>

<p class=”mhgv-review”>
難しい条件での物件探しでしたが、
多数の物件をご案内いただき、
納得して決めることができました。
土地の事情も参考になりました。
</p>

<div class=”mhgv-person”>
<span class=”mhgv-avatar”>E</span>

<div>
<strong>ご利用者E様</strong>
<span>Googleマップの口コミより一部抜粋</span>
</div>
</div>

</article>

<!– 口コミ6 –>
<article class=”mhgv-card”>

<div class=”mhgv-card-top”>
<span class=”mhgv-label”>親身な対応</span>
<span class=”mhgv-stars”>★★★★★</span>
</div>

<h3>
借りる側の目線で考えてくれました
</h3>

<p class=”mhgv-review”>
借りる側の目線で考えてくださるので有り難かったです。
気さくな不動産屋さんで、
希望もお願いしやすく助かりました。
</p>

<div class=”mhgv-person”>
<span class=”mhgv-avatar”>F</span>

<div>
<strong>ご利用者F様</strong>
<span>Googleマップの口コミより一部抜粋</span>
</div>
</div>

</article>

</div>

</div>

<button
class=”mhgv-arrow mhgv-next”
type=”button”
aria-label=”次のお客様の声へ”>
›
</button>

<div class=”mhgv-dots”></div>

</div>

<div class=”mhgv-actions”>

<a
class=”mhgv-map-btn”
href=”https://maps.app.goo.gl/kAcBtagKnSdBqHNi7″
target=”_blank”
rel=”noopener noreferrer”>

Googleマップで口コミを見る ↗

</a>

</div>

<p class=”mhgv-note”>
※Googleマップに投稿された口コミの一部を、
意味を変えない範囲で抜粋・匿名化して掲載しています。
口コミは個人の感想です。
</p>

</div>

<script>
(() => {

const root =
document.getElementById(‘mh-google-voice’);

if (!root) return;

const viewport =
root.querySelector(‘.mhgv-viewport’);

const track =
root.querySelector(‘.mhgv-track’);

const cards =
[…root.querySelectorAll(‘.mhgv-card’)];

const prev =
root.querySelector(‘.mhgv-prev’);

const next =
root.querySelector(‘.mhgv-next’);

const dotsWrap =
root.querySelector(‘.mhgv-dots’);

let index = 0;

let timer = null;

let startX = 0;

let diffX = 0;

let dragging = false;

function perView() {

if (window.innerWidth <= 680)
return 1;

if (window.innerWidth <= 1024)
return 2;

return 3;

}

function maxIndex() {

return Math.max(
0,
cards.length – perView()
);

}

function buildDots() {

dotsWrap.innerHTML = ”;

for (
let i = 0;
i <= maxIndex();
i++
) {

const dot =
document.createElement(‘button’);

dot.type = ‘button’;

dot.className = ‘mhgv-dot’;

dot.addEventListener(
‘click’,
() => {

index = i;

update();

startAuto();

}
);

dotsWrap.appendChild(dot);

}

}

function stepSize() {

const first = cards[0];

if (!first)
return 0;

const gap =
parseFloat(
getComputedStyle(track).gap
) || 0;

return (
first.getBoundingClientRect().width
+ gap
);

}

function update() {

if (index > maxIndex())
index = maxIndex();

if (index < 0)
index = 0;

track.style.transform =
`translate3d(${
-index * stepSize()
}px,0,0)`;

[…dotsWrap.children]
.forEach(
(dot, i) => {

dot.classList.toggle(
‘is-active’,
i === index
);

}
);

}

function goNext() {

index =
index >= maxIndex()
? 0
: index + 1;

update();

}

function goPrev() {

index =
index <= 0
? maxIndex()
: index – 1;

update();

}

function stopAuto() {

if (timer)
clearInterval(timer);

timer = null;

}

function startAuto() {

stopAuto();

timer =
setInterval(
goNext,
5500
);

}

prev.addEventListener(
‘click’,
() => {

goPrev();

startAuto();

}
);

next.addEventListener(
‘click’,
() => {

goNext();

startAuto();

}
);

viewport.addEventListener(
‘pointerdown’,
e => {

dragging = true;

startX = e.clientX;

diffX = 0;

stopAuto();

}
);

viewport.addEventListener(
‘pointermove’,
e => {

if (!dragging)
return;

diffX =
e.clientX – startX;

}
);

function finishDrag() {

if (!dragging)
return;

dragging = false;

if (
Math.abs(diffX) > 45
) {

if (diffX < 0)
goNext();

else
goPrev();

}

diffX = 0;

startAuto();

}

viewport.addEventListener(
‘pointerup’,
finishDrag
);

viewport.addEventListener(
‘pointercancel’,
finishDrag
);

window.addEventListener(
‘resize’,
() => {

buildDots();

index =
Math.min(
index,
maxIndex()
);

update();

}
);

buildDots();

update();

startAuto();

})();
</script>

</section>