@charset "utf-8";

/* ==========================================================================
   わそうのお別れ — 共通スタイル
   色・書体・余白の決まりは design-system/MASTER.md（v3）が正。
   ========================================================================== */

:root {
  --ink: #1e1b22;
  --body: #4f4a57;
  --mute: #8d8794;
  --faint: #a39da9;
  --purple: #4b3f69;
  --green: #3f6b58;
  --line: #ebe8ef;
  --line-strong: #c9c3d2;
  --lilac: #f0ecf8;
  --lilac-line: #d9d0ec;
  --mint: #e8f0ea;
  --mint-line: #d2e2d7;
  --mint-rule: #c9dcd1;
  --circle: #ddd8e4;
  --hair: rgba(30, 27, 34, .07);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --gothic: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;

  --pad: clamp(24px, 4vw, 56px);
  --gap-sec: clamp(80px, 9vw, 128px);
  --gap-sec-l: clamp(96px, 11vw, 160px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--gothic);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; }

h1, h2, h3, h4 { font-weight: 400; margin: 0; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- 共通の部品 ------------------------------------------------------- */

.wrap { padding-left: var(--pad); padding-right: var(--pad); }

.mincho { font-family: var(--mincho); }

/* 小ラベル（和文）。紫＝事業者、緑＝段取り */
.label {
  font-family: var(--mincho);
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--purple);
  text-indent: .34em;
}
.label.g { color: var(--green); }

.rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--purple);
}
.rule.g { background: var(--green); }

.lead {
  max-width: 34em;
  font-size: 15px;
  line-height: 2.5;
  letter-spacing: .09em;
  color: var(--body);
}
.lead.s { font-size: 14px; line-height: 2.4; }

.note {
  font-size: 12.5px;
  line-height: 2.1;
  letter-spacing: .06em;
  color: var(--mute);
}

/* 本文中のリンク（下線が左から伸びる） */
.ln {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: .3em;
}
.ln::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.76, 0, .24, 1);
}
.ln:hover::after { transform: scaleX(1); transform-origin: left; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 54px;
  border: 1px solid var(--purple);
  color: var(--purple);
  font-size: 13px;
  letter-spacing: .3em;
  text-indent: .3em;
  transition: background-color .5s ease, color .5s ease;
}
.btn:hover { background: var(--purple); color: #ffffff; }

.btn.fill { background: var(--purple); color: #ffffff; }
.btn.fill:hover { background: var(--ink); border-color: var(--ink); }

/* --- ヘッダー --------------------------------------------------------- */

.hd {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--pad);
}

.hd__mark {
  font-family: var(--mincho);
  font-size: 20px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--purple);
  white-space: nowrap;
}

.hd__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); }

.hd__nav a {
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--ink);
  white-space: nowrap;
}
.hd__nav a:hover { color: var(--purple); }

.hd__right { display: flex; align-items: center; gap: 22px; }

.hd__tel { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hd__tel span { font-size: 9.5px; letter-spacing: .2em; color: var(--mute); }
.hd__tel a {
  font-family: var(--mincho);
  font-size: 19px;
  letter-spacing: .06em;
  color: var(--ink);
}

.burger {
  width: 42px; height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 26px; height: 1px;
  background: var(--ink);
  transition: transform .4s cubic-bezier(.76, 0, .24, 1), opacity .3s ease;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* --- ドロワー（全ページの入口） --------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #ffffff;
  padding: 26px var(--pad) 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.drawer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  max-width: 1080px;
}

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

.drawer__group > p { margin-bottom: 4px; }

.drawer__group a {
  font-family: var(--mincho);
  font-size: 17px;
  letter-spacing: .14em;
  color: var(--ink);
}
.drawer__group a:hover { color: var(--purple); }

.drawer__tel {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px 28px;
}
.drawer__tel a {
  font-family: var(--mincho);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ink);
}

/* --- パンくず --------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px var(--pad) 0;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--mute);
}
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--purple); }
.crumbs span[aria-hidden] { color: var(--faint); }

/* --- 下層ページの見出し ------------------------------------------------ */

.phead {
  padding: clamp(52px, 6.5vw, 100px) var(--pad) clamp(60px, 7.5vw, 104px);
  display: flex;
  flex-direction: column;
  max-width: 980px;
}
.phead h1 {
  font-family: var(--mincho);
  font-size: clamp(31px, 4.6vw, 56px);
  line-height: 1.72;
  letter-spacing: .2em;
}
/* 間隔は一律にしない。ラベルは見出しに寄せ、本文の前で息を置く */
.phead > * + * { margin-top: 34px; }
.phead > .label + h1 { margin-top: 10px; }
.phead > h1 + .rule { margin-top: 38px; }
.phead > .rule + .lead { margin-top: 32px; }
.phead > .lead + .mincho { margin-top: 56px; }
.phead > .mincho + .note { margin-top: 8px; }
.phead .lead { max-width: 33em; }
.phead .mincho { letter-spacing: .04em !important; white-space: nowrap; }

/* --- セクション ------------------------------------------------------- */

.sec { padding: var(--gap-sec) var(--pad); }
.sec.top { border-top: 1px solid var(--line); }
/* 下層ページの見出し直後は、空きが二重になるので詰める */
.phead + .sec { padding-top: clamp(48px, 5vw, 76px); }
.sec.lilac { background: linear-gradient(to bottom, #f5f2fb 0%, #ebe6f6 100%); border-top: 1px solid var(--lilac-line); border-bottom: 1px solid var(--lilac-line); }
.sec.mint { background: linear-gradient(to bottom, #edf3ef 0%, #e3ece6 100%); border-top: 1px solid var(--mint-line); border-bottom: 1px solid var(--mint-line); }

.sec__head { display: flex; flex-direction: column; margin-bottom: clamp(48px, 5.5vw, 80px); }
.sec__head h2 {
  font-family: var(--mincho);
  font-size: clamp(26px, 3.3vw, 40px);
  line-height: 1.78;
  letter-spacing: .2em;
}
.sec__head > * + * { margin-top: 30px; }
.sec__head > .label + h2 { margin-top: 10px; }
.sec__head.mid { align-items: center; text-align: center; }

.inner { max-width: 1080px; margin: 0 auto; }
.inner.narrow { max-width: 760px; }

/* 2カラム（写真＋文章） */
.duo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 5vw, 72px);
  align-items: flex-start;
}
.duo__img { flex: 1 1 420px; min-width: 0; overflow: hidden; }
.duo__img img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; display: block; filter: saturate(.55); }
.duo__txt { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.duo.pad .duo__txt { padding-top: clamp(0px, 4vw, 56px); }

/* カード（プラン・記事など） */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.card { display: flex; flex-direction: column; gap: 0; }
.card > :where(* + *) { margin-top: 14px; }
.card__img { overflow: hidden; }
.card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: saturate(.55);
  transition: transform 1.1s var(--ease);
}
.card:hover .card__img img { transform: scale(1.045); }
.card h3 { margin-top: 26px; font-family: var(--mincho); font-size: 24px; letter-spacing: .19em; }
.card h3 + .note { margin-top: 8px; }
.card .lead { margin-top: 16px; }
.card .price { margin-top: 24px; }
.card .price {
  font-family: var(--mincho);
  font-size: 21px;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--purple);
}
.card .price small { font-size: 11.5px; letter-spacing: .14em; color: var(--mute); }

