@charset "UTF-8";
/* reset ------------------------------------------------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, dialog, figure, footer, header, hgroup, main, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

header, footer, article, section, aside, nav, menu, figure, figcaption, main {
  display: block;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
  /* 五智の杜と同じく 768〜1200px は 1200px 基準で全体を可変縮小
     （五智の calc(N * 100vw / 1200) 相当。1rem = 100vw / 120） */
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: 0.8333333333vw;
  }
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: inherit;
  color: inherit;
}

li {
  list-style: none;
}

ol li {
  list-style: decimal;
}

img {
  width: 100%;
  height: auto;
  border: 0;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  vertical-align: middle;
}

a {
  color: inherit;
  outline: none;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  a:hover {
    opacity: 0.75;
  }
}

/* base ------------------------------------------------- */
/* iOS Safari の自動文字サイズ調整を止める
   （横持ち→縦持ちに戻したとき、文字が大きいままになるのを防ぐ） */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

/* 五智の杜準拠：16px / regular(400) / line-height 1.7 / #414036 / bg #F4F3EE */
body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #414036;
  background: #F4F3EE;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 14.8rem;
}

img {
  max-width: 100%;
}

/* ------------------------------------------------------
   ルビ（フリーダイヤルの「つむぐ よいくよう」）

   ネイティブの <ruby>/<rt> はブラウザごとにルビの位置が変わり、
   とくに Safari（PC・iOS）は rt に position / display を指定しても
   効かないため、位置をコントロールできない。
   そこで ruby 要素は使わず、ただの span を absolute で
   数字の真上に置く。これで全ブラウザで同じ位置になる。

   ・ルビと数字の間隔 → .c-ruby__rt の margin-bottom
   ・ルビ分の上余白  → 親側（.l-header__tel-num / .p-contact__tel-num）の
     padding-top で確保
   ・文字サイズ・色  → 親側の .c-ruby__rt で指定
   ------------------------------------------------------ */
.c-ruby {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.c-ruby__rt {
  position: absolute;
  left: 50%;
  bottom: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  margin-bottom: 0.3em;
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}

.u-sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .u-sp {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  br.u-sp {
    display: inline !important;
  }
}

/* 改行位置の切り替え用
   .u-br-pc … PCだけ改行する
   .u-br-sp … SPだけ改行する */
@media screen and (max-width: 767px) {
  br.u-br-pc {
    display: none;
  }
}

br.u-br-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  br.u-br-sp {
    display: inline;
  }
}

/* 共通ラッパー */
.m-wrap {
  width: 100%;
  max-width: 118.2rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* 五智の杜準拠のラッパー（ヘッダー／フッター／MV／FAQ／資料請求）
   --gochi   … 1182px（内側 15px パディング込み）
   --gochi-w … 1230px（内側 15px パディング込み） */
.m-wrap--gochi,
.m-wrap--gochi-w {
  max-width: 118.2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.m-wrap--gochi-w {
  max-width: 123rem;
}

/* ======================================================
   共通見出し
   ====================================================== */
.c-ttl {
  position: relative;
  display: inline-block;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #5D4536;
}
.c-ttl::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 2rem);
  width: 50vw;
  height: 1px;
  background: #9BCA9A;
}

/* ======================================================
   ボタン
   ====================================================== */
