@charset "UTF-8";
/* CSS Document */

.intro-background {
    position: absolute;
    inset: 0;
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../img/pet/img_plan_02_thumb.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;
}




/* -------- Plans -------- */
.plans{ position: relative; z-index: 2; padding: clamp(24px, 6vw, 48px) 0; }
.plans__container{ width: 100%; max-width: var(--container); margin-inline: auto; display: grid; gap: 24px; }
.plans__main{ max-width: 1200px;width:90%;margin: 0 auto;}
.plans__title{ font-size: clamp(24px, 4.5vw, 32px); line-height: 1.4; text-align: center; margin-bottom: 8px; }
.plans__description, .plans__note{ font-size: 14px; line-height: 1.8; text-align: center; }
.plans__service-title{ font-weight:700; font-size: 14px; text-align:center; margin-top: 12px; }
.plans__button{ margin-top: 16px; display:grid; place-items:center; }
.plans__cta{
  display:inline-grid; place-items:center;
  padding: 10px 24px; border-radius: 999px;
  border: 1px solid #5c5c5c; color:#5c5c5c; text-decoration:none; font-weight: 500;
}
.plans__price{ margin-top:12px; min-height: 46px; /* TODO: 料金ビジュアル */ }

.plans__cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 1024px){ .plans__cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px){ .plans__cards{ grid-template-columns: 1fr; } }

.plan-card{ display:grid; }
.plan-card__image{
  position: relative; width: 100%;
  aspect-ratio: 372 / 250;
  background: rgba(217,217,217,.5) center/cover no-repeat; /* TODO: プラン画像 */
  border-radius: 10px;
}
.plan-card__tag{
  position:absolute; left:0; top:0;
  padding: 6px 10px; font-size: 12px; background: rgba(0,0,0,.05); border-radius: 0 0 6px 6px;
}

.plans__flow{
  width: 100%; aspect-ratio: 605 / 155; margin-top: 12px;
  background: rgba(217,217,217,.5) center/contain no-repeat; /* TODO: フロー図 */
  border-radius: 10px;
}

/* -------- Cemetery（画像4枚） -------- */
.cemetery{ padding: clamp(32px, 7vw, 64px) 0; }
.cemetery__header{ display:grid; gap: 8px; place-items:center; text-align:center; max-width: var(--container); margin: 0 auto 16px; }
.cemetery__title{ font-size: clamp(28px, 4.5vw, 40px); line-height: 1.3;margin: 0; }
.cemetery__subtitle{ font-size: clamp(16px, 3vw, 24px); font-weight: 700; }
.cemetery__description{ font-size: 14px; max-width: 60ch; }
.cemetery__images{
  width: 90%; max-width: var(--container); margin-inline:auto;
  display: grid; grid-template-columns: 1fr; 
  gap: clamp(10px, 2vw, 16px);
}


.cemetery__image{
  width: 100%;
    margin-bottom: 20px;
}

/* -------- 共通：セクション余白 -------- */
.section{ padding: clamp(40px, 7vw, 80px) 0; }