/* Bigin by Zoho CRM page only. Loaded via `extra: crm, p-bigin`. Every class is scoped .pxg- (accent: Bigin green #089949) */
.pxg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pxg-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= hero: phone-first ================= */
.pxg-hero .pxg-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pxg-hero .pg-h1 { max-width: 17ch; font-size: clamp(34px, 1.1rem + 2.5vw, 52px); }
.pxg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 620px; }
.pxg-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid #CFE8DA; box-shadow: 0 8px 18px -14px rgba(8,34,56,.5); font: 600 13.5px/1.25 var(--f-body); color: #082238; }
.pxg-chips .pxg-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #E4F5EC; color: #089949; box-sizing: border-box; }

.pxg-stage { position: relative; margin: 0; padding: 18px 0 26px; display: grid; place-items: center; perspective: 1400px; }
.pxg-stage__glow { position: absolute; inset: 8% 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(63,185,122,.28), rgba(0,163,217,.12) 60%, transparent); filter: blur(10px); }
.pxg-phone { position: relative; z-index: 1; width: min(310px, 100%); padding: 11px; border-radius: 44px; background: linear-gradient(160deg, #1B2C3E, #0A1826); box-shadow: 0 70px 90px -50px rgba(8,34,56,.7), inset 0 0 0 1.5px #33475C; transform: rotateY(-8deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.pxg-phone::before { content: ""; position: absolute; z-index: 2; top: 18px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 14px; background: #0A1826; }
.pxg-stage:hover .pxg-phone { transform: rotateY(-3deg) rotateX(1deg); }
.pxg-phone__scr { position: relative; display: flex; flex-direction: column; min-height: 560px; padding: 14px 13px 10px; border-radius: 34px; background: #F6F9FB; overflow: hidden; }
.pxg-phone__bar { display: flex; justify-content: space-between; align-items: center; margin: 0 8px 14px; font: 700 12px/1 var(--f-body); color: #082238; }
.pxg-phone__bar span { display: flex; gap: 3px; align-items: flex-end; }
.pxg-phone__bar i { display: block; width: 3px; border-radius: 2px; background: #082238; }
.pxg-phone__bar i:nth-child(1) { height: 5px; } .pxg-phone__bar i:nth-child(2) { height: 8px; } .pxg-phone__bar i:nth-child(3) { height: 11px; }
.pxg-app__top { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.pxg-app__top b { font: 800 18px/1.1 var(--f-display); color: #082238; }
.pxg-app__top em { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: #E4F5EC; font: 600 10.5px/1 var(--f-body); font-style: normal; color: #087A3B; }
.pxg-app__sum { margin: 6px 4px 12px; font: 500 12px/1.2 var(--f-body); color: #64748B; font-variant-numeric: tabular-nums; }
.pxg-app__stages { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxg-app__stages > li { padding: 8px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; transition: border-color .4s, background .4s; }
.pxg-app__stages > li.is-glow { border-color: #8FD3AE; background: #F3FBF6; }
.pxg-app__stages > li > p { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 6px; }
.pxg-app__stages > li > p b { font: 700 11.5px/1 var(--f-display); letter-spacing: .02em; color: #334155; text-transform: uppercase; }
.pxg-app__stages > li > p small { min-width: 20px; padding: 3px 6px; border-radius: 999px; background: #F1F5F9; font: 700 10.5px/1 var(--f-body); color: #64748B; text-align: center; }
.pxg-app__stages > li.is-won > p b { color: #087A3B; }
.pxg-app__deals { display: grid; gap: 6px; min-height: 8px; }
.pxg-dl { display: block; padding: 7px 9px; border-radius: 10px; background: #F7FAFC; border-left: 3px solid #CBD5E1; }
.pxg-dl b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.3 var(--f-body); color: #082238; }
.pxg-dl small { font: 500 11px/1.3 var(--f-body); color: #64748B; }
.pxg-dl.is-hot { background: #fff; border-left-color: #089949; box-shadow: 0 10px 20px -12px rgba(8,153,73,.55); }
.is-won .pxg-dl.is-hot { background: #E4F5EC; }
.pxg-app__toast { display: flex; align-items: center; gap: 8px; margin: auto 0 10px; padding: 9px 11px; border-radius: 12px; background: #082238; color: #fff; font: 600 11.5px/1.3 var(--f-body); opacity: 1; transform: none; transition: opacity .35s, transform .35s; }
.pxg-app__toast .pxg-ic { width: 15px; height: 15px; color: #6EE7A8; }
.pxg-app__toast.is-out { opacity: 0; transform: translateY(8px); }
.pxg-app__tabs { display: flex; justify-content: space-around; padding: 8px 0 2px; border-top: 1px solid #E2E8F0; }
.pxg-app__tabs span { display: grid; justify-items: center; gap: 3px; font: 600 10px/1 var(--f-body); color: #5B6B7F; }
.pxg-app__tabs span.is-on { color: #087A3B; }
.pxg-app__tabs .pxg-ic { width: 17px; height: 17px; }

.pxg-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px 9px 10px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 20px 34px -20px rgba(8,34,56,.6); font: 500 12px/1.3 var(--f-body); color: #64748B; white-space: nowrap; will-change: transform; }
.pxg-float b { display: block; font: 700 12.5px/1.25 var(--f-display); color: #082238; }
.pxg-float > .pxg-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; box-sizing: border-box; }
.pxg-float--wa { left: -6%; top: 25%; }
.pxg-float--wa > .pxg-ic { background: #E7F6EE; color: #16A34A; }
.pxg-float--card { right: -10px; top: 44%; }
.pxg-float--card > .pxg-ic { background: #E6F4FB; color: #0A6FA8; }
.pxg-float--pay { left: -4%; bottom: 20%; }
.pxg-float--pay > .pxg-ic { background: #FFF4DB; color: #B7791F; }
@media (prefers-reduced-motion: no-preference) {
  .pxg-float { animation: pxgBob 6s ease-in-out infinite; }
  .pxg-float--card { animation-delay: -2s; } .pxg-float--pay { animation-delay: -4s; }
}
@keyframes pxgBob { 50% { translate: 0 -7px; } }

/* ================= 01. edges: split list + sticky ticket ================= */
.pxg-edges { position: relative; isolation: isolate; background: linear-gradient(180deg, #fff, #F3F7F9); overflow-x: clip; }
.pxg-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 44px; }
.pxg-elist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: pxg; border-top: 1px solid #E2E8F0; }
.pxg-edge { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 24px 18px 24px 0; border-bottom: 1px solid #E2E8F0; counter-increment: pxg; outline: none; transition: background .3s; }
.pxg-edge::before { content: counter(pxg, decimal-leading-zero); position: absolute; right: 6px; top: 22px; font: 800 13px/1 var(--f-display); letter-spacing: .08em; color: #CBD5E1; transition: color .3s; }
.pxg-edge::after { content: ""; position: absolute; left: -18px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: #089949; transform: scaleY(0); transform-origin: top; transition: transform .4s cubic-bezier(.2,.7,.1,1); }
.pxg-edge.is-on::after, .pxg-edge:focus-visible::after { transform: none; }
.pxg-edge.is-on::before { color: #089949; }
.pxg-edge:focus-visible { background: #F3FBF6; }
.pxg-edge__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; border: 1px solid #D5E9DD; color: #089949; box-shadow: 0 12px 22px -16px rgba(8,153,73,.6); transition: background .3s, color .3s, transform .3s; }
.pxg-edge__ic .pxg-ic { width: 24px; height: 24px; }
.pxg-edge.is-on .pxg-edge__ic { background: #089949; color: #fff; transform: rotate(-4deg); }
.pxg-edge h3 { margin: 4px 0 0; padding-right: 36px; font: 700 clamp(19px, 1rem + .5vw, 23px)/1.25 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxg-edge p { margin: 8px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: #334155; }
.pxg-edge a { color: #0A6FA8; font-weight: 600; }
.pxg-vs { display: inline-block; padding: 5px 10px; border-radius: 8px; background: #F1F5F9; font: 500 12.5px/1.35 var(--f-body) !important; color: #475569 !important; }

.pxg-ticket { position: sticky; top: 110px; padding: 22px 22px 20px; border-radius: 22px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 40px 60px -44px rgba(8,34,56,.55); }
.pxg-ticket::before, .pxg-ticket::after { content: ""; position: absolute; left: -9px; top: 66px; width: 18px; height: 18px; border-radius: 50%; background: #F6F9FB; border-right: 1px solid #E2E8F0; }
.pxg-ticket::after { left: auto; right: -9px; border-right: 0; border-left: 1px solid #E2E8F0; }
.pxg-ticket__h { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1.5px dashed #D9E2EA; }
.pxg-ticket__h b { font: 800 17px/1.1 var(--f-display); color: #082238; }
.pxg-ticket__h em { margin-left: auto; font: 600 11px/1 var(--f-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #5B6B7F; }
.pxg-ticket__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pxg-ticket__list li { padding: 11px 13px; border-radius: 14px; border: 1px solid #EDF2F6; background: #FAFCFD; opacity: .5; transition: opacity .35s, background .35s, border-color .35s, transform .35s; }
.pxg-ticket__list li.is-hl { opacity: 1; background: #F3FBF6; border-color: #CFE8DA; }
.pxg-ticket__list p { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.pxg-ticket__list p b { font: 700 15px/1.2 var(--f-display); color: #082238; }
.pxg-ticket__list p span { font: 800 20px/1 var(--f-display); color: #089949; font-variant-numeric: tabular-nums; }
.pxg-ticket__list small { display: block; margin-top: 4px; font: 500 12.5px/1.45 var(--f-body); color: #64748B; }
.pxg-ticket__f { margin: 14px 0 0; font: 500 12px/1.5 var(--f-body); color: #64748B; }
.pxg-ticket__a { display: inline-block; margin-top: 10px; font: 700 14px/1 var(--f-display); color: #0A6FA8; text-decoration: none; }
.pxg-ticket__a:hover { text-decoration: underline; }

/* ================= 02. a week: diary cards ================= */
.pxg-week { position: relative; background: #FBF8F1; overflow-x: clip; }
.pxg-week::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#E9E1CF 1px, transparent 1px); background-size: 22px 22px; opacity: .6; }
.pxg-diary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; margin: 48px 0 0; padding: 0; list-style: none; }
.pxg-page { position: relative; padding: 26px 24px 22px; border-radius: 6px 6px 16px 16px; background: #fff; background-image: repeating-linear-gradient(180deg, transparent 0 29px, #EEF2F6 29px 30px); background-position: 0 92px; box-shadow: 0 2px 0 #E7DFCC, 0 30px 40px -32px rgba(8,34,56,.45); transform: rotate(var(--r)); transition: transform .45s cubic-bezier(.2,.7,.1,1), box-shadow .45s; }
.pxg-page::before { content: ""; position: absolute; left: 50%; top: -11px; width: 86px; height: 22px; margin-left: -43px; background: color-mix(in srgb, var(--c) 30%, #fff); opacity: .85; transform: rotate(calc(var(--r) * -2)); border-radius: 2px; }
.pxg-page:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 2px 0 #E7DFCC, 0 40px 50px -30px rgba(8,34,56,.45); }
.pxg-page__day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font: 800 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #082238); }
.pxg-page__day small { font: 500 12px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: #5B6B7F; }
.pxg-page h3 { margin: 0 0 8px; font: 700 20px/1.3 var(--f-display); letter-spacing: -.01em; color: #082238; }
.pxg-page > p:not(.pxg-page__day):not(.pxg-page__note) { margin: 0; font-size: 15.5px; line-height: 30px; color: #334155; }
.pxg-snip { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, #fff); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff); }
.pxg-snip > .pxg-ic, .pxg-snip > img { width: 18px; height: 18px; color: var(--c); }
.pxg-snip span { font: 500 12.5px/1.35 var(--f-body); color: #475569; }
.pxg-snip b { display: block; font: 700 13px/1.3 var(--f-display); color: #082238; }
.pxg-snip--wa { border-radius: 14px 14px 14px 4px; }
.pxg-page--sum { background: #082238; background-image: none; color: #fff; }
.pxg-page--sum::before { background: #FFB81C; }
.pxg-page--sum .pxg-page__day { color: #FFB81C; }
.pxg-page--sum .pxg-page__day small { color: #A9BCCD; }
.pxg-page--sum h3 { color: #fff; }
.pxg-page--sum ul { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.pxg-page--sum li { position: relative; padding-left: 26px; font: 500 15px/1.45 var(--f-body); color: #D5E2EC; }
.pxg-page--sum li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 14px; height: 2px; background: #6EE7A8; }
.pxg-page__note { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.2); font: 600 13.5px/1.5 var(--f-body); color: #6EE7A8; }
.pxg-diary.is-js .pxg-page { opacity: 0; transform: rotate(var(--r)) translateY(26px); }
.pxg-diary.is-js .pxg-page.is-in { opacity: 1; transform: rotate(var(--r)); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--i, 0) * 90ms); }

/* ================= 03. Bigin or Zoho CRM ================= */
.pxg-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; margin-top: 40px; }
.pxg-fit__col { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 30px 50px -40px rgba(8,34,56,.5); }
.pxg-fit__col--b { background: radial-gradient(120% 80% at 0% 0%, #E4F5EC, #fff 60%); border-color: #CFE8DA; }
.pxg-fit__tag { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 21px/1.2 var(--f-display); color: #082238; }
.pxg-fit__price { margin: 10px 0 18px; font: 500 14px/1.4 var(--f-body); color: #64748B; }
.pxg-fit__price b { font: 800 22px/1 var(--f-display); color: #089949; }
.pxg-fit__col:not(.pxg-fit__col--b) .pxg-fit__price b { color: #0A6FA8; }
.pxg-fit__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pxg-fit__col li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.55; color: #334155; }
.pxg-fit__col li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: #E4F5EC; box-shadow: inset 0 0 0 5px #089949; }
.pxg-fit__col:not(.pxg-fit__col--b) li::before { background: #E3F1FB; box-shadow: inset 0 0 0 5px #0A6FA8; }
.pxg-fit__col li b { color: #082238; }
.pxg-fit__who { margin: auto 0 0; padding-top: 20px; font-size: 15.5px; line-height: 1.55; color: #334155; }
.pxg-fit__who b { color: #082238; }
.pxg-fit__mid { display: grid; align-content: center; justify-items: center; gap: 8px; width: 96px; text-align: center; font: 700 12px/1.3 var(--f-display); color: #64748B; }
.pxg-fit__mid .pxg-ic { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: #082238; color: #fff; box-sizing: border-box; }

/* ================= 04. industry template picker (dark band) ================= */
.pxg-tpl__box { margin-top: 40px; padding: clamp(16px, 2.4vw, 28px); border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.pxg-tpl__pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pxg-tpl__pick button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #E2ECF3; font: 600 14px/1 var(--f-body); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.pxg-tpl__pick button:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.pxg-tpl__pick button:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
.pxg-tpl__pick button.is-on { background: #fff; color: #082238; border-color: #fff; }
.pxg-tpl__pick button.is-on .pxg-ic { color: #089949; }
.pxg-tpl__main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.pxg-tpl__board { min-width: 0; padding: 18px; border-radius: 20px; background: #F6F9FB; }
.pxg-tpl__bh { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.pxg-tpl__bh b { font: 800 16px/1.2 var(--f-display); color: #082238; }
.pxg-tpl__bh em { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: #E4F5EC; font: 600 11px/1 var(--f-body); font-style: normal; color: #087A3B; }
.pxg-tpl__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; min-height: 170px; }
.pxg-tpl__cols > li { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px 8px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; border-top: 4px solid var(--c, #089949); }
.pxg-tpl__cols > li > b { font: 700 11.5px/1.25 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #334155; }
.pxg-tc { display: block; padding: 8px; border-radius: 10px; background: #F3FBF6; border: 1px solid #DCEFE4; }
.pxg-tc b { display: block; font: 600 12.5px/1.3 var(--f-body); color: #082238; }
.pxg-tc small { display: block; margin-top: 2px; font: 500 11px/1.3 var(--f-body); color: #64748B; }
.pxg-tpl__cols.is-anim > li { animation: pxgColIn .55s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(var(--i) * 80ms); }
.pxg-tpl__cols.is-anim .pxg-tc { animation: pxgCardIn .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * 80ms + 320ms); }
@keyframes pxgColIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes pxgCardIn { from { opacity: 0; transform: translateY(-10px); } }
.pxg-tpl__next { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font: 500 13.5px/1.4 var(--f-body); color: #334155; }
.pxg-tpl__next .pxg-ic { color: #089949; }
.pxg-tpl__next b { color: #082238; }
.pxg-tpl__side { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.pxg-tpl__side h3 { margin: 0 0 8px; font: 700 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #8FD3AE; }
.pxg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pxg-tags li { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.12); font: 600 13px/1.2 var(--f-body); color: #fff; }
.pxg-autos { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pxg-autos li { position: relative; padding-left: 20px; font: 500 14px/1.45 var(--f-body); color: #D5E2EC; }
.pxg-autos li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: #FFB81C; transform: rotate(45deg); }
.pxg-tpl__fit { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 0; padding: 12px; border-radius: 14px; background: rgba(63,185,122,.16); border: 1px solid rgba(63,185,122,.4); font: 500 14px/1.45 var(--f-body); color: #E2ECF3; }
.pxg-tpl__fit .pxg-ic { margin-top: 1px; color: #6EE7A8; }
.pxg-tpl__fit b { color: #fff; }
.pxg-tpl__side.is-anim > * { animation: pxgCardIn .45s ease both; }
.pxg-tpl__live { margin: 16px 0 0; font: 500 14px/1.5 var(--f-body); color: #BFD3E2; }
.pxg-tpl__note { margin: 18px 0 0; font: 500 14px/1.5 var(--f-body); color: #93AFC4; }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .pxg-diary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxg-tpl__main { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .pxg-hero .pxg-hero__grid { grid-template-columns: 1fr; }
  .pxg-split { grid-template-columns: 1fr; }
  .pxg-ticket { position: relative; top: auto; }
  .pxg-fit__grid { grid-template-columns: 1fr; }
  .pxg-fit__mid { width: auto; grid-auto-flow: column; }
  .pxg-fit__mid .pxg-ic { transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .pxg-tpl__cols { grid-auto-flow: row; grid-auto-columns: auto; min-height: 0; }
  .pxg-tpl__cols > li { flex-direction: row; flex-wrap: wrap; align-items: center; border-top-width: 1px; border-left: 4px solid var(--c, #089949); }
  .pxg-tpl__cols > li > b { flex: 1 0 100%; }
  .pxg-tc { flex: 1 1 180px; }
}
@media (max-width: 640px) {
  .pxg-diary { grid-template-columns: 1fr; gap: 26px; }
  .pxg-page { transform: none; }
  .pxg-diary.is-js .pxg-page, .pxg-diary.is-js .pxg-page.is-in { transform: none; }
  .pxg-edge { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding-right: 0; }
  .pxg-edge::after { left: -10px; }
  .pxg-edge__ic { width: 42px; height: 42px; border-radius: 13px; }
  .pxg-edge__ic .pxg-ic { width: 20px; height: 20px; }
  .pxg-phone { width: min(290px, 86vw); transform: none; }
  .pxg-phone__scr { min-height: 520px; }
  .pxg-float { font-size: 11px; padding: 7px 10px 7px 8px; }
  .pxg-float > .pxg-ic { width: 26px; height: 26px; padding: 5px; }
  .pxg-float--wa { left: 0; top: 10%; }
  .pxg-float--card { display: none; }
  .pxg-float--pay { left: 0; bottom: 4%; }
  .pxg-tpl__pick button { padding: 9px 12px; font-size: 13px; }
  .pxg-fit__col { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pxg-float, .pxg-tpl__cols.is-anim > li, .pxg-tpl__cols.is-anim .pxg-tc, .pxg-tpl__side.is-anim > * { animation: none !important; }
  .pxg-phone, .pxg-stage:hover .pxg-phone { transform: none; }
  .pxg-diary.is-js .pxg-page { opacity: 1; transform: rotate(var(--r)); }
}