.c-btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* カンプ実測：148 × 50px / 16px / 2行目 12px */
  width: 14.8rem;
  height: 5rem;
  padding: 0.4rem 2.6rem 0.4rem 1.8rem;
  border: 1px solid #ffffff;
  border-radius: 8px;
  /* 幅が縮んでも文字が溢れないよう、文字も一緒に縮める */
  font-size: clamp(11px, 1.6rem, 16px);
  font-weight: 500;
  line-height: 1.35;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  -webkit-box-shadow: 0 2px 5px rgba(94, 84, 71, 0.28);
          box-shadow: 0 2px 5px rgba(94, 84, 71, 0.28);
  /* ボタン2行目の補足（（お問合せ）など） */
}
.c-btn small {
  display: block;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.35;
}
.c-btn__icon {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  width: 1.2rem;
  line-height: 0;
}
.c-btn__icon img {
  display: block;
}
.c-btn {
  /* -- カラー -- */
}
.c-btn--green {
  background: #70875A;
}
.c-btn--gold {
  background: #AD8349;
}
.c-btn {
  /* 見学予約・資料請求（統合ボタン／モーダルを開く） */
}
.c-btn--brown {
  width: 21.6rem;
  padding: 0.4rem 3.2rem 0.4rem 1.8rem;
  background: #5D4536;
  cursor: pointer;
}
.c-btn--brown .c-btn__icon {
  right: 1.4rem;
  width: 1.4rem;
}
@media screen and (min-width: 768px) {
  .c-btn--brown:hover {
    opacity: 0.85;
  }
}
.c-btn--brown {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.c-btn--outline {
  width: 22.8rem;
  height: 3.8rem;
  padding: 0.4rem 3.4rem 0.4rem 1.8rem;
  font-size: clamp(11px, 1.5rem, 15px);
}
.c-btn--outline .c-btn__icon {
  right: 1.6rem;
  width: 1.4rem;
}
.c-btn--outline {
  background: #ffffff;
  border-color: #D9C3A4;
  border-radius: 8px;
  color: #414036;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.c-btn {
  /* -- サイズ -- */
}
.c-btn--lg {
  width: 24rem;
  height: 6.8rem;
  padding: 0 4.4rem 0 2rem;
  border-radius: 8px;
  font-size: clamp(13px, 2rem, 20px);
  letter-spacing: 0.12em;
  /* 2行ボタンの行間はカンプに合わせて少し広く */
}
.c-btn--lg small {
  margin-top: 0.3rem;
}
.c-btn--lg .c-btn__icon {
  right: 2.4rem;
  width: 1.6rem;
}

/* ======================================================
   もっと見る
   ====================================================== */
.c-more {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 21.6rem;
  height: 4.4rem;
  padding-right: 1.8rem;
  background: #ffffff;
  border: 1px solid #D9C3A4;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #5E5447;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-more::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.6rem;
  border-right: 2px solid #C57A9F;
  border-bottom: 2px solid #C57A9F;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-more.is-open::after {
  margin-top: -2px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
@media screen and (min-width: 768px) {
  .c-more:hover {
    opacity: 0.7;
  }
}

/* ======================================================
   ページトップへ戻る（五智の杜準拠）
   ====================================================== */
.c-pagetop {
  position: fixed;
  right: 3.2rem;
  bottom: 3.2rem;
  z-index: 100;
  display: block;
  width: 8rem;
  height: 8rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
          filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.c-pagetop img {
  display: block;
  width: 100%;
  height: auto;
}
.c-pagetop.is-show {
  visibility: visible;
  opacity: 1;
}
.c-pagetop {
  /* ドロワーを開いている間は隠す（五智の杜と同じ挙動）
     ※ .c-pagetop は filter を持つため独自の重ね順を作りやすく、
       z-index だけに頼らず確実に隠す。必ず .is-show より後に置くこと */
}
.is-drawer-open .c-pagetop {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.c-pagetop {
  /* フッターに到達したらフッター上端で止める */
  /* 五智の杜 .scroll-top-sub.is-absolute : top -66px（SP -24px） */
}
.c-pagetop.is-absolute {
  position: absolute;
  top: -6.6rem;
  right: 3.2rem;
  bottom: auto;
}
@media screen and (min-width: 768px) {
  .c-pagetop:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px) {
  .c-pagetop {
    right: 2rem;
    bottom: 1.5rem;
    width: 4.8rem;
    height: 4.8rem;
  }
  .c-pagetop.is-absolute {
    top: -2.4rem;
    right: 2rem;
  }
}

/* ======================================================
   見学予約・資料請求モーダル（<dialog>）
   ・PC は Figma 実測（ダイアログ幅960px）を1:1で反映
   ・SP は幅いっぱい − 左右20px
   ====================================================== */
.c-modal {
  /* reset で margin:0 になっているため、中央寄せ用に明示する */
  margin: auto;
  width: 96rem;
  max-width: calc(100% - 5rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  color: #414036;
}
.c-modal::-ms-backdrop {
  background: rgba(28, 23, 23, 0.45);
}
.c-modal::backdrop {
  background: rgba(28, 23, 23, 0.45);
}
.c-modal {
  /* 開くときのふわっと */
  opacity: 0;
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
  -webkit-transition: opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
  transition: opacity 0.25s ease, transform 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete, -webkit-transform 0.25s ease;
}
.c-modal[open] {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
@starting-style {
  .c-modal[open] {
    opacity: 0;
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
}
@media screen and (max-width: 767px) {
  .c-modal {
    width: calc(100% - 4rem);
    max-width: none;
    border-radius: 6px;
  }
}
.c-modal {
  /* -- 右上の閉じるボタン（角にかぶせる） -- */
}
.c-modal__close {
  position: absolute;
  top: -1.8rem;
  right: -1.8rem;
  z-index: 2;
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  background: #414036;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.c-modal__close::before, .c-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2px;
  margin: -1px 0 0 -1rem;
  background: #ffffff;
  border-radius: 2px;
}
.c-modal__close::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.c-modal__close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media screen and (min-width: 768px) {
  .c-modal__close:hover {
    opacity: 0.8;
  }
}
@media screen and (max-width: 767px) {
  .c-modal__close {
    top: -1.6rem;
    right: -0.7rem;
    width: 3.6rem;
    height: 3.6rem;
    /* SPの×は円に対して大きめに */
  }
  .c-modal__close::before, .c-modal__close::after {
    width: 2rem;
    height: 2.5px;
    margin: -1.25px 0 0 -1rem;
  }
}
.c-modal__inner {
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3.3rem 3.2rem 3rem;
}
@media screen and (max-width: 767px) {
  .c-modal__inner {
    max-height: calc(100dvh - 6rem);
    padding: 2.4rem 1.6rem 2rem;
  }
}
.c-modal {
  /* -- 上部のベージュ枠 -- */
}
.c-modal__box {
  padding: 4.2rem 4rem 3.2rem;
  background: #F8F7F3;
  border: 3px solid #BCA676;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-modal__box {
    padding: 2rem 1rem 2.2rem;
  }
}
.c-modal__ttl {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #70875A;
}
@media screen and (max-width: 767px) {
  .c-modal__ttl {
    font-size: min(21px, 5.4vw);
    letter-spacing: -0.02em;
  }
}
.c-modal {
  /* 文章は左揃えのまま、かたまりをボックス内で中央に置く */
}
.c-modal__lead {
  display: inline-block;
  margin-top: 2.2rem;
  font-size: 16px;
  line-height: 1.6;
  color: #414036;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .c-modal__lead {
    display: block;
    margin-top: 1.2rem;
    font-size: 14px;
  }
}
.c-modal__action {
  margin-top: 2.8rem;
}
@media screen and (max-width: 767px) {
  .c-modal__action {
    margin-top: 1.8rem;
  }
}
.c-modal {
  /* -- フォームへ進むボタン -- */
}
.c-modal__btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30.2rem;
  max-width: 100%;
  height: 6.8rem;
  /* 左右のpaddingを均等にして、ラベルがボタン中央にくるようにする
     （アイコンは絶対配置なので中央位置に影響しない） */
  padding: 0 2rem;
  background: #5D4536;
  border-radius: 6px;
  /* 画面幅が狭くなってもボタンからはみ出さないよう、文字も一緒に縮める */
  font-size: clamp(14px, 2.2rem, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  -webkit-box-shadow: 0 2px 6px rgba(94, 84, 71, 0.28);
          box-shadow: 0 2px 6px rgba(94, 84, 71, 0.28);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
  .c-modal__btn:hover {
    opacity: 0.85;
  }
}
@media screen and (max-width: 767px) {
  .c-modal__btn {
    width: 26.7rem;
    max-width: 100%;
    height: 5.3rem;
    padding: 0 1.6rem;
    font-size: clamp(13px, 4.6vw, 18px);
  }
}
.c-modal {
  /* 外部リンクアイコンは絶対配置（ラベルをボタン中央に見せるため） */
}
.c-modal__btn-ex {
  position: absolute;
  top: 50%;
  right: 1.7rem;
  margin-top: 2px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  width: 1.8rem;
  line-height: 0;
}
.c-modal__btn-ex img {
  display: block;
  width: 100%;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
@media screen and (max-width: 767px) {
  .c-modal__btn-ex {
    right: 1.6rem;
    margin-top: 0;
    width: 1.6rem;
  }
}
.c-modal {
  /* -- 電話 -- */
}
.c-modal__tel-lead {
  margin-top: 3.6rem;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-modal__tel-lead {
    margin-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #E7DECF;
    font-size: 14px;
    text-align: left;
  }
}
.c-modal__tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4rem;
  margin-top: 2.4rem;
}
@media screen and (max-width: 767px) {
  .c-modal__tel {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.2rem;
    margin-top: 2rem;
  }
}
.c-modal {
  /* 上段（案内所名）は大きめ、下段（受付時間）は小さめ（Figma実測） */
}
.c-modal__tel-name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: #414036;
  text-align: center;
}
.c-modal__tel-name span {
  display: block;
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .c-modal__tel-name {
    font-size: 15px;
  }
  .c-modal__tel-name span {
    font-size: 13px;
  }
}
.c-modal__tel-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  padding-top: 0.4em;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #6AA169;
}
.c-modal__tel-num .c-ruby__rt {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.28em;
  font-weight: 500;
  color: #6AA169;
}
.c-modal__tel-num {
  /* PC・タブレットは発信できないようにリンクを無効化（SPのみ有効） */
}
.c-modal__tel-num a {
  color: inherit;
  pointer-events: none;
  cursor: default;
}
@media screen and (max-width: 767px) {
  .c-modal__tel-num a {
    pointer-events: auto;
    cursor: pointer;
  }
}
.c-modal__tel-num {
  /* SPは緑のボタン形式 */
}
@media screen and (max-width: 767px) {
  .c-modal__tel-num {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 22rem;
    max-width: 100%;
    height: 5rem;
    padding: 0 1.6rem;
    background: #6AA169;
    border-radius: 8px;
    font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
    font-size: min(21px, 5.4vw);
    color: #ffffff;
    white-space: nowrap;
    -webkit-box-shadow: 0 2px 6px rgba(94, 84, 71, 0.2);
            box-shadow: 0 2px 6px rgba(94, 84, 71, 0.2);
  }
  .c-modal__tel-num .c-ruby__rt {
    display: none;
  }
  .c-modal__tel-num a {
    color: #ffffff;
  }
}
.c-modal__tel-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 3rem;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .c-modal__tel-icon {
    width: 2.6rem;
  }
  .c-modal__tel-icon img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
}
.c-modal {
  /* -- 「この画面を閉じる」 -- */
}
.c-modal__foot {
  margin-top: 3.4rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-modal__foot {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #E7DECF;
  }
}
.c-modal__close-text {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 23.1rem;
  max-width: 100%;
  height: 3.8rem;
  padding: 0 2rem;
  white-space: nowrap;
  background: #ffffff;
  border: 1px solid #E7DECF;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #5E5447;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
@media screen and (min-width: 768px) {
  .c-modal__close-text:hover {
    background: #F4F3EE;
  }
}
@media screen and (max-width: 767px) {
  .c-modal__close-text {
    width: 20.5rem;
    height: 3.8rem;
    font-size: 14px;
  }
}
.c-modal__close-text-icon {
  position: absolute;
  top: 50%;
  right: 1.8rem;
  margin-top: -0.7rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}
.c-modal__close-text-icon::before, .c-modal__close-text-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #C57A9F;
}
.c-modal__close-text-icon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.c-modal__close-text-icon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* モーダルを開いている間は背面をスクロールさせない */
.is-modal-open {
  overflow: hidden;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}

/* ======================================================
   header
   ====================================================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #F4F3EE;
}
.l-header__upper {
  background: #F4F3EE;
}
.l-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: 123rem;
  margin: 0 auto;
  /* 五智の杜 .header-sub-row1 : padding 16px 0 12px
     ／ .header-sub-row1-inner : padding 0 34px 0 19px */
  padding: 1.6rem 4rem 1.2rem 1.9rem;
}
.l-header {
  /* -- ロゴ -- */
}
.l-header__logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3.6rem;
}
.l-header {
  /* 京王ロゴは自淨殿ロゴの上端に揃える */
}
.l-header__logo-keio {
  -ms-flex-item-align: start;
      align-self: flex-start;
  /* 五智の杜 .header-logo : 80px ／ 1200px以下は clamp(70px, 80/1200*100vw, 80px) */
  width: clamp(70px, 8rem, 80px);
  line-height: 0;
}
.l-header__logo-site {
  width: 22.4rem;
  line-height: 0;
}
.l-header {
  /* -- 右側 -- */
}
.l-header__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3.2rem;
  /* ルビ（absolute）の逃げ分。電話とボタンを一緒に下げるので、
     両者の上下位置は揃ったままになる */
  padding-top: 1.3rem;
}
.l-header {
  /* -- 電話（リード文と番号を横並び） -- */
  /* 五智の杜 .header-sub-phone : gap 6px */
}
.l-header__tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
  text-align: left;
}
.l-header {
  /* 五智の杜 .header-sub-phone-label : 15px / 600 / 1.2 / .05em（下限12px） */
}
.l-header__tel-lead {
  font-size: clamp(12px, 1.4rem, 15px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #414036;
  text-align: center;
  white-space: nowrap;
  /* 五智の杜 .header-sub-phone-hours : 12px / 500 / 1.2 / .05em（下限10px） */
}
.l-header__tel-lead span {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(10px, 1.2rem, 12px);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.l-header {
  /* 五智の杜 .header-sub-tel : Noto Serif 32px / 600 / 1 / .05em（下限19px）・gap 2px */
}
.l-header__tel-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  /* ルビは absolute なので上余白は取らない。
     ここで padding を入れると「電話でのお問合せ」との上下位置がずれるため、
     ルビ分の逃げは親（.l-header__tel）の padding-top で確保する */
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: clamp(19px, 3.2rem, 32px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #6AA169;
  white-space: nowrap;
}
.l-header__tel-num .c-ruby__rt {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.26em;
  font-weight: 500;
  color: #6AA169;
}
.l-header__tel-num {
  /* PC・タブレットは発信できないようにリンクを無効化（SPのみ有効） */
}
.l-header__tel-num a {
  color: inherit;
  pointer-events: none;
  cursor: default;
}
@media screen and (max-width: 767px) {
  .l-header__tel-num a {
    pointer-events: auto;
    cursor: pointer;
  }
}
.l-header {
  /* 五智の杜 .header-sub-tel-icon : 28px */
}
.l-header__tel-icon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(18px, 3rem, 30px);
  line-height: 0;
}
.l-header {
  /* -- ボタン -- */
}
.l-header__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2rem;
}

/* ======================================================
   グローバルナビ
   ====================================================== */
/* 五智の杜 .header-sub-row2 準拠 */
.l-nav {
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ECEAE8));
  background: linear-gradient(180deg, #ffffff 0%, #ECEAE8 100%);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 767px) {
  .l-nav {
    height: 100%;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.l-nav {
  /* 五智の杜 .header-nav-sub : gap 20px 40px（.header-container-sub padding 15px 0） */
}
.l-nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem 4rem;
  min-height: 5rem;
  padding: 1.5rem 0;
}
.l-nav {
  /* 五智の杜 .header-nav a 準拠（Material Icons keyboard_arrow_down 相当） */
}
.l-nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  /* 五智の杜 .header-nav-sub a : 16px / 700 / 1.2（1200px以下は下限12px） */
  font-size: clamp(12px, 1.6rem, 16px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #5E5447;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media screen and (min-width: 768px) {
  .l-nav__link:hover {
    color: #C57A9F;
  }
}
.l-nav__link::after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  /* Material Symbols keyboard_arrow_down と同じアウトライン */
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M480-345%20240-585l56-56%20184%20184%20184-184%2056%2056-240%20240Z'%20fill='%23C57A9F'/%3E%3C/svg%3E") no-repeat center center;
  background-size: 100% 100%;
}

/* ======================================================
   ハンバーガーボタン（SPのみ）
   ====================================================== */