/* 番号付きの一覧（葬儀の流れ） */
.steps { border-top: 1px solid var(--mint-rule); }
.steps li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px clamp(24px, 4vw, 56px);
  padding: 34px 0;
  border-bottom: 1px solid var(--mint-rule);
}
.steps .no {
  flex: 0 0 auto;
  font-family: var(--mincho);
  width: 58px;
  font-size: 27px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--green);
}
.steps h3 { flex: 0 0 auto; min-width: 180px; font-family: var(--mincho); font-size: 20px; letter-spacing: .18em; }
.steps p { flex: 1 1 320px; min-width: 0; }

/* 定義リスト（会社概要・料金の内訳など） */
.dl { border-top: 1px solid var(--line); }
.dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 4vw, 56px);
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.dl dt {
  flex: 0 0 auto;
  min-width: 180px;
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--mute);
  padding-top: 3px;
}
.dl dd { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 15px; line-height: 2.25; letter-spacing: .06em; }

/* 開閉（よくある質問） */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mincho);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .1em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
  content: "Q";
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--purple);
  padding-top: 7px;
}
.qa summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 11px; height: 11px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  transform: rotate(45deg);
  transition: transform .4s cubic-bezier(.76, 0, .24, 1);
  margin-top: 10px;
}
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa .a { display: flex; gap: 18px; padding: 0 0 30px; }
.qa .a::before { content: "A"; flex: 0 0 auto; font-size: 12px; letter-spacing: .1em; color: var(--mute); padding-top: 4px; }

/* 声（お客様の声） */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 4vw, 56px); }
.voice { display: flex; flex-direction: column; gap: 18px; padding-top: 26px; border-top: 1px solid var(--line); }
.voice blockquote { margin: 0; font-family: var(--mincho); font-size: 18.5px; line-height: 2.15; letter-spacing: .11em; }
.voice cite { font-style: normal; font-size: 12px; letter-spacing: .14em; color: var(--mute); }

/* 本文（プライバシーポリシーなど長文） */
.doc { display: flex; flex-direction: column; gap: 44px; }
.doc section { display: flex; flex-direction: column; gap: 16px; }
.doc h2 { font-family: var(--mincho); font-size: 19px; letter-spacing: .14em; }
.doc li { padding-left: 1.2em; text-indent: -1.2em; font-size: 14.5px; line-height: 2.3; letter-spacing: .06em; color: var(--body); }
.doc li::before { content: "・"; color: var(--mute); }

/* CTA */
.cta {
  padding: var(--gap-sec-l) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.cta h2 { font-family: var(--mincho); font-size: clamp(24px, 2.8vw, 32px); line-height: 2; letter-spacing: .18em; text-indent: .18em; }
.cta .tel { font-family: var(--mincho); font-size: clamp(30px, 3.9vw, 48px); letter-spacing: .04em; white-space: nowrap; color: var(--ink); }

/* 緊急の帯 */
.urgent {
  position: relative;
  margin: 0 var(--pad);
  padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 76px) clamp(56px, 7vw, 92px);
  background: linear-gradient(168deg, #f6f3fc 0%, #e9e2f3 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 76px);
}
/* この面の装飾はこの一本だけ */
.urgent::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(56px, 7vw, 96px);
  width: 1px;
  height: clamp(52px, 6vw, 84px);
  background: var(--purple);
}
.urgent__l { flex: 1 1 380px; min-width: 0; }
.urgent__l h2 {
  margin-top: 12px;
  font-family: var(--mincho);
  font-size: clamp(26px, 3.1vw, 37px);
  line-height: 1.78;
  letter-spacing: .2em;
}
.urgent__l .lead { margin-top: 30px; max-width: 29em; }
.urgent__l .ln { margin-top: 40px; }
.urgent__r {
  flex: 0 1 auto;
  padding-top: 22px;
  border-top: 1px solid var(--lilac-line);
}
.urgent__r a {
  display: block;
  margin: 12px 0 10px;
  font-family: var(--mincho);
  font-size: clamp(27px, 3.7vw, 47px);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ink);
}

/* --- フッター --------------------------------------------------------- */

