:root {
  --top-navy: #385179;
  --top-navy-light: #d6e6f7;
  --top-gold: #bfa848;
  --top-gold-light: #d8c163;
  --top-coral: #f15957;
  --top-yellow: #fff000;
  --top-ink: #1b1b1b;
  --top-line: #e8e6e3;
  --top-grey-head: #a3a3a3;
  --top-red-tint: #ffe1e1;
  --top-plan01: #d5695f;
  --top-plan02: #4694d1;
  --top-plan03: #924898;
  --top-plan04: #ec6d81;
  --top-plan05: #f39939;
  --top-plan06: #82bb7a;
}

.top-top {
  margin: 0;
  padding: 0;
  color: var(--top-ink);
  font-family: "Zen Maru Gothic", "Tsukushi A Round Gothic",
    "筑紫A丸ゴシック", "Hiragino Maru Gothic ProN",
    sans-serif;
  text-align: left;
  line-height: 1.6;
  background: #fff;
}

.top-top :where(a) {
  text-decoration: none;
  color: inherit;
}

.top-top *,
.top-top *::before,
.top-top *::after {
  box-sizing: border-box;
}

.top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 300px;
  height: 58px;
  padding: 0 24px;
  background: var(--top-gold);
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.top-btn::after {
  content: "";
  flex: none;
  width: 21px;
  height: 21px;
  background: url("../images/top/icon-plan-arrow.svg") center/contain no-repeat;
}

/* お客様の声一覧: テキスト中央・アイコンは右8px固定 */
.top-voices__inner .top-btn {
  position: relative;
}

.top-voices__inner .top-btn::after {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  border-radius: 0;
  background: url("../images/top/icon-plan-arrow.svg") center/contain no-repeat;
}

.top-secttl {
  text-align: center;
}

.top-secttl__sub {
  display: block;
  font-size: 24px;
  font-weight: 700;
}

.top-secttl__main {
  display: block;
  font-size: 32px;
  font-weight: 700;
}

.top-secttl__lead {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 700;
}

.top-secttl--on-navy {
  color: #fff;
}

.top-secttl--on-navy .top-secttl__lead b {
  color: #fff;
}

.top-secttl--on-white .top-secttl__main {
  color: var(--top-ink);
}

/* ============ MV ============ */
.top-mv {
  position: relative;
  background: var(--top-navy);
  overflow: hidden;
}

/* --- SP 構成 (base) --- */
.top-mv__pc {
  display: none;
}

.top-mv__sp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
}

.top-mv__sp::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 1183px;
  height: 1153px;
  border-radius: 50%;
  background: #fff;
  left: calc(50% - 700px);
  top: 220px;
  transform: rotate(18deg);
  transform-origin: center;
}

.top-mv__sp-logo {
  position: relative;
  z-index: 1;
  width: 234px;
  height: 56px;
  margin-bottom: 20px;
}

.top-mv__sp-price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  max-width: 100%;
  padding: 0 8px;
}

.top-mv__sp-flag {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(45deg, #bfa124 26%, #cebc65 53%, #bfa124 80%);
  font-weight: 700;
}

.top-mv__sp-flag small {
  font-size: 12px;
  line-height: 1.2;
}

.top-mv__sp-flag b {
  font-size: 18px;
  line-height: 1.2;
}

.top-mv__sp-price-lead {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.top-mv__sp-price-main {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: 700;
}

.top-mv__sp-price-main b {
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  letter-spacing: -1px;
}

.top-mv__sp-price-yen {
  font-size: 24px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  line-height: 1;
  margin: 0 2px;
}

.top-mv__sp-price-yen span {
  font-style: normal;
  font-size: 11px;
}

.top-mv__sp-price-from {
  font-size: 28px;
}

.top-mv__sp-price-tax {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.top-mv__sp-body {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  width: 480px;
  padding-left: 32px;
  margin-top: 8px;
}

@media (min-width: 512px) {
  .top-mv__sp-body {
    align-self: center;
  }
}

.top-mv__sp-appeal {
  position: relative;
  padding: 60px 0 24px;
  text-align: left;
  color: var(--top-navy);
}

.top-mv__sp-illust {
  position: absolute;
  top: 20px;
  left: 0;
  width: 120px;
  height: 71px;
}

.top-mv__sp-time {
  position: relative;
  margin: 40px 0 0;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.top-mv__sp-time::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 145px;
  height: 15px;
  border-radius: 4px;
  background: var(--top-yellow);
  z-index: -1;
}

.top-mv__sp-time span {
  font-size: 26px;
}

.top-mv__sp-time b {
  font-size: 42px;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
}

.top-mv__sp-chips {
  display: flex;
  gap: 4px;
  margin: 14px 0 0;
}

.top-mv__sp-chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 34px;
  border: 1px solid var(--top-navy);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
}

.top-mv__sp-txt {
  margin: 10px 0 0;
  font-size: 24px;
  font-weight: 700;
}

.top-mv__sp-photo {
  flex: none;
  position: relative;
  width: 311px;
  height: 297px;
  overflow: hidden;
}

.top-mv__sp-photo img {
  position: absolute;
  display: block;
  width: 164.6%;
  max-width: none;
  height: auto;
  left: -45%;
  top: -20%;
}

/* --- PC 構成 (1024+で表示) --- */
.top-mv__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;
}

.top-mv__photo img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: cover;
  object-position: left bottom;
}

.top-mv__inner {
  position: relative;
  z-index: 2;
}

.top-mv__badge {
  display: block;
  position: relative;
  width: 507px;
  max-width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 14px 10px 16px;
  margin-bottom: 22px;
  text-align: center;
}

.top-mv__badge::after {
  content: "";
  position: absolute;
  left: 55%;
  bottom: -28px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 29px solid #fff;
}

.top-mv__badge-lead {
  margin: 0;
  color: var(--top-navy);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
}

.top-mv__record {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--top-coral);
  font-weight: 700;
  white-space: nowrap;
}

.top-mv__laurel {
  width: auto;
  height: 81px;
  flex: none;
}

.top-mv__laurel--l {
  transform: scaleX(-1);
}

.top-mv__record-pre {
  font-size: 18px;
  line-height: 1.3;
  text-align: left;
}

.top-mv__record-num {
  font-size: 60px;
  line-height: 1;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
}

.top-mv__record-unit {
  font-size: 31px;
  align-self: flex-end;
  padding-bottom: 6px;
}

.top-mv__copy {
  color: #fff;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.5;
  margin: 0 0 11px;
  text-align: center;
}

.top-mv__tv {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-mv__tv-circle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--top-gold);
  color: #fff;
  text-align: center;
  flex: none;
}

.top-mv__tv-circle small {
  font-size: 15px;
  line-height: 1;
}

.top-mv__tv-circle b {
  font-size: 25px;
  line-height: 1.3;
}