.l-hamburger {
  display: none;
  /* 五智の杜準拠：右上に固定。スクロールすると反転する */
}
@media screen and (max-width: 767px) {
  .l-hamburger {
    position: fixed;
    top: 0;
    right: 0;
    -webkit-transform: none;
            transform: none;
    z-index: 1100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.4rem;
    width: 5.4rem;
    height: 5.4rem;
    background: #F4F3EE;
    border-radius: 0 0 0 8px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    -webkit-tap-highlight-color: transparent;
  }
}
.l-hamburger__bars {
  position: relative;
  display: block;
  width: 1.8rem;
  height: 1.2rem;
}
.l-hamburger__bars span {
  position: absolute;
  left: 0;
  display: block;
  height: 2px;
  background: #5E5447;
  border-radius: 2px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.l-hamburger__bars span:nth-child(1) {
  top: 0;
  width: 100%;
}
.l-hamburger__bars span:nth-child(2) {
  top: 5px;
  width: 100%;
}
.l-hamburger__bars span:nth-child(3) {
  top: 10px;
  width: 62%;
}
.l-hamburger__label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: #5E5447;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.l-hamburger {
  /* スクロールしたら反転（五智の杜と同じ #91897F） */
}
.is-scrolled .l-hamburger {
  background: #91897F;
}
.is-scrolled .l-hamburger .l-hamburger__bars span {
  background: #ffffff;
}
.is-scrolled .l-hamburger .l-hamburger__label {
  color: #ffffff;
}
.l-hamburger {
  /* 開いているときはボタンを隠す（ドロワー側のCLOSEを使う） */
}
.is-drawer-open .l-hamburger {
  opacity: 0;
  pointer-events: none;
}

/* ======================================================
   ドロワー（SPのみ）
   ====================================================== */
.l-drawer {
  display: none;
  /* 五智の杜 .header-nav（SP）実測に合わせる
     width 224px ／ bg #91897F ／ radius 0 0 0 16px ／ padding 82px 10px 30px
     ／ 項目間 gap 30px ／ リンク 16px・Medium・1.6・.05em */
}
@media screen and (max-width: 767px) {
  .l-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1099;
    display: block;
    width: 224px;
    height: auto;
    min-height: 80vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #91897F;
    border: 0;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-radius: 0 0 0 16px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.35s ease;
    transition: -webkit-transform 0.35s ease;
    transition: transform 0.35s ease;
    transition: transform 0.35s ease, -webkit-transform 0.35s ease;
    visibility: hidden;
  }
  .is-drawer-open .l-drawer {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    visibility: visible;
  }
}
.l-drawer__inner {
  padding: 12px 10px calc(30px + env(safe-area-inset-bottom, 0px));
}
.l-drawer {
  /* × ＋ CLOSE */
}
.l-drawer__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
  width: 4.2rem;
  margin: 0 0 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.l-drawer__close-icon {
  position: relative;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
}
.l-drawer__close-icon::before, .l-drawer__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}
.l-drawer__close-icon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.l-drawer__close-icon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.l-drawer__close-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}
.l-drawer {
  /* メニューリスト（CLOSEの下に罫線・項目間は線なし）
     罫線は上端から62px、1項目めのテキストは82px（五智の杜実測） */
}
.l-drawer__list {
  margin-top: 19px;
  padding-top: 19px;
  border-top: 1px solid #F4F3EE;
}
.l-drawer__item + .l-drawer__item {
  margin-top: 30px;
}
.l-drawer__link {
  display: block;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #ffffff;
}
.l-drawer {
  /* お墓スタイル TOP（上に罫線／1行で収める・同一ドメインなので同じタブで遷移） */
}
.l-drawer__sub {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #F4F3EE;
}
.l-drawer__sub a {
  display: inline-block;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #ffffff;
  white-space: nowrap;
}

/* ドロワーを開いている間の背面スクロール抑止
   （body の位置・幅は変えないので、閉じたときにレイアウトが崩れない） */
@media screen and (max-width: 767px) {
  .is-drawer-open {
    overflow: hidden;
    -ms-scroll-chaining: none;
        overscroll-behavior: none;
  }
}

/* オーバーレイ（ドロワー以外をうっすら暗く／タップで閉じる） */
.l-drawer-overlay {
  display: none;
}
@media screen and (max-width: 767px) {
  .l-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1098;
    display: block;
    background: rgba(0, 0, 0, 0.35); /* ← うっすら暗く */
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.35s ease, visibility 0.35s ease;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .is-drawer-open .l-drawer-overlay {
    opacity: 1;
    visibility: visible;
  }
}

/* ======================================================
   footer
   ====================================================== */
.l-footer {
  position: relative;
  border-top: 8px solid #91897F;
  background: #F4F3EE;
  /* 五智の杜 .footer-sub::before : border-top 直下の 1px 白ライン（SPは非表示） */
}
.l-footer::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ffffff;
}
@media screen and (max-width: 767px) {
  .l-footer::before {
    display: none;
  }
}
.l-footer {
  /* 五智の杜 .footer-sub-inner : nowrap / gap 32px / align center / space-between */
}
.l-footer__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 3.2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: 123rem;
  margin: 0 auto;
  /* 五智の杜 .footer-sub-inner : padding 0 20px 0 26px ／ .footer-sub-main : 20px 0 16px */
  padding: 2.5rem 2rem 1.6rem 2.6rem;
}
.l-footer {
  /* ロゴはページトップへのリンク（五智の杜と同様） */
}
.l-footer__logo {
  width: 24.3rem;
  line-height: 0;
}
.l-footer__logo a {
  display: block;
  line-height: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
  .l-footer__logo a:hover {
    opacity: 0.7;
  }
}
.l-footer {
  /* リンクは右のロゴ寄せ・お墓スタイルロゴの下端に揃える */
}
.l-footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: end;
      align-self: flex-end;
  gap: 5.4rem;
  margin-left: auto;
  margin-right: 6.8rem;
  margin-bottom: 1.8rem;
  /* 五智の杜 .footer-sub-nav a : 18px / 500 / 1 / #5E5447（下限12px） */
}
.l-footer__nav a {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  font-size: clamp(12px, 1.8rem, 18px);
  font-weight: 500;
  line-height: 1;
  color: #5E5447;
  white-space: nowrap;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  /* アイコンは fill:currentColor なので color の変化に追従する */
}
@media screen and (min-width: 768px) {
  .l-footer__nav a:hover {
    color: #C57A9F;
  }
}
.l-footer {
  /* 五智の杜 .footer-sub-nav a[target=_blank]::after : 18px
     アイコンは色を変えられるよう mask で描画（中の img は幅の基準としてだけ使う） */
}
.l-footer__ex {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 15px;
  height: 15px;
  line-height: 0;
  /* インラインSVG。fill は currentColor なのでリンクの色に追従する */
}
.l-footer__ex svg {
  display: block;
  width: 100%;
  height: 100%;
}
.l-footer__brand {
  width: 18.5rem;
  line-height: 0;
}
.l-footer__copy {
  background: #C3BDB5;
  color: #ffffff;
  text-align: right;
}
.l-footer__copy small {
  display: block;
  width: 100%;
  max-width: 123rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

/* ======================================================
   MV
   ====================================================== */
.p-mv__visual {
  position: relative;
  /* 五智の杜準拠：1920 : 718 */
  width: 100%;
  aspect-ratio: 1920/718;
  background: url(../img/front/mv.webp) no-repeat center center;
  background-size: cover;
}
.p-mv__inner {
  position: relative;
  width: 100%;
  max-width: 118.2rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-bottom: 4.4rem;
  text-align: right;
  color: #ffffff;
  /* 五智の杜準拠 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.42), 0 8px 15px rgba(0, 0, 0, 0.24);
}
.p-mv {
  /* ルビは「自淨殿」に対して中央揃え */
}
.p-mv__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-weight: 500;
  line-height: 1;
}
.p-mv {
  /* MV内のテキストは、画像の縮小に同調して一緒に縮める。
     本文系と違い px ではなく rem で指定することで、
     html { font-size: calc(100vw / 120) }（768〜1200px・五智の杜準拠）に追従する。
     ＝1200px以上では下記の px 値どおり、狭くなるほど画像と同じ比率で小さくなる。 */
}
.p-mv__ruby {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: center;
}
.p-mv__name {
  display: block;
  font-size: 6.4rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}
.p-mv__catch {
  margin-top: 4.6rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.p-mv__bar {
  background: #70875A;
}
.p-mv__bar span {
  display: block;
  width: 100%;
  max-width: 118.2rem;
  margin: 0 auto;
  padding: 2px 1.5rem;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: #ffffff;
}

/* ======================================================
   お知らせ
   ====================================================== */
.p-news {
  background: #ffffff;
}
.p-news__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 118.2rem;
  min-height: 7.2rem;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
}
.p-news__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.2rem;
  line-height: 0;
}
.p-news__text {
  font-size: 17px;
  color: #414036;
}
.p-news {
  /* 文末に続けて表示する新規ウインドウアイコン */
}
.p-news__ex {
  display: inline-block;
  width: 1.3rem;
  margin-left: 0.6rem;
  vertical-align: -1px;
  line-height: 0;
}
.p-news__ex img {
  display: block;
}

/* ======================================================
   イントロ
   ====================================================== */
/* テキスト部分〜下の写真までを1枚の背景画像でまかなう
   （書き出しサイズの目安：1600 × 1008px ／ @2x = 3200 × 2016px） */
