@charset "UTF-8";

/* ==========================================================
   コープの家族葬 別邸 ページ用CSS
   ・既存サイトのCSSと干渉しないよう、すべて「.bettei」から始まるセレクタで書く
   ・背景画像は url(../img/bettei/〜) で書く
   ・デザイン基準幅 1400px（bettei.svg）。値はSVG実値をpxで記述（既存サイトに準拠）
   ========================================================== */

/* ----------------------------------------------------------
   0. ページ土台
   既存 common_new.css の「body *{font-size:16px; line-height:1.7; font-family}」が
   全要素に直接当たるため、.bettei 配下は継承に戻してから値を指定する
---------------------------------------------------------- */
.bettei {
  --c-main: #01729f;
  /* メイン（ブランド青） */
  --c-main-pale: #f0f7f9;
  /* メインの極薄色（帯・カード背景） */
  --c-accent: #ffe36e;
  /* アクセント（黄） */
  --f-num: "DIN Alternate", "DINAlternate-Bold", "Oswald", sans-serif;
  --f-en: "Avenir Next", "Lato", sans-serif;

  color: #000;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  text-spacing-trim: space-all;
  /* 約物（）、。を詰めない＝デザインどおり全角幅 */
}

.bettei * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* 既存 common_new.css の body 背景（丸い装飾）をこのページだけ消す
   ※WPでは本文(div.bettei)のみ差し込むため、body クラスに依存せず :has() で判定 */
body:has(.bettei) {
  background: none;
}

body:has(.bettei)::before {
  content: none;
}

/* 既存テーマのヘッダー下線（#header の border-bottom）をこのページだけ消す（デザインに線なし）
   ※スクロール時の固定ヘッダーの影（既存の shadow_animation）は残す */
body:has(.bettei) #header {
  border-bottom: none;
}

/* PC/SPの出し分け（このページ内だけで使う） */
.bettei .u-sp-only {
  display: none;
}

/* SP用のセクションラベル・「もっと見る」はPCでは出さない */
.bettei .sec-label,
.bettei .plan-items__more {
  display: none;
}