.ft {
  padding: clamp(64px, 7vw, 104px) var(--pad) 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5vw, 72px);
}
.ft__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.ft__mark { display: flex; flex-direction: column; gap: 16px; }
.ft__mark p:first-child {
  font-family: var(--mincho);
  font-size: 25px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--purple);
}
.ft__cols { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 4vw, 64px); }
.ft__cols > div { min-width: 150px; }
.ft__cols ul { display: flex; flex-direction: column; gap: 14px; }
.ft__cols a { font-size: 12.5px; letter-spacing: .12em; color: var(--ink); }
.ft__cols a:hover { color: var(--purple); }
.ft__cols .h { font-size: 10.5px; letter-spacing: .24em; color: var(--mute); margin-bottom: 4px; }
.ft__btm { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.ft__btm p, .ft__btm a { font-size: 11px; letter-spacing: .14em; color: var(--faint); }

/* --- スマホ下部の固定バー ---------------------------------------------- */

.bar { display: none; }

.wa-stag > *:nth-child(1) { --i: 0; }
.wa-stag > *:nth-child(2) { --i: 1; }
.wa-stag > *:nth-child(3) { --i: 2; }
.wa-stag > *:nth-child(4) { --i: 3; }
.wa-stag > *:nth-child(5) { --i: 4; }
.wa-stag > *:nth-child(6) { --i: 5; }
.wa-stag > *:nth-child(7) { --i: 6; }
.wa-stag > *:nth-child(8) { --i: 7; }
.wa-stag > *:nth-child(9) { --i: 8; }
.wa-stag > *:nth-child(10) { --i: 9; }
.wa-stag > *:nth-child(11) { --i: 10; }
.wa-stag > *:nth-child(12) { --i: 11; }

/* --- 動き ------------------------------------------------------------- */

@keyframes wa-in     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wa-in-x   { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes wa-veil   { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes wa-zoom   { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes wa-rule   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wa-mask   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wa-maskx  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wa-par    { from { transform: translateY(-7.5%) scale(1.17); } to { transform: translateY(7.5%) scale(1.17); } }
@keyframes wa-blur   { from { opacity: 0; filter: blur(13px); transform: scale(1.02); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes wa-fvch   { from { opacity: 0; filter: blur(9px); transform: translateY(30px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes wa-hd     { from { background-color: rgba(255,255,255,0); box-shadow: 0 1px 0 rgba(201,195,210,0); }
                         to { background-color: rgba(255,255,255,.93); box-shadow: 0 1px 0 rgba(201,195,210,.85); } }

/* 読み込み時（JSに依らず動く） */
.wa-load     { opacity: 0; animation: wa-in 1.5s var(--ease) forwards; }
.wa-ch       { display: inline-block; opacity: 0; animation: wa-fvch 1.5s var(--ease) forwards; }
.wa-veil     { transform-origin: top; animation: wa-veil 1.4s cubic-bezier(.76, 0, .24, 1) .15s forwards; }
.wa-kenburns { animation: wa-zoom 2.6s var(--ease) .15s both; }

/* 読み進めの細い線 */
.prog {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 40;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
}

/* スクロール連動（対応ブラウザ） */
@supports (animation-timeline: view()) {
  .wa-rise {
    animation: wa-in 1s var(--ease) both;
    animation-timeline: view();
    animation-range: entry calc(4% + var(--i, 0) * 4%) cover calc(26% + var(--i, 0) * 4%);
  }
  .wa-slide {
    animation: wa-in-x 1s var(--ease) both;
    animation-timeline: view();
    animation-range: entry calc(4% + var(--i, 0) * 4%) cover calc(26% + var(--i, 0) * 4%);
  }
  .wa-blur {
    animation: wa-blur 1.2s var(--ease) both;
    animation-timeline: view();
    animation-range: entry calc(2% + var(--i, 0) * 4%) cover calc(30% + var(--i, 0) * 4%);
  }
  .wa-mask {
    animation: wa-mask 1.2s cubic-bezier(.76, 0, .24, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
  .wa-maskx {
    animation: wa-maskx 1.2s cubic-bezier(.76, 0, .24, 1) both;
    animation-timeline: view();
    animation-range: entry 2% cover 26%;
  }
  .wa-slow { animation: wa-zoom 1 linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  .wa-par  { animation: wa-par 1 linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .wa-line {
    transform-origin: left;
    animation: wa-rule 1.1s cubic-bezier(.76, 0, .24, 1) both;
    animation-timeline: view();
    animation-range: entry 10% cover 24%;
  }
  .wa-stag > * {
    animation: wa-in 1s var(--ease) both;
    animation-timeline: view();
    animation-range: entry calc(3% + var(--i, 0) * 5%) cover calc(24% + var(--i, 0) * 5%);
  }
}

@supports (animation-timeline: scroll()) {
  .prog { animation: wa-rule 1 linear both; animation-timeline: scroll(root block); }
  .hd   { animation: wa-hd 1 linear both; animation-timeline: scroll(root block); animation-range: 0 130px; }
}

/* 非対応ブラウザは JS（IntersectionObserver）が .is-in を付ける */
@supports not (animation-timeline: view()) {
  .wa-rise, .wa-blur, .wa-stag > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s ease, transform 1s var(--ease), filter 1s ease;
    transition-delay: calc(var(--i, 0) * .08s);
  }
  .wa-slide { opacity: 0; transform: translateX(-26px); transition: opacity 1s ease, transform 1s var(--ease); }
  .wa-blur  { filter: blur(13px); transform: none; }
  .wa-mask  { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.76, 0, .24, 1); }
  .wa-maskx { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.76, 0, .24, 1); }
  .wa-line  { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.76, 0, .24, 1); }
  .is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wa-load, .wa-ch, .wa-rise, .wa-slide, .wa-slow, .wa-par, .wa-line, .wa-kenburns,
  .wa-veil, .wa-mask, .wa-maskx, .wa-blur, .wa-stag > *, .prog, .hd {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
  .prog { display: none; }
}

/* --- ファーストビュー（TOP） ------------------------------------------- */

.fv { position: relative; margin: 0 var(--pad); overflow: hidden; }
.fv > img { width: 100%; height: clamp(420px, 56vw, 640px); object-fit: cover; display: block; filter: saturate(.55) brightness(.92); }
.fv__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(30,22,48,.70) 0%, rgba(30,22,48,.42) 26%, rgba(30,22,48,.13) 50%, rgba(30,22,48,0) 70%),
    linear-gradient(to top, rgba(30,22,48,.40) 0%, rgba(30,22,48,0) 32%);
}
.fv__veil { position: absolute; inset: 0; background: #ffffff; }
.fv__copy {
  position: absolute;
  /* 写真の高さに追従させる。固定の高さにすると末尾の一文字が次の列に落ちる */
  top: clamp(32px, 4vw, 52px);
  bottom: clamp(28px, 3.5vw, 48px);
  right: clamp(24px, 4.5vw, 60px);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--mincho);
  font-size: clamp(20px, 2.35vw, 31px);
  line-height: 2.45;
  letter-spacing: .26em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(14,11,18,.62), 0 0 54px rgba(14,11,18,.46);
}
.fv__sub {
  position: absolute;
  left: clamp(20px, 3vw, 44px);
  bottom: clamp(24px, 3vw, 40px);
  font-family: var(--mincho);
  font-size: 12px;
  letter-spacing: .3em;
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(14,11,18,.72);
}

/* --- 写真の見せ方 ------------------------------------------------------ */

/* 下層ページの見出し下に敷く帯 */
.pband {
  margin: 0 var(--pad) clamp(8px, 1vw, 16px);
  overflow: hidden;
  height: clamp(190px, 26vw, 330px);
}
.pband img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.55); }

/* 全幅の写真帯（縦書きの一言を重ねる） */
.band {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 44vw, 540px);
}
.band img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.52) brightness(.94); }
.band__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(30,22,48,.58) 0%, rgba(30,22,48,.24) 34%, rgba(30,22,48,0) 66%),
    linear-gradient(to top, rgba(30,22,48,.42) 0%, rgba(30,22,48,0) 34%);
}
.band__copy {
  position: absolute;
  top: clamp(44px, 6vw, 72px);
  right: clamp(22px, 4vw, 56px);
  height: clamp(230px, 33vw, 370px);
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 2.5;
  letter-spacing: .3em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(14,11,18,.6);
}
.band__copy span { display: block; }
.band__note {
  position: absolute;
  left: clamp(20px, 3vw, 44px);
  bottom: clamp(22px, 3vw, 38px);
  font-family: var(--mincho);
  font-size: 12px;
  letter-spacing: .3em;
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(14,11,18,.7);
}

/* 写真の並び（しつらえ・斎場など） */
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.fig { display: flex; flex-direction: column; gap: 14px; }
.fig__img { overflow: hidden; }
.fig__img img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  filter: saturate(.55);
  transition: transform 1.2s var(--ease);
}
.fig:hover .fig__img img { transform: scale(1.05); }
.fig figcaption { font-size: 12px; letter-spacing: .16em; color: var(--mute); }
.gal.wide .fig__img img { aspect-ratio: 4 / 3; }

/* 流れ・声などに添える横長の写真 */
.shot { overflow: hidden; margin-top: clamp(28px, 3vw, 44px); }
.shot img {
  width: 100%;
  height: clamp(200px, 26vw, 340px);
  object-fit: cover;
  display: block;
  filter: saturate(.55);
}

/* CTAの背景に敷く写真 */
.cta { position: relative; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.4) brightness(1.06); opacity: .22; }
.cta > * { position: relative; }

/* ファーストビューの動き（スクロールに連れて写真が沈み、コピーが流れる） */
@keyframes wa-fvpar { from { transform: scale(1) translateY(0); } to { transform: scale(1.1) translateY(3.5%); } }
@keyframes wa-fvout { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-46px); } }