.p-intro {
  /* 写真の位置を「画面幅」基準で固定する。
     cover（＝高さ基準）だと、ポイント枠の折り返し等でセクションが高くなるほど
     写真が上へせり上がり、コピーに重なってしまうため。
     ・画像は幅100%で下端に配置（＝.p-intro__photo の 33vw と必ず一致する）
     ・画像で埋まらない上部は、画像上端と同じ色のグラデーションで継ぐ */
  background-color: #ECD8BB;
  background-image: url(../img/front/intro-bg.webp), -webkit-gradient(linear, left top, right top, from(#E7D2B5), color-stop(50%, #ECD8BB), color-stop(80%, #F1DDBF), to(#F7E3C3));
  background-image: url(../img/front/intro-bg.webp), linear-gradient(90deg, #E7D2B5 0%, #ECD8BB 50%, #F1DDBF 80%, #F7E3C3 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top;
  background-size: 100% auto, 100% 100%;
}
.p-intro__body {
  padding: 5.4rem 0 0;
  text-align: center;
}
.p-intro__access {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 24px;
  font-weight: 500;
  color: #414036;
}
.p-intro {
  /* カンプ実測：3ボックスでコンテンツ幅1152pxを埋める（374 / 348 / 396 + gap17） */
}
.p-intro__points {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.6rem;
  margin-top: 4rem;
}
.p-intro__point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.7rem;
  padding: 1.4rem 1.4rem 1.4rem 1rem;
  background: #ffffff;
  border-radius: 8px;
  -webkit-box-shadow: 0 3px 10px rgba(94, 84, 71, 0.18);
          box-shadow: 0 3px 10px rgba(94, 84, 71, 0.18);
  /* 1201px以上はカンプ実測の幅で3つとも揃える。
     それ以下は文字が縮まないので、内容幅にして折り返させる */
}
@media screen and (min-width: 1201px) {
  .p-intro__point {
    width: 37.3rem;
  }
}
.p-intro__point-label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 10.8rem;
  padding: 0.6rem 1.4rem;
  background: #FBF6EE;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  color: #414036;
}
.p-intro__point-text {
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  color: #426323;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-intro__point-text {
    white-space: nowrap;
  }
}
.p-intro {
  /* 写真の上に重なるコピー。
     px固定だと画面を狭めたときだけ2行に折り返して写真に食い込むため、
     MVと同じく rem 指定にして画像の縮小に同調させる（＝どの幅でも1行） */
}
.p-intro__lead {
  margin-top: 9rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #414036;
  white-space: nowrap;
}
.p-intro {
  /* 写真部分の高さを確保するだけの箱（画像は背景に含まれる） */
}
.p-intro__photo {
  height: 0;
  padding-top: 33vw;
}

/* ======================================================
   料金プラン
   ====================================================== */
.p-price {
  padding: 7.6rem 0 2rem;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #F9F0E2), color-stop(95%, #FFFFFF));
  background: linear-gradient(180deg, #F9F0E2 10%, #FFFFFF 95%);
}
.p-price__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2.4rem;
  margin-top: 5.6rem;
}
.p-price {
  /* カードサイズは固定（内容量で変わらないように） */
}
.p-price__card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 27rem;
  min-height: 388px;
  background: #ffffff;
  border: 2px solid #D9C3A4;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 10px rgba(94, 84, 71, 0.12);
          box-shadow: 0 3px 10px rgba(94, 84, 71, 0.12);
}
.p-price {
  /* カード上部のキャッチは非表示（デザイン変更） */
}
.p-price__catch {
  display: none;
}
.p-price__body {
  padding: 1.5rem 2rem 1rem;
  text-align: center;
}
.p-price {
  /* 「（4名）」「（6名）」は少し小さく */
}
.p-price__name-sub {
  font-size: 20px;
}
.p-price__name {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #426323;
}
.p-price {
  /* プラン名が1行／2行でも金額・護持費の位置を揃える（上揃え） */
}
.p-price__card .p-price__name {
  display: block;
  min-height: 6.8rem;
}
.p-price__yen {
  margin: 1.1rem 0 2.5rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #414036;
}
.p-price__yen .num {
  margin-right: 1rem;
  font-size: 62px;
  font-weight: 600;
  color: #C82877;
}
.p-price__spec + .p-price__spec {
  margin-top: 0.5rem;
}
.p-price__spec-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 2.5rem;
  padding: 0 0.6rem;
  background: #F3F1EC;
  border-top: 1px dashed #D9C3A4;
  border-bottom: 1px dashed #D9C3A4;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #414036;
}
.p-price__spec-data {
  padding-top: 0.8rem;
}
.p-price {
  /* 年間護持費（注釈が無いカードは金額を上下中央に） */
}
.p-price__card .p-price__spec:first-of-type .p-price__spec-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 7.8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.p-price__fee {
  display: block;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 19px;
  font-weight: 600;
  color: #414036;
}
.p-price__note {
  display: block;
  /* 1行のカードと2行のカードで以降の行がズレないよう、1行分の高さを確保 */
  min-height: 19.5px;
  margin-top: 0.6rem;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: #414036;
}
.p-price__note strong {
  font-weight: 600;
}
.p-price__term {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: #414036;
}
.p-price {
  /* -- 改葬プラン -- */
}
.p-price__sub {
  margin-top: 5.6rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 26px;
  font-weight: 600;
  color: #426323;
  text-align: center;
}
.p-price__move {
  width: 56rem;
  margin: 1.8rem auto 0;
  background: #ffffff;
  border: 2px solid #D9C3A4;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 10px rgba(94, 84, 71, 0.12);
          box-shadow: 0 3px 10px rgba(94, 84, 71, 0.12);
}
.p-price__move-catch {
  display: none;
}
.p-price__move-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.4rem;
  padding: 1.6rem 2.4rem 1rem;
}
.p-price__move-left {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding-top: 1.6rem;
  text-align: center;
}
.p-price__move-left .p-price__yen {
  margin: 1.5rem 0 0;
}
.p-price__move-right {
  width: 27rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
  /* 護持費（1行）のブロックはカンプに合わせて下にも余白 */
}
.p-price__move-right .p-price__spec:first-of-type .p-price__spec-data {
  padding-bottom: 0.9rem;
}
.p-price__move-notes {
  padding: 0.8rem 2rem 0.8rem;
  border-top: 1px solid #D9C3A4;
}
.p-price__move-notes li {
  /* 左寄せ。折り返したときは「※」の後ろで文頭が揃う */
  padding-left: 1em;
  text-indent: -1em;
  font-size: 13px;
  line-height: 1.5;
  color: #414036;
}
.p-price__notes {
  margin-top: 5rem;
  padding-left: 0.4rem;
}
.p-price__notes li {
  /* 「※」をぶら下げ、折り返しは「※」の後ろの文頭で揃える */
  padding-left: 1em;
  text-indent: -1em;
  font-size: 16px;
  line-height: 1.7;
  color: #414036;
  /* 「■」の子項目：全体を1文字ぶん下げ、折り返しは「■」の後ろで揃える */
}
.p-price__notes li.is-sub {
  padding-left: 2em;
  text-indent: -1em;
}
.p-price__notes li {
  /* タイトル名称だけ少しだけ太く */
}
.p-price__notes li b, .p-price__notes li strong {
  font-weight: 600;
}

/* ======================================================
   永代供養（期間終了後）
   ====================================================== */
.p-eternal {
  padding: 6rem 0 9rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FDF6EA));
  background: linear-gradient(180deg, #ffffff 0%, #FDF6EA 100%);
}
.p-eternal__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6rem;
  width: 100%;
  max-width: 99.8rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}
.p-eternal__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.p-eternal__ttl {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  color: #426323;
}
.p-eternal {
  /* 本文は見出しより少し内側から */
}
.p-eternal__desc {
  margin-top: 1.2rem;
  padding-left: 2.4rem;
  font-size: 17px;
  line-height: 1.7;
  color: #414036;
}
.p-eternal {
  /* 楕円は画像側で処理するため、CSSでのトリミングはしない */
}
.p-eternal__img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 35.6rem;
  line-height: 0;
}

/* ======================================================
   自淨殿の特長
   ====================================================== */
.p-feature {
  padding: 7.6rem 0 9rem;
  background: #ffffff;
}
.p-feature__list {
  margin-top: 6rem;
}
.p-feature {
  /* 写真＝左カラム／番号・見出し・本文＝右カラム */
}
.p-feature__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 44.8rem 4.8rem 1fr;
  grid-template-columns: 44.8rem 1fr;
  -webkit-column-gap: 4.8rem;
     -moz-column-gap: 4.8rem;
          column-gap: 4.8rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.p-feature__item + .p-feature__item {
  margin-top: 8rem;
}
.p-feature__img {
  line-height: 0;
}
.p-feature__img img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-feature {
  /* -- 見出し（番号＋タイトル） -- */
}
.p-feature__ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 2.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #D9C3A4;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
}
.p-feature__num {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  color: #70875A;
}
.p-feature__ttl-text {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #414036;
  position: relative;
  top: -2px;
}
.p-feature {
  /* -- 本文（「続きを見る」つきは高さを制限） -- */
}
.p-feature__body {
  position: relative;
  overflow: hidden;
  -webkit-transition: max-height 0.45s ease;
  transition: max-height 0.45s ease;
  /* 折りたたみ対象のみ、見出しの下端から写真の下端までで切る
     （写真 25.6rem − 見出し 4.5rem） */
}
.p-feature__body.js-feature-body {
  min-height: 210px;
  max-height: 210px;
  /* 下端をふわっと白に */
}
.p-feature__body.js-feature-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #fff));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 75%);
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-feature {
  /* 隠れる部分が無い／開いたあとは制限とフェードを解除 */
}
.is-open .p-feature__body.js-feature-body, .p-feature__body.js-feature-body.is-full {
  max-height: none;
}
.is-open .p-feature__body.js-feature-body::after, .p-feature__body.js-feature-body.is-full::after {
  opacity: 0;
}
.p-feature__desc {
  margin-top: 1.5rem;
  font-size: 18px;
  line-height: 1.7;
  color: #414036;
}
.p-feature {
  /* -- 箇条書き（六角形マーカー） -- */
}
.p-feature__notes {
  margin-top: 2rem;
  padding-left: 1.7rem;
}
.p-feature__notes li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 18px;
  line-height: 1.7;
  color: #414036;
}
.p-feature__notes li + li {
  margin-top: 2rem;
}
.p-feature__notes li::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  background: url("../img/common/icon-hex.svg") no-repeat center center;
  background-size: 100% 100%;
}
.p-feature__notes li a {
  text-decoration: underline;
}
.p-feature {
  /* -- 続きを見る -- */
}
.p-feature__more {
  margin-top: 1rem;
  text-align: center;
}
.p-feature__more .c-more {
  width: 24rem;
  height: 3.8rem;
}
.p-feature__more .c-more::after {
  right: 2.4rem;
}

