@charset "UTF-8";
/* ==========================================================================
   page-menu.css ── メニュー・料金
   値は Figma の menu_PC（2016:39183）／menu_SP（2016:39481）＝2026-09-30 デザイナー修正版のもの
   ========================================================================== */

/* ---- 1. How Pricing Works ---- */
.pw-mprice { padding: 0 var(--pw-gutter) 56px; background: var(--pw-color-bg); }
.pw-mprice__hero { width: calc(100% + var(--pw-gutter) * 2); margin-inline: calc(var(--pw-gutter) * -1); aspect-ratio: 1440 / 516; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-mprice__hero img { width: 100%; height: 100%; object-fit: cover; }
.pw-mprice__heading { width: min(365px, 100%); margin: 56px auto 0; }
.pw-mprice__steps { margin-top: 56px; }
.pw-mprice__steps .pw-steps__item { padding: 15px 16px; }   /* 本文が2行で 130 */
.pw-mprice__note { margin-top: 56px; }

/* ---- 2. Base & Package（カードは TOP の Our Course と同じ部品） ---- */
.pw-mcourse { padding: 64px var(--pw-gutter) 64px; background: var(--pw-color-bg); }
.pw-mcourse__heading { width: min(632px, 100%); margin-inline: auto; }
.pw-mcourse__cards { width: min(var(--pw-content), 100%); margin: 32px auto 0; }
.pw-mcourse .pw-course__figure { aspect-ratio: 516 / 291; background: transparent; }   /* 写真は Figma のマスク群ごと書き出し（右端 8px は透明＝カードの白が見える。Figma と同じ） */
.pw-mcourse .pw-course__figure img { left: 0; top: 0; width: 100%; height: 100%; }

/* ---- 3. Regular Course ---- */
.pw-mregular { padding: 80px var(--pw-gutter) 80px; background: var(--pw-color-bg-green10); }
.pw-mregular__heading { width: min(648px, 100%); margin-inline: auto; }
.pw-mregular__body { width: min(920px, 100%); margin: 56px auto 0; }
.pw-mregular__photo { aspect-ratio: 920 / 290; overflow: hidden; }   /* 下地の灰色は置かない（右端に 1px の線として見えた） */
.pw-mregular__photo img { width: 100%; height: 100%; object-fit: cover; }
.pw-mregular__tablewrap { margin-top: 40px; }
/* 料金表：緑の見出し行・白い本文・2px の隙間（背景が透ける） */
.pw-mtable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; margin: -2px; font-size: 16px; line-height: 29px; }
.pw-mtable :where(th, td) { height: 45px; padding: 8px 10px; text-align: center; vertical-align: middle; background: var(--pw-color-white); white-space: nowrap; }
.pw-mtable thead th { color: var(--pw-color-white); background: var(--pw-color-primary); }
.pw-mtable :where(th, td):first-child { width: 29.28%; padding-right: 24px; text-align: right; }   /* 1列目は右そろえ（Figma） */
.pw-mregular__note { margin-top: 40px; }