@supports (animation-timeline: scroll()) {
  .fv > img {
    animation: wa-zoom 2.6s var(--ease) .15s both, wa-fvpar 1 linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 90vh;
  }
  .fv__copy {
    animation: wa-fvout 1 linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 68vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv > img, .fv__copy { animation: none !important; opacity: 1; transform: none; }
}

/* --- スマホ ----------------------------------------------------------- */

@media (max-width: 860px) {
  .hd__nav { display: none; }
  .hd__tel { display: none; }
  .hd { padding: 18px var(--pad); }
  .hd__mark { font-size: 18px; }

  body { padding-bottom: 76px; }

  .bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 25;
    display: flex;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
  }
  .bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
  }
  .bar__tel { flex: 1 1 0; border-right: 1px solid var(--line); color: var(--ink); }
  .bar__tel span { font-size: 9px; letter-spacing: .22em; color: var(--mute); }
  .bar__tel strong { font-family: var(--mincho); font-weight: 400; font-size: 16px; letter-spacing: .06em; }
  .bar__cta { flex: 0 0 132px; background: var(--purple); color: #ffffff; font-size: 11px; letter-spacing: .2em; text-indent: .2em; }
  .bar__cta:hover { color: #ffffff; }

  .drawer { padding-bottom: 96px; }
  .steps h3 { min-width: 0; flex: 1 1 100%; }
  .dl dt { min-width: 120px; }
  .duo.pad .duo__txt { padding-top: 0; }
  .band { height: clamp(300px, 72vw, 420px); }
  .band__copy { height: clamp(200px, 52vw, 300px); font-size: clamp(16px, 4.4vw, 20px); }
  .gal { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pband { height: clamp(150px, 38vw, 220px); }

  /* 狭い画面では字間を詰め、そのぶん文字を大きくして落差を保つ */
  .phead h1 { font-size: clamp(29px, 8.4vw, 40px); letter-spacing: .15em; line-height: 1.68; }
  .sec__head h2 { font-size: clamp(25px, 7vw, 34px); letter-spacing: .15em; line-height: 1.72; }
  .phead > h1 + .rule { margin-top: 30px; }
  .phead > .lead + .mincho { margin-top: 44px; }

  .urgent { padding: 50px 26px 54px; }
  .urgent::before { top: 50px; height: 44px; }
  .urgent__l h2 { font-size: clamp(25px, 6.9vw, 32px); letter-spacing: .15em; }
  .urgent__r a { font-size: clamp(27px, 8.2vw, 34px); }

  .cta h2 { font-size: clamp(23px, 6.2vw, 30px); letter-spacing: .15em; text-indent: .15em; }
}

/* --- ご葬儀プラン ------------------------------------------------------ */

.plan + .plan { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); }

.plan__head { display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; }
.plan__head .no { font-size: 13px; letter-spacing: .2em; color: var(--mute); }
.plan__head h2 { font-size: clamp(22px, 2.6vw, 29px); letter-spacing: .16em; }
.plan__head .note { margin-top: 8px; letter-spacing: .14em; }

.plan__price {
  margin-left: auto; display: flex; align-items: baseline; gap: 12px;
  color: var(--purple); white-space: nowrap;
}
.plan__price .u { font-family: var(--gothic); font-size: 11.5px; letter-spacing: .18em; color: var(--mute); }
.plan__price .y { font-size: 15px; letter-spacing: .1em; }
.plan__price .y b { font-weight: 400; font-size: clamp(34px, 4.4vw, 46px); letter-spacing: .02em; }

.plan .lead { margin-top: 28px; }

.plan__body { margin-top: 44px; }
.plan__sub {
  display: flex; gap: clamp(28px, 3.6vw, 56px); flex-wrap: wrap;
  margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line);
}
.plan__col--exc { flex: 2 1 160px; }
.plan__col--opt { flex: 3 1 240px; }
.plan__sub .plan__col + .plan__col { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 40px); }
.plan__col .label { margin-bottom: 24px; }

.ics { display: flex; flex-wrap: wrap; gap: 28px clamp(18px, 2vw, 28px); }
.ics__i { width: 72px; text-align: center; color: var(--purple); }
.ics__i.is-x, .ics__i.is-mut { color: var(--faint); }
.ics__ic { position: relative; display: block; line-height: 0; }
.ics .ico { display: block; width: 38px; height: 38px; margin: 0 auto; }
.ics__i.is-x .ics__ic::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 1px;
  background: var(--line-strong); transform: translate(-50%, -50%) rotate(-45deg);
}
.ics__l {
  display: block; margin-top: 10px; font-size: 11.5px; line-height: 1.7;
  letter-spacing: .04em; color: var(--body); word-break: keep-all;
}
.ics__i.is-x .ics__l, .ics__i.is-mut .ics__l { color: var(--faint); }

@media (max-width: 680px) {
  .plan__price { margin-left: 0; width: 100%; }
  .plan__body { gap: 36px; }
  .plan__col { flex: 1 1 100%; }
  .plan__sub { gap: 32px; }
  .plan__sub .plan__col + .plan__col { border-left: 0; padding-left: 0; }
  .ics { gap: 24px 16px; }
  .ics__i { width: 64px; }
  .ics .ico { width: 34px; height: 34px; }
}

/* カードの金額は、説明文の行数が違っても下端で揃える */
.card .price { margin-top: auto; padding-top: 14px; }

/* ==========================================================================
   v4（2026-11-12 星野さんの指摘を反映）
   ・題字を筆文字の「和装」に　・文字が薄い／細い　・写真が薄い
   ・縦書きが読みにくい　・どのセクションも同じ動きでAIっぽい
   元の指定は上に残し、ここで上書きしている。戻すときはこのブロックを消す。
   ========================================================================== */

:root {
  --ink: #17141b;
  --body: #34303a;
  --mute: #66606d;
  --sumi: #1b1720;
}

/* 文字を太く、濃く */
h1, h2, h3, h4 { font-weight: 600; }
.lead { color: var(--body); font-size: 15.5px; letter-spacing: .06em; }
.note { color: var(--mute); }
.label { font-weight: 700; letter-spacing: .24em; text-indent: 0; }
.hd__nav a { color: var(--ink); font-weight: 500; font-size: 13px; letter-spacing: .12em; }
.label { font-size: 13px; }
.note { font-size: 13px; }
.ln { font-weight: 700; }
.btn { font-weight: 700; }