/* ======================================================
   施設紹介
   ====================================================== */
.p-facility {
  padding: 7.6rem 0 9rem;
  background: #F6F5F0;
}
.p-facility__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6.6rem 6rem;
  margin-top: 5rem;
}
.p-facility__item {
  width: calc((100% - 6rem) / 2);
}
.p-facility__img {
  line-height: 0;
}
.p-facility__img img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-facility__ttl {
  margin-top: 2.4rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #414036;
  text-align: center;
}
.p-facility__desc {
  margin-top: 1.4rem;
  font-size: 17px;
  line-height: 1.7;
  color: #414036;
}

/* ======================================================
   お寺について
   ====================================================== */
.p-temple {
  padding: 7.6rem 0 9rem;
  background: #ffffff;
  /* セクションのリード文 */
}
.p-temple__lead {
  margin-top: 4.6rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  color: #426323;
  text-align: center;
}
.p-temple__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6rem;
  margin-top: 3.4rem;
}
.p-temple__item {
  width: 52.8rem;
}
.p-temple__img {
  line-height: 0;
}
.p-temple__img img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-temple__desc {
  margin-top: 2rem;
  font-size: 17px;
  line-height: 1.7;
  color: #414036;
}
.p-temple__map {
  width: 817px;
  max-width: 100%;
  margin: 7.6rem auto 0;
  line-height: 0;
}

/* ======================================================
   交通アクセス
   ====================================================== */
.p-access {
  background: #ffffff;
}
.p-access__lead {
  margin-top: 4rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 30px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: #AD8349;
  text-align: center;
}
.p-access {
  /* 地図＝左カラム（2行ぶち抜き）／案内＋ボタン＝右カラム */
}
.p-access__main {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 57.6rem 4.6rem 1fr;
  grid-template-columns: 57.6rem 1fr;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  -webkit-column-gap: 4.6rem;
     -moz-column-gap: 4.6rem;
          column-gap: 4.6rem;
  margin-top: 3.4rem;
}
.p-access__main > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.p-access__main > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.p-access__main > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.p-access__main > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}
.p-access__map {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
  width: 57.6rem;
  line-height: 0;
}
.p-access__info {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
  padding-top: 2.4rem;
}
.p-access__block + .p-access__block {
  margin-top: 4rem;
}
.p-access__block-ttl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.4rem;
  padding-bottom: 1rem;
  font-size: 17px;
  font-weight: 600;
  color: #414036;
  /* 点線はアイコンの右（見出しテキストの位置）から引く */
}
.p-access__block-ttl::after {
  content: "";
  position: absolute;
  left: 4rem;
  right: 0;
  bottom: 0;
  border-bottom: 1px dotted #D9C3A4;
}
.p-access__icon {
  display: block;
  width: 2.6rem;
  line-height: 0;
}
.p-access {
  /* 見出しテキストの開始位置（アイコン幅26px + gap15px）に揃える */
}
.p-access__block-body {
  margin-top: 1.4rem;
  padding-left: 4rem;
}
.p-access__block-body p {
  font-size: 17px;
  line-height: 1.7;
  color: #414036;
}
.p-access {
  /* 右カラムの下端（地図の下端）に左揃えで配置 */
}
.p-access__gmap {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2;
  -ms-grid-row-align: end;
      align-self: end;
  margin-top: 5rem;
  text-align: left;
}
.p-access__address {
  margin-bottom: 1.8rem;
  font-size: 17px;
  color: #414036;
}
.p-access__sub {
  margin-top: 9rem;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #414036;
  text-align: center;
}
.p-access__sub-text {
  margin-top: 1.6rem;
  font-size: 17px;
  line-height: 1.5;
  color: #414036;
  text-align: center;
}
.p-access__sub-text span {
  font-weight: 500;
  color: #C82877;
}
.p-access__route {
  width: 70rem;
  margin: 3rem auto 0;
  line-height: 0;
}
.p-access__notes {
  width: 70rem;
  max-width: 100%;
  margin: 2.2rem auto 0;
  text-align: left;
}
.p-access__notes li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 16px;
  line-height: 1.6;
  color: #414036;
}
.p-access__notes li + li {
  margin-top: 0.6rem;
}

/* ======================================================
   バスでのアクセス（タブ）
   ====================================================== */
.p-bus {
  margin-top: 4rem;
  padding-bottom: 10rem;
  /* タブ・系統番号・カードは操作エリアなので、
     文字以外の場所をクリックしてもテキストが選択されないようにする */
}
.p-bus__tabs, .p-bus__head, .p-bus__scroll {
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.p-bus {
  /* -- タブ -- */
}
.p-bus__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.3rem;
}
.p-bus__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 22rem;
  height: 5.6rem;
  background: #ffffff;
  border: 1px solid #AD8349;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 17px;
  font-weight: 500;
  color: #414036;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-bus__tab.is-active {
  background: #5E5447;
  border-color: #414036;
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  .p-bus__tab:hover:not(.is-active) {
    background: #FBF6EE;
  }
}
.p-bus {
  /* -- パネル -- */
}
.p-bus__panel {
  display: none;
  padding-bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#FCF5EC), color-stop(80%, #FFFFFF));
  background: linear-gradient(180deg, #FCF5EC 0%, #FFFFFF 80%);
  border-top: 4px solid #5E5447;
}
.p-bus__panel.is-active {
  display: block;
}
.p-bus__head {
  background: #FBF6EE;
  border-bottom: 1px solid #D9C3A4;
}
.p-bus__head .m-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 4rem;
  min-height: 6.2rem;
  padding-top: 0;
  padding-bottom: 0;
}
.p-bus__dest {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 12px;
  padding-right: 4rem;
  font-size: 16px;
  font-weight: 400;
  color: #414036;
}
.p-bus__dest span {
  font-weight: 500;
}
.p-bus__dest {
  /* 区切りの縦破線は帯の下の罫線に接地させる */
}
.p-bus__dest::after {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0;
  right: 0;
  width: 0;
  border-left: 1px dashed #D9C3A4;
}
.p-bus__anchors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 3.4rem;
}
.p-bus__anchors li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.p-bus__anchor {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 2px 0;
  font-size: 16px;
  font-weight: 400;
  color: #414036;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-bus__anchor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #AD8349;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-bus__anchor.is-active {
  font-weight: 500;
}
.p-bus__anchor.is-active::after {
  opacity: 1;
}
.p-bus__slider {
  position: relative;
}
.p-bus {
  /* 前へ／次へ */
}
.p-bus__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  margin-top: -2.8rem;
  padding: 0;
  background: #C9B79A;
  border: 0;
  border-radius: 50%;
  -webkit-box-shadow: 0 4px 16px rgba(145, 137, 127, 0.2);
          box-shadow: 0 4px 16px rgba(145, 137, 127, 0.2);
  cursor: pointer;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}
.p-bus__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
}
.p-bus__arrow--prev {
  left: 3.4rem;
}
.p-bus__arrow--prev::before {
  margin: -7px 0 0 -3px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.p-bus__arrow--next {
  right: 3.4rem;
}
.p-bus__arrow--next::before {
  margin: -7px 0 0 -11px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.p-bus__arrow {
  /* 送れないときは非表示（カードに重ならないように） */
}
.p-bus__arrow.is-disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.p-bus__arrow.is-hidden {
  display: none;
}
@media screen and (min-width: 768px) {
  .p-bus__arrow:hover {
    opacity: 0.85;
  }
}
.p-bus {
  /* -- スライダー（自作） --
     左右の余白はコンテンツ幅に揃える。カードは横に並べて translate で送る */
}
.p-bus__scroll {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 2rem;
}
.p-bus__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  /* 左は最低でも矢印（left 3.4rem + 5.6rem）より右から始める */
  padding-left: max(10.4rem, (100% - 115.2rem) / 2);
  padding-right: max(1.5rem, (100% - 115.2rem) / 2);
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.p-bus__card {
  width: 320px;
  height: 320px;
  margin-right: 2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #D9C3A4;
  border-radius: 6px;
  overflow: hidden;
  -webkit-box-shadow: 0 3px 10px rgba(94, 84, 71, 0.12);
          box-shadow: 0 3px 10px rgba(94, 84, 71, 0.12);
}
.p-bus__card:last-child {
  margin-right: 0;
}
.p-bus__card-ttl {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #D9C3A4;
  font-size: 18px;
  color: #414036;
  text-align: center;
}
.p-bus__card-ttl span {
  font-weight: 600;
}
.p-bus__stops {
  padding: 1.8rem 2rem 2rem;
}
.p-bus__stop {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.5rem 1.2rem;
  background: #ffffff;
  border: 1px solid #019487;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #414036;
}
.p-bus__stop + .p-bus__stop {
  margin-top: 26px;
}
.p-bus__stop {
  /* 停留所をつなぐ縦線（カード中央）
     bottom:100% は枠線の内側が基準になるため、枠線 2px 分を足して隙間をなくす */
}
.p-bus__stop + .p-bus__stop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 5px;
  height: 27px;
  margin-left: -2.5px;
  background: #019487;
}
.p-bus__stop.is-goal {
  background: #019487;
  border-color: #019487;
  color: #ffffff;
  font-weight: 500;
}
.p-bus__stop-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.2rem;
  line-height: 0;
}
.p-bus {
  /* 路線図下の注釈 */
}
.p-bus__note {
  margin-top: 2.4rem;
  padding-left: 1em;
  font-size: 16px;
  line-height: 1.6;
  color: #414036;
  text-indent: -1em;
}

/* ======================================================
   よくあるご質問
   ====================================================== */
