@import url("cta-motif.css");
/* ---------------------------------------------------------------------------
   COSMIC × FLOWER accent layer — a very restrained "mystery meets bloom" touch
   layered behind the site's existing white/pastel surface. Not a takeover:
   the veil sits at z-index -1 behind all normal in-flow content, only reading
   in section gaps/margins where the page background shows through. */
:root {
  --motion-delay: 0s;   /* ページ移動前の待ち時間（星を見せる） */
  --motion-stagger: 0s; /* 並んだ要素の出現間隔（0＝同時） */
  --sa-navy: #262B52;
  --sa-gold: #D9B26B;
}
.sa-left video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform-origin: top left !important;
  transform: scale(1.35) !important;
}
.sa-cosmic-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 12% 6%, rgba(199,195,255,0.38), transparent 60%),
    radial-gradient(ellipse 55% 35% at 90% 14%, rgba(140,211,245,0.26), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 45%, #f5f4ff 100%);
}
.sa-cosmic-veil::before {
  content: '';
  position: absolute; inset: -6%;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 15%, rgba(217,178,107,0.6) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 24% 62%, rgba(142,133,242,0.5) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 44% 30%, rgba(217,178,107,0.45) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 68% 10%, rgba(142,133,242,0.45) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 84% 48%, rgba(217,178,107,0.5) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 92% 78%, rgba(142,133,242,0.45) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 20% 88%, rgba(217,178,107,0.4) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 58% 92%, rgba(142,133,242,0.4) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 36% 46%, rgba(217,178,107,0.4) 50%, transparent 52%);
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
  transition: transform 0.7s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .sa-cosmic-veil::before { animation: saStarTwinkle 6s ease-in-out infinite; }
}
@keyframes saStarTwinkle { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* Small line-art "flower amid stardust" corner accents — abstract, not
   representational imagery; same visual family as the site's existing
   hand-drawn icon set. Used sparingly (2–3 per page). */
.sa-cosmic-petal { opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .sa-cosmic-petal { animation: saPetalFloat 8s ease-in-out infinite; }
}
@keyframes saPetalFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(5deg); }
}

/* Tiny gold star bullet prefixed to section eyebrows — a quiet "starry/gold"
   spice, not a palette change; the eyebrow text itself keeps its accent color. */
.sa-eyebrow-star { color: var(--sa-gold); margin-right: 6px; font-size: 0.85em; }

/* Sekita Aoi — shared visual-effects CSS for content pages loaded inside the
   persistent shell's <iframe name="contentFrame"> (home-content.html, plan.html,
   category.html, reservation.html, and every plan detail page). The shell
   itself (index.html) keeps its own small stylesheet for the SideNav /
   mobile-chrome / iframe-fade effects — this file is for CONTENT only. */

html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
html, body { margin: 0; background: var(--surface-page); scroll-behavior: smooth; }

/* ---------------------------------------------------------------------------
   READABILITY UPGRADE — body copy on this campaign site was running small
   (12–14px) and light (400 weight, lighter ink), which read as thin/faint on
   mobile. These rules raise the floor site-wide without touching every
   inline style: paragraphs get a minimum comfortable size + weight + line
   height, and headings scale up ~1.2x for clearer hierarchy. Labels/eyebrows/
   chips/badges (spans, not <p>/<h*>) are intentionally left alone — they're
   small-caps UI accents, not reading copy. */
p:not([style*="#fff"]):not([style*="rgba(255,255,255"]) {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.05em !important;
  color: #333333 !important;
}
p[style*="#fff"], p[style*="rgba(255,255,255"] {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.05em !important;
}
h1:not([style*="font-title"]) { font-size: 27px !important; line-height: 1.5 !important; letter-spacing: 0.06em !important; }
h2:not([style*="font-title"]) { font-size: 25px !important; line-height: 1.5 !important; letter-spacing: 0.06em !important; }
h3 { font-size: 19px !important; line-height: 1.5 !important; letter-spacing: 0.06em !important; }
.sa-left a, .sa-left button, .sa-left span, button { letter-spacing: 0.08em !important; }
[style*="font-accent"] { letter-spacing: 0.12em !important; }