/* ロゴ：家紋風のマーク＋明朝の社名（2026-11-12 筆文字から変更） */
.hd__mark, .ft__logo {
  display: inline-flex; align-items: center; gap: 14px;
  letter-spacing: 0; text-indent: 0; color: var(--purple);
}
.logo__crest { flex: 0 0 auto; display: block; }
.logo__txt { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.logo__name {
  font-family: var(--mincho); font-weight: 700; font-size: 23px;
  letter-spacing: .34em; color: var(--ink);
}
.logo__sub {
  font-family: var(--mincho); font-weight: 600; font-size: 10px;
  letter-spacing: .26em; color: var(--purple);
}
.ft__mark p.ft__logo { font-size: inherit; letter-spacing: 0; text-indent: 0; }
.ft__logo .logo__crest { width: 52px; height: 52px; }
.ft__logo .logo__name { font-size: 28px; }

/* 写真は色を落とさずに出す */
.fv > img, .band img, .pband img, .duo__img img, .card__img img, .fig__img img, .shot img {
  filter: none;
}

/* ファーストビュー：縦書きをやめ、左下に横書きで置く。題字を大きく */
.fv__veil { display: none; }
.fv__shade {
  background: linear-gradient(to top, rgba(18,14,24,.82) 0%, rgba(18,14,24,.48) 38%, rgba(18,14,24,.08) 72%, rgba(18,14,24,0) 100%);
}
.fv__body {
  position: absolute;
  left: clamp(24px, 4.5vw, 72px);
  right: clamp(24px, 4.5vw, 72px);
  bottom: clamp(32px, 4.5vw, 64px);
  color: #ffffff;
}
.fv__mark {
  display: flex; align-items: center; gap: 16px;
  color: #ffffff;
  font-family: var(--mincho); font-weight: 600;
  font-size: clamp(13px, 1.2vw, 15px); letter-spacing: .4em;
}
.fv__crest { width: clamp(44px, 4.6vw, 64px); height: auto; filter: drop-shadow(0 2px 12px rgba(10,8,14,.4)); }
.fv__copy {
  position: static;
  writing-mode: horizontal-tb;
  white-space: normal;
  height: auto;
  margin-top: clamp(18px, 2vw, 28px);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.5;
  letter-spacing: .04em;
  max-width: 15em;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(10,8,14,.55);
}
.fv__sub {
  position: static;
  margin-top: 14px;
  font-family: var(--gothic);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.9);
}

/* 写真帯：一言も横書きに */
.band__shade {
  background: linear-gradient(to top, rgba(18,14,24,.78) 0%, rgba(18,14,24,.35) 45%, rgba(18,14,24,0) 80%);
}
.band__copy {
  top: auto; right: clamp(22px, 4vw, 64px); height: auto;
  left: clamp(22px, 4vw, 64px);
  bottom: clamp(60px, 7vw, 96px);
  writing-mode: horizontal-tb;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.7;
  letter-spacing: .06em;
}
.band__note { font-weight: 700; letter-spacing: .24em; }