.p-faq {
  padding: 7rem 0 5rem;
}
.p-faq > .m-wrap {
  max-width: 118.2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.p-faq {
  background: #F6F5F0;
}
.p-faq__list {
  margin-top: 5rem;
}
.p-faq__item {
  background: #ffffff;
  border: 1px solid #D9C3A4;
  border-radius: 6px;
  overflow: hidden;
}
.p-faq__item + .p-faq__item {
  margin-top: 2rem;
}
.p-faq__item.is-hidden {
  display: none;
}
.p-faq__q {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
  padding: 1.5rem 6.6rem 1.5rem 3rem;
  cursor: pointer;
}
.p-faq__label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: #70875A;
}
.p-faq__label--a {
  color: #C82877;
}
.p-faq__q-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #414036;
}
.p-faq__icon {
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.9rem;
  border-right: 2px solid #C57A9F;
  border-bottom: 2px solid #C57A9F;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: margin 0.3s, -webkit-transform 0.3s;
  transition: margin 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, margin 0.3s;
  transition: transform 0.3s, margin 0.3s, -webkit-transform 0.3s;
}
.p-faq__item.is-open .p-faq__icon {
  margin-top: -3px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.p-faq {
  /* 外側は slideToggle 用に block、中身を flex に
     破線はカード幅いっぱいに引くので margin は持たせない */
}
.p-faq__a {
  display: none;
  border-top: 1px dashed #D9C3A4;
}
.p-faq__a-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.6rem;
  padding: 1.8rem 6.6rem 2.2rem 3rem;
}
.p-faq__a-text {
  font-size: 15px;
  line-height: 1.6;
  color: #414036;
}
.p-faq {
  /* 回答文中のリンク（「見学予約・資料請求」ページ など）
     ※クリックでモーダルを開くので button。文中に自然になじむよう見た目をリセット
     ※hoverでも色は変えない */
}
.p-faq__link {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.p-faq__more {
  margin-top: 3rem;
  text-align: center;
}

/* ======================================================
   資料請求・お問合せ
   ====================================================== */
.p-contact {
  padding: 7rem 0;
}
.p-contact > .m-wrap {
  max-width: 118.2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.p-contact {
  background: #ffffff;
}
.p-contact__lead {
  margin-top: 4rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #414036;
}
.p-contact__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 2rem;
  padding: 2.4rem 2rem;
  background: #F6F5F0;
  border: 3px solid #BCA676;
}
.p-contact__tel {
  width: 50%;
  padding: 0.9rem 3rem 1.6rem 0;
  border-right: 1px solid #D9C3A4;
  text-align: center;
}
.p-contact {
  /* 「電話でのお問合せ」（五智の杜準拠 24px / 1.2 / 600） */
}
.p-contact__tel-lead {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #414036;
}
.p-contact {
  /* 「自淨殿」販売案内所＋受付時間（22px / 18px） */
}
.p-contact__tel-name {
  margin-top: 2.5rem;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #414036;
}
.p-contact__tel-name span {
  display: block;
  margin-top: 0.9rem;
  font-size: 17px;
  font-weight: 500;
}
.p-contact {
  /* 電話番号（五智の杜準拠 50px / 1 / 600） */
}
.p-contact__tel-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding-top: 0.4em;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: clamp(34px, 4.9rem, 49px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #6AA169;
}
.p-contact__tel-num .c-ruby__rt {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.26em;
  font-weight: 500;
  color: #6AA169;
}
.p-contact__tel-num {
  /* PC・タブレットは発信できないようにリンクを無効化（SPのみ有効） */
}
.p-contact__tel-num a {
  color: inherit;
  pointer-events: none;
  cursor: default;
}
@media screen and (max-width: 767px) {
  .p-contact__tel-num a {
    pointer-events: auto;
    cursor: pointer;
  }
}
.p-contact__tel-icon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 4.5rem;
  line-height: 0;
}
.p-contact__action {
  width: 50%;
  padding: 1.1rem 0 0;
  text-align: center;
}
.p-contact {
  /* ボタン（五智の杜準拠：高さ88px・28px相当を2ボタンに割付） */
}
.p-contact__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3.4rem;
}
.p-contact__btns .c-btn--lg {
  width: calc((100% - 3.4rem) / 2);
  max-width: 25rem;
  height: 8rem;
  padding: 0 1.6rem;
  font-size: clamp(15px, 2.3rem, 23px);
  letter-spacing: 0.04em;
}
.p-contact__btns .c-btn--lg .c-btn__icon {
  width: 2.1rem;
}
.p-contact__dl {
  margin-top: 3.4rem;
}
.p-contact__dl a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  font-size: 17px;
  font-weight: 500;
  color: #1B6FD0;
  text-decoration: none;
}
.p-contact__dl-icon {
  display: block;
  width: 2rem;
  line-height: 0;
}
.p-contact__notes {
  margin-top: 3.4rem;
}
.p-contact__notes li {
  font-size: 15px;
  line-height: 1.9;
  color: #414036;
}
.p-contact__notes li.is-indent {
  padding-left: 1em;
}
.p-contact__company {
  margin-top: 2.6rem;
}
.p-contact__company li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 15px;
  line-height: 1.7;
  color: #414036;
}
.p-contact__company-logo {
  display: inline-block;
  width: 7.8rem;
  margin: 0 1rem 0 0.4rem;
  line-height: 0;
}
.p-contact {
  /* 折り返してもテキストの開始位置に揃える */
}
.p-contact__company-name {
  display: inline-block;
  text-align: left;
}

/* ======================================================
   画面下部の固定CTA（SPのみ表示）
   ====================================================== */
.p-fixcta {
  display: none;
}
@media screen and (max-width: 767px) {
  .p-fixcta {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 90;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* 五智の杜 .floating-buttons-sub 準拠 */
    gap: 1.4rem;
    width: 100%;
    padding: 1.2rem 0.8rem;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ECEAE8));
    background: linear-gradient(180deg, #ffffff 0%, #ECEAE8 100%);
    border-top: 1px solid #C9C3BC;
  }
}
@media screen and (max-width: 767px) and (max-width: 375px) {
  .p-fixcta {
    gap: 0.8rem;
  }
}
.p-fixcta__btn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.4rem;
  width: calc((100% - 28px) / 3);
  min-height: 4.8rem;
  padding: 0.4rem;
  border: 1px solid #ffffff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  /* フリーダイヤルは「アイコン＋テキスト」のかたまりを中央に */
}
.p-fixcta__btn--tel {
  background: #6AA169;
}
.p-fixcta__btn--tel .p-fixcta__text {
  text-align: center;
}
.p-fixcta__btn--green {
  background: #70875A;
}
.p-fixcta__btn--gold {
  background: #AD8349;
}
.p-fixcta__btn {
  /* 外部リンクアイコンは絶対配置にして、ラベルをボタン中央に置く */
}
.p-fixcta__btn--green, .p-fixcta__btn--gold {
  padding-left: 0.8rem;
  padding-right: 1.8rem;
}
.p-fixcta__icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2rem;
  line-height: 0;
}
.p-fixcta__ex {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.4rem;
  line-height: 0;
}
.p-fixcta__text {
  white-space: nowrap;
}
.p-fixcta__text small {
  display: block;
  font-size: 11px;
}

/* 資料請求エリア：統合ボタン（1つ） */
.p-contact__btns .c-btn--brown.c-btn--lg {
  width: 100%;
  max-width: 42rem;
  /* アイコンは絶対配置なので、左右paddingは均等＝ラベルがボタン中央 */
  padding: 0 2rem;
  font-size: clamp(15px, 2.3rem, 23px);
  letter-spacing: 0.04em;
}
.p-contact__btns .c-btn--brown.c-btn--lg .c-btn__icon {
  right: 2.4rem;
  width: 2.1rem;
}
@media screen and (max-width: 767px) {
  .p-contact__btns .c-btn--brown.c-btn--lg {
    max-width: none;
    height: 6rem;
    padding: 0 3.2rem;
    font-size: min(19px, 5.2vw);
    line-height: 1.2;
  }
  .p-contact__btns .c-btn--brown.c-btn--lg .c-btn__icon {
    right: 1.4rem;
    width: 1.4rem;
  }
}

/* 下部固定CTA：統合ボタン */
.p-fixcta__btn--brown {
  background: #5D4536;
  cursor: pointer;
}

/* 下部固定CTA：2ボタン構成（電話番号＋見学予約・資料請求）
   五智の杜 .floating-buttons-sub 実測に合わせる
   ・ボタンは等幅・高さ48px・角丸8px・gap 14px
   ・番号 : Noto Serif 19px / 600 ／ 受付時間 : Noto Sans 10px / 500
   ・「見学予約・資料請求」: 15px / 500 */
.p-fixcta__btn--tel {
  width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  gap: 0.4rem;
}
.p-fixcta__btn--tel .p-fixcta__text {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN", serif;
  font-size: min(19px, 4.9vw);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}
.p-fixcta__btn--tel .p-fixcta__text small {
  display: block;
  margin-top: 2px;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: min(10px, 2.6vw);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
}
.p-fixcta__btn--brown {
  width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  /* アイコンは絶対配置。右paddingを左より 6px 大きくして、
     ラベルをボタン中央より 3px 左に置く（カンプ実測） */
  padding-right: 1.8rem;
  padding-left: 1.2rem;
}
.p-fixcta__btn--brown .p-fixcta__text {
  font-size: min(15px, 3.9vw);
  font-weight: 500;
}

/* ======================================================
   SP（〜767px）
   ・デザイン幅 750px（＝375pt / 2倍） を基準に作成
   ・PC側の指定を上書きするため、必ず最後に読み込むこと
   ====================================================== */
