@charset "UTF-8";
/* =============================================================
   Webmo / Reservation Service Detail
   このページ専用。予約一覧・日程選択・マイページには適用しない。
   色はお客様サイトの --color-primary / --color-text に連動。
   ============================================================= */

.reservation-page--detail {
  --rd-primary: var(--color-primary, #d98ae8);
  --rd-ink: var(--color-text, #27222b);
  --rd-deep: color-mix(in srgb, var(--rd-primary) 48%, #332837);
  --rd-muted: #73717c;
  --rd-stroke: #eee9ef;
  --rd-pale: color-mix(in srgb, var(--rd-primary) 6%, white);
  --rd-paler: color-mix(in srgb, var(--rd-primary) 3%, white);
  box-sizing: border-box;
  position: relative;
  min-height: 80vh;
  padding: 122px 22px 108px;
  background: linear-gradient(180deg, #fff 0, #fbf9fc 380px, #fff 900px);
  color: var(--rd-ink);
  font-family: var(--font-body, "Noto Sans JP", sans-serif);
}
.reservation-page--detail *,
.reservation-page--detail *::before,
.reservation-page--detail *::after {box-sizing: border-box;}
.reservation-page--detail .reservation-container {
  width: min(1140px,100%);
  margin: 0 auto;
}
.reservation-page--detail .reservation-service-detail-page {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
.reservation-page--detail a {text-decoration: none;}
.reservation-page--detail a:focus-visible,
.reservation-page--detail button:focus-visible {
  outline: 3px solid var(--rd-primary);
  outline-offset: 3px;
}
.reservation-detail-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 0 30px; color: #8b8490; font-size: 12px;
  letter-spacing: .02em; line-height: 1.5;
}
.reservation-detail-breadcrumb a {color: #6e6972; transition: color .2s;}
.reservation-detail-breadcrumb a:hover {color: var(--rd-deep);}
.reservation-detail-breadcrumb span:last-child {color: #4e4753; font-weight: 650;}

/* one gallery/introduction, one sticky booking card, article underneath */
.rd-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro aside" "content aside";
  column-gap: clamp(26px, 3.4vw, 54px);
  row-gap: 35px;
  align-items: start;
}
.rd-intro {grid-area: intro; min-width: 0;}
.reservation-detail-content {grid-area: content; min-width: 0; display: grid; gap: 21px;}
.reservation-detail-aside {grid-area: aside; min-width: 0; align-self: stretch;}

/* Editorial heading */
.rd-page-heading {margin-bottom: 24px;}
.rd-heading-kicker,
.rd-section-kicker {
  display: flex; align-items: center; gap: 10px;
  color: var(--rd-deep); font-size: 10px; font-weight: 780;
  letter-spacing: .19em; line-height: 1.5;
}
.rd-heading-kicker {margin-bottom: 14px;}
.rd-heading-kicker span:first-child {width: 21px; height: 2px; background: var(--rd-primary); border-radius: 99px;}
.rd-heading-kicker span:last-child {width: 0;}
.rd-page-heading h1 {
  margin: 0; font-size: clamp(27px, 3.1vw, 42px);
  line-height: 1.45; letter-spacing: .045em;
  font-family: var(--font-heading-jp, inherit); font-weight: 750;
  overflow-wrap: anywhere;
}
.rd-page-heading p {margin: 14px 0 0; max-width: 630px; font-size: 14px; line-height: 1.95; color: #69646f;}

/* image gallery */
.reservation-detail-gallery {width: 100%; min-width: 0;}
.reservation-detail-gallery__main {
  position: relative; aspect-ratio: 1.52 / 1; overflow: hidden;
  border-radius: 22px; background: #f8f5f8;
  box-shadow: 0 16px 32px rgba(39,24,42,.09);
}
.reservation-detail-gallery__main img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .25s ease;
}
.reservation-detail-gallery__main img.reservation-logo-fallback {
  width: 100%; height: 100%; object-fit: contain;
  padding: 19%; background: var(--rd-paler);
}
.reservation-detail-gallery__placeholder {
  display: grid; place-items: center; height: 100%;
  padding: 40px; color: var(--rd-deep); font-size: 23px;
  font-weight: 700; text-align: center;
}
.rd-gallery-index {
  position: absolute; left: 20px; bottom: 18px;
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 7px 11px; border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px; background: rgba(23,18,30,.35);
  color: white; font-size: 9px; font-weight: 750; letter-spacing: .15em;
  pointer-events: none; backdrop-filter: blur(7px);
}
.reservation-detail-gallery__thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px;
}
.reservation-detail-gallery__thumbs button {
  width: 78px; height: 67px; padding: 3px; flex: 0 0 auto;
  border: 2px solid transparent; border-radius: 12px;
  background: #fff; box-shadow: 0 3px 10px rgba(22,17,28,.06);
  cursor: pointer; overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.reservation-detail-gallery__thumbs button:hover,
.reservation-detail-gallery__thumbs button.is-active {
  border-color: var(--rd-primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rd-primary) 15%, transparent);
}
.reservation-detail-gallery__thumbs button:hover {transform: translateY(-2px);}
.reservation-detail-gallery__thumbs img {display:block; width:100%; height:100%; border-radius:7px; object-fit:cover;}

/* The ONLY booking card on the page. Sticky extends throughout content. */
.reservation-detail-booking {
  position: sticky; top: 100px;
  padding: 28px 25px 23px;
  background: #fff;
  border: 1px solid var(--rd-stroke); border-radius: 22px;
  box-shadow: 0 16px 52px rgba(28,21,34,.075);
  overflow: hidden;
}
.reservation-detail-booking::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--rd-primary), color-mix(in srgb, var(--rd-primary) 28%, white));
}
.rd-booking-head {display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .18em; color: var(--rd-deep); font-weight: 800;}
.rd-booking-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--rd-primary); box-shadow: 0 0 0 4px var(--rd-pale);}
.reservation-detail-booking h2 {margin: 15px 0 0; font-size: clamp(18px, 1.65vw, 22px); font-weight: 780; line-height: 1.55; letter-spacing: .025em; overflow-wrap: anywhere;}
.rd-booking-caption {margin: 9px 0 0; color: var(--rd-muted); font-size: 11px; line-height: 1.7;}
.rd-booking-price-wrap {margin-top: 24px; padding: 21px 0; border-top: 1px solid var(--rd-stroke); border-bottom: 1px solid var(--rd-stroke);}
.rd-price-label, .rd-payments-label {display: block; margin-bottom: 7px; font-size: 11px; font-weight: 760; color: #7e7782;}
.rd-price-row {display:flex; align-items:baseline; flex-wrap:wrap; gap: 4px 2px;}
.rd-price {font-size: clamp(22px, 2vw, 28px); color: var(--rd-deep); font-weight: 850; letter-spacing: -.045em; line-height: 1.5; font-variant-numeric: tabular-nums;}
.rd-duration {font-size: 12px; color: #77717d; font-weight: 650; white-space: nowrap;}
.rd-quantity {margin: 8px 0 0; font-size: 11px; color: #78717e; line-height: 1.7;}
.rd-booking-payments {padding: 19px 0 23px;}
.rd-payment-tags {display:flex; flex-wrap:wrap; gap:7px;}
.rd-payment-tags span {padding: 7px 10px; border: 1px solid #ece7ec; border-radius: 7px; background: #faf8fb; color: #625d67; font-size: 10px; line-height: 1.3;}
.rd-button {
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  width:100%; min-height: 56px; padding: 11px 12px 11px 17px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--rd-primary) 85%, #4b2755), var(--rd-primary));
  color:#fff!important; border: 0; border-radius: 12px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--rd-primary) 22%, transparent);
  font-weight: 760; font-size: 12px; line-height: 1.45;
  text-align:left; cursor:pointer; transition: transform .2s, box-shadow .2s, filter .2s;
}
.rd-button:hover {transform:translateY(-2px); filter:saturate(1.07); box-shadow:0 15px 28px color-mix(in srgb, var(--rd-primary) 30%, transparent);}
.rd-button-arrow {width: 33px; height: 33px; display: grid; place-items:center; border-radius: 9px; background: rgba(255,255,255,.18); flex: 0 0 33px; color: white; font-size:18px; transition:transform .2s;}
.rd-button:hover .rd-button-arrow {transform:translateX(2px);}
.rd-booking-footnote {margin: 12px 0 0; color: #918b95; text-align: center; line-height:1.65; font-size: 10px;}

/* individual content blocks */
.reservation-detail-section {
  padding: clamp(25px, 3.6vw, 38px);
  border: 1px solid var(--rd-stroke); border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 24px rgba(32,24,37,.026);
}
.reservation-detail-section .rd-section-kicker {margin-bottom: 10px; font-size: 9px;}
.reservation-detail-section h2, .reservation-detail-policy h2 {
  margin: 0 0 21px;
  font-family: var(--font-heading-jp, inherit);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 760; line-height: 1.5; letter-spacing: .025em;
}
.reservation-detail-richtext {color:#56515d; font-size:13px; line-height: 2.18; overflow-wrap:anywhere;}
.reservation-detail-richtext p {margin:0 0 18px;}
.reservation-detail-richtext p:last-child {margin-bottom:0;}
.reservation-detail-section.rd-section-about {border-top: 3px solid color-mix(in srgb, var(--rd-primary) 66%, white);}
.reservation-detail-section.rd-section-highlights {background: linear-gradient(145deg, #fff 65%, var(--rd-paler));}
.reservation-detail-highlight-list {list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; margin:0;}
.reservation-detail-highlight-list li {min-width:0; display:flex; align-items:center; gap:10px; min-height:54px; padding:12px 14px; background:var(--rd-pale); border:1px solid color-mix(in srgb,var(--rd-primary) 8%,white); border-radius:12px; color:#45404d; font-size:12px; line-height:1.75;}
.reservation-detail-highlight-list li > span:first-child {flex:0 0 23px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:white; color:var(--rd-deep); font-size:13px; font-weight:800;}
.reservation-detail-highlight-list li > span:last-child {min-width:0; overflow-wrap:anywhere;}
.reservation-detail-resource-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.reservation-detail-resource-grid article {background: #fff; border:1px solid var(--rd-stroke); border-radius:14px; overflow:hidden;}
.reservation-detail-resource-grid img {display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover;}
.reservation-detail-resource-grid img.reservation-logo-fallback {object-fit:contain; padding:15%; background:var(--rd-pale);}
.reservation-detail-resource-grid article>div {padding:15px;}
.reservation-detail-resource-grid strong {display:block; color:#342e3c; font-size:13px; line-height:1.6;}
.reservation-detail-resource-grid p {font-size:12px; line-height:1.8; margin:7px 0 0; color:#6e6873;}
.reservation-detail-event-list {display:grid; gap:9px;}
.reservation-detail-event-list article {display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px; border:1px solid var(--rd-stroke); border-radius:12px; background:#fff;}
.reservation-detail-event-list article strong {display:block; font-size:13px; line-height:1.6;}
.reservation-detail-event-list article p {font-size:12px; color:#68616c; margin:5px 0;}
.reservation-detail-event-list article small {font-size:11px; color:#928a94;}
.reservation-detail-event-list article>span {flex:0 0 auto; border-radius:20px; background:var(--rd-pale); padding:6px 10px; font-size:11px; color:var(--rd-deep); font-weight:750;}
/* Event schedule: initially 3 dates, with the same reversible control as the booking page. */
.reservation-page--detail .reservation-detail-event-list article[hidden] { display: none !important; }
.reservation-page--detail .reservation-detail-event-list article.rd-event-revealing {
  animation: rdEventSlideIn .42s cubic-bezier(.2,.75,.2,1) both;
  animation-delay: var(--rd-event-reveal-delay, 0ms);
}
@keyframes rdEventSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reservation-page--detail .rd-event-more {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.reservation-page--detail .rd-event-more__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 19px;
  border: 1px solid color-mix(in srgb, var(--rd-primary) 45%, white);
  border-radius: 999px;
  background: #fff;
  color: var(--rd-deep);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--rd-primary) 10%, transparent);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.reservation-page--detail .rd-event-more__button:hover {
  transform: translateY(-2px);
  background: var(--rd-pale);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--rd-primary) 15%, transparent);
}
.reservation-page--detail .rd-event-more__count { font-size: 11px; opacity: .85; }
.reservation-page--detail .rd-event-more__icon {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}
.reservation-page--detail .rd-event-empty {
  margin: 0;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--rd-primary) 20%, white);
  border-radius: 12px;
  background: var(--rd-pale);
  color: #4c4456;
  font-size: 12px;
  line-height: 1.65;
}

.rd-note-list {display:grid; gap:0; list-style:none; padding:0; margin:0;}
.rd-note-list li {display:flex; gap:13px; align-items:baseline; padding:13px 0; border-bottom:1px solid #f0ecf2; color:#56515d; font-size:13px; line-height:1.95; overflow-wrap:anywhere;}
.rd-note-list li:last-child {border-bottom:0; padding-bottom:0;}
.rd-note-list li:first-child {padding-top:0;}
.rd-note-list li::before {content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--rd-primary); margin-top:3px;}

/* cancellation policy: directly after notes, NOT in the booking card */
.reservation-detail-policy {display:flex; align-items:flex-start; gap:15px; border:1px solid color-mix(in srgb,var(--rd-primary) 22%,#e8e3ea); border-radius:18px; background:var(--rd-paler); padding:25px 26px;}
.rd-policy-icon {flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--rd-primary); color:#fff; font:800 italic 19px Georgia,serif;}
.rd-policy-body {flex:1; min-width:0;}
.rd-policy-body .rd-section-kicker {font-size:9px; margin-bottom:8px;}
.reservation-detail-policy h2 {font-size:17px; margin:0 0 9px;}
.reservation-detail-policy p {margin:0 0 12px; color:#635d68; font-size:12px; line-height:1.85;}
.reservation-detail-policy a {display:inline-flex; align-items:center; gap:11px; color:var(--rd-deep); font-size:12px; font-weight:770; padding-bottom:3px; border-bottom:1px solid currentColor; transition:gap .2s;}
.reservation-detail-policy a:hover {gap:15px;}
.reservation-detail-policy a span {font-size:16px;}

/* booking review, if this page is being used as a final confirmation */
.reservation-review-summary {margin:0 0 28px; padding:25px 28px; border:1px solid color-mix(in srgb,var(--rd-primary) 30%,white); border-radius:20px; background:var(--rd-paler);}
.reservation-review-summary h2 {margin:8px 0 7px; font-size:21px;}
.reservation-review-summary p {font-size:12px; line-height:1.8; color:#615b66;}
.reservation-review-summary dl {display:grid; gap:0; margin:17px 0; border-block:1px solid var(--rd-stroke);}
.reservation-review-summary dl>div {display:grid; grid-template-columns:90px minmax(0,1fr); gap:15px; border-bottom:1px solid var(--rd-stroke); padding:12px 0; font-size:12px;}
.reservation-review-summary dl>div:last-child {border:0;}
.reservation-review-summary dt {color:#867f8c;}
.reservation-review-summary dd {margin:0; font-weight:680;}
.reservation-review-summary form {display:flex; align-items:center; gap:17px; flex-wrap:wrap;}
.reservation-review-summary form button {width:auto; min-width:170px;}
.reservation-review-summary form a {font-size:12px; color:var(--rd-deep); text-decoration:underline;}

@media (max-width: 960px) {
  .reservation-page--detail {padding:106px 18px 90px;}
  .rd-detail-grid {grid-template-columns:minmax(0,1fr) 285px; column-gap:24px;}
  .reservation-detail-booking {top:92px; padding:24px 18px;}
}
@media (max-width: 760px) {
  .reservation-page--detail {padding:90px 16px 70px;}
  .reservation-detail-breadcrumb {margin-bottom:20px;}
  .rd-detail-grid {grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"intro" "aside" "content"; gap:23px;}
  .reservation-detail-aside {align-self:start;}
  .reservation-detail-booking {position:static; top:auto; padding:23px 21px 20px;}
  .rd-booking-price-wrap {padding:16px 0; margin-top:17px;}
  .rd-booking-payments {padding:16px 0;}
  .reservation-detail-gallery__main {border-radius:16px; aspect-ratio: 1.35 / 1;}
  .rd-page-heading h1 {font-size:clamp(24px,7vw,33px);}
  .reservation-detail-content {gap:16px;}
  .reservation-detail-section {padding:24px 20px; border-radius:17px;}
  .reservation-detail-highlight-list {grid-template-columns:1fr;}
}
@media (max-width: 440px) {
  .reservation-page--detail {padding:82px 12px 54px;}
  .rd-page-heading {margin-bottom:18px;}
  .rd-page-heading p {font-size:12px;}
  .reservation-detail-gallery__thumbs button {width:64px;height:58px;}
  .reservation-detail-resource-grid {grid-template-columns:1fr;}
  .reservation-detail-policy {padding:21px 17px; gap:12px;}
  .rd-policy-icon {width:28px; height:28px; flex-basis:28px;}
  .reservation-detail-event-list article {align-items:flex-start; flex-direction:column;}
}
@media (prefers-reduced-motion: reduce) {
  .reservation-page--detail *, .reservation-page--detail *::before,
  .reservation-page--detail *::after {transition:none!important; animation:none!important; scroll-behavior:auto!important;}
}

/* 2026-10-22: match the homepage/list price color and per-booking caption. */
.reservation-page--detail .rd-price {
  color:#d75970;
  font-variant-numeric:tabular-nums;
}
.reservation-page--detail .rd-price-per-use {
  display:block;
  margin-top:3px;
  color:#99909d;
  font-size:10px;
  font-weight:500;
  line-height:1.5;
}

/* Resource portrait: appearance is controlled by the round-profile styles in reservation.css; repeat core rules for stylesheet-order safety. */
.reservation-page--detail .reservation-detail-resource-grid article{display:flex;align-items:center;gap:17px;padding:20px;border-radius:16px}
.reservation-page--detail .reservation-detail-resource-photo{display:grid;place-items:center;flex:0 0 112px;width:112px;height:112px;overflow:hidden;border-radius:50%;background:#f2f5f7;border:1px solid #e8edf0;box-sizing:border-box}
.reservation-page--detail .reservation-detail-resource-photo img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center;padding:0}
.reservation-page--detail .reservation-detail-resource-photo__empty{font-size:11px;color:#8094a0}
.reservation-page--detail .reservation-detail-resource-grid article>div.reservation-detail-resource-info{flex:1;min-width:0;padding:0}
@media(max-width:900px){.reservation-page--detail .reservation-detail-resource-grid{grid-template-columns:1fr}}
@media(max-width:600px){.reservation-page--detail .reservation-detail-resource-photo{width:96px;height:96px;flex-basis:96px}.reservation-page--detail .reservation-detail-resource-grid article{padding:16px;gap:14px}}
/* Clear name / public description alongside each target portrait. */
.reservation-page--detail .reservation-detail-resource-grid{gap:16px}
.reservation-page--detail .reservation-detail-resource-grid article{min-width:0;border:1px solid #eee5ef;background:#fff}
.reservation-page--detail .reservation-detail-resource-grid strong{display:block;font-size:16px;font-weight:750;line-height:1.55;color:#302c35;overflow-wrap:anywhere}
.reservation-page--detail .reservation-detail-resource-grid p{margin:8px 0 0;font-size:13px;line-height:1.85;color:#66616e;overflow-wrap:anywhere}
@media(max-width:600px){
 .reservation-page--detail .reservation-detail-resource-grid strong{font-size:14px}
 .reservation-page--detail .reservation-detail-resource-grid p{font-size:12px;line-height:1.85}
}