.top-mv__tv-logo {
  width: 397px;
  height: auto;
  display: block;
}

/* ============ 火葬バナー (PC専用) ============ */
.top-crematebnr {
  display: none;
}

/* ============ コンタクトCTA ============ */
.top-contact-cta {
  padding: 20px 12px;
  background: var(--top-navy-light);
  overflow: hidden;
}

.top-contact-cta__inner {
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.top-contact-cta__lead-wrap {
  display: none;
}

.top-contact-cta__lead {
  display: none;
}

.top-contact-cta__badge5 {
  display: none;
}

.top-contact-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 355px;
  margin: 0 auto;
}

.top-contact-cta__btn--tel {
  position: relative;
  display: block;
  text-align: left;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  background: var(--top-gold);
  order: 1;
  height: 102px;
}

.top-contact-cta__btn--doc {
  position: relative;
  display: block;
  text-align: left;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  background: var(--top-navy);
  order: 2;
  height: 132px;
  margin-top: 48px;
}

/* --- 電話バナー内 (SP) --- */
.top-contact-cta__btn--tel .top-contact-cta__btn-sub {
  display: none;
}

.top-contact-cta__btn--tel .top-contact-cta__btn-main {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.top-contact-cta__btn--tel .top-contact-cta__btn-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: 212px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}

/* --- 資料バナー内 (SP) --- */
.top-contact-cta__btn--doc .top-contact-cta__btn-sub {
  display: none;
}

.top-contact-cta__btn--doc .top-contact-cta__btn-main {
  position: absolute;
  left: 20px;
  top: 60%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.top-contact-cta__btn--doc .top-contact-cta__btn-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: 183px;
  top: 60%;
  transform: translateY(-50%);
  width: 45px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}

.top-contact-cta__tel-num {
  display: none;
}

.top-contact-cta__tel-tags {
  display: none;
}

.top-contact-cta__staff--sp {
  position: absolute;
  right: 8px;
  top: 10px;
  width: 90px;
  height: 92px;
}

.top-contact-cta__staff--pc {
  display: none;
}

.top-contact-cta__pamphlet {
  position: absolute;
  top: 60%;
  transform: translateY(-50%) rotate(4.3deg);
  right: 10px;
  width: 100px;
  opacity: 0.9;
}

.top-contact-cta__bubble {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--top-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.top-contact-cta__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

.top-contact-cta__bubble em {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-style: normal;
  color: var(--top-coral);
  font-weight: 700;
}

.top-contact-cta__bubble em small {
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 1px;
  align-self: center;
}

.top-contact-cta__bubble b {
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  letter-spacing: -1px;
}

.top-contact-cta__note {
  max-width: 355px;
  margin: 16px auto 0;
  font-size: 10px;
  color: var(--top-navy);
  text-align: left;
  line-height: 1.5;
}

/* ============ 3つの特徴 ============ */
.top-features {
  padding: 64px 20px;
  background: #fff;
}

.top-features__h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  row-gap: 8px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--top-navy);
  margin: 0 0 32px;
}

.top-features__h2-logo-wrap {
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
}

.top-features__h2-logo {
  display: block;
  width: 200px;
  height: 48px;
}

.top-features__h2 b {
  font-size: 1.6em;
  line-height: 1;
  color: var(--top-gold);
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  border-bottom: 2px dashed var(--top-gold);
}

.top-features__h2 b span {
  font-size: 28px;
  font-family: "Zen Maru Gothic", "Tsukushi A Round Gothic", "筑紫A丸ゴシック", sans-serif;
}

.top-features__h2 em {
  font-style: normal;
  color: var(--top-navy);
}

.top-feature {
  max-width: 480px;
  margin: 0 auto;
}

.top-feature:not(:last-child) {
  margin-bottom: 64px;
}

.top-feature__h3 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
  background: var(--top-gold);
  color: #fff;
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 28px;
  font-size: 18px;
  font-weight: 700;
}

.top-feature__h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top-color: var(--top-gold);
  border-bottom: 0;
}

.top-feature__h3 b {
  font-size: 30px;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  color: #fff;
}

.top-feature__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-feature__body--rev {
  flex-direction: column-reverse;
}

.top-feature__txt {
  display: flex;
  flex-direction: column;
}

.top-feature__h4 {
  align-self: center;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--top-navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  margin: 0 0 20px;
  line-height: 1.5;
}

.top-feature__txt p {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.top-feature__illust {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.top-feature__illust img {
  max-width: 100%;
  height: auto;
}

.top-feature__illust--01 {
  align-items: flex-end;
  gap: 40px;
}

.top-feature__illust--01 .top-feature__illust-man {
  width: 152px;
}

.top-feature__illust--01 .top-feature__illust-woman {
  width: 129px;
}

/* ============ プラン ============ */
.top-plans {
  margin-top: 60px;
}

.top-plans__lead {
  text-align: center;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--top-ink);
}

.top-plans__lead span {
  position: relative;
  padding: 0 22px;
  display: inline-block;
}

.top-plans__lead span::before,
.top-plans__lead span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--top-ink);
}

.top-plans__lead span::before {
  left: 0;
  transform: rotate(-20deg);
}

.top-plans__lead span::after {
  right: 0;
  transform: rotate(20deg);
}

.top-plans__badge {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--top-navy);
  margin: 0 0 20px;
  line-height: 1.5;
}

.top-plans__badge em {
  display: block;
  font-style: normal;
  color: var(--top-gold);
}

.top-plans__badge b {
  display: inline;
  color: var(--top-navy);
  font-size: inherit;
}

.top-plans__badge--other {
  display: block;
  color: var(--top-ink);
}

.top-plans__lead--other {
  margin-top: 64px;
}

.top-plans__featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 355px;
  margin-inline: auto;
}

.top-plans__table {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 355px;
  margin-inline: auto;
}

.top-plans__thead {
  display: none;
}

.top-plans__note {
  font-size: 12px;
  color: #676767;
  margin: 16px 0 0;
}

.top-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--top-plan-color, var(--top-plan02));
  border-top-width: 5px;
  border-radius: 12px;
  background: color-mix(in srgb,
      var(--top-plan-color, var(--top-plan02)) 8%,
      #fff);
  padding: 20px 10px 10px;
}

.top-plan-card.is-featured {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.top-plan-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--top-badge-color, var(--top-plan-color, var(--top-plan02)));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.top-plan-card__badge--featured {
  top: 8px;
  left: 8px;
  right: auto;
  width: 64px;
  height: 64px;
  border: 4px solid color-mix(in srgb, var(--top-badge-color, var(--top-plan-color)) 30%, transparent);
  background-clip: padding-box;
  font-size: 14px;
  line-height: 1.3;
}

.top-plan-card__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--top-plan-color, var(--top-plan02));
  text-align: center;
}