/* CONCEPT heading on the plan detail pages is intentionally smaller than the
   site-wide h2 default — escape hatch class, same pattern as the
   font-title :not() exclusion above. */
h2.sa-concept-title { font-size: 22px !important; }

/* ---------------------------------------------------------------------------
   WHITESPACE UPGRADE — sections were packed edge-to-edge. Give every
   top-level section on this campaign site (both the home LP's <section>
   blocks and each detail/plan/category/reservation page's direct content
   blocks under PageShell) a generous, doubled gap so each reads as its own
   group, plus a very light alternating tint so related content (a plan
   table, a notice block) feels bounded without a hard border. */
section + section,
.sa-page-body > * + * {
  margin-top: 22px !important;
}
/* Alternating section tint removed per feedback — the home LP should read as
   one continuous, unified surface rather than being visually chopped into
   per-section bands. Spacing between sections (above) still creates the
   separation; color no longer does. */
section {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Gallery / portfolio horizontal-scroll rows: hide the scrollbar chrome for
   a cleaner look (scroll still works via swipe/drag). */
.sa-scroll-x::-webkit-scrollbar { display: none; }
.sa-scroll-x { scrollbar-width: none; }

/* Portfolio/gallery thumbnails: the hover zoom lives on the image itself,
   clipped by its own masked container — so a scaled-up photo can never
   spill out and get cut off by an ancestor's overflow (e.g. the horizontal
   scroll row). */
/* Hand-touch entrance pop for small decorative icons (feature bullets,
   section eyebrow accents) — a single gentle fade+grow into place (no
   bounce-back overshoot, which read as moving twice). Purely additive
   flourish; respects reduced motion. */
@keyframes saIconPop {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .sa-icon-pop { animation: saIconPop 0.4s var(--ease-out) both; }
}

/* Cute rotating chevron for FAQ disclosure triangles (native marker hidden). */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
.sa-faq-chevron { transition: transform var(--dur-base) var(--ease-out); }
details[open] > summary .sa-faq-chevron { transform: rotate(180deg); }

/* Sticky-note category tags + accordion panel (MENU section). */
.sa-tag-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-bounce); }
.sa-tag-panel-wrap.sa-tag-panel-open { grid-template-rows: 1fr; }
.sa-tag-panel-inner { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }

/* PORTFOLIO photo-wall — horizontal-only photos, packed edge-to-edge with a
   hairline gap, no captions/labels. Responsive column count: 2 on phone,
   4 on tablet, 6 on desktop. Hover is deliberately minimal (brightness only)
   so the photos do the work. Outer padding/max-width keeps the wall from
   pinning to the viewport edge on very wide/narrow screens. */
.sa-photowall-outer { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .sa-photowall-outer { padding: 0 10%; } }
.sa-photowall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 700px)  { .sa-photowall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .sa-photowall { grid-template-columns: repeat(6, 1fr); } }
.sa-photowall > div { aspect-ratio: 3 / 2; overflow: hidden; }
.sa-photowall img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.25s var(--ease-out); }
.sa-photowall img:hover { filter: brightness(1.08); }

/* Filled pastel MENU buttons (tabs + plan pills) — darken softly + lift on hover/tap. */
.sa-menu-fill-btn:hover,
.sa-menu-fill-btn:active {
  background: color-mix(in srgb, var(--btn-tint, var(--lavender-300)) 42%, white) !important;
  box-shadow: var(--shadow-md) !important;
}

/* MENU tab-switch content: fades + rises in fresh every time React remounts it. */
@keyframes saTabIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sa-tab-fade { animation: saTabIn 0.4s var(--ease-out); }
}

/* Scroll-reveal: gentle bounce-up fade-in, triggered by IntersectionObserver
   toggling .sa-revealed. Visible end-state is the base style; only animate
   FROM hidden when JS confirms the reveal (and reduced-motion allows it). */