/* 事前相談の締め（CTA）：薄い写真をやめ、墨色の面に写真を沈める */
.cta { background: var(--sumi); color: #ffffff; isolation: isolate; }
.cta > .cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { opacity: .55; filter: none; }
.cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,28,.55) 0%, rgba(20,16,28,.82) 100%);
}
.cta h2, .cta .tel { color: #ffffff; }
.cta .label { color: #d8cdee; }
.cta .lead, .cta .note { color: rgba(255,255,255,.86); }
.cta .btn { border-color: #ffffff; color: #ffffff; }
.cta .btn:hover { background: #ffffff; color: var(--ink); }

/* お急ぎの方へ：淡い藤色のグラデーションをやめ、ブランドの紫で塗る */
.urgent { background: var(--purple); color: #ffffff; }
.urgent::before { background: #ffffff; }
.urgent .label, .urgent__l h2, .urgent__r a { color: #ffffff; }
.urgent .lead, .urgent .note { color: rgba(255,255,255,.86); }
.urgent .ln { color: #ffffff; }
.urgent .ln::after { background: #ffffff; }
.urgent__r { border-top-color: rgba(255,255,255,.4); }

/* 動きは写真の出方とFVだけに絞る。文字が一つずつ下から浮く演出はやめる */
.wa-rise, .wa-stag > *, .wa-blur, .wa-slide {
  animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
}

@media (max-width: 860px) {
  .hd__mark .logo__crest { width: 34px; height: 34px; }
  .logo__name { font-size: 20px; }
  .logo__sub { font-size: 9px; letter-spacing: .2em; }
  .fv > img { height: clamp(480px, 128vw, 620px); }
}

/* v5 ロゴ：塗りの家紋＋区切り線（2026-11-12） */
.hd__mark,.ft__logo{align-items:center;gap:14px}
.logo__crest{width:42px;height:42px;color:var(--purple)}
.logo__rule{width:1px;align-self:stretch;margin:4px 0;background:currentColor;opacity:.35}
.logo__name{font-weight:700;font-size:24px;letter-spacing:.3em;color:var(--sumi);line-height:1.15}
.logo__sub{margin-top:3px;font-weight:700;letter-spacing:.24em}
.ft__logo .logo__crest{width:56px;height:56px}
.fv__crest{--crest-in:#2a2333;color:#fff}
@media (max-width:767px){.logo__crest{width:34px;height:34px}.logo__name{font-size:20px}.hd__mark{gap:10px}}
.fv__ph{display:inline-block}

/* v6 題字：習字の書体の「和装」（家紋は廃止・2026-11-12） */
.logo__name{font-family:'Yuji Syuku',serif;font-weight:400;font-size:34px;letter-spacing:.12em;line-height:1;color:var(--sumi)}
.logo__txt{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.logo__sub{margin-top:0;font-size:10px;letter-spacing:.3em;color:var(--purple)}
.ft__logo .logo__name{font-size:44px}
.fv__mark{align-items:flex-end;gap:20px}
.fv__brand{font-family:'Yuji Syuku',serif;font-weight:400;font-size:clamp(52px,6vw,88px);letter-spacing:.1em;line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.fv__mark > span:last-child{padding-bottom:.6em}
@media (max-width:767px){.logo__name{font-size:28px}.logo__sub{font-size:9px}.fv__brand{font-size:56px}}

/* ======================================================================
   v7 高級感（2026-11-12）。生成りの地・金茶の細線・墨のフッター・深い紫。
   このブロックを消せば v6 に戻る
   ====================================================================== */
:root {
  --kinari: #f8f5ef;        /* 生成り */
  --kinari-2: #f1ece3;
  --gold: #a88b5c;          /* 金茶（文字・細線） */
  --gold-soft: rgba(168,139,92,.38);
  --purple-deep: #2f2742;
  --line: #e6dfd2;
}
body { background: var(--kinari); }
.hd { background: rgba(248,245,239,.94); border-bottom: 1px solid var(--gold-soft); padding-top: 22px; padding-bottom: 22px; }
.logo__sub { color: var(--gold); }

/* 小ラベル：金茶＋前に短い線 */
.label, .label.g { color: var(--gold); display: inline-flex; align-items: center; gap: 14px; }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.urgent .label, .cta .label, .band .label { color: #d8c39b; }
.rule, .rule.g { background: var(--gold); }

/* 見出しはゆったり */
.sec__head h2, .sec h2 { letter-spacing: .14em; }

/* ボタン：細い金茶の枠 */
.btn { border-color: var(--gold); color: var(--ink); font-weight: 600; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.fill { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff; }
.btn.fill:hover { background: var(--ink); }

/* 色面のセクション：薄紫・薄緑をやめて生成りの濃淡に */
.sec.lilac, .sec.mint { background: var(--kinari-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps, .steps li { border-color: var(--gold-soft); }
.steps .no { color: var(--gold); font-weight: 500; }

/* FV：写真の内側に金茶の細い額縁 */
.fv { position: relative; }
.fv::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(216,195,155,.55); pointer-events: none; z-index: 2; }

/* ご逝去直後の帯：深い紫＋金茶の細線 */
.urgent { background: var(--purple-deep); box-shadow: inset 0 0 0 1px rgba(216,195,155,.35); }
.urgent::before { background: #d8c39b; }
.urgent .ln::after { background: #d8c39b; }
.urgent__r { border-top-color: rgba(216,195,155,.45); }

/* 写真・カードに細い額 */
.card__img img, .duo__img img, .fig__img img { outline: 1px solid var(--gold-soft); outline-offset: 6px; }

/* フッター：墨の面 */
.ft { background: var(--sumi, #1b1720); color: #d9d2c4; border-top: 1px solid var(--gold); }
.ft__logo, .ft__logo .logo__name { color: #f3eee4; }
.ft__logo .logo__sub { color: #c9b089; }
.ft p, .ft address { color: #bdb5a6; }
.ft__cols a { color: #e6e0d4; }
.ft__cols a:hover { color: #d8c39b; }
.ft__cols .h { color: #c9b089; }
.ft__btm { border-top-color: rgba(216,195,155,.25); }
.ft__btm p, .ft__btm a { color: #8f8879; }

/* スマホ下部の固定バー */
.bar { border-top: 1px solid var(--gold-soft); }

@media (max-width: 767px) {
  .fv::after { inset: 10px; }
  .card__img img, .duo__img img, .fig__img img { outline-offset: 4px; }
}
.fv__brand, .fv__mark > span:last-child { white-space: nowrap; }
@media (max-width: 767px) {
  .fv__mark { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fv__brand { font-size: 52px; }
  .fv__mark > span:last-child { padding-bottom: 0; }
}

/* ======================================================================
   v8（2026-11-12）白地に戻す・メニューの作り込み・初回の幕・細かな動き
   ====================================================================== */
:root { --kinari: #ffffff; --kinari-2: #ffffff; --line: #ece7de; --ease-io: cubic-bezier(.76,0,.24,1); }
body { background: #ffffff; }
.hd { background: rgba(255,255,255,.94); border-bottom-color: rgba(168,139,92,.28); }
.sec.lilac, .sec.mint { background: #ffffff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- 初回だけの幕：筆文字が浮かび、幕が上がる --- */
.loader { position: fixed; inset: 0; z-index: 100; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; pointer-events: none;
  animation: wa-curtain .9s var(--ease-io) 1.15s forwards; }
.loader__brand { font-family: 'Yuji Syuku', serif; font-size: clamp(44px, 6vw, 72px); letter-spacing: .14em; color: var(--sumi, #1b1720);
  opacity: 0; filter: blur(6px); animation: wa-ink 1s ease .1s forwards; }
.loader__line { width: 0; height: 1px; background: var(--gold); animation: wa-lineg .8s var(--ease-io) .35s forwards; }
@keyframes wa-ink { to { opacity: 1; filter: blur(0); } }
@keyframes wa-lineg { to { width: 96px; } }
@keyframes wa-curtain { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.loader { clip-path: inset(0 0 0 0); }
.wa-seen .loader { display: none; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* --- メニュー（全画面） --- */
.burger { position: relative; width: 48px; height: 48px; border-radius: 50%; align-items: center; gap: 6px; transition: background-color .4s ease; }
.burger span { width: 22px; }
.hd .burger:hover { background: rgba(168,139,92,.12); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.drawer { padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: transparent; overflow: hidden;
  transition: visibility 0s linear .9s; opacity: 1; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; transition: none; }
.drawer__visual { position: relative; overflow: hidden; background: #1b1720; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io) .1s; }
.drawer__panel { position: relative; background: #ffffff; overflow-y: auto; padding: 30px clamp(28px, 5vw, 80px) 48px; display: flex; flex-direction: column;
  clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease-io); }
.drawer[data-open="true"] .drawer__visual { clip-path: inset(0 0 0 0); transition-delay: 0s; }
.drawer[data-open="true"] .drawer__panel { clip-path: inset(0 0 0 0); transition-delay: .08s; }
.drawer__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.drawer[data-open="true"] .drawer__visual img { transform: scale(1); }
.drawer__visual::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(216,195,155,.5); pointer-events: none; }
.drawer__vbody { position: absolute; left: clamp(36px, 4vw, 64px); right: clamp(36px, 4vw, 64px); bottom: clamp(44px, 6vh, 72px); color: #ffffff; z-index: 1;
  opacity: 0; transform: translateY(16px); transition: opacity .8s ease .55s, transform .8s var(--ease) .55s; }
.drawer[data-open="true"] .drawer__vbody { opacity: 1; transform: none; }
.drawer__brand { font-family: 'Yuji Syuku', serif; font-size: clamp(56px, 5.6vw, 84px); letter-spacing: .1em; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.drawer__catch { margin-top: 22px; font-family: var(--mincho); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); line-height: 2; letter-spacing: .14em; }
.drawer__vtel { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(216,195,155,.5); display: flex; flex-direction: column; gap: 6px; }
.drawer__vtel span { font-size: 11px; letter-spacing: .2em; color: #e3d3b3; }
.drawer__vtel a { font-family: var(--mincho); font-size: clamp(28px, 2.6vw, 36px); letter-spacing: .06em; color: #ffffff; }

.drawer__head { margin-bottom: clamp(28px, 5vh, 56px); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.drawer__ttl { font-family: var(--mincho); font-weight: 600; font-size: 13px; letter-spacing: .5em; color: var(--gold); display: flex; align-items: center; gap: 14px; }
.drawer__ttl::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.drawer__close { border: 1px solid rgba(168,139,92,.55); }
.drawer__close:hover { background: var(--ink); border-color: var(--ink); }
.drawer__close:hover span { background: #ffffff; }

.drawer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vh, 56px) clamp(32px, 4vw, 64px); max-width: none; }
.drawer__group { gap: 0; }
.drawer__gh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; font-family: var(--mincho); font-weight: 600; font-size: 12px; letter-spacing: .3em; color: var(--gold); }
.drawer__gh span { font-size: 15px; letter-spacing: 0; }
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mincho); font-weight: 600; font-size: 16px; letter-spacing: .14em; color: var(--ink);
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease), color .35s ease; }
.drawer[data-open="true"] .drawer__links a { opacity: 1; transform: none; transition-delay: calc(.38s + var(--i) * .035s), calc(.38s + var(--i) * .035s), 0s; }
.drawer__links a span { transition: transform .45s var(--ease); }
.drawer__links a i { position: relative; width: 18px; height: 1px; background: var(--line-strong, #c9c3d2); transition: width .45s var(--ease), background-color .35s ease; flex: none; }
.drawer__links a i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); color: inherit; opacity: 0; transition: opacity .3s ease; }
.drawer__links a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-io); }
.drawer__links a:hover { color: var(--purple-deep, #2f2742); }
.drawer__links a:hover span { transform: translateX(8px); }
.drawer__links a:hover i { width: 34px; background: var(--gold); color: var(--gold); }
.drawer__links a:hover i::after { opacity: 1; }
.drawer__links a:hover::after { transform: scaleX(1); }
.drawer__foot { margin-top: auto; padding-top: clamp(32px, 5vh, 56px); display: flex; flex-wrap: wrap; gap: 14px;
  opacity: 0; transition: opacity .6s ease .8s; }
.drawer[data-open="true"] .drawer__foot { opacity: 1; }
.drawer__foot .btn { min-height: 54px; padding: 0 40px; }

@media (max-width: 900px) {
  .drawer { grid-template-columns: 1fr; grid-template-rows: 172px minmax(0, 1fr); }
  .drawer__vbody { left: 26px; right: 26px; bottom: 26px; }
  .drawer__brand { font-size: 44px; }
  .drawer__catch, .drawer__vtel { display: none; }
  .drawer__visual::after { inset: 10px; }
  .drawer__panel { padding: 18px 22px 120px; }
  .drawer__cols { grid-template-columns: 1fr; }
  .drawer__links a { font-size: 15px; padding: 12px 0; }
}

/* --- ボタン：左から墨が満ちる --- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease-io), border-color .5s ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-io); }
.btn:hover { background: transparent; color: #ffffff; border-color: var(--ink); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn.fill:hover { background: var(--purple-deep, #2f2742); }

/* --- ヘッダーのリンク：金茶の線が伸びる --- */
.hd__nav a { position: relative; padding: 6px 0; transition: color .35s ease; }
.hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-io); }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.drawer__visual img { opacity: .9; }
.drawer__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(22,18,28,.86) 0%, rgba(22,18,28,.55) 38%, rgba(22,18,28,.08) 70%, rgba(22,18,28,0) 100%); }
.drawer__visual::after { z-index: 2; }
.drawer__vbody { z-index: 3; }
@media (min-width: 901px) { .drawer__links a { padding: 11px 0; } .drawer__head { margin-bottom: clamp(22px, 4vh, 44px); } }
.burger:focus-visible, .btn:focus-visible, .drawer__links a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   v9 ホバーと部品の作り込み（2026-11-12）
   ・動きは「ゆっくり・短い距離・金茶の細線」に揃える
   ・このブロックを消せば v8 に戻る
   ============================================================ */
:root { --ease-lux: cubic-bezier(.22, .61, .36, 1); interpolate-size: allow-keywords; }
::selection { background: rgba(168,139,92,.22); color: var(--ink); }

/* ページ移動：白く溶けて切り替わる（対応ブラウザのみ） */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wa-vt-out .38s var(--ease-lux) both; }
::view-transition-new(root) { animation: wa-vt-in .7s var(--ease-lux) .08s both; }
@keyframes wa-vt-out { to { opacity: 0; } }
@keyframes wa-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 文字リンク「くわしく見る」：右に金茶の線、ホバーで伸びる */
.ln { display: inline-flex; align-items: center; gap: 16px; padding: 6px 0; letter-spacing: .24em;
  transition: color .5s var(--ease-lux), letter-spacing .7s var(--ease-lux); }
.ln::before { content: ""; order: 2; width: 30px; height: 1px; background: var(--gold);
  transition: width .7s var(--ease-lux); }
.ln::after { background: var(--gold); }
.ln:hover { color: var(--purple-deep); }
.ln:hover::before { width: 52px; }

/* カード（プラン・知識など）：写真がゆっくり寄り、内側に金茶の額縁が浮かぶ */
.card__img, .fig__img, .duo__img { position: relative; }
.card__img img, .fig__img img, .duo__img img { outline: 0; }
.card__img img, .fig__img img {
  transition: transform 1.8s var(--ease-lux), filter 1.2s var(--ease-lux); }
.card__img::after, .fig__img::after {
  content: ""; position: absolute; inset: 14px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(255,255,255,.75);
  opacity: 0; transform: scale(1.04);
  transition: opacity .9s var(--ease-lux), transform 1.1s var(--ease-lux); }
.card:hover .card__img img, .fig:hover .fig__img img { transform: scale(1.06); filter: saturate(.8) brightness(.94); }
.card:hover .card__img::after, .fig:hover .fig__img::after { opacity: 1; transform: scale(1); }
.card h3 { transition: color .6s var(--ease-lux), letter-spacing .9s var(--ease-lux); }
.card:hover h3 { color: var(--purple-deep); letter-spacing: .24em; }
.card .price { position: relative; padding-top: 18px; }
.card .price::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1px; background: var(--gold);
  transition: width .9s var(--ease-lux); }
.card:hover .price::before { width: 100%; }

/* 写真の並び：キャプションの前に線が入る */
.fig figcaption { display: flex; align-items: center; gap: 0; transition: color .5s ease, gap .7s var(--ease-lux); }
.fig figcaption::before { content: ""; width: 0; height: 1px; background: var(--gold); transition: width .7s var(--ease-lux); }
.fig:hover figcaption { color: var(--ink); gap: 12px; }
.fig:hover figcaption::before { width: 22px; }

/* 文と写真の段：写真がゆっくり寄る */
.duo__img img { transition: transform 2.2s var(--ease-lux), filter 1.2s ease; }
.duo:hover .duo__img img { transform: scale(1.04); filter: saturate(.7); }

/* 葬儀の流れ：行に触れると下線が金茶で引かれ、番号が寄る */
.steps li { position: relative; transition: background-color .6s ease; }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-lux); }
.steps li:hover { background: linear-gradient(90deg, rgba(168,139,92,.06), rgba(168,139,92,0) 70%); }
.steps li:hover::after { transform: scaleX(1); }
.steps .no, .steps h3 { transition: transform .7s var(--ease-lux), color .5s ease; }
.steps li:hover .no { transform: translateX(10px); }
.steps li:hover h3 { transform: translateX(6px); color: var(--purple-deep); }

/* お客様の声：大きな引用符と、上の線が伸びる */
.voice { position: relative; padding-top: 58px; }
.voice::before { content: "\201C"; position: absolute; top: 14px; left: -4px; font-family: var(--mincho);
  font-size: 64px; line-height: 1; color: var(--gold); opacity: .55; }
.voice::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 1px; background: var(--gold);
  transition: width 1.1s var(--ease-lux); }
.voice:hover::after { width: 100%; }

/* よくある質問：開閉をなめらかに、＋が−に変わる */
.qa summary { transition: color .4s ease; }
.qa summary:hover { color: var(--purple-deep); }
.qa summary::before { color: var(--gold); font-family: var(--mincho); font-size: 15px; padding-top: 4px; }
.qa summary::after { border: 0; width: 14px; height: 14px; transform: none; margin-top: 9px;
  background: linear-gradient(var(--gold), var(--gold)) center / 14px 1px no-repeat,
              linear-gradient(var(--gold), var(--gold)) center / 1px 14px no-repeat;
  transition: transform .5s var(--ease-lux), background-size .5s var(--ease-lux); }
.qa details[open] summary::after { transform: rotate(180deg); background-size: 14px 1px, 1px 0; }
.qa details::details-content { height: 0; overflow: clip; opacity: 0;
  transition: height .6s var(--ease-lux), opacity .6s ease, content-visibility .6s allow-discrete; }
.qa details[open]::details-content { height: auto; opacity: 1; }
.qa .a::before { color: var(--gold); font-family: var(--mincho); font-size: 15px; padding-top: 0; }

/* お問い合わせフォーム：細い線の枠、入力中は金茶 */
.sec input[type="text"], .sec input[type="tel"], .sec input[type="email"], .sec select, .sec textarea {
  border: 1px solid #ddd6cb !important; border-radius: 0; background: #fff !important;
  transition: border-color .4s ease, box-shadow .4s ease; }
.sec input:hover, .sec select:hover, .sec textarea:hover { border-color: #c9b99c !important; }
.sec input:focus, .sec select:focus, .sec textarea:focus { outline: 0; border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(168,139,92,.12); }

/* 電話番号：触れると金茶に */
a[href^="tel:"] { transition: color .5s var(--ease-lux), opacity .5s ease; }
.hd__tel a:hover, .urgent a[href^="tel:"]:hover, .cta a[href^="tel:"]:hover { color: var(--gold); }

/* フッターのリンク：前に短い線が出て、少し右へ */
.ft__cols a { display: inline-flex; align-items: center; transition: color .5s ease, transform .6s var(--ease-lux); }
.ft__cols a::before { content: ""; width: 0; height: 1px; margin-right: 0; background: #d8c39b;
  transition: width .6s var(--ease-lux), margin-right .6s var(--ease-lux); }
.ft__cols a:hover::before { width: 14px; margin-right: 10px; }

/* 追従する金茶の輪（マウス操作の端末だけ。JS が .cur を足す） */
.cur { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border: 1px solid rgba(168,139,92,.6); border-radius: 50%;
  opacity: 0; transition: width .5s var(--ease-lux), height .5s var(--ease-lux), margin .5s var(--ease-lux),
  background-color .5s ease, border-color .5s ease, opacity .4s ease; will-change: transform; }
.cur.is-on { opacity: 1; }
.cur.is-link { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(168,139,92,.08); border-color: rgba(168,139,92,.35); }
.cur.is-dark { border-color: rgba(255,255,255,.6); }
.cur.is-dark.is-link { background: rgba(255,255,255,.08); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .cur { display: none; }
}
@media (max-width: 900px) {
  .steps li:hover .no, .steps li:hover h3 { transform: none; }
  .voice { padding-top: 52px; }
}

/* ==========================================================================
   v10 電話の案内・線香の煙・墨のにじみ・縦書きの流れ（2026-11-13）
   このブロックを消せば v9 に戻る
   ========================================================================== */

/* --- ファーストビュー直下の電話の案内 --- */
.call {
  position: relative; z-index: 2;
  margin: calc(clamp(36px, 4vw, 56px) * -1) calc(var(--pad) + clamp(16px, 3vw, 48px)) 0;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4.4vw, 64px);
  background: #ffffff;
  border-top: 1px solid var(--gold);
  box-shadow: 0 24px 48px -36px rgba(27, 23, 32, .22);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 64px); align-items: center;
}
.call__live { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .28em; color: var(--gold); }
.call__live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.call__live i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: wa-ping 2.6s var(--ease) infinite; }
@keyframes wa-ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.call__h { margin-top: 16px; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.8; letter-spacing: .12em; color: var(--ink); }
.call__lead { margin-top: 14px; font-size: 14px; line-height: 2.1; color: var(--body); max-width: 34em; }
.call__ln { margin-top: 20px; }
.call__tel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: clamp(22px, 2.4vw, 30px) clamp(26px, 3vw, 44px);
  background: var(--sumi); color: #ffffff; overflow: hidden; isolation: isolate;
  transition: background-color .6s var(--ease-lux, ease);
}
.call__tel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 30%, rgba(168,139,92,.35) 50%, transparent 70%); transform: translateX(-100%); transition: transform 1.1s var(--ease-io, ease); }
.call__tel:hover { color: #ffffff; }
.call__tel:hover::before { transform: translateX(100%); }
.call__k { font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.72); }
.call__no { font-family: var(--mincho); font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: .05em; line-height: 1.2; white-space: nowrap; }
.call__go { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .2em; color: #d9c7a4; }
.call__go::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.call__tel:hover .call__go::after { width: 52px; }
.call__go .sp { display: none; }
@media (max-width: 900px) {
  .call { margin: -28px 14px 0; grid-template-columns: 1fr; padding: 28px 22px 24px; gap: 22px; }
  .call__tel { align-items: stretch; text-align: center; }
  .call__k, .call__go { justify-content: center; }
  .call__go .pc { display: none; } .call__go .sp { display: inline; }
  .call__ln { display: none; }
}

/* --- C 線香の煙 --- */
.fv__smoke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: screen; }
.fv__body { z-index: 2; }

/* --- E 墨のにじみ（JS が filter を当てる。JS なしでは通常表示） --- */
.wa-ink { will-change: filter, opacity; }

/* --- D 縦書きの流れ（PC） --- */
.vs { display: none; position: relative; }
.flow-list { display: block; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .vs { display: block; }
  .flow-list { display: none; }
}
.vs__pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% 20%, rgba(168,139,92,.06), transparent 70%),
    linear-gradient(180deg, #fbfaf7 0%, #ffffff 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.vs__head { position: absolute; left: var(--pad); top: clamp(88px, 12vh, 120px); z-index: 2; }
.vs__hint { margin-top: 14px; font-size: 12px; letter-spacing: .2em; color: var(--mute); display: flex; align-items: center; gap: 12px; }
.vs__hint::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.vs__track {
  position: absolute; right: var(--pad); top: 50%; transform: translate3d(0,0,0);
  height: min(62vh, 560px); margin-top: calc(min(62vh, 560px) / -2 + 24px);
  display: flex; flex-direction: row-reverse; align-items: stretch; width: max-content;
  will-change: transform;
}
.vs__col {
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 0 clamp(26px, 2.6vw, 40px);
  border-left: 1px solid var(--line);
  display: block;
  opacity: .18; transition: opacity 1s var(--ease);
}
.vs__col:first-child { border-right: 1px solid var(--line); }
.vs__col.is-in { opacity: 1; }
.vs__no { display: block; font-family: 'Yuji Syuku', var(--mincho); font-size: 30px; line-height: 1.2; color: var(--gold); margin-block-end: 14px; letter-spacing: 0; }
.vs__h { font-family: var(--mincho); font-weight: 600; font-size: clamp(21px, 1.8vw, 26px); letter-spacing: .32em; color: var(--ink); margin-block-end: 26px; white-space: nowrap; line-height: 1.6; }
.vs__p { font-family: var(--mincho); font-size: 15px; line-height: 2.25; letter-spacing: .12em; color: var(--body); max-inline-size: 100%; }
.vs__col .vs__h, .vs__col .vs__p { transform: translateY(18px); transition: transform 1.2s var(--ease); }
.vs__col.is-in .vs__h, .vs__col.is-in .vs__p { transform: none; }
.vs__end { writing-mode: vertical-rl; padding: 0 clamp(40px, 5vw, 80px); display: flex; align-items: center; }
.vs__end span { font-family: 'Yuji Syuku', serif; font-size: 44px; letter-spacing: .3em; color: var(--sumi); opacity: .85; }
.vs__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(36px, 6vh, 56px); height: 1px; background: var(--line); }
.vs__bar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: right; }

/* v11 ヘッダーの電話番号を折り返さない（1024幅で3行に割れていた） */
.hd__tel a { white-space: nowrap; }
@media (max-width: 1180px) { .hd__tel a { font-size: 17px; } .hd__nav { gap: 16px; } .hd__nav a { font-size: 12px; letter-spacing: .06em; } }
@media (max-width: 1000px) { .hd__tel { display: none; } }