.top-plan-card__subtitle {
  align-self: stretch;
  background: #fff;
  border-radius: 8px;
  padding: 8px 6px;
  color: var(--top-plan-color, var(--top-plan02));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.top-plan-card__title {
  color: var(--top-plan-color, var(--top-plan02));
  font-size: 26px;
  font-weight: 700;
}

.top-plan-card__title br {
  display: none;
}

.top-plan-card__img {
  position: relative;
  display: block;
  margin-top: 5px;
}

.top-plan-card__img img {
  display: block;
  width: 100%;
  aspect-ratio: 335 / 200;
  object-fit: cover;
  border-radius: 8px;
}

.top-plan-card__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid var(--top-line);
  padding: 16px 10px;
}

.top-plan-card__price-main {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  color: var(--top-plan-color, var(--top-plan02));
}

.top-plan-card__price-main b {
  font-size: 40px;
  line-height: 1;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  letter-spacing: -1.6px;
}

.top-plan-card__price-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--top-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.top-plan-card__price-unit i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

.top-plan-card__price-tax {
  margin: 0;
  color: var(--top-ink);
  font-size: 14px;
  font-weight: 500;
}

.top-plan-card__price-tax b {
  font-size: 20px;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  letter-spacing: -0.8px;
}

.top-plan-card__capacity {
  background: var(--top-plan-color, var(--top-plan02));
  color: #fff;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.top-plan-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  border-bottom: 2px solid var(--top-line);
  padding: 16px 10px;
  margin-top: -10px;
}

.top-plan-card__days {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.top-plan-card__days::before {
  content: "日数";
  align-self: center;
  background: color-mix(in srgb,
      var(--top-plan-color, var(--top-plan02)) 8%,
      #fff);
  color: var(--top-ink);
  border-radius: 4px;
  padding: 3px 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.top-plan-card__days b {
  font-size: 26px;
  line-height: 24px;
  font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
  letter-spacing: -1.04px;
}

.top-plan-card__days span {
  font-size: 14px;
  font-weight: 500;
}

.top-plan-card__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.top-plan-card__flow-step {
  background: var(--top-plan-color, var(--top-plan02));
  color: #fff;
  border-radius: 4px;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  writing-mode: vertical-rl;
}

.top-plan-card__flow-step.is-off {
  background: var(--top-line);
  color: #fff;
}

.top-plan-card__flow-arrow {
  color: var(--top-plan-color, var(--top-plan02));
  font-size: 5px;
}

.top-plan-card__btn {
  display: block;
  background: #fff;
  border-radius: 0 0 12px 12px;
  padding: 10px;
  margin-top: -10px;
}

.top-plan-card__btn span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 8px;
  background: var(--top-plan-color, var(--top-plan02));
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}

.top-plan-card__btn-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  max-width: none;
}

/* ============ エリア検索 ============ */
.top-area-alert {
  position: relative;
  max-width: 480px;
  margin: 40px auto 0;
  background: var(--top-coral);
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

.top-area-alert__summary {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  list-style: none;
}

.top-area-alert__summary::-webkit-details-marker {
  display: none;
}

.top-area-alert__summary::marker {
  content: "";
}

.top-area-alert__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 24px 12px 16px;
}

.top-area-alert__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--top-yellow);
}

.top-area-alert__sub {
  background: #fff;
  color: var(--top-ink);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
}

.top-area-alert__must {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  color: var(--top-yellow);
  font-weight: 700;
}

.top-area-alert__must i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid var(--top-yellow);
  color: var(--top-coral);
  font-size: 13px;
  font-style: normal;
  line-height: 1;
  padding-top: 0;
  position: relative;
}

.top-area-alert__must i::before {
  content: "!";
  position: absolute;
  top: 8px;
  left: -3px;
  font-weight: 700;
}

.top-area-alert__foot {
  display: block;
  position: relative;
  width: 100%;
  height: 10px;
  padding: 0;
  border: 0;
  background: var(--top-red-tint);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.top-area-alert__foot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 7.343px solid transparent;
  border-right: 7.343px solid transparent;
  border-top: 5px solid var(--top-coral);
}

.top-area-alert[open] .top-area-alert__foot {
  display: none;
}

.top-area-alert__panel {
  background: #fff;
  color: var(--top-ink);
  text-align: left;
  border: 1px solid var(--top-coral);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  margin: 0 1px 1px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.top-area-alert:not([open]) .top-area-alert__panel {
  display: none;
}

.top-area-alert__panel p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.top-area-alert__h {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--top-coral);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.top-area-alert__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-area-alert__list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.top-area-alert__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.top-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  border: 2px solid var(--top-gold);
  border-radius: 12px;
  padding: 32px 20px;
  max-width: 480px;
  margin: 0 auto;
}

.top-area__ttl {
  order: -2;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--top-ink);
  margin: 0;
  line-height: 1.5;
}

.top-area__ttl em {
  font-style: normal;
  display: block;
  font-size: 18px;
  color: var(--top-gold);
}

.top-area__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-area__region {
  background: color-mix(in srgb, var(--top-gold) 8%, #fff);
  border-radius: 10px;
  padding: 24px 16px;
}

.top-area__search-lead {
  text-align: center;
  font-weight: 700;
  color: var(--top-ink);
  font-size: 16px;
  margin: 0 0 16px;
}

.top-area__regions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.top-area__region-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--top-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.25));
}

.top-area__region-btn.is-active {
  background: var(--top-gold);
  color: #fff;
}

.top-area__region-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.top-area__person {
  display: none;
}

.top-area__prefs {
  display: none;
}

.top-area-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  background: #fff;
  border-radius: 4px;
  padding: 12px 10px;
  color: var(--top-ink);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 1.5px rgba(0, 0, 0, 0.25);
}

.top-area-btn::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--top-gold);
}

.top-area-btn::after {
  content: "\203a";
  margin-left: auto;
  color: var(--top-gold);
}

.top-area__map {
  display: none;
}

.top-area__map img {
  display: block;
  width: 100%;
  height: auto;
}

.top-area__form {
  order: -1;
  display: flex;
  gap: 8px;
  background: var(--top-line);
  border-radius: 8px;
  padding: 8px;
}

.top-area__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--top-ink);
}

.top-area__input::placeholder {
  color: #676767;
}

.top-area__submit {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--top-navy);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ============ お客様の声 ============ */
.top-voices {
  --voice-arrow-size: 44px; /* SPは44px。PCは60px (PCブロックで上書き) */
  --voice-arrow-inset: 20px; /* SPの画面端〜矢印 */
  --voice-arrow-gap: 20px; /* SPの矢印〜一覧ボタン */
  padding: 56px 0 72px;
  background: var(--top-navy);
  overflow: hidden;
  /* 矢印の z-index: 3 がセクション外 (固定 CTA #sp_bottombanner: z-index 2) より
     手前に出ないよう、スタッキングコンテキストをセクション内に閉じ込める */
  isolation: isolate;
}

