:root { --ink:#14253d; --paper:#f4f8fc; --forest:#2468ad; --orange:#2e7bc4; --line:#d8e4f0; --white:#fff; --radius:8px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans","Noto Sans SC",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.site-header { height:72px; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.97); position:relative; z-index:5; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; }
.brand-mark { width:34px; height:34px; border:1px solid var(--ink); display:grid; place-items:center; font-size:14px; border-radius:6px; }
.brand-mark.has-image { border:0; background-position:center; background-size:cover; color:transparent; }
nav { display:flex; align-items:center; gap:32px; font-size:14px; }
.contact-link { background:var(--forest); color:white; padding:11px 18px; border-radius:6px; border:0; cursor:pointer; font-size:14px; }
.contact-location[hidden] { display:none; }
.hero { height:min(790px,calc(100vh - 72px)); min-height:590px; position:relative; overflow:hidden; color:white; }
.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-image { transition:opacity .28s ease; }
.hero-shade { background:linear-gradient(90deg,rgba(9,34,64,.7) 0%,rgba(9,34,64,.22) 58%,rgba(9,34,64,.05)); }
.hero-content { position:absolute; left:clamp(24px,8vw,120px); top:50%; transform:translateY(-50%); }
.eyebrow,.section-kicker { font-size:12px; font-weight:700; letter-spacing:2px; }
.hero h1 { margin:14px 0 4px; font-size:clamp(70px,11vw,154px); line-height:1; letter-spacing:0; font-weight:600; }
.hero-copy { font-size:clamp(19px,2.2vw,30px); margin:18px 0 34px; }
.primary-action { display:inline-flex; align-items:center; gap:32px; background:var(--orange); padding:15px 20px; font-size:14px; font-weight:700; border-radius:6px; box-shadow:0 10px 24px rgba(23,81,139,.2); }
.primary-action span { font-size:20px; }
.hero-meta { position:absolute; right:clamp(24px,5vw,72px); bottom:32px; display:flex; align-items:center; gap:15px; font-size:12px; }
.meta-line { width:52px; height:1px; background:white; }
.intro { max-width:1340px; margin:auto; padding:110px clamp(20px,5vw,64px) 70px; display:grid; grid-template-columns:1.2fr .8fr; gap:12vw; align-items:end; }
.section-kicker { color:var(--orange); margin:0 0 16px; }
.intro h2,.service-title h2 { font-size:clamp(36px,5vw,68px); line-height:1.15; letter-spacing:0; margin:0; font-weight:600; }
.intro>p { font-size:16px; line-height:1.9; color:#63758a; margin:0; }
.package-carousel-shell { position:relative; }
.package-list { width:calc(100% - 40px); max-width:1212px; margin:auto; padding:0 0 120px; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 44px) / 3); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; user-select:none; touch-action:pan-y; }
.package-list::-webkit-scrollbar { display:none; }
.package-list.dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.swipe-hint { display:none; }
.package-card { min-width:0; scroll-snap-align:start; background:white; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:inherit; box-shadow:0 7px 25px rgba(36,72,108,.06); transition:transform .25s ease,box-shadow .25s ease; }
.package-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(36,72,108,.13); }
.package-cover { aspect-ratio:4/3; overflow:hidden; background:#e4edf6; }
.package-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; pointer-events:none; user-select:none; }
.package-card:hover .package-cover img { transform:scale(1.06); }
.card-body { padding:22px; }
.card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.card-body h3 { margin:6px 0 8px; font-size:24px; letter-spacing:0; }
.card-subtitle { color:#6f8297; margin:0; font-size:13px; line-height:1.6; }
.card-price { color:var(--forest); font-size:24px; font-weight:700; white-space:nowrap; }
.card-price::before { content:'¥'; font-size:13px; margin-right:2px; }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid var(--line); color:#708197; font-size:12px; }
.card-open { color:var(--forest); font-weight:700; }
.gallery { min-width:0; border-radius:var(--radius); }
.gallery-track { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-image { width:100%; flex:0 0 100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; scroll-snap-align:start; background:#e3ebf3; border-radius:var(--radius); }
.gallery-controls { display:flex; align-items:center; justify-content:space-between; padding-top:13px; }
.gallery-dots { display:flex; gap:6px; }
.gallery-dot { width:24px; height:2px; background:#bfd0e0; transition:.2s; border-radius:2px; }
.gallery-dot.active { background:var(--orange); }
.gallery-arrows { display:flex; gap:8px; }
.icon-button { width:38px; height:38px; border:1px solid var(--line); background:white; cursor:pointer; font-size:18px; border-radius:6px; }
.icon-button:hover { background:var(--forest); color:white; }
.icon-button:disabled { opacity:.38; cursor:default; background:white; color:var(--ink); }
.package-number { color:var(--orange); font-size:12px; font-weight:700; }
.package-info h3 { font-size:clamp(30px,3.2vw,50px); margin:14px 0 10px; letter-spacing:0; }
.subtitle { font-size:15px; color:#73859a; margin-bottom:24px; }
.description { line-height:1.8; color:#53677e; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin:25px 0 30px; }
.tag { padding:7px 11px; border:1px solid var(--line); font-size:12px; background:white; border-radius:6px; color:#4f6983; }
.price-row { border-top:1px solid var(--line); padding-top:22px; display:flex; align-items:end; justify-content:space-between; }
.price { font-size:42px; font-weight:600; }
.price::before { content:'¥'; font-size:18px; vertical-align:top; margin-right:3px; }
.unit { color:#718196; font-size:12px; }
.book-button { border:0; background:var(--forest); color:white; padding:13px 18px; cursor:pointer; border-radius:6px; box-shadow:0 8px 20px rgba(36,104,173,.16); }
.service-band { background:#eaf3fc; color:var(--ink); padding:90px max(20px,calc((100vw - 1212px)/2)); }
.service-title { display:flex; justify-content:space-between; align-items:end; padding:0 20px 65px; }
.service-title .section-kicker { color:var(--orange); }
.steps { border-top:1px solid #c9dced; display:grid; grid-template-columns:repeat(var(--step-count,3),1fr); }
.steps article { padding:38px 35px 28px; border-right:1px solid #c9dced; border-bottom:1px solid #c9dced; }
.steps article:nth-child(3n),.steps article:last-child { border-right:0; }
.steps span { color:var(--orange); font-size:12px; }
.steps h3 { font-size:22px; margin:28px 0 14px; }
.steps p { color:#5d7289; line-height:1.7; font-size:14px; }
.service-location { margin-top:22px; display:flex; align-items:center; gap:16px; padding:18px 22px; border:1px solid #c9dced; border-radius:10px; color:var(--ink); background:rgba(255,255,255,.68); text-decoration:none; box-shadow:0 8px 24px rgba(36,104,173,.06); transition:transform .2s, box-shadow .2s, border-color .2s; }
.service-location[hidden] { display:none; }
.service-location:hover { transform:translateY(-2px); border-color:#8eb8df; box-shadow:0 12px 30px rgba(36,104,173,.12); }
.service-location-icon { width:42px; height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:10px; background:#dcecfb; color:var(--forest); box-shadow:inset 0 0 0 1px rgba(80,137,190,.12); }
.map-pin { position:relative; display:block; width:12px; height:12px; border:2px solid var(--forest); border-radius:50% 50% 50% 2px; transform:rotate(-45deg); }
.map-pin::after { content:''; position:absolute; width:3px; height:3px; left:2.5px; top:2.5px; border-radius:50%; background:var(--forest); }
.map-thumb { position:relative; display:flex; align-items:center; justify-content:space-around; width:24px; height:11px; overflow:hidden; border:1px solid rgba(36,104,173,.55); border-radius:3px; background:linear-gradient(135deg,#fff 0 28%,#b8d4ec 29% 48%,#fff 49% 67%,#8bb6d8 68%); }
.map-thumb b { display:block; width:1px; height:14px; background:rgba(36,104,173,.38); transform:rotate(28deg); }
.service-location span:nth-child(2) { display:flex; flex-direction:column; gap:4px; flex:1; }
.service-location small,.service-location em { color:#668099; font-size:12px; font-style:normal; }
.service-location strong { font-size:16px; }
.service-location-arrow { color:var(--forest); font-size:22px; }
footer { padding:30px clamp(20px,5vw,72px); display:flex; justify-content:space-between; align-items:center; font-size:13px; }
footer>p { color:#777; }
footer>a { text-decoration:underline; }
.lightbox { position:fixed; inset:0; z-index:50; background:rgba(10,13,11,.95); display:grid; place-items:center; padding:50px; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:min(1100px,88vw); max-height:82vh; object-fit:contain; }
.lightbox button { position:absolute; border:0; color:white; background:rgba(255,255,255,.12); width:46px; height:46px; cursor:pointer; font-size:22px; border-radius:8px; }
.lightbox-close { right:24px; top:24px; }
.lightbox-prev { left:24px; top:50%; }.lightbox-next { right:24px; top:50%; }
.lightbox-count { position:absolute; bottom:22px; color:white; font-size:13px; }
.loading { padding:80px 0; color:#777; }
.package-modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:24px; }
.package-modal[hidden] { display:none; }
.package-modal-backdrop { position:absolute; inset:0; background:rgba(9,31,56,.72); backdrop-filter:blur(3px); }
.package-detail { position:relative; width:min(1120px,100%); max-height:92vh; overflow:auto; background:white; border-radius:8px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr); box-shadow:0 24px 80px rgba(8,31,58,.26); }
.detail-close { position:absolute; z-index:3; top:14px; right:14px; width:40px; height:40px; border:0; background:rgba(15,44,76,.78); color:white; border-radius:6px; font-size:23px; cursor:pointer; }
.detail-gallery { padding:18px; min-width:0; background:#f3f7fb; }
.detail-main-wrap { aspect-ratio:4/3; overflow:hidden; border-radius:6px; background:#e5edf5; cursor:zoom-in; }
.detail-main-image { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.detail-main-wrap:hover .detail-main-image { transform:scale(1.055); }
.detail-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:10px; }
.detail-thumb { aspect-ratio:4/3; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; background:white; opacity:.7; cursor:pointer; }
.detail-thumb.active { border-color:var(--forest); opacity:1; }
.detail-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.detail-thumb:hover img { transform:scale(1.08); }
.detail-mobile-images { display:none; }
.detail-info { padding:62px 36px 34px; display:flex; flex-direction:column; }
.detail-info h2 { font-size:36px; line-height:1.2; letter-spacing:0; margin:0 0 10px; }
.detail-subtitle { color:#718397; font-size:14px; margin:0 0 27px; }
.detail-description { color:#50667d; line-height:1.8; margin:0; }
.detail-tags { display:flex; gap:7px; flex-wrap:wrap; margin:24px 0; }
.detail-tags .tag { background:#f5f9fd; }
.detail-price-row { margin-top:auto; border-top:1px solid var(--line); padding-top:24px; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.detail-price { font-size:36px; font-weight:700; color:var(--ink); margin-right:7px; }
.detail-price::before { content:'¥'; font-size:16px; vertical-align:top; margin-right:3px; }
.contact-modal { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; }
.contact-modal[hidden] { display:none; }
.contact-backdrop { position:absolute; inset:0; background:rgba(9,31,56,.7); backdrop-filter:blur(3px); }
.contact-dialog { position:relative; width:min(430px,100%); background:white; border-radius:8px; padding:36px; text-align:center; box-shadow:0 24px 80px rgba(8,31,58,.28); }
.contact-dialog h2 { margin:0 0 10px; font-size:30px; letter-spacing:0; }
.contact-hint { color:#6b7d91; font-size:14px; line-height:1.7; margin:0 auto 24px; max-width:320px; }
.contact-close { position:absolute; right:12px; top:12px; width:36px; height:36px; border:0; border-radius:6px; background:#edf4fa; color:var(--ink); cursor:pointer; font-size:21px; }
.contact-phone { display:flex; justify-content:space-between; align-items:center; gap:15px; border:1px solid var(--line); background:#f5f9fd; border-radius:6px; padding:15px 17px; margin-bottom:22px; }
.contact-phone span { color:#6d7f93; font-size:13px; }
.contact-phone strong { color:var(--forest); font-size:21px; }
.contact-location { display:flex; justify-content:space-between; align-items:center; gap:15px; border:1px solid var(--line); border-radius:6px; padding:13px 17px; margin:-12px 0 22px; text-align:left; }
.contact-location span { flex:0 0 auto; color:#6d7f93; font-size:13px; }
.contact-location strong { color:var(--forest); font-size:13px; line-height:1.5; }
.qr-block { display:flex; flex-direction:column; align-items:center; gap:11px; }
.qr-label { font-size:13px; color:#607389; }
.qr-image-wrap { width:210px; aspect-ratio:1; padding:10px; border:1px solid var(--line); border-radius:8px; background:white; display:grid; place-items:center; }
.qr-image { width:100%; height:100%; object-fit:contain; display:block; }
.qr-image[hidden], .qr-empty[hidden] { display:none; }
.qr-empty { color:#8a98a7; font-size:13px; line-height:1.7; }

@media (max-width:760px) {
  .site-header { height:62px; }
  nav { gap:6px; }
  nav a#navPackages,nav a#navService { display:none; }
  .location-link { padding:8px 10px; font-size:12px; }
  .contact-link { padding:9px 12px; }
  .hero { min-height:610px; height:calc(100svh - 62px); max-height:760px; }
  .hero-shade { background:linear-gradient(0deg,rgba(9,34,64,.72),rgba(9,34,64,.08) 70%); }
  .hero-content { left:22px; right:22px; top:auto; bottom:74px; transform:none; }
  .hero h1 { font-size:68px; }
  .hero-meta { display:none; }
  .intro { padding:75px 22px 48px; display:block; }
  .intro h2 { font-size:38px; }
  .intro>p { margin-top:30px; }
  .package-list { width:calc(100% - 36px); padding:0 0 80px; gap:14px; }
  .package-list { grid-auto-columns:100%; }
  .swipe-hint { position:absolute; right:8px; top:27%; z-index:3; display:flex; align-items:center; gap:0; color:rgba(25,72,119,.96); pointer-events:none; animation:swipeHintFloat 1.65s ease-in-out infinite; transition:opacity .2s, transform .2s; }
  .swipe-hint span { writing-mode:vertical-rl; display:block; margin-right:-3px; font-size:14px; line-height:1; letter-spacing:3px; font-weight:700; text-shadow:0 2px 8px rgba(17,55,94,.25); }
  .swipe-hint strong { position:relative; display:block; width:52px; height:160px; flex:0 0 52px; overflow:visible; font-size:0; }
  .swipe-hint strong::before { content:''; position:absolute; inset:0; background:rgba(33,91,146,.3); clip-path:polygon(0 0,20% 0,100% 50%,20% 100%,0 100%,78% 50%); filter:drop-shadow(-9px 0 15px rgba(17,55,94,.3)); }
  .swipe-hint.dismissed { opacity:0; transform:translateX(10px); animation:none; }
  .package-card { display:block; }
  .package-cover { aspect-ratio:4/3; min-height:0; }
  .card-body { padding:18px; }
  .card-body h3 { font-size:21px; }
  .card-top { display:block; }
  .card-price { margin-top:12px; }
  .card-footer { margin-top:15px; padding-top:12px; }
  .package-modal { padding:0; place-items:stretch; }
  .package-detail { width:100%; max-height:100svh; height:100svh; border-radius:0; display:block; }
  .detail-close { position:fixed; top:12px; right:12px; }
  .detail-gallery { padding:0; background:white; }
  .detail-main-wrap,.detail-thumbs { display:none; }
  .detail-mobile-images { display:block; }
  .detail-mobile-images img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:5px; cursor:zoom-in; }
  .detail-info { padding:30px 22px 40px; }
  .detail-info h2 { font-size:31px; }
  .detail-price-row { margin-top:28px; }
  .contact-dialog { padding:34px 22px 28px; }
  .qr-image-wrap { width:min(210px,65vw); }
  .service-band { padding:70px 22px; }
  .service-title { display:block; padding:0 0 45px; }
  .service-title h2 { font-size:38px; }
  .steps { display:block; }
  .steps article { border-right:0; border-bottom:1px solid #c9dced; padding:28px 4px; }
  .service-location { padding:16px; }
  footer { align-items:flex-start; gap:25px; flex-direction:column; }
  .lightbox { padding:0; }
  .lightbox img { max-width:100vw; max-height:82vh; }
  .lightbox-prev { left:10px; }.lightbox-next { right:10px; }
}
@keyframes swipeHintFloat { 0%,100% { transform:translateX(-1px); } 50% { transform:translateX(5px); } }
@media (min-width:761px) and (max-width:1024px) {
  .package-list { grid-auto-columns:calc((100% - 22px) / 2); }
}