:root {
  --paper: #fffaf3;
  --paper-white: #fffdf9;
  --ink: #07111c;
  --orange: #ef3c0b;
  --orange-deep: #e72c05;
  --orange-pale: #ffe3cf;
  --green: #00846a;
  --green-pale: #e9f6ef;
  --blue: #1559ba;
  --blue-pale: #eaf1ff;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

body {
  height: 100%;
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button, a { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: #111;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.snap-deck {
  width: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.snap {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.snap__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: min(100%, 430px);
  margin: 0 auto;
  padding-right: 23px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: 23px;
}

/* Cycle 5: single wrapper around each Snap's non-decorative content.
   Placed as the sole in-flow flex child of .snap__inner (the decorative
   absolute-positioned elements are excluded), margin: auto 0 centers it
   vertically. Flexbox resolves auto margins to 0 when content is taller
   than the available space, so on short viewports the block simply
   aligns to the top (and overflows downward into the single .snap-deck
   scroller) instead of being clipped symmetrically top and bottom the
   way justify-content:center would. */
.snap__block {
  margin: auto 0;
}

.visually-hidden,
.snap-index {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 15px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
}

.button:focus-visible,
.carousel-control:focus-visible,
.faq-question:focus-visible,
.snap-cta a:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.hero h1 > span:last-child::after,
.hero__chatgpt::after,
.section-heading--split h2::after,
.plan__price::after,
.plan__header h2 span::after,
.service-card h3::after,
.section-heading--faq h2::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 9px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='14' viewBox='0 0 420 14'%3E%3Cpath d='M4 9 C78 2 146 11 212 6 S342 8 416 4' fill='none' stroke='%23ef3c0b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Snap 1 — exact poster composition */
.snap--hero {
  background: var(--paper-white);
}

/* top-right dot grid */
.snap--hero::before {
  position: absolute;
  z-index: 0;
  top: 96px;
  right: -12px;
  width: 118px;
  height: 150px;
  content: "";
  background: radial-gradient(circle, rgba(7,17,28,.13) 0 1.3px, transparent 1.6px) 0 0 / 15px 15px;
  mask-image: linear-gradient(200deg, #000 15%, transparent 72%);
  pointer-events: none;
}

/* bottom-left dot grid, sits behind the quarter circle */
.snap--hero::after {
  position: absolute;
  z-index: 0;
  bottom: -20px;
  left: -16px;
  width: 130px;
  height: 130px;
  content: "";
  background: radial-gradient(circle, rgba(7,17,28,.1) 0 1.3px, transparent 1.6px) 0 0 / 15px 15px;
  mask-image: linear-gradient(340deg, #000 12%, transparent 70%);
  pointer-events: none;
}

/* Cycle 6: the NEWS ribbon is now part of the normal-flow .snap__block
   (first child, see .news-ribbon below), so .hero no longer needs a
   padding-top to clear it — the whole ribbon+body+CTA group is centered
   together via .snap__block's margin: auto 0.
   padding-bottom replaces the old hero__actions margin-bottom so the
   safe-area inset is only counted once. */
.hero {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;
}

/* right side — large pale orange circle bleeding off-screen (Cycle 2: shrunk, softened) */
.hero::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -90px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  content: "";
  background: rgba(255,190,150,.35);
  transform: translateY(-50%);
  pointer-events: none;
}

/* bottom-left — pale orange quarter circle bleeding off-screen
   Cycle 2: bottom offset changed from -78px to 0 — the negative offset was
   inflating .snap__inner (.hero) scrollHeight by exactly 78px even though
   .snap clips it visually (scrollHeight still counts hidden overflow). */
.hero::after {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -78px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  content: "";
  background: rgba(255,152,101,.32);
  pointer-events: none;
}

.hero__square {
  position: absolute;
  z-index: 1;
  top: 54%;
  right: 18px;
  width: 24px;
  height: 24px;
  content: "";
  background: #ff9a5e;
  pointer-events: none;
}

/* Cycle 6: in normal flow now (first child of .snap__block), bled out
   to full viewport width by countering .snap__inner's left/right padding
   (23px, or 17px under the <359px media query below). */
.news-ribbon {
  position: relative;
  z-index: 3;
  left: auto;
  width: calc(100% + 46px);
  margin: 0 -23px;
  transform: none;
}

.news-ribbon img { width: 100%; height: auto; }

.hero__body {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  margin-right: 0;
  margin-left: 0;
}

.hero h1 {
  margin-bottom: 32px;
  color: var(--ink);
  /* Cycle 2 asked for 42px; the real Cycle-1 measurement (38px -> 327px on a
     344px-wide line) caps the safe maximum at ~40px at 390px width, so the
     clamp tops out at 41px instead of 42px to guarantee no overflow. */
  font-size: clamp(33px, 9.8vw, 41px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.04em;
}

.hero h1 > span { position: relative; display: inline-block; white-space: nowrap; }
.hero__chatgpt::after { bottom: -2px; }

.hero__lead {
  position: relative;
  margin-bottom: 24px;
  font-size: 25px;
  line-height: 1.55;
  font-weight: 900;
  letter-spacing: -.04em;
}

.hero__lead::before {
  position: absolute;
  top: -18px;
  left: 0;
  width: 38px;
  height: 2px;
  content: "";
  background: rgba(7,17,28,.16);
}

.hero__lead span { color: var(--orange); }

.hero__supplement {
  position: relative;
  z-index: 2;
  max-width: 329px;
  margin-bottom: 14px;
  color: #26221f;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 700;
}

.inline-actions { display: grid; gap: 12px; }
.hero__actions {
  position: relative;
  z-index: 2;
  margin: 36px 16px 0;
}

.hero__actions .button--primary {
  position: relative;
  min-height: 64px;
  padding: 10px 54px;
  color: #fff;
  background: linear-gradient(100deg, #f02008, #f45116);
  box-shadow: 0 11px 24px rgba(239,60,11,.21);
}

.hero__actions .button--primary::after {
  position: absolute;
  right: 15px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--orange);
  background: #fff;
  content: "›";
  font-size: 25px;
  line-height: 1;
}

.button--outline {
  min-height: 56px;
  border: 2px solid var(--orange);
  color: var(--orange);
  background: rgba(255,255,255,.85);
}

/* Compact in-flow CTA row, placed at the bottom of Snap 2/3/4/6 */
.snap-cta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}

/* Cycle 5: Snap 2/3/4 replace the auto-margin push-down with a fixed gap
   from the preceding element, since the whole content block (heading
   through CTA) is now centered as a single .snap__block. Snap 6 keeps
   the base margin-top:auto (untouched, out of scope for this cycle). */
.placement .snap-cta { margin-top: 36px; padding-top: 0; }
.snap--start .snap-cta { margin-top: 40px; padding-top: 0; }
.snap--operation .snap-cta { margin-top: 32px; padding-top: 0; }

/* Cycle 6: nudge the whole Snap 2 block ~24px further down (center of
   mass shifts by half of this padding, since .placement .snap__block is
   still vertically centered via margin: auto 0). */
.placement .snap__block { padding-top: 48px; }

.snap-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 13px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.snap-cta__primary {
  color: #fff;
  background: linear-gradient(98deg, #ef2307, #f75418);
  box-shadow: 0 8px 16px rgba(239,60,11,.19);
}

.snap-cta__secondary {
  border: 1.5px solid var(--orange);
  color: var(--orange);
  background: #fff;
}

/* Snap 2 — reference-derived central illustration */
.snap--placement {
  background: var(--paper);
}

/* top-right dot grid */
.snap--placement::before {
  position: absolute;
  z-index: 0;
  top: -10px;
  right: -14px;
  width: 104px;
  height: 128px;
  content: "";
  background: radial-gradient(circle, rgba(239,60,11,.16) 0 1.5px, transparent 1.8px) 0 0 / 15px 15px;
}

/* bottom-left dot grid */
.snap--placement::after {
  position: absolute;
  bottom: -14px;
  left: -16px;
  width: 100px;
  height: 118px;
  content: "";
  background: radial-gradient(circle, rgba(7,17,28,.13) 0 1.4px, transparent 1.7px) 0 0 / 15px 15px;
}

.placement {
  display: flex;
  flex-direction: column;
  padding-top: 56px;
}

/* large pale orange circle bleeding off-screen on the left */
.placement::before {
  position: absolute;
  z-index: 0;
  top: 18%;
  left: -180px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  content: "";
  background: rgba(255,146,93,.18);
}

.placement__confetti {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 10px;
  width: 14px;
  height: 14px;
  background: var(--orange);
  transform: rotate(20deg);
  box-shadow: 250px 46px 0 -3px rgba(174,156,143,.7), 96px 640px 0 -4px var(--orange);
}

.section-heading--split {
  position: relative;
  z-index: 3;
  text-align: center;
}

.section-heading--split h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 11px;
  font-size: clamp(22px, 6.2vw, 26px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.section-heading--split h2 span { color: var(--orange); }
.section-heading--split h2::after { left: 22%; bottom: -5px; }

.editorial-mark {
  position: absolute;
  top: -5px;
  right: 5px;
  width: 32px;
  height: 24px;
}

.editorial-mark::before,
.editorial-mark::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 13px;
  border-radius: 99px;
  content: "";
  background: var(--orange);
  transform-origin: 50% 25px;
}
.editorial-mark::before { transform: rotate(-37deg); }
.editorial-mark::after { transform: rotate(37deg); }

.placement-illustration {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Cycle 5: heading -> illustration is a fixed 24px gap (part of the
     .snap__block group that is centered as a whole via margin: auto 0
     on the wrapper; see .snap-cta below for illustration -> footer ->
     CTA). Horizontal auto keeps the image centered in its own row. */
  margin: 24px auto 0;
  filter: drop-shadow(0 15px 22px rgba(97,58,34,.09));
}

.placement-illustration img {
  width: 100%;
  height: auto;
}

.placement__footer {
  position: relative;
  z-index: 3;
  margin: 28px 0 0;
  text-align: center;
  /* longer string than the heading (15 chars incl. punctuation), so it needs a
     slightly smaller clamp than .section-heading--split h2 to avoid wrapping
     at 360-390px — verified by character-count arithmetic, not rendering. */
  font-size: clamp(20px, 5.9vw, 24px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.placement__footer span { position: relative; color: var(--orange); }
.placement__footer span::after {
  position: absolute;
  right: -4px;
  bottom: -6px;
  left: -4px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: var(--orange);
  transform: rotate(-2deg);
}

/* Snap 3 / 4 shared plan foundation */
.snap--plan { background: var(--paper-white); }

/* top-left pale orange quarter circle */
.snap--start::before {
  position: absolute;
  top: -65px;
  left: -72px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  content: "";
  background: rgba(255,224,204,.4);
}

/* bottom-right orange diagonal stripe pattern */
.snap--start::after {
  position: absolute;
  right: -20px;
  bottom: 70px;
  width: 130px;
  height: 190px;
  content: "";
  background: repeating-linear-gradient(132deg, transparent 0 10px, rgba(239,60,11,.09) 11px 14px);
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 24px;
}

/* bottom-left pale orange quarter circle */
.snap--start .plan::before {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -70px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  content: "";
  background: rgba(255,206,171,.42);
  pointer-events: none;
}

.plan__confetti {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 12px;
  width: 13px;
  height: 13px;
  background: var(--orange);
  transform: rotate(18deg);
  box-shadow: 264px 118px 0 -3px rgba(174,156,143,.7);
}

.plan__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.plan__header > div { display: contents; }

.plan__kicker {
  position: relative;
  display: inline-flex;
  order: 1;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-bottom: 28px;
  padding: 6px 24px 6px 18px;
  border: 1.5px solid var(--orange);
  color: var(--ink);
  background: rgba(255,255,255,.75);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.plan__kicker::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--orange);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.plan__price {
  position: relative;
  order: 2;
  margin: 0 0 36px;
  color: var(--orange);
  font-size: 18px;
  font-weight: 900;
}

.plan__price-num {
  font-size: clamp(40px, 11.5vw, 48px);
  line-height: 1;
  letter-spacing: -.03em;
}

.plan__price small {
  margin-right: 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.plan__price::after { bottom: -12px; }

.plan__motif {
  position: absolute;
  top: -8px;
  left: -30px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.plan__motif span {
  width: 4px;
  height: 15px;
  border-radius: 99px;
  background: var(--orange);
  transform: rotate(-18deg);
}

.plan__motif span:nth-child(2) { transform: rotate(4deg); height: 19px; }
.plan__motif span:nth-child(3) { transform: rotate(24deg); }

.plan__header h2 {
  order: 3;
  margin: 0 0 44px;
  font-size: clamp(30px, 9vw, 36px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.03em;
}

.plan__header h2 span { position: relative; display: inline-block; }

.plan__supplement {
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: -.03em;
}

.plan__supplement strong {
  position: relative;
  color: var(--orange);
  font-size: 22px;
  font-weight: 900;
}

.plan__supplement strong::after {
  position: absolute;
  right: -5px;
  bottom: -5px;
  left: -5px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: var(--orange);
}

/* Inline SVG flow diagram — shared by Snap 3 / 4 */
.flow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 40px;
}

.flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.flow__circle {
  display: grid;
  place-items: center;
  width: clamp(64px, 19vw, 80px);
  height: clamp(64px, 19vw, 80px);
  border-radius: 50%;
  background: #fffdf9;
  box-shadow: 0 0 0 1px rgba(239,60,11,.14), 0 10px 18px rgba(93,54,29,.09);
}

.flow__icon { width: 56%; height: 56%; }

.flow__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.flow__chevron { flex: 0 0 auto; width: 12px; height: 19px; margin-top: clamp(24px, 8.6vw, 34px); }
.flow__dash { flex: 0 0 auto; width: 20px; height: 12px; margin-top: clamp(26px, 9vw, 36px); }

.flow--operation { position: relative; padding: 0 8px; }

.flow__loop {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 118px;
  transform: translateY(-58%);
}

.flow__loop--left { left: -20px; }
.flow__loop--right { right: -20px; }

/* Snap 4 */
.snap--operation::before {
  position: absolute;
  top: -55px;
  right: -42px;
  width: 160px;
  height: 190px;
  content: "";
  background: repeating-linear-gradient(132deg, transparent 0 10px, rgba(239,60,11,.08) 11px 14px);
}

.snap--operation::after {
  position: absolute;
  bottom: 20px;
  left: -50px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  content: "";
  background: rgba(255,225,207,.46);
}

.plan--operation { padding-top: 24px; }

.plan--operation .plan__kicker { margin-bottom: 22px; }

.plan--operation .plan__price { margin-bottom: 30px; }
.plan--operation .plan__price-num { font-size: clamp(40px, 11.5vw, 48px); }

.plan__header--compact h2 {
  margin-bottom: 42px;
  font-size: clamp(22px, 6.85vw, 27px);
  line-height: 1.3;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.plan--operation .flow { margin-bottom: 38px; }

.plan--operation .plan__supplement {
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
}

.plan--operation .plan__supplement strong { font-size: 22px; }

.price-table {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #f2c4ad;
  border-radius: 14px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 7px 16px rgba(93,54,29,.05);
}

.price-table__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 46px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
}

.price-table__row:nth-child(2) { background: rgba(255,222,199,.4); }
.price-table__row:not(:last-child) { border-bottom: 1px solid #f4d6c5; }

.price-table__row b { color: var(--orange); font-weight: 900; }

.price-table__dots {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background-image: radial-gradient(circle, var(--orange) 0 1px, transparent 1.2px);
  background-repeat: repeat-x;
  background-size: 6px 1px;
  opacity: .8;
}

.price-table__row strong {
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 22px;
  font-weight: 900;
}

.price-table__row strong small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 700;
}

.price-table__note { margin: 7px 2px 0; text-align: center; font-size: 9px; }

/* Snap 5 — smartphone service carousel (完成扱い / 見た目を変えない)
   Judgment (spec 3-1): pin the original Hiragino stack here so the site-wide
   Noto Sans JP swap cannot shift this section's line breaks or measurements. */
.snap--services {
  background: #fbf8f2;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", system-ui, sans-serif;
}

.snap--services::before {
  position: absolute;
  top: -68px;
  left: -74px;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  content: "";
  background: rgba(239,60,11,.055);
}

.snap--services::after {
  position: absolute;
  right: -18px;
  bottom: 76px;
  width: 82px;
  height: 128px;
  content: "";
  background: radial-gradient(circle, rgba(7,17,28,.14) 0 1.2px, transparent 1.6px) 0 0 / 14px 14px;
  opacity: .55;
}

.services {
  width: min(100%, 460px);
  padding: 12px 0 66px 15px;
}

.section-heading--services {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin-bottom: 7px;
  padding-right: 15px;
}

.section-heading--services h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.055em;
}

.carousel-controls { display: flex; gap: 7px; }

.carousel-control {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e9c7b5;
  border-radius: 50%;
  color: var(--orange);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 11px rgba(66,42,28,.07);
  cursor: pointer;
  font-weight: 900;
}

.service-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 3px 15px 9px 0;
  scroll-padding-left: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.service-carousel::-webkit-scrollbar { display: none; }

.service-card {
  --card-color: var(--orange);
  --card-pale: #fff0e5;
  position: relative;
  display: grid;
  flex: 0 0 min(330px, calc(100vw - 60px));
  grid-template-rows: minmax(0, 1fr) auto;
  height: min(690px, calc(100svh - 145px));
  min-height: 660px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-color) 20%, #e5ded6);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 7%, color-mix(in srgb, var(--card-color) 9%, transparent) 0 56px, transparent 57px),
    linear-gradient(155deg, color-mix(in srgb, var(--card-pale) 70%, #fff), #fffdf9 43%, var(--card-pale));
  box-shadow: 0 10px 25px rgba(46,34,26,.105);
  scroll-snap-align: start;
}

.service-card::before,
.service-card::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.service-card::before {
  top: 18px;
  right: 19px;
  width: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--card-color) 74%, #fff);
  transform: rotate(45deg);
  box-shadow: 19px 22px 0 -2px color-mix(in srgb, var(--card-color) 28%, transparent);
}

.service-card::after {
  right: -14px;
  bottom: 120px;
  width: 60px;
  height: 60px;
  border: 1px solid color-mix(in srgb, var(--card-color) 12%, transparent);
  border-radius: 50%;
}

.service-card--reform { --card-color: var(--green); --card-pale: var(--green-pale); }
.service-card--automation { --card-color: var(--blue); --card-pale: var(--blue-pale); }

.service-card__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(205px, 1fr);
  min-height: 0;
  padding: 18px 18px 0;
}

.service-card__label {
  position: relative;
  display: inline-block;
  justify-self: start;
  margin-bottom: 17px;
  color: var(--card-color);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.04em;
}

.service-card__label::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 3px;
  border-radius: 99px;
  content: "";
  background: var(--card-color);
  transform: rotate(-1.5deg);
}

.service-card h3 {
  position: relative;
  margin: 0 0 3px;
  font-size: clamp(26px, 7.2vw, 30px);
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: -.065em;
}

.service-card h3 span { display: block; }
.service-card h3::after { display: none; }

.service-card__lead {
  position: relative;
  justify-self: start;
  margin: 0 0 9px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -.045em;
}

.service-card__lead em {
  color: var(--card-color);
  font-style: normal;
}

.service-card__lead::after {
  position: absolute;
  right: 1%;
  bottom: -5px;
  left: 0;
  height: 4px;
  border-radius: 50%;
  content: "";
  background: var(--card-color);
  transform: rotate(-1.5deg);
  opacity: .92;
}

.service-card__sub {
  min-height: 32px;
  margin: 0 0 4px;
  color: #302b27;
  font-size: 10.5px;
  line-height: 1.55;
  font-weight: 700;
}

.service-card__label,
.service-card h3,
.service-card__lead,
.service-card__sub {
  width: calc(100% - 20px);
  margin-left: 10px;
}

.service-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
}

.service-visual::before {
  position: absolute;
  width: 210px;
  height: 150px;
  border-radius: 50%;
  content: "";
  background: color-mix(in srgb, var(--card-color) 8%, transparent);
  filter: blur(1px);
}

.service-visual img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.03) contrast(1.015) drop-shadow(0 11px 13px color-mix(in srgb, var(--card-color) 15%, transparent));
}

.service-visual--portfolio img {
  width: 115%;
  max-width: none;
  height: auto;
}

.service-visual--reform img { max-height: 290px; }

.service-visual--automation {
  overflow: visible;
  padding: 1px 0;
}

.service-visual--automation img {
  width: auto;
  height: 310px;
}

.automation-labels {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.automation-label {
  position: absolute;
  display: block;
  min-width: 70px;
  padding: 4px 7px;
  border: 1px solid rgba(21,89,186,.18);
  border-radius: 999px;
  color: #0a2e63;
  background: rgba(248,252,255,.94);
  box-shadow: 0 4px 10px rgba(23,70,135,.11);
  font-size: 8.5px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.automation-label::after {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  content: "";
  background: rgba(21,89,186,.45);
}

.automation-label--mail { top: 9%; left: 3%; }
.automation-label--fetch { top: 27%; right: 1%; }
.automation-label--entry { top: 45%; left: 1%; }
.automation-label--summary { top: 64%; right: 4%; }
.automation-label--notify { top: 82%; left: 3%; }
.automation-label--mail::after,
.automation-label--entry::after,
.automation-label--notify::after { right: -16px; }
.automation-label--fetch::after,
.automation-label--summary::after { left: -16px; }

.service-card__bottom {
  position: relative;
  z-index: 2;
  padding: 9px 18px 17px;
}

.service-card__bottom::before {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 8px;
  content: "";
  background: color-mix(in srgb, var(--card-color) 22%, #ddd);
}

.service-card__price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 44px;
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.38;
  font-weight: 800;
}

.service-card__price span { display: flex; align-items: baseline; gap: 4px; }

.service-card__price strong {
  color: var(--card-color);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.button--card {
  width: 100%;
  min-height: 50px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(100deg, color-mix(in srgb, var(--card-color) 90%, #111), var(--card-color));
  box-shadow: 0 8px 17px color-mix(in srgb, var(--card-color) 22%, transparent);
}

.button--card::after { margin-left: 14px; content: "›"; font-size: 24px; line-height: 1; }

.carousel-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-right: 15px;
}

.carousel-progress span {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #d7cbc2;
  transition: width .2s ease, background-color .2s ease;
}
.carousel-progress span.is-active { width: 26px; background: var(--orange); }

/* Snap 6 */
.snap--faq {
  background: var(--paper-white);
}

.snap--faq::before {
  position: absolute;
  top: -54px;
  right: -8px;
  width: 118px;
  height: 156px;
  content: "";
  background: radial-gradient(circle, rgba(172,154,141,.28) 0 1.6px, transparent 1.9px) 0 0 / 16px 16px;
}

/* Cycle 2 item 10: shrunk + tucked further off-canvas so it only peeks
   from below the CTA row instead of showing its dot pattern through the
   button gap. */
.snap--faq::after {
  position: absolute;
  bottom: -60px;
  left: -50px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  content: "";
  background:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1.5px, transparent 1.9px) 0 0 / 15px 15px,
    #ff9a69;
  pointer-events: none;
}

.faq { display: flex; flex-direction: column; padding-top: 46px; }

.section-heading--faq {
  position: relative;
  margin-bottom: 30px;
  text-align: center;
}

.section-heading--faq h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(45px, 12.7vw, 58px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -.075em;
}

.section-heading--faq h2::after { bottom: -10px; }

.faq__mark {
  position: absolute;
  top: -8px;
  right: 21px;
  width: 38px;
  height: 38px;
}

.faq__mark::before,
.faq__mark::after {
  position: absolute;
  top: 5px;
  left: 18px;
  width: 4px;
  height: 18px;
  border-radius: 99px;
  content: "";
  background: var(--orange);
  transform-origin: 50% 31px;
}
.faq__mark::before { transform: rotate(-48deg); }
.faq__mark::after { transform: rotate(48deg); }

.faq-list { display: grid; gap: 12px; }

.faq-item {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid #f3c3a8;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 16px rgba(82,50,31,.075);
}

.faq-item h3 { margin: 0; }

.faq-question {
  display: grid;
  grid-template-columns: 1fr 31px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 64px;
  padding: 10px 13px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.faq-question > span {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  line-height: 1.43;
  font-weight: 900;
  letter-spacing: -.025em;
}

.faq-question b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ed2105, #ff5f14);
  box-shadow: 0 5px 11px rgba(239,60,11,.24);
  font-size: 14px;
  font-weight: 800;
}

.faq-question i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.faq-answer {
  padding: 0 21px 17px 68px;
  color: #282522;
  font-size: 12px;
  line-height: 1.82;
  font-weight: 600;
}
.faq-answer p { margin: 0; }
.faq-answer__note {
  margin-top: 9px !important;
  padding-top: 9px;
  border-top: 1px dashed #f0c9b5;
  color: #5e5752;
  font-size: 9px;
}

.faq-item.is-open .faq-question { min-height: 73px; }
.faq-item.is-open .faq-answer { padding-bottom: 24px; }

@media (min-width: 720px) {
  .snap__inner { width: min(100%, 1080px); padding-right: 54px; padding-left: 54px; }
  .service-card { flex-basis: max(330px, 36%); }
  .services { width: min(100%, 1080px); }
}

/* Cycle 4: on short viewports (iPhone Safari with toolbars visible, ~640-720px
   effective height) the nested-scroll fallback previously here made every
   .snap its own overflow:auto container, which stole swipe gestures from the
   single main.snap-deck scroller and prevented snapping to the next Snap.
   That fallback is removed entirely (see .snap / .snap__inner / .snap-deck
   above — there is now exactly one scroll container). Instead, Snap 1/2/3/4/6
   are tightened here so their content fits within ~660px without needing an
   inner scrollbar; Snap 5 is left untouched (spec: 完成扱い) and simply
   scrolls further within main when the viewport is short. overflow-y is
   intentionally never set on .snap/.snap__inner in this block. */
@media (max-height: 740px) {
  /* Snap 1 — .hero has no padding-top to override (ribbon is normal-flow
     now, Cycle 6) and its padding-bottom is already minimal in the base
     rule. Only the ribbon->heading gap (.hero__body margin-top) and the
     gap above the CTA row are tightened further for short viewports. */
  .hero__body { margin-top: 32px; }
  .hero h1 {
    margin-bottom: 20px;
    font-size: 36px;
    line-height: 1.25;
  }
  .hero__lead {
    margin-bottom: 14px;
    font-size: 22px;
  }
  .hero__supplement { font-size: 14px; }
  .hero__actions {
    margin-top: 12px;
  }
  .hero__actions .button--primary { min-height: 54px; }
  .button--outline { min-height: 48px; }
  .inline-actions { gap: 8px; }

  /* Snap 2/3/4/6 shared CTA row */
  .snap-cta a { min-height: 48px; }

  /* Snap 2 */
  .placement { padding-top: 28px; }
  .placement .snap__block { padding-top: 24px; }
  .section-heading--split h2 { font-size: 22px; }
  .placement-illustration { width: min(100%, calc((100dvh - 300px) * 690 / 780)); }
  .placement__footer { font-size: 22px; }

  /* Snap 3 */
  .plan { padding-top: 16px; }
  .plan__kicker { margin-bottom: 16px; }
  .plan__price {
    margin-bottom: 20px;
  }
  .plan__price-num { font-size: 40px; }
  .plan__header h2 {
    margin-bottom: 24px;
    font-size: 30px;
  }
  .flow__circle { width: 64px; height: 64px; }
  .flow { margin-bottom: 20px; }
  .plan__supplement { font-size: 15px; }

  /* Snap 4 */
  .plan--operation { padding-top: 16px; }
  .plan--operation .plan__kicker { margin-bottom: 16px; }
  .plan--operation .plan__price { margin-bottom: 20px; }
  .plan--operation .plan__price-num { font-size: 38px; }
  .plan__header--compact h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }
  .plan--operation .flow__circle { width: 60px; height: 60px; }
  .plan--operation .flow { margin-bottom: 20px; }
  .plan--operation .plan__supplement { margin-bottom: 16px; }
  .price-table__row { min-height: 40px; padding: 6px 14px; }
  .price-table__note { font-size: 11px; }

  /* Snap 6 */
  .faq { padding-top: 28px; }
  .section-heading--faq { margin-bottom: 20px; }
  .section-heading--faq h2 { font-size: 40px; }
  .faq-list { gap: 8px; }
  .faq-question { min-height: 52px; }
  .faq-item.is-open .faq-question { min-height: 58px; }
  .faq-answer { padding: 0 21px 12px 68px; }
  .faq-item.is-open .faq-answer { padding-bottom: 16px; }
}

@media (max-width: 359px) {
  .snap__inner { padding-right: 17px; padding-left: 17px; }
  .hero h1 { font-size: 36px; }
  .news-ribbon { width: calc(100% + 34px); margin: 0 -17px; }
  .placement__footer { font-size: 19px; }
  .faq-question { padding-right: 9px; padding-left: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}