.top-voices__inner {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
}

.top-voices__head {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 20px;
}

.top-voices__h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.top-voices__h2 span {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.top-voices__lead {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  margin: 16px 0 0;
  line-height: 1.8;
}

.top-voices__logo {
  width: 100px;
  height: 24px;
  vertical-align: -6px;
  margin-right: 6px;
}

/* 矢印は SP/PC ともフッター行 (bottom: 0 = __inner 最下部) に絶対配置する。
   vendor の .splide が position: relative を持つため static に戻し、
   基準を position: relative の __inner に移す (.splide を重ねて
   読み込み順に依らず vendor より高い詳細度で勝たせる) */
.top-voices__slider.splide {
  position: static;
}

.top-voices__track {
  padding-bottom: 8px;
}

.top-voices__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  /* フッター行 (min-height: 60px) の上下センターに揃える */
  bottom: calc((60px - var(--voice-arrow-size)) / 2);
  width: var(--voice-arrow-size);
  height: var(--voice-arrow-size);
  border-radius: 50%;
  border: 0;
  background: var(--top-gold);
  cursor: pointer;
}

.top-voices__arrow--prev {
  left: var(--voice-arrow-inset);
}

.top-voices__arrow--next {
  right: var(--voice-arrow-inset);
}

.top-voices__arrow::before {
  content: "";
  display: block;
}

.top-voices__arrow--prev::before {
  border: 9px solid transparent;
  border-right: 14px solid #fff;
  border-left: 0;
  margin-right: 3px;
}

.top-voices__arrow--next::before {
  border: 9px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0;
  margin-left: 3px;
}

.top-voices__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-top: 32px;
}

/* SP (〜1023px): 一覧ボタンの左右に矢印を並べ、ボタンは残り幅いっぱいに広げる。
   ボタンの padding は右 8px 固定のアイコン (21px) と文字が重ならないよう
   右側を厚めに取る。文言は折り返さない前提 (nowrap) */
@media (max-width: 1023px) {
  .top-voices__foot {
    padding: 0 calc(var(--voice-arrow-inset) + var(--voice-arrow-size) + var(--voice-arrow-gap));
  }

  .top-voices__foot .top-btn {
    width: 100%;
    min-width: 0;
    padding: 0 36px 0 10px;
    white-space: nowrap;
  }
}

/* 360px 未満は文言が収まらないため文字サイズを一段縮める */
@media (max-width: 359px) {
  .top-voices__foot .top-btn {
    font-size: 14px;
  }
}

/* 480px 超 (PC レイアウト未満): 他セクション (.top-feature 等) と同様、
   フット (矢印 + 一覧ボタン) は W480 中央寄せを維持する。
   矢印は __inner 基準の絶対配置のため、中央から 480/2 を起点に inset 分内側へ */
@media (min-width: 480.02px) and (max-width: 1023px) {
  .top-voices__foot {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .top-voices__arrow--prev {
    left: calc(50% - 240px + var(--voice-arrow-inset));
  }

  .top-voices__arrow--next {
    right: calc(50% - 240px + var(--voice-arrow-inset));
  }
}

.top-voice-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 24px 20px;
  height: 100%;
}

.top-voice-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.top-voice-card__avatar {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--top-navy);
}

.top-voice-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.top-voice-card__name {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
}

.top-voice-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-voice-card__stars {
  color: var(--top-gold);
}

.top-voice-card__rating b {
  font-size: 20px;
}

.top-voice-card__text {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.top-voice-card__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-voice-card__tag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.top-voice-card__tag span {
  background: var(--top-navy-light);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
}

/* ============ お知らせ ============ */
.top-news {
  padding: 56px 10px;
  background: #fff;
}

.top-news__inner {
  max-width: 355px;
  margin: 0 auto;
}

.top-news__h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: var(--top-ink);
  margin: 0 0 32px;
  letter-spacing: 0.2em;
}

.top-news__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.top-news__tab {
  height: 58px;
  background: #fff;
  color: var(--top-navy);
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
}

.top-news__tab+.top-news__tab {
  border-left: 2px dotted var(--top-gold);
  border-radius: 0 4px 4px 0;
}

.top-news__tab.is-active {
  background: var(--top-navy-light);
}

.top-news__list {
  background: #fff;
  margin-top: 32px;
}

.top-news-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 4px;
  border-top: 1px solid var(--top-line);
}

.top-news-item:first-child {
  border-top: 0;
}

.top-news-item:last-child {
  border-bottom: 1px solid #ebebeb;
}

.top-news-item[hidden] {
  display: none;
}