/* ---- 4. Special Package ---- */
.pw-mspecial { padding: 80px var(--pw-gutter) 80px; background: var(--pw-color-bg); }
.pw-mspecial__heading { width: min(520px, 100%); margin-inline: auto; }
.pw-mspecial__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; width: min(1136px, 100%); margin: 99px auto 0; }
.pw-spkg__label { color: var(--pw-color-text); }
.pw-spkg__ttl { font-size: 26px; font-weight: 500; line-height: 47px; color: var(--pw-color-primary); }
.pw-spkg__photo { margin-top: 13px; aspect-ratio: 528 / 240; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-spkg__photo img { width: 100%; height: 100%; object-fit: cover; }
.pw-spkg__prices { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; padding: 0 16px; }
.pw-spkg__prices > div { display: flex; align-items: center; gap: 48px; font-size: 20px; line-height: 36px; letter-spacing: .16em; }
.pw-spkg__prices dt { flex: none; margin-right: -.16em; }
.pw-spkg__prices > div::after { content: ""; order: 1; flex: 1 1 auto; height: 1px; background: var(--pw-color-border); }
.pw-spkg__prices dd { order: 2; flex: none; margin-right: -.16em; }
.pw-spkg__tax { margin-top: 8px; padding: 0 16px; font-size: 12px; line-height: 22px; text-align: right; }
.pw-spkg__detail { margin-top: 16px; padding: 24px; background: #F5F6E9; }
.pw-spkg__target { position: relative; padding-left: 30px; font-size: 16px; line-height: 29px; }
.pw-spkg__target::before { content: ""; position: absolute; left: 0; top: 2.5px; width: 22px; height: 24px; background: url(../img/menu/dog.svg) no-repeat center / contain; }
.pw-spkg__inc { display: flex; margin-top: 16px; }
.pw-spkg__inc .pw-pill { font-size: 16px; line-height: 29px; letter-spacing: 0; padding: 0 15px; }   /* 128×29 */
.pw-spkg__list { margin-top: 8px; font-size: 16px; line-height: 29px; }
.pw-spkg__list li { position: relative; padding-left: 16px; }
.pw-spkg__list li::before { content: "・"; position: absolute; left: 0; top: 0; }
/* 最上位コース */
.pw-mpersonal { width: min(920px, 100%); margin: 80px auto 0; padding: 16px 24px 16px; background: var(--pw-color-white); border: 1px solid var(--pw-color-primary); }
.pw-mpersonal__heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pw-mpersonal__label { color: var(--pw-color-text); }
.pw-mpersonal__ttl { font-size: 26px; font-weight: 500; line-height: 47px; color: var(--pw-color-primary); }
.pw-mpersonal__heading .pw-lead { text-align: center; }
.pw-mpersonal__body { display: grid; grid-template-columns: 424px 424px; column-gap: 24px; margin-top: 32px; }
.pw-mpersonal__photo { aspect-ratio: 424 / 240; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-mpersonal__photo img { width: 100%; height: 100%; object-fit: cover; }
.pw-mpersonal__right { padding: 24px; background: #F5F6E9; }
.pw-mpersonal__right .pw-spkg__inc:first-child { margin-top: 0; }
.pw-mpersonal__cond { margin-top: 16px; }
.pw-mspecial__note { width: min(920px, 100%); margin: 48px auto 0; font-size: 12px; line-height: 22px; text-align: center; }

/* ---- 5. Basic Menu／7. Included Value（同じカード） ---- */
.pw-mbasic { padding: 80px var(--pw-gutter) 80px; background: var(--pw-color-bg); }
.pw-mbasic__heading { width: min(572px, 100%); margin-inline: auto; }
.pw-mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(920px, 100%); margin: 58px auto 0; }
.pw-mcard { min-height: 192px; padding: 15px 23px; background: var(--pw-color-white); border: 1px solid var(--pw-color-border); border-radius: 4px; }
.pw-mcard__ttl { display: flex; align-items: center; gap: 8px; padding-bottom: 3px; font-size: 18px; font-weight: 500; line-height: 32px; color: var(--pw-color-primary); border-bottom: 1px solid var(--pw-color-border); }   /* Figma：見出しの枠は下線 1px（individualStrokeWeights bottom・内側）＋余白 4 ＝ 36（1行）。肉球は文字の上下中央 */
.pw-mcard__ttl::before { content: ""; flex: none; width: 30.9px; height: 28px; background: url(../img/contact/we_accept.svg) no-repeat center / 19px 16px; }
.pw-mcard__desc { margin-top: 8px; font-size: 16px; line-height: 29px; }
.pw-mvalue { padding: 80px var(--pw-gutter) 80px; background: var(--pw-color-bg); }
.pw-mvalue__heading { width: min(404px, 100%); margin-inline: auto; }
.pw-mvalue .pw-mcards { margin-top: 33px; }
.pw-mvalue__note { width: min(920px, 100%); margin: 32px auto 0; font-size: 12px; line-height: 22px; text-align: center; }

/* ---- 6. Option Menu ---- */
.pw-moption { padding: 80px var(--pw-gutter) 80px; background: var(--pw-color-bg-green10); }
.pw-moption__heading { width: min(518px, 100%); margin-inline: auto; }
.pw-moption__list { display: flex; flex-direction: column; gap: 16px; width: min(920px, 100%); margin: 78px auto 0; }
.pw-opt { padding: 16px 24px; background: var(--pw-color-white); }
.pw-opt__main { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.pw-opt__ttl { flex: 1 1 0; min-width: 0; font-size: 18px; font-weight: 500; line-height: 32px; color: var(--pw-color-primary); }
.pw-opt__prices { flex: none; display: flex; flex-direction: column; gap: 1px; width: 240px; }
.pw-opt__prices > div { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 29px; letter-spacing: .1625em; }
.pw-opt__prices dt { flex: none; margin-right: -.1625em; }
.pw-opt__prices dd { order: 2; flex: none; margin-left: auto; margin-right: -.1625em; }
.pw-opt__prices > div:not(.pw-opt__group)::after { content: ""; order: 1; flex: 1 1 auto; height: 1px; background: var(--pw-color-border); }
.pw-opt__prices > div:has(> .pw-course__hidden)::after { display: none; }
.pw-opt__group::after { display: none; }
.pw-opt__sub { padding-left: 16px; }
.pw-opt__note { margin-top: 16px; padding: 0 16px; font-size: 14px; line-height: 25px; }

/* ---- 8. Reservation Flow ---- */
.pw-mflow { padding: 80px var(--pw-gutter) 80px; background: var(--pw-color-bg); }
.pw-mflow__heading { width: min(517px, 100%); margin-inline: auto; }
.pw-mflow__steps { margin-top: 85px; }

/* ==========================================================================
   タブレット（768〜1024px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-mspecial__cards { gap: 40px; }
	.pw-mpersonal__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
	/* 1 */
	.pw-mprice { padding: 0 20px 72px; }
	.pw-mprice__hero { width: calc(100% + 40px); margin-inline: -20px; aspect-ratio: 375 / 420; }
	.pw-mprice__heading { width: 100%; margin-top: 42px; }
	.pw-mprice__steps { width: calc(100% + 1px); margin-top: 42px; margin-left: -.5px; }
	.pw-mprice__steps .pw-steps__item { padding: 15px 16px; }
	.pw-mprice .pw-steps__desc, .pw-mflow .pw-steps__desc { margin-top: 8px; }   /* このページの SP は 8（ご予約ページは 4） */
	.pw-mprice .pw-steps__item + .pw-steps__item, .pw-mflow .pw-steps__item + .pw-steps__item { margin-top: 56px; }   /* このページの SP は 56（ご予約ページは 48） */
	.pw-mprice .pw-steps__item + .pw-steps__item::before, .pw-mflow .pw-steps__item + .pw-steps__item::before { top: -36px; }
	.pw-mprice__note { margin-top: 24px; }
	/* 2 */
	.pw-mcourse { padding: 40px 20px; }
	.pw-mcourse__heading { width: 100%; }
	.pw-mcourse__cards { margin-top: 32px; }
	.pw-mcourse .pw-course__figure { height: 240px; }
	.pw-mcourse .pw-course__figure img { left: 0; top: 0; width: 100%; height: 100%; }
	/* 3 */
	.pw-mregular { padding: 56px 20px; }
	.pw-mregular__heading { width: 100%; }
	.pw-mregular__body { margin-top: 32px; }
	.pw-mregular__photo { aspect-ratio: 335 / 220; }
	.pw-mtable { width: 598px; }   /* Figma：3列×198＋2px×2。横スクロール（pw-tsh） */
	.pw-mtable :where(th, td):first-child { width: 198px; white-space: normal; }   /* 1列目は折り返す（Figma SP） */
	.pw-mregular__note { margin-top: 24px; }
	/* 4 */
	.pw-mspecial { padding: 56px 20px; }
	.pw-mspecial__heading { width: 100%; }
	.pw-mspecial__cards { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
	.pw-spkg__photo { margin-top: 13px; aspect-ratio: 335 / 240; }
	.pw-spkg__detail { padding: 24px 16px; }
	.pw-spkg__target { padding-left: 30px; }
	.pw-mpersonal { margin-top: 32px; padding: 16px; }
	.pw-mpersonal__heading .pw-lead { text-align: center; }
	.pw-mpersonal__body { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 32px; }
	.pw-mpersonal__photo { aspect-ratio: 303 / 240; }
	.pw-mpersonal__right { padding: 24px 16px; }
	.pw-mspecial__note { margin-top: 32px; text-align: left; }
	/* 5・7 */
	.pw-mbasic, .pw-mvalue { padding: 56px 20px; }
	.pw-mbasic__heading, .pw-mvalue__heading { width: 100%; }
	.pw-mcards { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
	.pw-mcard { min-height: 163px; }
	.pw-mcard__desc { margin-top: 8px; }
	.pw-mvalue .pw-mcards { gap: 12px; margin-top: 16px; }
	.pw-mvalue .pw-mcard { min-height: 0; padding: 16px; }
	.pw-mvalue .pw-mcard__ttl { min-height: 37px; padding-top: 2px; font-size: 16px; line-height: 24px; }
	.pw-mvalue .pw-mcard__desc { margin-top: 12px; font-size: 14px; line-height: 25px; }
	.pw-mvalue__note { margin-top: 24px; text-align: left; }
	/* 6 */
	.pw-moption { padding: 56px 20px; }
	.pw-moption__heading { width: 100%; }
	.pw-moption__list { gap: 12px; margin-top: 32px; }
	.pw-opt { padding: 16px; }
	.pw-opt__main { flex-direction: column; gap: 12px; }
	.pw-opt__ttl { font-size: 16px; line-height: 24px; }
	.pw-opt__prices { gap: 2px; width: 100%; }
	.pw-opt__prices > div { gap: 8px; font-size: 14px; line-height: 20px; letter-spacing: 0; }
	.pw-opt__prices dt { width: 88px; margin-right: 0; }
	.pw-opt__prices dd { width: 76px; margin-right: 0; text-align: right; }
	.pw-opt__sub { padding-left: 16px; }
	.pw-opt__note { margin-top: 12px; padding: 0; }
	/* 8 */
	.pw-mflow { padding: 56px 20px; }
	.pw-mflow__heading { width: 100%; }
	.pw-mflow__steps { margin-top: 40px; }
}