@media screen and (max-width: 767px) {
  body {
    /* SPヘッダーは固定しない（五智の杜と同じ） */
    padding-top: 0;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    font-size: 16px;
    line-height: 1.5;
  }
  .m-wrap {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  /* ====================================================
     共通見出し（左の緑バー＋下線）
     ==================================================== */
  .c-ttl {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.4rem 0 1rem 1.5rem;
    border-bottom: 1px solid #9BCA9A;
    font-size: 20px;
    line-height: 1.5;
    /* 左の緑バーは下線に接地させる */
  }
  .c-ttl::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 0.5rem;
    height: auto;
    background: #70875A;
  }
  /* ====================================================
     ボタン
     ==================================================== */
  .c-btn--lg {
    width: 100%;
    height: 5.2rem;
    padding: 0 4rem 0 1.6rem;
    font-size: 16px;
  }
  .c-btn--lg .c-btn__icon {
    right: 1.6rem;
    width: 1.4rem;
  }
  .c-btn--outline {
    width: 24rem;
    height: 4.4rem;
    font-size: 16px;
  }
  .c-btn--lg {
    width: 100%;
  }
  .c-more {
    width: 20rem;
    height: 4.2rem;
    border-radius: 8px;
    font-size: 16px;
  }
  .c-more::after {
    right: 24px;
  }
  /* ====================================================
     header（SPはロゴのみ）
     ==================================================== */
  .l-header {
    /* 五智の杜と同じく、SPではヘッダーを固定しない */
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .l-header__inner {
    position: relative;
    height: 7rem;
    padding: 0 1.2rem;
  }
  .l-header__logos {
    position: relative;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    gap: 0;
    padding-right: 0;
  }
  .l-header {
    /* 京王ロゴは自淨殿ロゴの上端に揃える */
  }
  .l-header__logo-keio {
    position: absolute;
    top: 0;
    left: 0;
    width: 7rem;
    -webkit-transform: none;
            transform: none;
  }
  .l-header__logo-site {
    width: 146px;
  }
  .l-header__right {
    display: none;
  }
  .l-nav {
    display: none;
  }
  /* ====================================================
     MV
     ==================================================== */
  .p-mv {
    /* 五智の杜準拠：390 : 302 */
  }
  .p-mv__visual {
    aspect-ratio: 390/302;
    min-height: 0;
    height: auto;
    background-image: url(../img/front/mv-sp.webp);
  }
  .p-mv {
    /* SPも、デザイン幅390pxを基準に画像の縮小へ同調させる
       （min(px, vw) ＝ 390px以上ではpx値どおり／それより狭いと画像と同じ比率で縮む） */
  }
  .p-mv__inner {
    padding: 0 min(1.6rem, 4.103vw) min(2.8rem, 7.179vw);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  }
  .p-mv__ruby {
    margin-bottom: min(0.6rem, 1.538vw);
    font-size: min(10px, 2.564vw);
  }
  .p-mv__name {
    font-size: min(27px, 6.923vw);
  }
  .p-mv__catch {
    margin-top: min(1.8rem, 4.615vw);
    font-size: min(16px, 4.103vw);
    line-height: 1.6;
    letter-spacing: 0.01em;
  }
  .p-mv__bar span {
    padding: 2px 2rem;
    padding: 9px 2rem;
    font-size: 16px;
  }
  /* ====================================================
     お知らせ
     ==================================================== */
  .p-news__link {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 1.2rem;
    min-height: 0;
    padding: 1.6rem 2rem;
  }
  .p-news__icon {
    width: 18px;
    margin-top: 5px;
  }
  .p-news__text {
    font-size: 16px;
    line-height: 1.5;
  }
  .p-news__ex {
    width: 15px;
    margin-left: 6px;
  }
  /* ====================================================
     イントロ
     ==================================================== */
  /* SPは専用の背景画像に差し替え
     （書き出しサイズの目安：375 × 749px ／ @2x = 750 × 1498px） */
  .p-intro {
    background: url(../img/front/intro-bg_sp.webp) center bottom;
    background-size: 100%;
  }
  .p-intro__body {
    padding: 34px 0 30px;
  }
  .p-intro__access {
    font-size: 20px;
    line-height: 1.5;
  }
  .p-intro__points {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
    margin-top: 2.2rem;
  }
  .p-intro__point {
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    /* PCの固定幅を解除 */
  }
  .p-intro__point:nth-child(1), .p-intro__point:nth-child(2), .p-intro__point:nth-child(3) {
    width: auto;
  }
  .p-intro__point-label {
    min-width: 8.8rem;
    padding: 0.5rem 1rem;
    font-size: 16px;
  }
  .p-intro__point-text {
    font-size: 19px;
  }
  .p-intro__lead {
    margin-top: 4.6rem;
    font-size: 21px;
    line-height: 1.5;
    white-space: normal;
  }
  .p-intro__photo {
    padding-top: 125%;
  }
  /* ====================================================
     料金プラン
     ==================================================== */
  .p-price {
    padding: 4rem 0 5rem;
  }
  .p-price__list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem 1rem;
    margin-top: 2.4rem;
  }
  .p-price {
    /* カードサイズは固定（高さのみ固定・幅は2カラム） */
  }
  .p-price__card {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc((100% - 10px) / 2);
    min-height: auto;
    border-width: 1px;
  }
  .p-price__body {
    padding: 15px 10px 16px;
  }
  .p-price__card .p-price__name {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: auto;
    font-size: 18px;
  }
  .p-price__yen {
    margin: 1rem 0 1.4rem;
    font-size: 16px;
  }
  .p-price__yen .num {
    margin-right: 0;
    font-size: 38px;
  }
  .p-price__spec + .p-price__spec {
    margin-top: 10px;
  }
  .p-price__spec-ttl {
    min-height: 2rem;
    padding: 1px 0.4rem;
    font-size: 12px;
    text-align: center;
  }
  .p-price__spec-data {
    padding-top: 7px;
  }
  .p-price__card .p-price__spec:first-of-type .p-price__spec-data {
    min-height: 0;
    padding-bottom: 0;
  }
  .p-price__fee {
    font-size: 16px;
  }
  .p-price__note {
    min-height: 0;
    margin-top: 0.5rem;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
  }
  .p-price__term {
    font-size: 13px;
  }
  .p-price {
    /* -- 改葬プラン -- */
  }
  .p-price__sub {
    margin-top: 4.6rem;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
  }
  .p-price__move {
    width: 100%;
    margin-top: 1.6rem;
    border-width: 1px;
  }
  .p-price__move-catch {
    display: none;
  }
  .p-price__move-body {
    gap: 1.4rem;
    padding: 1.8rem 1.4rem;
  }
  .p-price__move-left {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 118px;
            flex: 0 0 118px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    padding-top: 0;
  }
  .p-price__move-left .p-price__name {
    font-size: 17px;
    color: #426323;
  }
  .p-price__move-left .p-price__yen {
    margin-top: 6px;
    font-size: 16px;
  }
  .p-price__move-left .p-price__yen .num {
    font-size: 34px;
  }
  .p-price__move-right {
    width: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
  }
  .p-price__move-right .p-price__spec-ttl {
    font-size: 12px;
  }
  .p-price__move-right .p-price__spec:first-of-type .p-price__spec-data {
    padding-bottom: 0;
  }
  .p-price__move-notes {
    padding: 0.6rem 1.4rem 0.9rem;
  }
  .p-price__move-notes li {
    font-size: 13px;
  }
  .p-price__notes {
    margin-top: 2.8rem;
    padding-left: 0.4rem;
  }
  .p-price__notes li {
    font-size: 16px;
    line-height: 1.6;
  }
  .p-price__notes li + li {
    margin-top: 10px;
  }
  .p-price__notes li {
    /* 「※価格に含まれるもの」〜「■戒名料」を1つのかたまりに見せる */
  }
  .p-price__notes li.is-sub {
    margin-top: 4px;
  }
  .p-price__notes {
    /* 「■」項目：見出しだけを1行目に置き、説明文は次行から
       （行頭は「■」の後ろ＝見出しと同じ位置で揃う） */
  }
  .p-price__notes .p-price__sep {
    display: none;
  }
  .p-price__notes .p-price__subdesc {
    display: block;
    text-indent: 0;
  }
  /* ====================================================
     永代供養（期間終了後）
     ==================================================== */
  .p-eternal {
    padding: 0.4rem 0 4rem;
  }
  .p-eternal__inner {
    display: block;
    padding: 0;
  }
  .p-eternal__text {
    padding: 0 2rem;
  }
  .p-eternal__ttl {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
  }
  .p-eternal__desc {
    margin-top: 1.4rem;
    padding-left: 0;
    font-size: 16px;
  }
  .p-eternal {
    /* 楕円は少し小さめ・中央に置いて上下左右に余白をとる */
  }
  .p-eternal__img {
    width: 62%;
    max-width: 26rem;
    margin: 3.4rem auto 0;
  }
  /* ====================================================
     自淨殿の特長（SPは 番号 → 画像 → 見出し → 本文）
     ==================================================== */
  .p-feature {
    padding: 4rem 0 5rem;
  }
  .p-feature__list {
    margin-top: 26px;
  }
  .p-feature__item {
    display: block;
  }
  .p-feature__item + .p-feature__item {
    margin-top: 58px;
  }
  .p-feature__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 448/256;
  }
  .p-feature__ttl {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 1.2rem;
    margin-top: 1.6rem;
    padding-bottom: 1rem;
  }
  .p-feature__num {
    font-size: 24px;
  }
  .p-feature__ttl-text {
    font-size: 18px;
    line-height: 1.5;
  }
  .p-feature__body.js-feature-body {
    max-height: 24rem;
  }
  .p-feature__body.js-feature-body::after {
    height: 6rem;
  }
  .p-feature__desc {
    margin-top: 1.2rem;
    font-size: 16px;
    line-height: 1.7;
  }
  .p-feature__notes {
    margin-top: 1.4rem;
    padding-left: 0;
  }
  .p-feature__notes li {
    padding-left: 2.2rem;
    font-size: 16px;
    line-height: 1.7;
  }
  .p-feature__notes li + li {
    margin-top: 1.1rem;
  }
  .p-feature__notes li::before {
    top: 0.8rem;
    width: 1.4rem;
    height: 1.4rem;
  }
  .p-feature__more {
    margin-top: -1rem;
  }
  .p-feature__more .c-more {
    width: 20rem;
    height: 3.6rem;
    font-size: 16px;
  }
  .p-feature__more .c-more::after {
    right: 2rem;
  }
  /* ====================================================
     施設紹介
     ==================================================== */
  .p-facility {
    padding: 4rem 0 5rem;
  }
  .p-facility__list {
    display: block;
    margin-top: 2.6rem;
  }
  .p-facility__item {
    width: 100%;
  }
  .p-facility__item + .p-facility__item {
    margin-top: 40px;
  }
  .p-facility__ttl {
    margin-top: 1.8rem;
    font-size: 18px;
    line-height: 1.5;
  }
  .p-facility__desc {
    margin-top: 1rem;
    font-size: 16px;
    line-height: 1.6;
  }
  /* ====================================================
     お寺について
     ==================================================== */
  .p-temple {
    padding: 4rem 0 5rem;
  }
  .p-temple__list {
    display: block;
    margin-top: 2.6rem;
  }
  .p-temple__item {
    width: 100%;
  }
  .p-temple__item + .p-temple__item {
    margin-top: 40px;
  }
  .p-temple__item {
    width: 100%;
  }
  .p-temple__lead {
    margin-top: 2.6rem;
    font-size: 20px;
  }
  .p-temple__desc {
    margin-top: 1.4rem;
    font-size: 16px;
  }
  .p-temple__map {
    width: 100%;
    margin-top: 4rem;
  }
  /* ====================================================
     交通アクセス
     ==================================================== */
  .p-access {
    padding: 4rem 0 5rem;
  }
  .p-access__lead {
    margin-top: 2.6rem;
    font-size: 19px;
    line-height: 1.5;
  }
  .p-access__main {
    display: block;
    margin-top: 2rem;
  }
  .p-access__map {
    width: 100%;
  }
  .p-access__gmap {
    margin-top: 1.8rem;
    text-align: center;
  }
  .p-access__address {
    margin-bottom: 1.4rem;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .p-access__info {
    padding-top: 36px;
  }
  .p-access__block + .p-access__block {
    margin-top: 30px;
  }
  .p-access__block-ttl {
    gap: 1rem;
    font-size: 16px;
  }
  .p-access__block-ttl::after {
    left: 34px;
  }
  .p-access__icon {
    width: 24px;
  }
  .p-access__block-body {
    margin-top: 1rem;
    padding-left: 3.4rem;
  }
  .p-access__block-body p {
    font-size: 16px;
  }
  .p-access__sub {
    margin-top: 5rem;
    font-size: 21px;
    line-height: 1.5;
  }
  .p-access__sub-text {
    margin-top: 1.2rem;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }
  .p-access__route {
    width: 100%;
    margin-top: 2rem;
  }
  .p-access__notes {
    width: auto;
    margin-top: 1.6rem;
    text-align: left;
  }
  .p-access__notes li {
    padding-left: 1em;
    font-size: 13px;
    line-height: 1.5;
  }
  /* ====================================================
     バスでのアクセス
     ==================================================== */
  .p-bus {
    margin-top: 2.4rem;
    padding-bottom: 0;
  }
  .p-bus__tabs {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
  }
  .p-bus__tab {
    width: auto;
    height: 4rem;
    padding: 0 0.8rem;
    border: 1px solid #AD8349;
    border-radius: 8px;
    /* 5つのタブが必ず2段に収まるサイズ。
       390px以下（iPhone）でも折り返しが3段にならないよう画面幅に追従させる */
    font-size: min(14px, 3.5vw);
  }
  .p-bus__panel {
    margin-top: 2rem;
    padding-bottom: 0;
    border-top: 4px solid #5E5447;
  }
  .p-bus__head {
    border-top: none;
  }
  .p-bus__head .m-wrap {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .p-bus__dest {
    padding: 1.2rem 0;
    border-bottom: 1px dashed #D9C3A4;
    font-size: 16px;
  }
  .p-bus__dest::after {
    display: none;
  }
  .p-bus__anchors {
    gap: 2.6rem;
    padding: 0.8rem 0 0;
  }
  .p-bus__anchor {
    padding: 0.6rem 2px 1rem;
    font-size: 17px;
  }
  .p-bus {
    /* 前へ／次へ */
  }
  .p-bus__slider {
    position: relative;
  }
  .p-bus__arrow {
    width: 3.4rem;
    height: 3.4rem;
    margin-top: -1.7rem;
  }
  .p-bus__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
  }
  .p-bus__arrow--prev {
    left: 0.8rem;
  }
  .p-bus__arrow--prev::before {
    margin: -5px 0 0 -2px;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .p-bus__arrow--next {
    right: 0.8rem;
  }
  .p-bus__arrow--next::before {
    margin: -5px 0 0 -7px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .p-bus__arrow.is-disabled {
    background: #D9C3A4;
    pointer-events: none;
  }
  .p-bus {
    /* カードが画面中央にくるよう左右に余白をとる */
  }
  .p-bus__scroll {
    padding: 2.4rem 0 2rem;
  }
  .p-bus__list {
    padding-left: calc((100% - 278px) / 2);
    padding-right: calc((100% - 278px) / 2);
  }
  .p-bus__card {
    width: 278px;
    height: auto;
    margin-right: 2rem;
  }
  .p-bus__card-ttl {
    font-size: 16px;
  }
  .p-bus__stops {
    padding: 18px 18px 20px;
  }
  .p-bus {
    /* 矩形の内側余白を詰めてカード全体の高さを抑える（Figma準拠） */
  }
  .p-bus__stop {
    min-height: 3.2rem;
    padding: 0.2rem 1rem;
    font-size: 16px;
  }
  .p-bus__stop + .p-bus__stop {
    margin-top: 18px;
  }
  .p-bus__stop + .p-bus__stop::before {
    height: 19.5px;
  }
  .p-bus__stop-icon {
    width: 20px;
  }
  .p-bus__note {
    margin-top: 1.6rem;
    font-size: 12px;
    line-height: 1.5;
  }
  /* ====================================================
     よくあるご質問
     ==================================================== */
  .p-faq {
    padding: 4rem 0 5rem;
  }
  .p-faq__list {
    margin-top: 24px;
  }
  .p-faq__item + .p-faq__item {
    margin-top: 12px;
  }
  .p-faq__q {
    /* Qが2行以上になっても、ラベルは常に1行目の左に置く（Aと同じ） */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1rem;
    padding: 1.6rem 3.8rem 1.6rem 1.6rem;
  }
  .p-faq__label {
    font-size: 17px;
  }
  .p-faq__q-text {
    font-size: 16px;
    line-height: 1.5;
  }
  .p-faq__icon {
    top: 2.4rem;
    right: 1.6rem;
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    border-width: 1.5px;
  }
  .p-faq__item.is-open .p-faq__icon {
    top: 26px;
    margin-top: 0;
  }
  .p-faq__a-inner {
    gap: 1rem;
    padding: 1.4rem 3.8rem 1.6rem 1.6rem;
  }
  .p-faq__a-text {
    font-size: 16px;
  }
  .p-faq__more {
    margin-top: 24px;
  }
  /* ====================================================
     資料請求・お問合せ
     ==================================================== */
  .p-contact {
    padding: 4rem 0 5rem;
  }
  .p-contact__lead {
    margin-top: 2rem;
    font-size: 16px;
    line-height: 1.6;
  }
  .p-contact__box {
    display: block;
    margin-top: 2rem;
    padding: 2.4rem 1.6rem;
    border-width: 3px;
  }
  .p-contact__tel {
    width: 100%;
    padding: 0 0 2.2rem;
    border-right: none;
    border-bottom: 1px solid #D9C3A4;
  }
  .p-contact__tel-lead {
    font-size: 18px;
  }
  .p-contact__tel-name {
    margin-top: 1rem;
    font-size: 17px;
  }
  .p-contact__tel-name span {
    font-size: 16px;
    font-weight: 400;
  }
  .p-contact__tel-num {
    margin-top: 1.4rem;
    font-size: 34px;
  }
  .p-contact__tel-num .c-ruby__rt {
    font-size: 0.3em;
  }
  .p-contact__tel-icon {
    display: block;
    width: 2.6rem;
    margin-top: 0.4rem;
    line-height: 0;
  }
  .p-contact__action {
    width: 100%;
    padding: 2.2rem 0 0;
  }
  .p-contact__btns {
    gap: 10px;
  }
  .p-contact {
    /* 統合後は1ボタンなので幅いっぱい */
  }
  .p-contact .c-btn--lg {
    width: 100%;
    max-width: none;
    padding: 0 3.2rem;
    font-size: 18px;
    height: 6rem;
    line-height: 1.2;
  }
  .p-contact .c-btn--lg .c-btn__icon {
    right: 1.4rem;
    width: 1.4rem;
  }
  .p-contact__dl {
    margin-top: 1.8rem;
  }
  .p-contact__dl a {
    font-size: 16px;
  }
  .p-contact__notes {
    margin-top: 2.4rem;
    padding-left: 1.2em;
  }
  .p-contact__notes li {
    font-size: 14px;
    line-height: 1.6;
    text-indent: -1.2em;
  }
  .p-contact__notes li.is-indent {
    padding-left: 0;
    text-indent: 0;
  }
  .p-contact__notes li.is-noindent {
    text-indent: -1.2em;
  }
  .p-contact__company {
    margin-top: 2rem;
    /* 折り返した2行目は、その行のテキスト開始位置に揃える
       2行になっても《募集代行》とロゴは1行目に揃える */
  }
  .p-contact__company li {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 14px;
    text-align: left;
  }
  .p-contact__company-logo {
    width: 6.2rem;
    margin-top: 0;
  }
  /* ====================================================
     footer
     ==================================================== */
  .l-footer__inner {
    display: block;
    min-height: 0;
    padding: 3rem 2rem 2.6rem;
    text-align: center;
  }
  .l-footer__logo {
    width: 20rem;
    margin: 0 auto;
  }
  .l-footer__nav {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 3.4rem;
    margin: 2.2rem 0 0;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid rgba(94, 84, 71, 0.2);
  }
  .l-footer__nav a {
    font-size: 16px;
  }
  .l-footer__brand {
    width: 14.5rem;
    margin: 2.4rem auto 0;
  }
  .l-footer__copy {
    text-align: center;
  }
  .l-footer__copy small {
    padding: 1.6rem 1.5rem;
    font-size: 12px;
  }
  /* ====================================================
     五智の杜準拠の幅指定を SP では通常の左右余白に戻す
     ==================================================== */
  .p-faq > .m-wrap,
  .p-contact > .m-wrap,
  .p-mv__inner,
  .l-header__inner,
  .l-footer__inner,
  .l-footer__copy small {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .l-header__inner {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* セクション上下余白（五智の杜準拠） */
  .p-faq,
  .p-contact {
    padding: 45px 0 50px;
  }
  /* ====================================================
     ページトップへ戻る（固定CTAの上に出す）
     ==================================================== */
  .c-pagetop {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .c-pagetop.is-absolute {
    bottom: auto;
  }
}