.top-news-item__date {
  flex: none;
  width: 112px;
  color: var(--top-ink);
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.top-news-item__label {
  flex: none;
  width: 110px;
  text-align: center;
  border-radius: 4px;
  padding: 3px 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.top-news-item__label--news {
  background: var(--top-gold);
}

.top-news-item__label--event {
  background: var(--top-navy);
}

.top-news-item__label--opening {
  background: var(--top-coral);
}

.top-news-item__title {
  flex: 1 1 100%;
  font-size: 14px;
  line-height: 1.6;
}

/* ============ コラム ============ */
.top-columns {
  padding: 56px 0 72px;
  background: var(--top-navy);
  overflow: hidden;
}

.top-columns__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.top-columns__head {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 20px;
}

.top-columns__h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.top-columns__lead {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  margin: 16px 0 0;
  line-height: 1.8;
}

.top-columns__logo {
  width: 100px;
  height: 24px;
  vertical-align: -6px;
  margin-right: 6px;
}

/* SP: お客様の声と同じ Splide ループカルーセル (focus:center + fixedWidth 305px)。
   デフォルトで中央のカードの左右に前後のカードが覗く。
   PC (1024px〜) は js/top.js が splide を destroy し、素の 4 枚グリッドに戻す */
.top-columns__track {
  padding-bottom: 8px;
}

.top-columns__slide > .top-column-card {
  height: 100%;
}

.top-columns__foot {
  text-align: center;
  margin-top: 32px;
}

.top-column-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 12px 20px;
}

.top-column-card__thumb {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 281 / 160;
  background: var(--top-line);
}

.top-column-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-column-card__cat {
  align-self: flex-start;
  background: var(--top-gold);
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.top-column-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-column-card__excerpt {
  display: none;
}

/* ============ サイドCTA (PC専用) ============ */
.top-side-cta {
  display: none;
}

/* ================================================================
   PC (1024px以上): コンテンツ幅は 1024 固定・中央寄せ。
   1440以上では背景と固定要素のみ広がる。
   ================================================================ */
@media (min-width: 1024px) {
  .top-btn {
    min-width: 320px;
    font-size: 20px;
  }

  /* --- MV --- */
  .top-mv {
    min-height: 520px;
  }

  .top-mv__sp {
    display: none;
  }

  .top-mv__pc {
    display: block;
  }

  .top-mv__photo {
    left: calc(50% - 162px);
    right: auto;
    width: 760px;
    height: 100%;
    overflow: hidden;
  }

  .top-mv__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
  }

  .top-mv__inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 56px 15px 44px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .top-mv__col {
    width: 513px;
    margin-left: 29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* --- 火葬バナー (カード790x240, MVに-30px重なり, 右上に業界最安水準バッジ) --- */
  .top-crematebnr {
    display: block;
    padding: 0 16px;
    background: transparent;
    position: relative;
    z-index: 2;
  }

  .top-crematebnr__inner {
    display: block;
    max-width: 790px;
    min-height: 240px;
    margin: -30px auto 60px;
    background: #fff;
    border: 1px solid var(--top-line);
    border-radius: 10px;
    padding: 20px 40px 20px 230px;
    box-shadow: 0 4px 0 rgba(176, 176, 176, 0.25);
    position: relative;
  }

  .top-crematebnr__flag {
    position: absolute;
    top: -60px;
    right: -60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 134px;
    height: 134px;
    border-radius: 50%;
    background: var(--top-coral);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    border: 8px solid var(--top-red-tint);
  }

  .top-crematebnr__illust {
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 180px;
    height: auto;
  }

  .top-crematebnr__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .top-crematebnr__title {
    font-weight: 700;
    color: var(--top-ink);
    font-size: 25px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .top-crematebnr__title em {
    display: inline-block;
    font-style: normal;
    margin-right: 12px;
    padding-bottom: 4px;
    border-bottom: 2px dashed var(--top-ink);
    text-emphasis: filled dot var(--top-ink);
    text-emphasis-position: over;
    -webkit-text-emphasis: filled dot var(--top-ink);
    -webkit-text-emphasis-position: over;
  }

  .top-crematebnr__row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
    margin-top: 8px;
  }

  .top-crematebnr__pricebox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .top-crematebnr__pill {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 118px;
    height: 76px;
    background: #fff;
    border: 1px solid var(--top-coral);
    color: var(--top-coral);
    border-radius: 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
  }

  .top-crematebnr__price {
    display: flex;
    align-items: center;
    color: var(--top-coral);
    font-weight: 700;
    line-height: 1;
  }

  .top-crematebnr__price b {
    font-size: 72px;
    font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
    letter-spacing: -2px;
  }

  .top-crematebnr__price-yen {
    font-size: 34px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    line-height: 1;
  }

  .top-crematebnr__price-yen span {
    font-style: normal;
    font-size: 14px;
  }

  .top-crematebnr__price em {
    font-style: normal;
    font-size: 44px;
  }

  .top-crematebnr__tax {
    color: var(--top-coral);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  .top-crematebnr__note {
    margin-top: 10px;
    color: var(--top-ink);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
  }

  .top-crematebnr__arrow {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--top-navy);
    font-size: 0;
  }

  .top-crematebnr__arrow::after {
    content: "";
    width: 21px;
    height: 21px;
    background: url("../images/top/icon-plan-arrow.svg") center/contain no-repeat;
  }

  /* --- コンタクトCTA --- */
  .top-contact-cta {
    padding: 31px 16px 46px;
  }

  .top-contact-cta__lead-wrap {
    display: inline-block;
    position: relative;
    margin: 0 auto 36px;
  }

  .top-contact-cta__lead-pamphlet {
    position: absolute;
    left: -200px;
    width: 230px;
    transform: rotate(-18.4deg);
    opacity: 0.95;
    z-index: 2;
  }

  .top-contact-cta__lead {
    display: inline-block;
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 22px 40px;
    font-size: 26px;
    font-weight: 700;
    color: var(--top-ink);
    line-height: 1.5;
  }

  .top-contact-cta__lead::after {
    content: "";
    position: absolute;
    left: 15%;
    bottom: -11px;
    border: 12px solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
  }

  .top-contact-cta__lead .top-contact-cta__logo {
    width: 163px;
    height: 39px;
    vertical-align: -14px;
    margin-right: 8px;
  }

  .top-contact-cta__lead em {
    font-style: normal;
    color: var(--top-coral);
  }

  .top-contact-cta__btns {
    flex-direction: row;
    max-width: none;
    gap: 34px;
    align-items: stretch;
  }

  .top-contact-cta__btn--tel {
    flex: 1 1 50%;
    height: auto;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 20px 140px 20px 16px;
  }

  .top-contact-cta__btn--doc {
    flex: 1 1 50%;
    height: auto;
    min-height: 168px;
    display: flex;
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    column-gap: 14px;
    row-gap: 10px;
    padding: 20px 180px 20px 36px;
    text-align: left;
  }

  /* --- 電話バナー内 (PC) --- */
  .top-contact-cta__btn--tel .top-contact-cta__btn-sub {
    display: block;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
  }

  .top-contact-cta__btn--tel .top-contact-cta__btn-main {
    display: none;
  }

  /* --- 資料バナー内 (PC) --- */
  .top-contact-cta__btn--doc .top-contact-cta__btn-sub {
    display: block;
    color: #fff;
    flex: 1 1 100%;
    font-size: 20px;
    font-weight: 700;
  }

  .top-contact-cta__btn--doc .top-contact-cta__btn-sub b {
    color: var(--top-gold);
    text-emphasis: filled dot;
    -webkit-text-emphasis: filled dot;
  }

  .top-contact-cta__btn--doc .top-contact-cta__btn-main {
    position: static;
    transform: none;
    font-size: 31px;
    line-height: 1;
  }

  .top-contact-cta__btn--tel .top-contact-cta__btn-note {
    display: none;
  }

  .top-contact-cta__btn--doc .top-contact-cta__btn-note {
    position: static;
    width: auto;
    height: auto;
    border-radius: 8px;
    padding: 2px 10px;
    font-size: 20px;
    letter-spacing: 3px;
    transform: none;
  }

  .top-contact-cta__bubble {
    display: none;
  }

  .top-contact-cta__badge5 {
    position: absolute;
    right: -48px;
    top: -48px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 107px;
    height: 107px;
    border-radius: 50%;
    padding: 10px;
    background: var(--top-gold);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    text-align: center;
  }

  .top-contact-cta__badge5-row {
    display: inline-flex;
    align-items: center;
  }

  .top-contact-cta__badge5 em {
    font-style: normal;
    color: var(--top-yellow);
    font-size: 8px;
    writing-mode: vertical-rl;
  }

  .top-contact-cta__badge5 b {
    color: var(--top-yellow);
    font-size: 26px;
    font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
    line-height: 1;
    margin: 0 1px;
  }

  .top-contact-cta__badge5 i {
    font-style: normal;
    color: var(--top-yellow);
    font-size: 16px;
  }

  .top-contact-cta__badge5 em,
  .top-contact-cta__badge5 b,
  .top-contact-cta__badge5 i {
    display: inline-block;
    vertical-align: middle;
  }

  .top-contact-cta__tel-num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 42px;
    font-weight: 400;
    font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
    letter-spacing: -1.26px;
    line-height: 1.1;
  }

  .top-contact-cta__tel-icon {
    flex: none;
    display: block;
    width: 40px;
    height: 40px;
    align-self: center;
  }

  .top-contact-cta__tel-num ruby {
    ruby-align: center;
  }

  .top-contact-cta__tel-num rt {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #fff;
  }

  .top-contact-cta__tel-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .top-contact-cta__tel-tags span {
    background: #fff;
    color: var(--top-navy);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
  }

  .top-contact-cta__staff--sp {
    display: none;
  }

  .top-contact-cta__staff--pc {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 145px;
    height: 194px;
    object-fit: contain;
    object-position: bottom;
  }

  .top-contact-cta__pamphlet {
    right: 8px;
    top: 10px;
    bottom: auto;
    width: 177px;
    transform: rotate(13.15deg);
    opacity: 0.95;
    z-index: 2;
  }

  .top-contact-cta__note {
    max-width: none;
    margin-top: 24px;
    font-size: 14px;
    letter-spacing: 1.4px;
    line-height: 1.6;
    text-align: left;
  }

  .top-features__h2 {
    font-size: 40px;
    margin-bottom: 48px;
    gap: 8px;
  }

  .top-features__h2-logo-wrap {
    display: block;
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 22px;
    margin-right: 12px;
  }

  .top-features__h2-logo {
    width: 216px;
    height: 52px;
  }

  .top-features__h2 b {
    font-size: 64px;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .top-features__h2 b span {
    font-size: 40px;
  }

  .top-feature {
    max-width: 994px;
    margin-bottom: 64px;
  }

  .top-feature__h3 {
    align-items: center;
    height: 64px;
    padding: 4px 12px;
    margin-bottom: 33px;
    font-size: 24px;
    line-height: 1;
  }

  .top-feature__h3::after {
    border-left-width: 23px;
    border-right-width: 23px;
    border-top-width: 25px;
    border-bottom: 0;
    bottom: -24px;
  }

  .top-feature__h3 b {
    font-size: 50px;
  }

  .top-feature__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .top-feature__body--rev {
    flex-direction: row;
  }

  .top-feature__h4-br {
    display: none;
  }

  .top-feature__h4 {
    align-self: flex-start;
    text-align: left;
    font-size: 32px;
    text-underline-offset: 14px;
  }

  .top-feature__txt {
    flex: 0 1 590px;
  }

  .top-feature__txt p {
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.6;
  }

  .top-feature__illust {
    flex: 0 0 400px;
    height: 220px;
    margin-top: 0;
  }

  .top-feature__illust--01 {
    gap: 44px;
  }

  .top-feature__illust--01 .top-feature__illust-man {
    width: 175px;
  }

  .top-feature__illust--01 .top-feature__illust-woman {
    width: 148px;
  }

  .top-feature--02 .top-feature__illust img {
    width: 362px;
  }

  .top-feature--03 .top-feature__illust img {
    width: 379px;
  }

  /* --- プラン --- */
  .top-plans__lead {
    font-size: 20px;
  }

  .top-plans__lead-br {
    display: none;
  }

  .top-plans__badge {
    font-size: 40px;
  }

  .top-plans__badge em {
    display: inline;
  }

  .top-plans__featured {
    max-width: none;
    flex-direction: column;
    gap: 32px;
  }

  .top-plans__table {
    max-width: none;
    gap: 16px;
  }

  .top-plans__thead {
    display: grid;
    grid-template-columns: 465px 185px 72px 172px;
    width: 894px;
    height: 72px;
    align-items: stretch;
    background: var(--top-grey-head);
    color: #fff;
    border-radius: 12px;
  }

  .top-plans__th {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    border-right: 2px solid #fff;
    white-space: nowrap;
  }

  .top-plans__th--name {
    border-radius: 12px 0 0 12px;
  }

  .top-plans__th--last {
    border-right: 0;
    border-radius: 0 12px 12px 0;
  }

  .top-plan-card {
    flex-direction: row;
    align-items: stretch;
    height: 190px;
    gap: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--top-plan-color, var(--top-plan02));
  }

  .top-plan-card__badge {
    top: 25px;
    left: auto;
    right: 25px;
    font-weight: 700;
  }

  .top-plan-card__badge--featured {
    top: 16px;
    left: auto;
    right: 12px;
    font-size: 14px;
    line-height: 1.2;
  }

  .top-plan-card__name {
    border-radius: 11px 0 0 11px;
    flex: 0 0 240px;
    background: color-mix(in srgb,
        var(--top-plan-color, var(--top-plan02)) 8%,
        #fff);
    border-left: 8px solid var(--top-plan-color, var(--top-plan02));
    gap: 8px;
    padding: 16px;
    justify-content: center;
  }

  .top-plan-card__subtitle {
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .top-plan-card__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
  }

  .top-plan-card__title br {
    display: inline;
  }

  .top-plan-card__img {
    flex: 0 0 225px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb,
        var(--top-plan-color, var(--top-plan02)) 8%,
        #fff);
  }

  .top-plan-card__img img {
    width: 210px;
    aspect-ratio: 21 / 16;
  }

  .top-plan-card__price {
    flex: 0 0 185px;
    min-width: 0;
    overflow: hidden;
    padding: 8px;
    border-radius: 0;
    border-bottom: 0;
    border-right: 2px solid var(--top-line);
    justify-content: center;
    gap: 6px;
  }

  .top-plan-card__price-main b {
    font-size: 36px;
    letter-spacing: -1.4px;
  }

  .top-plan-card__meta {
    display: contents;
  }

  .top-plan-card__days {
    flex: 0 0 72px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    justify-content: center;
    gap: 4px;
    background: #fff;
    border-bottom: 0;
    border-right: 2px solid var(--top-line);
    align-self: stretch;
    padding: 8px;
  }

  .top-plan-card__days::before {
    content: none;
  }

  .top-plan-card__days b {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .top-plan-card__days span {
    font-size: 20px;
  }

  .top-plan-card__flow {
    flex: 0 0 173px;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border-bottom: 0;
    border-right: 2px solid var(--top-line);
    align-self: stretch;
    padding: 12px 6px;
    gap: 2px;
  }

  .top-plan-card__flow-step {
    font-size: 14px;
    font-weight: 700;
    padding: 8px 4px;
    line-height: 1.1;
  }

  .top-plan-card__btn {
    flex: 0 0 97px;
    display: flex;
    background: #fff;
    margin: 0;
    border-radius: 0 11px 11px 0;
    padding: 0;
  }

  .top-plan-card__btn span {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 58px;
    height: 170px;
    margin: auto;
    background: var(--top-plan-color, var(--top-plan02));
    color: #fff;
    border-radius: 8px;
    writing-mode: vertical-rl;
    font-size: 18px;
    font-weight: 700;
  }

  .top-plan-card__btn-icon {
    position: static;
    transform: none;
    flex: none;
    width: 20px;
    height: 20px;
  }

  /* --- エリア検索 --- */
  .top-area {
    max-width: 994px;
    padding: 64px 24px 40px;
    gap: 32px;
  }

  .top-area__ttl {
    font-size: 40px;
    line-height: 1.4;
  }

  .top-area__ttl em {
    font-size: 40px;
  }

  .top-area__grid {
    display: block;
    position: relative;
    min-height: 545px;
  }

  .top-area__region {
    position: relative;
    z-index: 2;
    width: 396px;
    padding: 24px;
    background: color-mix(in srgb, var(--top-gold) 8%, #fff);
  }

  .top-area__region::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 110px;
    border: 16px solid transparent;
    border-left-color: color-mix(in srgb, var(--top-gold) 30%, #fff);
    border-right: 0;
  }

  .top-area__search-lead {
    font-size: 20px;
  }

  .top-area__regions {
    grid-template-columns: repeat(2, 170px);
    justify-content: center;
  }

  .top-area__region-btn {
    width: 170px;
    font-size: 20px;
  }

  .top-area .top-area__person {
    display: block;
    position: absolute;
    left: 145px;
    top: 100%;
    width: 150px;
    height: 258px;
    object-fit: cover;
    object-position: top;
    margin: 20px 0 0;
  }

  .top-area__prefs {
    display: grid;
    position: absolute;
    left: 424px;
    top: 0;
    z-index: 1;
    grid-template-columns: repeat(2, 118px);
    gap: 10px;
    align-content: start;
  }

  .top-area-btn {
    width: 118px;
    padding: 12px 10px;
    font-size: 16px;
  }

  .top-area__map {
    display: block;
    position: absolute;
    right: -14px;
    top: 0;
    width: 620px;
  }

  .top-area .top-area__map img {
    width: 100%;
  }

  .top-area__form {
    order: 0;
    max-width: 800px;
    height: 72px;
    margin: 0 auto;
    width: 100%;
    align-items: center;
  }

  .top-area__input {
    font-size: 16px;
    letter-spacing: 1.6px;
    padding: 10px 20px;
  }

  .top-area__submit {
    height: 56px;
    font-size: 20px;
    padding: 0 30px;
  }

  .top-area-alert {
    max-width: 790px;
  }

  .top-area-alert__head {
    padding: 24px 20px 20px;
    gap: 6px;
  }

  .top-area-alert__title {
    font-size: 24px;
  }

  .top-area-alert__sub {
    font-size: 16px;
    padding: 4px 40px;
  }

  .top-area-alert__must {
    font-size: 32px;
    gap: 12px;
  }

  .top-area-alert__must i {
    border-left-width: 18px;
    border-right-width: 18px;
    border-bottom-width: 32px;
  }

  .top-area-alert__must i::before {
    top: 10px;
    left: -4px;
    font-size: 16px;
  }

  .top-area-alert__panel {
    padding: 32px;
    gap: 20px;
  }

  .top-area-alert__panel p {
    font-size: 18px;
    letter-spacing: 0.1em;
  }

  .top-area-alert__h {
    padding-bottom: 16px;
    font-size: 20px;
  }

  .top-area-alert__list li {
    font-size: 18px;
    letter-spacing: 0.1em;
  }

  /* --- お客様の声: カード481px・全幅ブリード, 矢印はフッター行 --- */
  .top-voices {
    --voice-arrow-size: 60px;
    padding: 88px 0 160px;
  }

  .top-voices__inner {
    max-width: 994px;
  }

  .top-voices__h2 {
    font-size: 40px;
  }

  .top-voices__h2 span {
    font-size: 24px;
  }

  .top-voices__lead {
    font-size: 16px;
  }

  .top-voices__logo,
  .top-columns__logo {
    width: 107px;
    height: 26px;
  }

  .top-voices__slider {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .top-voices__track {
    padding-bottom: 8px;
  }

  .top-voices__arrow {
    transition: background-color 0.15s ease;
  }

  .top-voices__arrow--prev {
    left: 60px;
  }

  .top-voices__arrow--next {
    right: 60px;
  }

  .top-voices__arrow:hover,
  .top-voices__arrow:focus-visible {
    background: color-mix(in srgb, var(--top-gold) 88%, #000);
  }

  .top-voices__foot {
    margin-top: 46px;
    position: relative;
    z-index: 1;
  }

  .top-voice-card {
    padding: 32px 24px;
  }

  .top-voice-card__head {
    gap: 20px;
    margin-bottom: 24px;
  }

  .top-voice-card__avatar {
    width: 80px;
    height: 80px;
  }

  .top-voice-card__name {
    font-size: 16px;
  }

  .top-voice-card__rating b {
    font-size: 24px;
  }

  .top-voice-card__text {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .top-voice-card__tag {
    font-size: 18px;
  }

  .top-voice-card__tag span {
    font-size: 16px;
    padding: 4px 10px;
  }

  /* --- お知らせ --- */
  .top-news {
    padding: 120px 15px;
  }

  .top-news__inner {
    max-width: 994px;
  }

  .top-news__h2 {
    font-size: 40px;
  }

  .top-news__tabs {
    display: flex;
    gap: 16px;
  }

  .top-news__tab {
    flex: 1 1 0;
    color: var(--top-navy);
    font-size: 20px;
    border-radius: 4px;
  }

  .top-news__tab+.top-news__tab {
    border-left: 2px dotted var(--top-gold);
    border-radius: 4px;
  }

  .top-news__tab.is-active {
    border-top: 1px solid var(--top-navy);
  }

  .top-news-item {
    gap: 20px;
  }

  .top-news-item__date {
    width: 132px;
    font-size: 16px;
    letter-spacing: 1.6px;
  }

  .top-news-item__label {
    width: 130px;
    font-size: 16px;
    padding: 4px 0;
  }

  .top-news-item__title {
    flex: 1 1 auto;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- コラム: 4x276 = 1200 中央固定 --- */
  .top-columns {
    padding: 120px 0 160px;
  }

  .top-columns__h2 {
    font-size: 40px;
  }

  .top-columns__lead {
    font-size: 16px;
  }

  /* PC は splide を destroy して素の 4 枚グリッドで表示する。
     destroy 後は is-initialized が外れて vendor の .splide { visibility: hidden }
     が効いてしまうため常時表示に上書き */
  .top-columns__slider.splide {
    visibility: visible;
  }

  .top-columns__track.splide__track {
    overflow: visible;
    padding: 0;
  }

  /* vendor の .splide.is-initialized:not(.is-active) .splide__list { display: block }
     (destroy 後に適用される) より高い詳細度にする */
  .top-columns__slider.splide .top-columns__list.splide__list {
    display: grid;
    grid-template-columns: repeat(4, 276px);
    gap: 32px;
    justify-content: center;
  }

  .top-columns__foot {
    margin-top: 48px;
  }

  .top-column-card__thumb {
    aspect-ratio: 252 / 144;
  }

  /* --- サイドCTA (右端固定) --- */
  .top-side-cta {
    display: flex;
    position: fixed;
    top: 55%;
    right: 0;
    transform: translateY(-50%);
    z-index: 900;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 84px;
  }

  .top-side-cta__btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    width: 72px;
    height: 188px;
    writing-mode: vertical-rl;
    border: 1px solid #fff;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 10px 4px;
  }

  .top-side-cta__btn--doc {
    background: var(--top-navy);
  }

  .top-side-cta__btn--tel {
    background: var(--top-coral);
  }

  .top-side-cta__pamphlet {
    position: absolute;
    top: -60px;
    left: -16px;
    width: 104px;
    transform: rotate(-17deg);
    opacity: 0.9;
  }

  .top-side-cta__label {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
    line-height: 25px;
  }

  .top-side-cta__note {
    color: var(--top-gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
    line-height: 13px;
  }

  .top-side-cta__btn--tel .top-side-cta__note {
    color: var(--top-yellow);
  }

  .top-side-cta__note b {
    font-size: 18px;
    font-weight: 400;
    font-family: "Arial Rounded MT Bold", "Arial", sans-serif;
    letter-spacing: -0.5px;
    text-combine-upright: all;
  }

  .top-side-cta__btn--tel .top-side-cta__note b {
    font-size: 15px;
  }
}

/* ================================================================
   Hover / focus states
   葬儀場を探す (area-*) ページの規約を踏襲:
   - transition: <property> 0.15s ease
   - hover 色は同系で明度をずらす (solid は 12% 暗く、white は tint)
   - カード / チップ系のみ translateY(-1px) で 1px 浮かせる
   - :focus-visible にも同色を適用しキーボード操作でも視認可能に
   ================================================================ */

.top-btn,
.top-column-card,
.top-area-btn,
.top-news-item,
.top-contact-cta__btn--tel,
.top-contact-cta__btn--doc {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.top-plan-card__btn span {
  transition: background-color 0.15s ease;
}

/* --- Solid ボタン (gold / navy / plan color) --- */
.top-btn:hover,
.top-btn:focus-visible,
.top-contact-cta__btn--tel:hover,
.top-contact-cta__btn--tel:focus-visible {
  background: color-mix(in srgb, var(--top-gold) 88%, #000);
}

.top-contact-cta__btn--doc:hover,
.top-contact-cta__btn--doc:focus-visible {
  background: color-mix(in srgb, var(--top-navy) 88%, #000);
}

.top-plan-card__btn:hover span,
.top-plan-card__btn:focus-visible span {
  background: color-mix(in srgb, var(--top-plan-color, var(--top-plan02)) 88%, #000);
}

/* --- White outline カード ---
   プランカード内リンク (__name / __img) は個別 hover させず、
   .top-plan-card 全体の hover (下記) に一本化する。 */
.top-column-card:hover,
.top-column-card:focus-visible {
  background: #f5fbff;
  transform: translateY(-1px);
}

/* --- プランカード全体 (is-featured 含む) ---
   カード内リンク hover と同じ規約 (tint + translateY(-1px))。
   background はプランカラー 8% tint が base のため 12% に深める。 */
.top-plan-card {
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.top-plan-card:hover,
.top-plan-card:focus-within {
  background: color-mix(in srgb,
      var(--top-plan-color, var(--top-plan02)) 12%,
      #fff);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.top-plan-card.is-featured:hover,
.top-plan-card.is-featured:focus-within {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}

/* --- White chip (エリア選択) --- */
.top-area-btn:hover,
.top-area-btn:focus-visible {
  background: #f7f1d8;
  transform: translateY(-1px);
}

/* --- リスト行 (ニュース) --- */
.top-news-item:hover,
.top-news-item:focus-visible {
  background: #faf8f0;
}

/* --- お知らせタブ (お知らせ / イベント / オープン) ---
   is-active でない tab のみ hover 反応させる。
   active tab は既に navy-light の背景なので hover は無効。 */
.top-news__tab {
  transition: background-color 0.15s ease;
}

.top-news__tab:not(.is-active):hover,
.top-news__tab:not(.is-active):focus-visible {
  background: color-mix(in srgb, var(--top-navy-light) 50%, #fff);
}

/* --- Alert (details/summary) 「必ずご確認ください」 ---
   summary の hover を検知して wrapper 側の coral 背景を darken。
   :has() を使うことで、開いた状態でも panel (白背景) には影響しない。 */
.top-area-alert {
  transition: background-color 0.15s ease;
}

.top-area-alert:has(.top-area-alert__summary:hover),
.top-area-alert:has(.top-area-alert__summary:focus-visible) {
  background: color-mix(in srgb, var(--top-coral) 88%, #000);
}

/* --- PC 専用要素 (火葬バナー / サイド CTA) --- */
@media (min-width: 1024px) {
  .top-crematebnr__inner,
  .top-side-cta__btn {
    transition: background-color 0.15s ease, transform 0.15s ease;
  }

  .top-crematebnr__inner:hover,
  .top-crematebnr__inner:focus-visible {
    transform: translateY(-1px);
  }

  .top-side-cta__btn:hover,
  .top-side-cta__btn:focus-visible {
    transform: translateY(-1px);
  }
}

/* ================================================================
   Narrow SP layout (≤420px): 左右 padding の二重加算を抑える
   .top-features は base で padding: 64px 20px を持つため、
   その中に埋め込まれた .area-search-2026 が独自に 20px 追加すると
   合計 40px の二重 padding になる。カセットにゴールド枠
   (border 2px #bfa848) が付いたため 0 ではなく 12px を確保し、
   文字が枠に接しないようにする。
   ================================================================ */
@media (max-width: 420px) {
  .top-features .area-search-2026 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ゴールド枠は TOP のカセットのみ (/area/ 等の全幅ページは枠なしのため
   base ではなくここで付与)。外側余白は .top-features の padding (64px 20px) が担う。
   margin-top は特徴03 (式場イラスト) とカセットの間隔 60px (PC/SP 共通) */
.top-features .area-search-2026 {
  border: 2px solid #bfa848;
  border-radius: 12px;
  margin-top: 60px;
}