@charset "UTF-8";
/* CSS Document */
/* ===== Cleaning Page (お墓のお掃除代行) ===== */
/* 共通は common.css / funeral.css を利用。ここは当ページ固有レイヤのみ。 */

/* --- Hero（暗幕＋下部フェードは funeral.css の .fadeout を流用） --- */
.hero--cleaning .hero__bg {
  position: relative;
  overflow: hidden;
}
.hero--cleaning .hero__bg img,
.hero--cleaning .hero__bg video {
  width: 100%;
  height: clamp(380px, 60vw, 560px);
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 暗幕（より読みやすく） */
.hero--cleaning .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35));
  pointer-events: none;
}

/* --- Intro（背景画像＋下部ベージュのフェード） --- */
.intro-background {
    position: absolute;
    inset: 0;
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../img/cleaning/main.jpg");
    /* TODO: 庭園の背景画像 */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    gap: 54px;
    align-items: center;
    justify-content: flex-start;
    padding: 71px 0;
}
.intro-background--cleaning .intro-title{
  font-size: clamp(28px, 6vw, 60px);
  letter-spacing: .08em;
  text-align:center;
  margin-bottom: 8px;
}
.intro-background--cleaning .intro-info{
  display:grid;
  place-items:center;
  text-align:center;
}
.intro-background--cleaning .intro-text{
  max-width: 60ch;
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.9;
}

/* --- 共通セクション見出し --- */
.sec-title{
  font-size: clamp(24px, 4.5vw, 36px);
  text-align: center;
  margin-bottom: 20px;
}
.sub-title{
  font-size: clamp(18px, 3.5vw, 24px);
  margin-top: 32px;
}

/* --- こんなお悩み --- */
.troubles .container{ width: min(92vw, var(--container)); }
.troubles__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(15px, 2.6vw, 18px);
}
@media (max-width: 798px){
  .troubles__list{ grid-template-columns: 1fr; }
}

/* --- スタッフの心得 --- */
.staff-mindset .lead{
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(15px, 2.6vw, 18px);
  line-height: 1.9;
}

/* --- 作業手順 --- */
.workflow__list{
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin: 0;
  padding: 0;
    list-style: none}

/* こんなお悩み（右側画像） */
.troubles__image{
  background: url("./asset/img/cleaning/troubles.jpg") center/cover no-repeat;
  min-height: 280px; border-radius: 10px;
}

/* スタッフの心得（左側画像） */
.staff-mindset__image{
  background: url("./asset/img/cleaning/mindset.jpg") center/cover no-repeat;
  min-height: 280px; border-radius: 10px;
}


/* 料金表（テーブル画像） */
.pricing__image{
  background: url("./asset/img/cleaning/price_table.jpg") center/contain no-repeat;
  width: 100%; min-height: 360px; border: 1px solid #e6e6e6; background-color:#fff; border-radius: 8px;
}

/* ===== 作業手順（Workflow） ===== */
:root{
  --wf-band: #79699A;     /* タイトル帯の紫（お好みで） */
  --wf-num:  #1f1f1f;     /* 番号バッジの黒 */
  --wf-gap:  clamp(12px, 2vw, 24px);
}

.wf-grid{
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--wf-gap);
}
@media (max-width: 1024px){
  .wf-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 798px){
  .wf-grid{ grid-template-columns: 1fr; padding: 0;margin: 0 auto;}
}

.wf-card{
  display: grid;
  gap: 10px;
}

.wf-media{
  position: relative;
  overflow: hidden;
}
.wf-media img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* タイトル帯（画像の下辺に重ねる） */
.wf-band{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(36px, 7vw, 48px);
  background: var(--wf-band);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .03em;
}

.wf-step::before{
  content: counter(step, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
}

/* 説明文 */
.wf-desc{
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.8;
  color: #333;
}

/* 備考 */
.wf-note{
    text-align: end;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}