/* 見出しの読み上げ用テキスト（画面には出さない） */
.bettei .u-visually-hidden {
  position: absolute;
  /* 読み上げ専用：レイアウトから外すため */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bettei img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   1. FV
---------------------------------------------------------- */
.bettei .sec-fv {
  padding: 0;
}

.bettei .fv-inner {
  display: flex;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 40px;
  /* 既存ヘッダー（下線なしで高さ110px）下からデザインのFV開始位置（y=150）まで */
}

.bettei .fv-body {
  flex: 0 0 524px;
  margin-left: 97px;
  padding-top: 17px;
}

.bettei .fv-logo {
  margin: 0;
  padding: 0 0 31px 70px;
  border-bottom: 2px solid var(--c-main-pale);
}

.bettei .fv-logo__tit {
  margin: 0;
}

.bettei .fv-logo__main {
  width: 392px;
}

.bettei .fv-logo__from {
  display: flex;
  margin-bottom: 0;
  align-items: center;
  gap: 9px;
  margin-top: -4px;
  color: #006e40;
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

.bettei .fv-logo__from img {
  width: 36px;
}

.bettei .fv-catch {
  margin: 29px 0 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
}

.bettei .fv-catch span {
  margin: 0 4px;
  color: var(--c-main);
  font-size: 39px;
  letter-spacing: 0;
}

.bettei .fv-lead {
  margin: 26px 0 0;
  padding: 20px 0 24px;
  border-radius: 32px;
  background: var(--c-main-pale);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* 写真：右端はコンテンツ幅（1400px）まで */
.bettei .fv-img {
  flex: 1 1 auto;
  min-width: 0;
  height: 364px;
  /* 画像枠＝固定サイズが本質 */
  margin-left: 68px;
  overflow: hidden;
  border-top-left-radius: 40px;
}

/* 画像はデザインの表示範囲で書き出し済み。枠が狭い幅ではcoverで切り抜く */
.bettei .fv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   2. FV下 電話バナー
---------------------------------------------------------- */
.bettei .sec-fv-tel {
  padding: 60px 0;
  background: var(--c-main-pale);
}

.bettei .tel-banner {
  display: flex;
  align-items: center;
  width: 717px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  background: var(--c-main);
  color: #fff;
  text-decoration: none;
}

/* 左ラベル：右側が矢羽根状の白地 */
.bettei .tel-banner__label {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 175px;
  padding: 20px 0;
  background: #fff;
  clip-path: polygon(0 0, 153px 0, 175px 50%, 153px 100%, 0 100%);
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}

.bettei .tel-banner__num {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: var(--c-accent);
  font-family: var(--f-num);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.bettei .tel-banner__ico {
  flex-shrink: 0;
  width: 46.6px;
  height: 50.8px;
  margin: 6px 7.7px 0 0;
}

.bettei .tel-banner__note {
  margin-left: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

/* ----------------------------------------------------------
   3. プラン概要カード
---------------------------------------------------------- */
.bettei .sec-plan-summary {
  padding: 100px 20px;
  background: #f4f4f3;
}

.bettei .plan-card {
  width: 728px;
  max-width: 100%;
  margin: 0 auto;
  padding: 37px 42.5px 43px;
  border-radius: 60px;
  background: #fff;
  color: #211e1c;
}

.bettei .plan-card__head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
}

.bettei .plan-card__tit {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
}

.bettei .plan-card__badge {
  width: 282px;
  padding: 14px 0;
  border-radius: 10px;
  background: #f4f4f3;
  color: #000;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

/* 価格：数字は欧文書体。各要素のベースライン差はデザイン実値（vertical-align） */
.bettei .plan-price {
  margin: 6.5px 0 0 1px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.bettei .plan-price__num {
  color: var(--c-main);
  font-family: var(--f-num);
  font-size: 100px;
  font-weight: 700;
}

.bettei .plan-price__yen {
  color: var(--c-main);
  font-size: 62px;
  vertical-align: 3.5px;
}

.bettei .plan-price__tax {
  margin-left: -5px;
  font-size: 18px;
  vertical-align: 5px;
}

.bettei .plan-price__in-num {
  margin-left: 2px;
  font-family: var(--f-num);
  font-size: 38px;
  font-weight: 700;
  vertical-align: 2px;
}

.bettei .plan-price__in-yen {
  margin-left: 1px;
  font-size: 26px;
  vertical-align: 4.5px;
}

.bettei .plan-price__tax--in {
  margin-left: -8px;
  vertical-align: 4.5px;
}

.bettei .plan-card__inc {
  margin: 9.5px 0 0;
  padding: 17px 0;
  border-radius: 10px;
  background: var(--c-main-pale);
  color: #000;
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
}

.bettei .plan-card__note {
  margin: 27px 0 0;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
}

/* 矢印付きボタン（「プラン詳細はこちら」「斎場の詳細を見る」共通） */
.bettei .btn-more {
  display: flex;
  align-items: center;
  width: 347px;
  max-width: 100%;
  margin: 30px auto 0;
  padding: 16px 17.7px 17px 23px;
  border-radius: 10px / 12px;
  background: var(--c-main);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.bettei .btn-more__txt {
  flex: 1;
  text-align: center;
}

.bettei .btn-more__arrow {
  flex-shrink: 0;
  width: 18.7px;
  height: 15.5px;
}

/* ----------------------------------------------------------
   共通：セクション見出し（下に短いバー）／英字サークル
---------------------------------------------------------- */
.bettei .sec-tit {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.bettei .sec-tit::after {
  content: "";
  display: block;
  width: 26.5px;
  height: 5px;
  margin: 19.5px auto 0;
  border-radius: 2.5px;
  background: var(--c-main);
}

.bettei .sec-tit--white {
  color: #fff;
}

.bettei .sec-tit--white::after {
  background: #fff;
}

/* 英字サークル：写真・カードの角に重ねる装飾（重ね合わせが本質のため absolute） */
.bettei .en-circle {
  position: absolute;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  font-family: var(--f-en);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.bettei .en-circle--pale {
  background: var(--c-main-pale);
  color: var(--c-main);
}

.bettei .en-circle--line {
  border: 2px solid var(--c-main);
  color: var(--c-main);
}

.bettei .en-circle--yellow {
  background: var(--c-accent);
  color: #211e1c;
}

/* ----------------------------------------------------------
   4. コンセプト
---------------------------------------------------------- */
.bettei .sec-concept {
  padding: 119.5px 20px 0;
}

.bettei .concept-lead {
  margin: 28.5px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0.03em;
  text-align: center;
}

.bettei .concept-photos {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 47px;
}

/* 英字サークルは画面幅が狭いとき画面外に出ないよう、画面端から24px内側で止める */
.bettei .concept-photos__en {
  top: -80px;
  left: max(calc(50% - 423px), -4px);
  width: 134px;
  height: 134px;
}

.bettei .concept-photo {
  position: relative;
  z-index: 1;
  width: 329px;
  padding: 6px;
  border-radius: 23px;
  background: var(--c-main-pale);
}

.bettei .concept-photo img {
  width: 100%;
  aspect-ratio: 317 / 209;
  object-fit: cover;
  border-radius: 17px;
}

/* ----------------------------------------------------------
   5. 3つの特徴
---------------------------------------------------------- */
.bettei .sec-features {
  padding: 130.5px 20px 123px;
}

.bettei .feature-wrap {
  position: relative;
  width: 1000px;
  max-width: 100%;
  margin: 38.5px auto 0;
}

.bettei .feature-wrap__en {
  top: -104px;
  right: max(-42px, calc(24px - (100vw - 100%) / 2));
}

.bettei .feature-list {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bettei .feature-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 309px;
}

.bettei .feature-card__ico {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  /* 装飾タブ＝固定サイズ */
  border-radius: 20px 20px 0 0;
  background: var(--c-main-pale);
  color: var(--c-main);
}

.bettei .ico-house {
  width: 41px;
  height: 38px;
}

.bettei .ico-yen {
  width: 37px;
  height: 37px;
}

.bettei .ico-clock {
  width: 36px;
  height: 36px;
}

.bettei .feature-card__body {
  flex: 1;
  margin-top: 7px;
  padding: 29px 38px 29px;
  border-radius: 0 0 20px 20px;
  background: #f4f4f3;
}

/* 見出しブロックはカード内で左右中央、2行の文字は左揃え */
.bettei .feature-card__tit {
  width: fit-content;
  margin: 0 auto;
  color: var(--c-main);
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0.03em;
}

.bettei .feature-card__tit--center {
  text-align: center;
}

.bettei .feature-card__txt {
  margin: 9px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.03em;
}

/* セクション見出し下のサブ見出し */
.bettei .sec-sub {
  margin: 36.5px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.bettei .sec-sub--white {
  color: #fff;
}

/* ----------------------------------------------------------
   6. こんな方に
---------------------------------------------------------- */
.bettei .sec-recommend {
  padding: 116.5px 20px 114px;
  background: var(--c-main-pale);
}

.bettei .recommend-wrap {
  position: relative;
  width: 687px;
  max-width: 100%;
  margin: 30.5px auto 0;
}

.bettei .recommend-wrap__en {
  top: -115px;
  left: max(-73px, calc(24px - (100vw - 100%) / 2));
  width: 146px;
  height: 146px;
  background: var(--c-main);
  color: #fff;
}

.bettei .recommend-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bettei .recommend-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 28px;
  background: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
}

.bettei .ico-check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

/* ----------------------------------------------------------
   7. 別邸専用プラン（詳細）
---------------------------------------------------------- */
.bettei .sec-plan {
  padding: 104.5px 20px 120px;
  background: var(--c-main);
}

.bettei .plan-detail {
  position: relative;
  width: 1000px;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 54px 53px 54px 54px;
  border-radius: 60px;
  background: #fff;
  color: #211e1c;
}

.bettei .plan-detail__en {
  z-index: 2;
  top: -95px;
  right: 0;
}

.bettei .plan-detail__price {
  padding: 30.5px 0 29px;
  border-radius: 40px 40px 10px 10px;
  background: var(--c-main-pale);
}

.bettei .plan-card__badge--white {
  width: 287px;
  background: #fff;
}

.bettei .plan-price--lg {
  margin: 11.5px 0 0;
  padding: 0 0 0 101px;
}

.bettei .plan-price--lg .plan-price__num {
  font-size: 107px;
}

.bettei .plan-price--lg .plan-price__yen {
  margin-left: 2.8px;
  font-size: 66px;
  vertical-align: 6.4px;
}

.bettei .plan-price--lg .plan-price__tax {
  margin-left: -6.6px;
  font-size: 19px;
  vertical-align: 6.4px;
}

.bettei .plan-price--lg .plan-price__in-num {
  margin-left: 8.4px;
  font-size: 40px;
  vertical-align: 1.7px;
}

.bettei .plan-price--lg .plan-price__in-yen {
  margin-left: 3.9px;
  font-size: 27px;
  vertical-align: 4.4px;
}

.bettei .plan-price--lg .plan-price__tax--in {
  margin-left: -8px;
  vertical-align: 3.8px;
}

/* 見出し左右の線 */
.bettei .plan-detail__tit {
  display: flex;
  align-items: center;
  margin: 42px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.bettei .plan-detail__tit::before,
.bettei .plan-detail__tit::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--c-main);
}

.bettei .plan-detail__tit::before {
  margin-right: 21.5px;
}

.bettei .plan-detail__tit::after {
  margin-left: 16px;
}

.bettei .plan-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 291px));
  justify-content: space-between;
  row-gap: 10px;
  margin: 33px 0 0;
  padding: 0;
  list-style: none;
}

.bettei .plan-item {
  display: flex;
  align-items: center;
  min-height: 80px;
  border-radius: 6px;
  background: #f4f4f3;
}

.bettei .plan-item:nth-child(n + 13) {
  margin-top: 1px;
}

.bettei .plan-item__img {
  flex-shrink: 0;
  width: 105px;
  height: 80px;
  /* 写真枠＝固定サイズ */
  overflow: hidden;
  border-radius: 6px 0 0 6px;
}

.bettei .plan-item__img img {
  width: 100%;
  height: 100%;
}

.bettei .plan-item__txt {
  margin: 0 0 0 21px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
}

.bettei .plan-item--2line .plan-item__txt {
  line-height: 24px;
  letter-spacing: 0;
}

.bettei .plan-item__sub {
  display: block;
  margin-left: -11px;
}

.bettei .plan-detail__option {
  margin: 29px 0 0;
  padding: 20px 15px 21px 0;
  border: 2px solid var(--c-main);
  border-radius: 31.5px;
  color: var(--c-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* ----------------------------------------------------------
   8. 対象斎場
---------------------------------------------------------- */
.bettei .sec-hall {
  padding: 109.5px 20px 110px;
}

.bettei .hall-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 838px;
  max-width: 100%;
  margin: 37px auto 0;
  padding: 39px 38px 37px 37px;
  border-radius: 20px;
  background: var(--c-main-pale);
}

.bettei .hall-box__en {
  z-index: 2;
  top: -61px;
  left: max(-46px, calc(24px - (100vw - 100%) / 2));
}

.bettei .hall-box__img {
  flex-shrink: 0;
  width: 382px;
  height: 281px;
  /* 写真枠＝固定サイズ */
  overflow: hidden;
  border-radius: 10px;
}

.bettei .hall-box__img img {
  width: 100%;
  height: 100%;
}

.bettei .hall-box__body {
  flex: 1;
  min-width: 0;
  margin-left: 30px;
}

.bettei .hall-box__name {
  margin: 1px 0 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #707070;
  font-size: 28px;
  font-weight: 600;
  line-height: 43px;
  letter-spacing: 0.03em;
}

.bettei .hall-info {
  margin: 18.5px 0 0 2px;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.03em;
}

.bettei .hall-info__row {
  display: flex;
}

.bettei .hall-info dt {
  width: 74px;
  text-align-last: justify;
}

.bettei .hall-info dd {
  margin: 0;
}

.bettei .btn-more--hall {
  margin: 47px 0 0 4px;
  padding-left: 8.5px;
}

/* ----------------------------------------------------------
   9. 別邸での過ごし方・流れ
---------------------------------------------------------- */
.bettei .sec-flow {
  padding: 151.5px 20px 114px;
  background: #f4f4f3;
}

.bettei .flow-wrap {
  position: relative;
  width: 871px;
  max-width: 100%;
  margin: 40px auto 0;
}

.bettei .flow-wrap__en {
  top: -99px;
  /* 円はカードの背面（カードが上に重なる） */
  right: max(-46px, calc(24px - (100vw - 100%) / 2));
}

.bettei .flow-list {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bettei .flow-step {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  color: #2b2220;
}

/* ステップ間の▼（後半は濃い青） */
.bettei .flow-step+.flow-step {
  margin-top: 63px;
}

.bettei .flow-step:not(:last-child) {
  position: relative;
}

.bettei .flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* カード間の矢印＝カードに付随する装飾 */
  top: calc(100% + 15px);
  left: calc(50% - 45px);
  width: 90px;
  height: 33px;
  background: var(--c-main);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.bettei .flow-step:nth-child(n + 4):not(:last-child)::after {
  background: #014a9f;
}

/* 本文が長いステップはカードが伸びるため、ラベルもカードの高さまで伸ばす */
.bettei .flow-step__label {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  width: 80px;
  overflow: hidden;
  border-radius: 10px;
  text-align: center;
}

/* 欧文書体は字面が上下非対称のため、字面（数字の上端〜下端）が上下中央に来る位置で余白を調整 */
.bettei .flow-step__num {
  padding: 10px 0 9px;
  background: var(--c-main-pale);
  font-family: var(--f-en);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.bettei .flow-step__when {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 129px;
  background: var(--c-main);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.02em;
}

.bettei .flow-step--day .flow-step__num {
  background: rgba(1, 74, 159, 0.2);
}

.bettei .flow-step--day .flow-step__when {
  background: #014a9f;
  letter-spacing: 0.03em;
}

.bettei .flow-step__body {
  flex: 1;
  min-width: 0;
  margin: 13.5px 0 0 18px;
}

.bettei .flow-step__tit {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.bettei .flow-step__txt {
  margin: 11.5px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.bettei .flow-step__img {
  flex-shrink: 0;
  width: 235px;
  height: 156px;
  /* 写真枠＝固定サイズ */
  margin-left: 34px;
  overflow: hidden;
  border-radius: 10px;
}

.bettei .flow-step__img img {
  width: 100%;
  height: 100%;
}

.bettei .flow-note {
  margin: 34px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------
   10. よくあるご質問
---------------------------------------------------------- */
.bettei .sec-faq {
  padding: 119.5px 20px 120px;
}

/* デザインはFAQ見出しのみ中心が1px左 */
.bettei .sec-faq .sec-tit {
  transform: translateX(-1px);
}

.bettei .sec-sub--faq {
  margin-top: 39.5px;
  font-weight: 500;
  transform: translateX(-1px);
}

.bettei .faq-wrap {
  position: relative;
  width: 883px;
  max-width: 100%;
  margin: 47px auto 0;
}

.bettei .faq-wrap__en {
  top: -107px;
  left: max(-48px, calc(24px - (100vw - 100%) / 2));
  background: #014a9f;
  color: #fff;
}

.bettei .faq-list {
  position: relative;
  z-index: 1;
  margin: 0;
}

.bettei .faq-item+.faq-item {
  margin-top: 40px;
}

.bettei .faq-item__q {
  display: flex;
  margin: 0;
  align-items: flex-start;
  padding: 18.5px 20px 18.5px 18.5px;
  border: 1.5px solid var(--c-main);
  border-radius: 10px 10px 0 0;
  background: #fff;
  color: #211e1c;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.bettei .faq-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-main);
  color: #fff;
  font-family: var(--f-num);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.bettei .faq-item__qtxt {
  margin: 9.5px 0 0 7px;
}

.bettei .faq-item__a {
  margin: 0;
  padding: 15px 25px 15px 26px;
  border-radius: 0 0 10px 10px;
  background: var(--c-main-pale);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.bettei .faq-item__a p {
  margin: 0;
}

.bettei .faq-item__a .faq-item__link {
  margin: 14px 0 17px;
  color: var(--c-main);
  font-weight: 600;
  line-height: 1;
}

.bettei .faq-item__link a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5.5px;
}

/* ----------------------------------------------------------
   11. 別邸の詳細はこちら（お問い合わせ）
---------------------------------------------------------- */
.bettei .sec-contact {
  padding: 119.5px 20px 117px;
  background: var(--c-main);
}

.bettei .contact-box {
  position: relative;
  width: 1086px;
  max-width: 100%;
  margin: 34px auto 0;
  padding: 0 0 47px;
  border: 6px solid #005a7e;
  border-radius: 43px;
  background: #fff;
}

.bettei .contact-box__en {
  z-index: 2;
  top: -64px;
  right: max(-29px, calc(24px - (100vw - 100%) / 2));
  color: #000;
}

.bettei .contact-box__tit {
  margin: 47px 0 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.bettei .contact-box__tit span {
  color: var(--c-main);
}

.bettei .contact-box__txt {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.bettei .contact-btns {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 36px;
}

.bettei .contact-btn {
  display: flex;
  align-items: center;
  width: 460px;
  min-height: 102px;
  border-radius: 51px;
  text-decoration: none;
}

.bettei .contact-btn--tel {
  padding-left: 62px;
  background: var(--c-accent);
  color: #000;
}

.bettei .contact-btn--web {
  padding: 0 21px 0 28px;
  background: var(--c-main);
  color: #fff;
}

.bettei .contact-btn__ico--tel {
  flex-shrink: 0;
  width: 74px;
  height: 64px;
  margin: 5px -9px 0 0;
}

.bettei .contact-btn__tel {
  display: flex;
  flex-direction: column;
}

.bettei .contact-btn__num {
  font-family: var(--f-num);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.bettei .contact-btn__note {
  margin: 1px 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.bettei .contact-btn__ico--mail {
  flex-shrink: 0;
  width: 50px;
  height: 53px;
  margin-top: -5px;
}

.bettei .contact-btn__web {
  margin: 4px 0 0 9px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.bettei .contact-btn__arrow {
  flex-shrink: 0;
  width: 26px;
  height: 18px;
  margin-left: auto;
}

/* ==========================================================
   タブレット〜小さめPC（768〜1199px）
   ※既存サイトと同じく段組みを保ったまま幅に合わせて縮める（SPには影響させない）
   ========================================================== */
@media screen and (min-width: 768px) and (max-width: 1199px) {

  /* FV：左カラム・余白を幅に比例させ、写真が細くならないようにする */
  .bettei .fv-body {
    flex: 0 0 46%;
    margin-left: 4%;
  }

  .bettei .fv-logo {
    padding-left: 0;
  }

  .bettei .fv-logo__tit {
    width: fit-content;
    margin: 0 auto;
  }

  .bettei .fv-catch {
    font-size: 29px;
  }

  .bettei .fv-catch span {
    font-size: 33px;
  }

  .bettei .fv-lead {
    font-size: 18px;
  }

  .bettei .fv-img {
    margin-left: 4%;
  }

  /* 特徴カード */
  .bettei .feature-card__body {
    padding: 26px 22px;
  }

  .bettei .feature-card__tit {
    font-size: 21px;
    line-height: 36px;
  }

  .bettei .feature-card__txt {
    font-size: 15px;
    line-height: 28px;
  }

  /* 問い合わせボタン：2つ並びのまま枠内に収める */
  .bettei .contact-box {
    padding: 0 30px 47px;
  }

  .bettei .contact-btns {
    gap: 20px;
  }

  .bettei .contact-btn {
    flex: 1 1 0;
    width: auto;
    max-width: 460px;
  }

  .bettei .contact-btn--tel {
    justify-content: center;
    padding-left: 0;
  }

  .bettei .contact-btn__web {
    font-size: 24px;
  }
}

/* ==========================================================
   タブレット（768〜991px）
   ========================================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* FV：縦積み（ロゴ・コピー → 写真） */
  .bettei .fv-inner {
    flex-direction: column;
  }

  .bettei .fv-body {
    flex: none;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .bettei .fv-img {
    flex: none;
    width: calc(100% - 40px);
    height: auto;
    margin: 32px 0 0 40px;
    aspect-ratio: 711 / 364;
  }

  /* 特徴カード：3列のまま文字を小さく */
  .bettei .feature-list {
    gap: 16px;
  }

  .bettei .feature-card__body {
    padding: 22px 16px;
  }

  .bettei .feature-card__tit {
    font-size: 18px;
    line-height: 30px;
  }

  .bettei .feature-card__txt {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.02em;
  }

  /* プラン概要カード */
  .bettei .plan-card {
    padding-right: 30px;
    padding-left: 30px;
  }

  /* プラン詳細：価格は税込を2行目へ、品目は2列 */
  .bettei .plan-detail {
    padding: 40px 30px;
  }

  .bettei .plan-detail__price {
    padding-bottom: 24px;
  }

  .bettei .plan-price--lg {
    padding: 0;
    text-align: center;
    white-space: normal;
  }

  .bettei .plan-price--lg .plan-price__in {
    display: block;
    margin-top: 4px;
  }

  .bettei .plan-price--lg .plan-price__in-num {
    margin-left: 0;
  }

  .bettei .plan-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }

  .bettei .plan-detail__option {
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.6;
  }

  /* 対象斎場：写真と文字の比率を保って横並び */
  .bettei .hall-box {
    padding: 30px;
  }

  .bettei .hall-box__img {
    flex: 0 0 45%;
    height: auto;
    aspect-ratio: 382 / 281;
  }

  .bettei .hall-box__body {
    margin-left: 24px;
  }

  .bettei .hall-box__name {
    margin-top: 0;
    font-size: 22px;
    line-height: 1.6;
  }

  .bettei .hall-info {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.8;
  }

  .bettei .hall-info dt {
    flex-shrink: 0;
    width: 66px;
  }

  .bettei .btn-more--hall {
    width: 100%;
    margin: 24px 0 0;
  }

  /* 流れ：写真を少し小さく */
  .bettei .flow-step__img {
    width: 200px;
    height: 133px;
    margin-left: 24px;
  }

  .bettei .flow-step__txt {
    font-size: 15px;
    line-height: 26px;
  }

  /* 英字サークル：見出し・サブ見出しの文字に重ならないよう小さくして上へ逃がす */
  .bettei .en-circle {
    width: 100px;
    height: 100px;
    font-size: 13px;
  }

  .bettei .recommend-wrap__en {
    top: -88px;
  }

  .bettei .plan-detail__en {
    top: -64px;
  }

  /* プラン見出しのサブ文言が右の円に重ならないよう2行に */
  .bettei .sec-sub--white {
    padding: 0 90px;
    line-height: 1.5;
    word-break: auto-phrase;
  }

  /* 問い合わせ：見出しは2行、ボタンを縦積み */
  .bettei .contact-box__tit {
    font-size: 26px;
    line-height: 1.5;
  }

  .bettei .contact-box__tit span {
    display: block;
  }

  .bettei .contact-box__txt {
    font-size: 15px;
    line-height: 1.7;
  }

  .bettei .contact-btns {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .bettei .contact-btn {
    flex: none;
    width: 100%;
  }
}

@media (hover: hover) and (pointer: fine) {

  .bettei .tel-banner,
  .bettei .btn-more,
  .bettei .contact-btn,
  .bettei .faq-item__link a {
    transition: opacity 0.3s;
  }

  .bettei .tel-banner:hover,
  .bettei .btn-more:hover,
  .bettei .contact-btn:hover,
  .bettei .faq-item__link a:hover {
    opacity: 0.8;
  }
}

/* ==========================================================
   SP（767px以下）
   ※SPデザイン（bettei_sp.svg／基準幅400px）の実値。テキスト・写真はPCと共通のHTML
   ========================================================== */
@media screen and (max-width: 767px) {

  /* --- 共通 --- */
  .bettei .u-pc-only {
    display: none;
  }

  .bettei .u-sp-only {
    display: revert;
  }

  /* 英字は円ではなく、見出しの上のラベルで出す */
  .bettei .en-circle {
    display: none;
  }

  .bettei .sec-label {
    display: block;
    width: 153px;
    margin: 0 auto 13px;
    border-radius: 17.5px;
    background: var(--c-main-pale);
    color: var(--c-main);
    font-family: var(--f-en);
    font-size: 16px;
    font-weight: 600;
    line-height: 35px;
    text-align: center;
  }

  .bettei .sec-label--yellow {
    background: var(--c-accent);
    color: #000;
  }

  .bettei .sec-label--white {
    background: #fff;
    color: #000;
  }

  .bettei .sec-tit {
    font-size: 24px;
    line-height: 38px;
    word-break: auto-phrase;
  }

  /* デザインは長さ24.7pxの線＋丸い端（左右2.5px）＝全長29.7px */
  .bettei .sec-tit::after {
    width: 29.7px;
    height: 5px;
    margin-top: 13px;
  }

  .bettei .sec-sub {
    margin-top: 26.5px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    word-break: auto-phrase;
  }

  /* --- FV --- */
  /* 左上の薄い背景はデザインどおりページ最上部（ヘッダーの裏）から敷く。
     既存ヘッダーは最上部では透明で、スクロールで固定されたときだけ白地が出るため、隠れない */
  body:has(.bettei) {
    background: url(../img/bettei/fv_bg_sp.svg) no-repeat left top / 100% auto;
  }

  /* ロゴ → 写真 → コピーの順に並べ替える */
  .bettei .fv-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 20px 0;
  }

  .bettei .fv-body {
    display: contents;
  }

  .bettei .fv-logo {
    order: 1;
    padding: 0 0 0 21px;
    border-bottom: 0;
  }

  .bettei .fv-logo__tit {
    margin: 0;
  }

  .bettei .fv-logo__main {
    width: 320px;
    margin: 0;
  }

  .bettei .fv-logo__from {
    gap: 5px;
    margin-top: 1.5px;
    font-size: 18px;
  }

  /* デザインはマークが文字より少し上（行の高さは変えずに見た目だけ上げる） */
  .bettei .fv-logo__from img {
    width: 29.4px;
    translate: 0 -8px;
  }

  .bettei .fv-img {
    order: 2;
    flex: none;
    width: 100%;
    height: auto;
    margin: 29.5px 0 0;
    border-radius: 30px 30px 10px 10px;
    aspect-ratio: 360 / 227;
  }

  .bettei .fv-img img {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .bettei .fv-catch {
    order: 3;
    margin: 10px 0 0;
    padding: 28px 0 25px;
    border-radius: 10px 10px 0 0;
    background: var(--c-main-pale);
    font-size: 34px;
    letter-spacing: 0.03em;
  }

  .bettei .fv-catch span {
    display: inline-block;
    margin: 14px 3px 0 0;
    padding: 10px 15px;
    border-radius: 10px;
    background: var(--c-main);
    color: #fff;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0;
  }

  .bettei .fv-lead {
    order: 4;
    margin: 0;
    padding: 0 0 31px;
    border-radius: 0 0 30px 30px;
    background: var(--c-main-pale);
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.06em;
  }

  /* コピーとリードの間の白線 */
  .bettei .fv-lead::before {
    content: "";
    display: block;
    height: 2px;
    margin: 0 21px 17px;
    background: #fff;
  }

  /* --- FV下 電話バナー --- */
  .bettei .sec-fv-tel {
    padding: 40px 20px;
    background: none;
  }

  .bettei .tel-banner {
    display: block;
    width: auto;
    max-width: none;
    padding: 17px 17px 19px;
    border-radius: 20px;
    background: var(--c-accent);
    color: #000;
    text-align: center;
  }

  /* デザイン（W6）の見た目に合わせ、ブラウザでは700で表示。デザインは中心が4px右 */
  .bettei .tel-banner__label {
    display: block;
    padding: 0 0 0 8px;
    background: none;
    clip-path: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .bettei .tel-banner__num {
    justify-content: center;
    gap: 2px;
    margin: 11px 0 0;
    color: #000;
    font-family: inherit;
    font-size: min(43px, calc((100vw - 124px) / 6));
    /* 400px未満の端末でも1行に収める */
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* アイコンと「電話をかける」の間を詰める（アイコン画像の右側の余白ぶん食い込ませる） */
  /* SP専用の電話アイコン（デザインの48×44枠をそのまま書き出し） */
  .bettei .tel-banner__ico {
    width: 48px;
    height: auto;
    margin: 0;
  }

  .bettei .tel-banner__note {
    display: block;
    margin: 10px 0 0;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 0.03em;
  }

  /* --- プラン概要カード／プラン詳細の価格 共通 --- */
  .bettei .plan-card__head {
    flex-direction: column;
    gap: 13px;
  }

  .bettei .plan-card__tit {
    font-size: 32px;
  }

  .bettei .plan-card__badge,
  .bettei .plan-card__badge--white {
    width: 100%;
    padding: 0;
    background: #f4f4f3;
    font-size: 18px;
    line-height: 42px;
    letter-spacing: 0.03em;
  }

  /* 税抜は数字の右上、税込は次の行に右揃え */
  .bettei .plan-price,
  .bettei .plan-price--lg {
    position: relative;
    width: fit-content;
    margin: 14.5px auto 0;
    padding: 0;
    text-align: right;
    white-space: nowrap;
  }

  .bettei .plan-price__num,
  .bettei .plan-price--lg .plan-price__num {
    font-size: 79px;
  }

  .bettei .plan-price__yen,
  .bettei .plan-price--lg .plan-price__yen {
    margin-left: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: 49px;
    vertical-align: 3px;
  }

  /* 税抜の表記は数字の右上に重ねる（上付きが本質のため absolute） */
  .bettei .plan-price>.plan-price__tax,
  .bettei .plan-price--lg>.plan-price__tax {
    position: absolute;
    top: 7px;
    right: -3px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    vertical-align: 0;
  }

  .bettei .plan-price__in,
  .bettei .plan-price--lg .plan-price__in {
    display: block;
    margin: -2.5px -4px 0 0;
  }

  .bettei .plan-price__in-num,
  .bettei .plan-price--lg .plan-price__in-num {
    margin-left: 0;
    font-size: 32px;
    vertical-align: 0;
  }

  .bettei .plan-price__in-yen,
  .bettei .plan-price--lg .plan-price__in-yen {
    margin-left: 0;
    font-size: 22px;
    vertical-align: 0;
  }

  .bettei .plan-price__tax--in,
  .bettei .plan-price--lg .plan-price__tax--in {
    margin-left: -4px;
    font-size: 14px;
    font-weight: 500;
    vertical-align: 0;
  }

  /* --- プラン概要カード --- */
  .bettei .sec-plan-summary {
    padding: 20px 20px 30px;
  }

  .bettei .plan-card {
    padding: 30px 16px 24px;
    border-radius: 20px;
  }

  .bettei .plan-card__inc {
    margin-top: 20.5px;
    padding: 14px 0;
    border: 2px solid var(--c-main);
    background: #fff;
    color: var(--c-main);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
    /* デザイン（基準幅400px）は20px・枠の左右に14pxずつ余白。400px未満は同じ余白比を保つよう縮める */
    font-size: min(20px, calc((100vw - 100px) / 15));
    letter-spacing: 0;
  }

  .bettei .plan-card__note {
    margin-top: 11px;
    padding-left: calc(17px + 1em);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-indent: -1em;
    text-align: left;
  }

  .bettei .btn-more {
    width: 288px;
    max-width: 100%;
    margin-top: 31px;
    padding: 14.4px 13px 14.4px 31.7px;
    border-radius: 8px;
  }

  /* --- コンセプト --- */
  .bettei .sec-concept {
    padding: 50px 20px 0;
  }

  .bettei .concept-lead {
    margin-top: 21px;
    font-size: 16px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: -0.03em;
    text-align: left;
  }

  /* 写真2枚を左右に互い違いに。右下の灰色の板はデザインどおり影で表現 */
  .bettei .concept-photos {
    display: block;
    margin-top: 19.5px;
  }

  .bettei .concept-photo {
    width: 74.7%;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: none;
    box-shadow: 10px 9px 0 #f4f4f3;
  }

  .bettei .concept-photo+.concept-photo {
    width: 74.4%;
    margin: 29px 11px 0 auto;
    box-shadow: 11px 10px 0 #f4f4f3;
  }

  .bettei .concept-photo img {
    width: 100%;
    border-radius: 0;
    aspect-ratio: auto;
  }

  /* --- 3つの特徴 --- */
  .bettei .sec-features {
    padding: 63px 20px 60px;
  }

  .bettei .feature-wrap {
    margin-top: 25px;
  }

  .bettei .feature-list {
    flex-direction: column;
    gap: 26px;
  }

  /* アイコン＋見出しを薄青のタブに横並び、本文はその下 */
  .bettei .feature-card {
    display: grid;
    grid-template-columns: 77px 1fr;
    flex: none;
    overflow: hidden;
    border-radius: 20px;
    background: #f4f4f3;
  }

  .bettei .feature-card__ico {
    height: auto;
    padding: 18px 0 18px 19px;
    border-radius: 0;
  }

  .bettei .feature-card__ico img {
    width: 58px;
    height: 58px;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
  }

  .bettei .feature-card__body {
    display: contents;
  }

  .bettei .feature-card__tit,
  .bettei .feature-card__tit--center {
    width: auto;
    margin: 0;
    padding: 15px 19px 15px 15px;
    background: var(--c-main-pale);
    font-size: 20px;
    line-height: 32px;
    text-align: left;
  }

  .bettei .feature-card__txt {
    grid-column: 1 / -1;
    margin: 0;
    padding: 11px 19px 16px;
    font-size: 16px;
    line-height: 30px;
  }

  /* --- こんな方に --- */
  .bettei .sec-recommend {
    padding: 60px 20px;
  }

  .bettei .sec-recommend .sec-label {
    background: #fff;
  }

  .bettei .sec-recommend .sec-sub {
    font-size: min(20px, calc((100vw - 40px) / 18));
    /* 1行に収める */
  }

  .bettei .recommend-wrap {
    margin-top: 22px;
  }

  .bettei .recommend-list {
    gap: 10px;
  }

  /* チェックと文の間の縦線は背景で描く */
  .bettei .recommend-item {
    gap: 28px;
    min-height: 81px;
    padding: 0 0 0 14px;
    border-radius: 12px;
    background: #fff linear-gradient(var(--c-main-pale), var(--c-main-pale)) no-repeat 59px center / 2px 58.5px;
    font-size: min(16px, calc((100vw - 114px) / 17.8));
    /* 400px未満でもデザインと同じ位置で改行させる */
    font-weight: 600;
    line-height: 26px;
    word-break: auto-phrase;
  }

  .bettei .ico-check {
    width: 32px;
    height: 32px;
  }

  /* --- 別邸専用プラン（詳細） --- */
  .bettei .sec-plan {
    padding: 60px 20px;
  }

  .bettei .sec-sub--white {
    margin-top: 20px;
    line-height: 34px;
  }

  .bettei .plan-detail {
    margin-top: 21px;
    padding: 30px 16px 17px;
    border-radius: 20px;
  }

  .bettei .plan-detail__price {
    padding: 0;
    border-radius: 0;
    background: none;
  }

  /* デザインは文字間を空けた「葬 儀 費 用」 */
  .bettei .plan-detail .plan-card__tit {
    padding-left: 0.385em;
    letter-spacing: 0.385em;
  }

  .bettei .plan-detail__tit {
    margin-top: 34px;
    font-size: 20px;
  }

  .bettei .plan-detail__tit::before {
    margin-right: 5px;
  }

  .bettei .plan-detail__tit::after {
    margin-left: 5px;
  }

  .bettei .plan-items {
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin-top: 15px;
  }

  /* 最初の4品目だけ表示し、「もっと見る」で残りを開く（高さの動きは js/bettei.js） */
  .bettei .plan-items:not(.is-open) .plan-item:nth-child(n + 5) {
    display: none;
  }

  .bettei .plan-items.is-animating {
    overflow: hidden;
    transition: height 0.4s ease;
  }

  .bettei .plan-item {
    min-height: 68px;
    background: var(--c-main-pale);
  }

  .bettei .plan-item:nth-child(n + 13) {
    margin-top: 0;
  }

  .bettei .plan-item__img {
    width: 89px;
    height: 68px;
    /* 写真枠＝固定サイズ */
  }

  .bettei .plan-item__txt {
    margin-left: 18px;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
  }

  .bettei .plan-item__sub {
    margin-left: -0.5em;
  }

  .bettei .plan-items__more {
    position: relative;
    display: block;
    width: 100%;
    height: 57px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--c-main-pale);
    color: #2b2220;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  /* 右端の＋（開いたら−）。青丸と白線は背景で描く */
  .bettei .plan-items__more::after {
    content: "";
    position: absolute;
    /* ボタン右端に重ねる装飾 */
    top: 11.5px;
    right: 13px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
      linear-gradient(#fff, #fff) no-repeat center / 16.3px 2.5px,
      linear-gradient(#fff, #fff) no-repeat center / 2.5px 16.3px,
      var(--c-main);
  }

  .bettei .plan-items__more[aria-expanded="true"]::after {
    background:
      linear-gradient(#fff, #fff) no-repeat center / 16.3px 2.5px,
      var(--c-main);
  }

  .bettei .plan-detail__option {
    margin-top: 20px;
    padding: 17px 0;
    border-radius: 14px;
    font-size: 16px;
    line-height: 28px;
    word-break: auto-phrase;
  }

  /* --- 対象斎場 --- */
  .bettei .sec-hall {
    padding: 60px 20px 0;
  }

  .bettei .hall-box {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin-top: 27.5px;
    padding: 0 0 17px;
    overflow: hidden;
    border-radius: 14px;
  }

  .bettei .hall-box__img {
    width: 100%;
    height: auto;
    border-radius: 0;
    aspect-ratio: 360 / 231;
  }

  .bettei .hall-box__img img {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .bettei .hall-box__body {
    width: auto;
    margin: 0;
    padding: 24px 27px 0;
  }

  .bettei .hall-box__name {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--c-main);
    font-size: 22px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: 0.06em;
    text-align: center;
  }

  /* 住所・アクセスは1行に収める（400px未満は文字を少し縮める） */
  .bettei .hall-info {
    margin: 11px 0 0 5px;
    font-size: min(16px, calc((100vw - 92px) / 19.25));
    line-height: 32px;
    white-space: nowrap;
  }

  .bettei .hall-info dt {
    flex-shrink: 0;
    width: 4.1em;
  }


  .bettei .btn-more--hall {
    width: auto;
    max-width: none;
    margin: 23px -12px 0;
    padding: 16.4px 13px 16.4px 31.7px;
    border-radius: 9.5px / 12px;
  }

  /* --- 別邸での過ごし方・流れ --- */
  .bettei .sec-flow {
    padding: 61px 20px 0;
    background: none;
  }

  /* 見出しの下から、上だけ角丸の灰色パネル */
  .bettei .flow-wrap {
    width: auto;
    max-width: none;
    margin: 37.5px -20px 0;
    padding: 40px 20px 36px;
    border-radius: 40px 40px 0 0;
    background: #f4f4f3;
  }

  /* 左に細い縦ラベル、右に見出し・本文・写真 */
  .bettei .flow-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      "label body"
      "label img";
    column-gap: 20px;
    align-items: start;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .bettei .flow-step+.flow-step {
    margin-top: 72.7px;
  }

  .bettei .flow-step:not(:last-child)::after {
    top: calc(100% + 20px);
    left: calc(50% - 45px);
    width: 90px;
    height: 33px;
  }

  .bettei .flow-step__label {
    grid-area: label;
    flex-direction: column;
    width: 40px;
    border-radius: 10px;
  }

  /* 番号の背景：前日（1〜4）は白、葬儀当日は薄い紺（下の --day で指定） */
  .bettei .flow-step__num {
    display: block;
    height: 38px;
    background: #fff;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 39.7px;
    /* 字面を上下中央に（行の中心を1.7px下げる） */
    overflow: hidden;
  }

  /* 「前日」「葬儀当日」は縦書き */
  .bettei .flow-step__when {
    flex: 1;
    min-height: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.5em;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .bettei .flow-step--day .flow-step__num {
    background: #ccdbec;
  }

  .bettei .flow-step__when br {
    display: none;
  }

  .bettei .flow-step__body {
    grid-area: body;
    width: auto;
    margin: 0;
  }

  /* 2行になった時のために行間は確保し、1行目の位置はデザインに合わせて詰める */
  .bettei .flow-step__tit {
    margin: -3px 0;
    font-size: 20px;
    line-height: 1.3;
    word-break: auto-phrase;
  }

  .bettei .flow-step__txt {
    margin-top: 9px;
    font-size: 16px;
    line-height: 28px;
  }

  .bettei .flow-step__img {
    grid-area: img;
    width: auto;
    height: auto;
    margin: 18px 0 0 2.5px;
    border-radius: 10px;
    aspect-ratio: 297.5 / 156;
  }

  .bettei .flow-step__img img {
    width: 100%;
    height: 100%;
  }

  .bettei .flow-note {
    margin-top: 30px;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.01em;
  }

  .bettei .flow-note br {
    display: none;
  }

  /* --- よくあるご質問 --- */
  .bettei .sec-faq {
    padding: 60px 20px;
  }

  /* 1行に収まるよう、幅が足りない端末では少しだけ縮める */
  .bettei .sec-sub--faq {
    font-size: min(20px, calc((100vw - 40px) / 18));
  }

  .bettei .faq-wrap {
    width: auto;
    margin-top: 30px;
  }

  .bettei .faq-item+.faq-item {
    margin-top: 20px;
  }

  .bettei .faq-item__q {
    align-items: center;
    min-height: 74px;
    padding: 13.5px 16px 13.5px 17.5px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    line-height: 26px;
  }

  .bettei .faq-item__icon {
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 44px;
  }

  .bettei .faq-item__qtxt {
    margin: 0 0 0 10px;
  }

  .bettei .faq-item__a {
    padding: 12px 20px 15px 19px;
    border-radius: 0 0 8px 8px;
    font-size: 16px;
    line-height: 28px;
  }

  .bettei .faq-item__a .faq-item__link {
    margin: 10px 0 12px;
  }

  /* --- 別邸の詳細はこちら --- */
  .bettei .sec-contact {
    padding: 60px 20px 20px;
    background: #f4f4f3;
  }

  .bettei .sec-contact .sec-tit {
    color: #000;
  }

  .bettei .sec-contact .sec-tit::after {
    background: var(--c-main);
  }

  /* 文言は白いカード、ボタンはカードの下 */
  .bettei .contact-box {
    width: auto;
    margin-top: 26.5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .bettei .contact-box__tit {
    margin: 0;
    padding: 22px 20px 0;
    border-radius: 20px 20px 0 0;
    background: #fff;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0.03em;
  }

  .bettei .contact-box__tit span {
    display: block;
  }

  .bettei .contact-box__txt {
    margin: 0;
    padding: 14.5px 26px 17px;
    border-radius: 0 0 20px 20px;
    background: #fff;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
  }

  .bettei .contact-btns {
    flex-direction: column;
    gap: 25px;
    margin-top: 20px;
  }

  /* ボタンの右下の板はデザインどおり影で表現 */
  .bettei .contact-btn {
    display: grid;
    align-content: center;
    /* 行を上下中央にまとめる（既定のstretchだと行間が開く） */
    justify-content: center;
    align-items: center;
    width: calc(100% - 5px);
    min-height: 97px;
    padding: 0;
    border-radius: 12px;
  }

  /* 両端の1frで余白を吸収し、アイコンと文字を詰めて中央に置く */
  .bettei .contact-btn--tel {
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
      ". ico num ."
      "note note note note";
    column-gap: 4px;
    row-gap: 10px;
    box-shadow: 5px 5px 0 #fffae2;
  }

  .bettei .contact-btn__ico--tel {
    grid-area: ico;
    width: 40px;
    height: auto;
    margin: 0;
  }

  /* 文字はデザイン（W6）の見た目に合わせ、ブラウザでは700で表示（後続の個別指定より優先させるため .contact-btn を付ける） */
  .bettei .contact-btn .contact-btn__num,
  .bettei .contact-btn .contact-btn__note,
  .bettei .contact-btn .contact-btn__web-main,
  .bettei .contact-btn .contact-btn__web-sub {
    font-weight: 700;
  }

  .bettei .contact-btn__tel {
    display: contents;
  }

  .bettei .contact-btn__num {
    grid-area: num;
    font-family: inherit;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  .bettei .contact-btn__note {
    grid-area: note;
    margin: 0;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-align: center;
  }

  /* デザインはアイコンがボタン左端から21pxの位置（中央寄せではない）。
     400px未満はボタン幅に比例して全体を縮め、はみ出さないようにする（係数＝デザイン値÷ボタン幅355） */
  .bettei .contact-btn--web {
    grid-template-columns: min(16px, calc((100vw - 45px) * 0.0451)) auto auto;
    grid-template-areas:
      ". ico main"
      "sub sub sub";
    justify-content: start;
    column-gap: min(5px, calc((100vw - 45px) * 0.0141));
    row-gap: 10px;
    box-shadow: 5px 6px 0 var(--c-main-pale);
  }

  .bettei .contact-btn__ico--mail {
    grid-area: ico;
    width: min(33px, calc((100vw - 45px) * 0.093));
    height: auto;
    margin: 0;
  }

  .bettei .contact-btn__web,
  .bettei .contact-btn__web-sp {
    display: contents;
  }

  .bettei .contact-btn__web-main {
    grid-area: main;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: min(34px, calc((100vw - 45px) * 0.0958));
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* （無料）は全角括弧の余白分だけ「する」に寄せる（デザイン実測） */
  .bettei .contact-btn__free {
    margin-left: -0.62em;
    color: var(--c-accent);
    font-size: min(26px, calc((100vw - 45px) * 0.0732));
  }

  .bettei .contact-btn__web-sub {
    grid-area: sub;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    text-align: center;
  }

  .bettei .contact-btn__arrow {
    display: none;
  }

  /* --- 文字の太さ（SP） ---
     デザインの見出し・ボタン（W6）は、ブラウザの600では細く見えるため700で表示する。
     本文（W4）・小見出し（W5）はデザイン指定どおり（400／500）のまま */
  .bettei .fv-catch,
  .bettei .fv-lead,
  .bettei .plan-card__tit,
  .bettei .plan-card__badge,
  .bettei .plan-price__in-yen,
  .bettei .btn-more,
  .bettei .sec-tit,
  .bettei .feature-card__tit,
  .bettei .plan-detail__tit,
  .bettei .plan-items__more,
  .bettei .plan-detail__option,
  .bettei .flow-step__when,
  .bettei .flow-step__tit,
  .bettei .faq-item__a .faq-item__link,
  .bettei .contact-box__tit {
    font-weight: 700;
  }

  .bettei .faq-item__qtxt {
    font-weight: 600;
  }
}