.sa-reveal.sa-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .sa-reveal:not(.sa-revealed) { opacity: 0; transform: translateY(24px); }
  .sa-reveal.sa-revealed { animation: saReveal 0.6s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes saReveal {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Hover micro-interactions: lift for text links, gentle pop-scale for buttons/photos/cards. */
.sa-hover-lift { display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.sa-hover-lift:hover { transform: translateY(-3px); }
.sa-hover-pop { transition: transform var(--dur-base) var(--ease-bounce); }
.sa-hover-pop:hover { transform: scale(1.03); }

/* Bold pop color-block plan tiers (Felissimo-style): each tier is a solid
   pastel panel, not a white card — big item-number badge, hand-drawn
   scribble accent, and (for the featured tier) a rotated stamp badge. */
.sa-tier-panel { position: relative; overflow: hidden; }
.sa-tier-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-accent); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; opacity: 0.65;
}
.sa-tier-stamp {
  position: absolute; top: -10px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid currentColor; transform: rotate(9deg);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-align: center; line-height: 1.2; padding: 4px;
}
.sa-scribble { opacity: 0.5; }


/* ===========================================================================
   TOY-BOX COSMOS — cloud/Milky-Way wave section edges, tinted bands, faint
   stardust, tilted tag eyebrows, sticker photos, puffy buttons, motif slots.
   =========================================================================== */
.sa-sec { position: relative; margin-top: 0 !important; padding-top: 34px !important; padding-bottom: 40px !important;
  background-image: none; }
.sa-sec--lav   { background-color: #F3F1FF; }
.sa-sec--sky   { background-color: #EAF5FD; }
.sa-sec--cream { background-color: #FFF8E8; }
.sa-sec--pink  { background-color: #fdeef3; }
.sa-sec--contact { background-color: #fff3c4; }
.sa-sec::before { content: ''; position: absolute; left: 0; right: 0; top: -17px; height: 18px; background: inherit; background-position: 0 17px; pointer-events: none;
  -webkit-mask: radial-gradient(16px 13px at 50% 100%, #000 97%, transparent 100%) 0 0 / 30px 18px repeat-x;
          mask: radial-gradient(16px 13px at 50% 100%, #000 97%, transparent 100%) 0 0 / 30px 18px repeat-x; }
.sa-sec--flat::before { display: none; }
.sa-sec--flat { padding-top: 0 !important; }

/* Tag-style English eyebrows — straight pill label, left edge aligned with the heading below */
.sa-tag { display: inline-block; margin: 0 0 6px 0; padding: 5px 15px 4px; border-radius: 999px; background: var(--lavender-600); color: #fff !important;
  font-family: var(--font-accent); font-weight: 700; font-size: 16px; letter-spacing: 0.12em; line-height: 1.3;
  transform: none; rotate: 0deg; box-shadow: none; }
.sa-tag--coral { background: #E0573A; }
#profile .sa-photowall-outer { padding-left: 0 !important; padding-right: 0 !important; }

/* Sticker look for photos & small cards */
.sa-sticker { border: 5px solid #fff !important; box-shadow: 0 6px 16px rgba(70,65,107,0.16) !important; }

/* Puffy buttons — darker drop edge under every pill/tab/CTA */
.sa-menu-fill-btn, a.sa-hover-pop, button.sa-hover-pop { box-shadow: 0 4px 0 color-mix(in srgb, var(--btn-tint, #8f88e6) 60%, #46416b) !important; }
.sa-menu-fill-btn:active, a.sa-hover-pop:active, button.sa-hover-pop:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--btn-tint, #8f88e6) 60%, #46416b) !important; translate: 0 3px; }

/* Hand-drawn motifs — absolutely placed in section margins, gentle staggered bob */
.sa-motif { position: absolute; height: auto; pointer-events: none; z-index: 0; user-select: none; animation: saMotifFloat 5.2s ease-in-out infinite; }
.sa-sec > *:not(.sa-motif):not(.sa-divider):not(.sa-wave) { position: relative; z-index: 1; }
@keyframes saMotifFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* フッター夜空の白い点：順番にちかちか */
@media (prefers-reduced-motion: no-preference) { .sa-foot-dot { animation: saFootTwinkle 2.5s ease-in-out infinite; } }
@keyframes saFootTwinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.sa-sec--band { padding-top: 112px !important; }
/* Milky-Way divider sections: the drawing's lower fill is #c3bbfc */
.sa-sec--milky { background-color: #c3bbfc; padding-top: 0 !important; overflow: hidden; }
.sa-sec--milky::before { display: none; }
/* Divider bleeds 40px past each side; the milky section clips it, so both edges always reach the section edge whatever its padding. */
.sa-sec > .sa-wave{position:absolute;left:0;top:0;width:100%;height:20px;overflow:hidden;z-index:1;pointer-events:none}
.sa-sec > .sa-wave-gap{height:21px;margin-top:-1px}
.sa-sec--milky + .sa-sec::before { background-color: inherit; }

/* Toy buttons — 2.5px ink outline + hard offset shadow; press sinks into the shadow */
a.sa-toy-btn, button.sa-toy-btn { transition: translate 0.12s ease, box-shadow 0.12s ease, transform var(--dur-base) var(--ease-bounce) !important; }
a.sa-toy-btn--diag, button.sa-toy-btn--diag { box-shadow: 3px 3px 0 #3d3566 !important; }
a.sa-toy-btn--down, button.sa-toy-btn--down { box-shadow: 0 5px 0 #3d3566 !important; }
a.sa-toy-btn--diag:active, button.sa-toy-btn--diag:active, button.sa-toy-btn--diag[data-active] { translate: 3px 3px; box-shadow: 0 0 0 #3d3566 !important; }
a.sa-toy-btn--down:active, button.sa-toy-btn--down:active { translate: 0 5px; box-shadow: 0 0 0 #3d3566 !important; }
@media (prefers-reduced-motion: reduce) { .sa-motif { animation: none; } }

/* Gallery teaser marquee — 6 sticker photos ×2, seamless right→left loop */
.sa-marquee { overflow: hidden; container-type: inline-size; margin: 8px calc(var(--edge-gap, 24px) * -1) 20px !important; padding: 6px 0 8px; }
.sa-marquee:hover .sa-marquee-track { animation-play-state: paused; }
.sa-marquee-track { display: flex; width: max-content; animation: saMarquee 60s linear infinite; will-change: transform; }
@keyframes saMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sa-marquee-track { animation: none !important; } }
.sa-marquee-item { position: relative; flex: 0 0 200px; width: 200px; height: 250px; margin-right: 16px; user-select: none; box-sizing: border-box; border: 4px solid #fff; border-radius: 0; box-shadow: 3px 3px 0 #3d3566; overflow: hidden; background: #fff; cursor: default; }
.sa-marquee-item image-slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; }

/* Heading row — motifs sit to the right of a section heading, vertically centred; they shrink first so text always wins */
.sa-headrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sa-headrow--center { justify-content: center; }
.sa-headrow-text { flex: 0 1 auto; min-width: 0; }
.sa-headrow-motifs { display: flex; align-items: center; gap: 16px; flex: 0 100 auto; min-width: 0; justify-content: flex-end; }
.sa-headrow-motifs .sa-motif { position: static; flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* Small press pills (OTHER MENU) */
a.sa-press-sm { box-shadow: 2px 2px 0 #3d3566; transition: translate .12s, box-shadow .12s; }
a.sa-press-sm:active { translate: 2px 2px; box-shadow: 0 0 0 #3d3566; }

/* Marquee photos are prints: square corners everywhere inside the frame */
.sa-marquee-item, .sa-marquee-item *, .sa-marquee-item image-slot, .sa-marquee-item img { border-radius: 0 !important; }
.sa-marquee-item image-slot::part(frame), .sa-marquee-item image-slot::part(img) { border-radius: 0 !important; }
/* Headings never break mid-word */
body { word-break: auto-phrase; overflow-wrap: anywhere; line-break: strict; }
h1, h2, h3, h4 { word-break: auto-phrase; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.sa-sec > p:not([style*="text-align: left"]), .sa-lead { text-wrap: pretty; }

/* LINE buttons: planet motif lives inside the <a>; hover = lift + tilt, press = sinks with the button */
.line-btn { position: relative; overflow: visible; }
.line-planet { position: absolute; right: -16px; bottom: -14px; height: auto; pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .line-planet { transition: none; } .line-btn:hover .line-planet, .line-btn:active .line-planet { transform: none; } }

/* Logo links: go to top, subtle fade on hover only */
.sa-logo-link { transition: opacity .2s ease; text-decoration: none; }
.sa-logo-link:hover { opacity: .8; }

/* Capsule button with a hard right-bottom shadow; press sinks into the shadow */
.sa-press-diag { transition: transform .12s ease, box-shadow .12s ease; }
.sa-press-diag:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #3d3566 !important; }

/* Cloud wave edge with a navy hand-drawn outline (same ink as the Milky-Way divider) */
.sa-sec--outlined::before { z-index: 1; }
.sa-sec--outlined::after { content: ''; position: absolute; left: 0; right: 0; top: -19.5px; height: 20.5px; background: #3d3566; pointer-events: none; z-index: 0;
  -webkit-mask: radial-gradient(18.5px 15.5px at 50% 100%, #000 97%, transparent 100%) 0 0 / 30px 20.5px repeat-x;
          mask: radial-gradient(18.5px 15.5px at 50% 100%, #000 97%, transparent 100%) 0 0 / 30px 20.5px repeat-x; }

/* フッター（紺背景）の文字色 — 全体の文字色指定に上書きされないよう固定 */
.sa-foot-msg, footer .sa-foot-msg { color: #e9e6ff !important; font-weight: 500 !important; }
.sa-foot-lbl { color: #ffffff !important; }
.sa-foot-receive, .sa-foot-receive * { color: #fde7a0 !important; }
.sa-foot-copy { color: #b9b3e6 !important; }

.sa-sec--noscallop::before, .sa-sec--noscallop::after { display: none !important; }
.sa-sec--intro { padding-top: 78px !important; padding-bottom: 28px !important; }

/* 本文の太さ 500・補足の灰色は #5a5478 より薄くしない */
:root { --text-muted: #5a5478; --text-subtle: #5a5478; }
body, p, li, dd, td, .sa-page-body { font-weight: 500; }


/* 背景の柄：同系色の単色ドット（半径1.5px・間隔28px・市松）。専用レイヤー(::after)で、セクションの上端〜下端まで途切れなく敷く（フェードなし）。波線の下の塗りは透明化した画像を使う。 */
.sa-sec{background-image:var(--sa-pat,none);background-size:var(--sa-pat-size,28px 28px);background-position:0 0}
.sa-sec--noscallop{background-image:none !important}
.sa-sec.sa-pat-sky,.sa-sec--sky{--sa-pat:radial-gradient(circle at 7px 7px,#cfe6f7 1.5px,transparent 1.9px),radial-gradient(circle at 21px 21px,#cfe6f7 1.5px,transparent 1.9px);--sa-pat-size:28px 28px}
.sa-sec.sa-pat-mint,.sa-sec--mint{--sa-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M9 14h10M14 9v10' stroke='%23cdeadb' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M37 42h10M42 37v10' stroke='%23cdeadb' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");--sa-pat-size:56px 56px}
.sa-sec.sa-pat-pink,.sa-sec--pink{--sa-pat:linear-gradient(to right,#f8dde8 1px,transparent 1px),linear-gradient(to bottom,#f8dde8 1px,transparent 1px);--sa-pat-size:32px 32px}
.sa-sec.sa-pat-cream,.sa-sec--cream{--sa-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M11 11l6 6M17 11l-6 6' stroke='%23fbe9bd' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Cpath d='M39 39l6 6M45 39l-6 6' stroke='%23fbe9bd' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");--sa-pat-size:56px 56px}
.sa-sec--mint{background-color:#e6f6ee}
.sa-sec > .sa-motif,.sa-sec > .sa-wave{z-index:1}



/* セクション余白：波の下端〜ラベル／最後の要素〜次の波。全セクション共通 */
:root{--section-pad-top:48px;--section-pad-bottom:56px}
@media (min-width:1141px){:root{--section-pad-top:80px;--section-pad-bottom:88px}}
.sa-sec.sa-sec--milky,.sa-sec:has(> .sa-wave-gap){padding-top:var(--section-pad-top) !important;padding-bottom:var(--section-pad-bottom) !important}

/* キャッチコピー（intro）：共通の余白変数に追加分を足す。スマホ 56/72、PC 88/96 */
:root{--intro-pad-top:calc(var(--section-pad-top) + 8px);--intro-pad-bottom:calc(var(--section-pad-bottom) + 16px)}
@media (min-width:1141px){:root{--intro-pad-bottom:calc(var(--section-pad-bottom) + 8px)}}
.sa-sec--intro{padding-top:var(--intro-pad-top) !important;padding-bottom:var(--intro-pad-bottom) !important}

/* 左右の余白：イラストの外端・文章の左右 padding を全セクションで統一（スマホ24px / PC40px） */
:root{--edge-gap:24px}
@media (min-width:1141px){:root{--edge-gap:40px}}
html.sa-pc{--edge-gap:40px;--section-pad-top:80px;--section-pad-bottom:88px;--intro-pad-bottom:calc(var(--section-pad-bottom) + 8px)}
.sa-sec{padding-left:var(--edge-gap) !important;padding-right:var(--edge-gap) !important}

/* メニューの2つのCTA：中身（アイコン＋文字）を必ず中央。左右paddingは同じ値、イラストはabsoluteで文字位置に影響しない */
a.sa-menu-cta{display:flex !important;align-items:center !important;justify-content:center !important;padding-left:16px !important;padding-right:16px !important;margin-left:0 !important;margin-right:0 !important;text-align:center}
a.sa-menu-cta > strong{letter-spacing:0.02em !important;margin-right:-0.02em}

/* CONTACT：バナー角のイラストが画面端から8px以上離れるよう、左右余白を28px */
#contact.sa-sec{padding-left:28px !important;padding-right:28px !important}

/* 長めの本文（FAQの答え・注意事項・脚注）は、文節保持(auto-phrase)だと1行が極端に短くなるため、通常の折り返し（行頭の、。は禁則）にする */
details, .sa-plain { word-break: auto-phrase; line-break: strict; overflow-wrap: break-word; text-wrap: pretty; }
details > summary { word-break: auto-phrase; }

/* メニューバーがある表示（〜1140px）：TOP写真の白ロゴは、バーの下端から12pxあけて表示 */
html:not(.sa-pc) .sa-hero-logo{top:calc(var(--sa-shell-h, 69px) + 12px) !important}

/* 写真の長押し保存・ドラッグ保存を防ぐ */
img,image-slot,.sa-marquee-item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none}
[style*="background-image"],[class*="photo"],[class*="slide"]{-webkit-touch-callout:none}

/* 注意書き：文頭に「※」、折り返しは※の幅だけぶら下げインデント */
/* 脚注の行間・項目間隔はここで調整 */
:root{--note-lh:1.6;--note-gap:2px}
.sa-note{padding-left:1em !important;text-indent:-1em;line-height:var(--note-lh) !important}
.sa-note::before{content:"※";text-indent:0}

/* 長い本文・脚注・FAQ回答：枠の幅いっぱいまで使ってから折り返す（禁則 line-break:strict は維持、単語の途中・孤立行は避ける） */
.sa-note, details, details *, .sa-plain, .sa-sec p, .sa-page-body p, li, dd { word-break: normal !important; text-wrap: pretty !important; line-break: strict; overflow-wrap: break-word; }
details > summary { word-break: auto-phrase !important; }

/* 列の中のスクロールバーは非表示（スクロール操作はそのまま使える） */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}

/* FAQ見出しのUFO：72px固定・狭い画面でも縮めない */
.sa-headrow-motifs:has(.sa-motif[src*="09_ufo"]){flex:0 0 auto}
.sa-headrow-motifs .sa-motif[src*="09_ufo"]{flex:0 0 auto;min-width:72px}