@font-face { font-family: "Yusei Magic"; font-weight: 400; font-display: swap;
  src: url("../fonts/yusei-magic-400.woff2") format("woff2"); unicode-range: U+0-10FFFF; }

html.svc-tb {
  --k-bg: #FAF7F2;
  --k-bg-alt: #F2ECE3;
  --k-surface: #FFFFFF;
  --k-ink: #1F2230;
  --k-ink-mid: #3D4252;
  --k-ink-sub: #5A5F6E;
  --k-line: #E7E1D7;
  --k-line-strong: #C7BFB2;
  --k-accent: #D63A24;
  --k-accent-ink: #FFFFFF;
  --k-accent-soft: rgba(214, 58, 36, .1);
  --k-sub: #FFC531;
  --k-sub-soft: rgba(255, 197, 49, .5);
  --k-rs: 6px;
  --k-rm: 12px;
  --k-rl: 20px;
  --k-shadow-s: 0 1px 2px rgba(58, 46, 34, .08), 0 10px 22px -14px rgba(58, 46, 34, .38);
  --k-shadow-m: 0 2px 4px rgba(58, 46, 34, .06), 0 28px 50px -26px rgba(58, 46, 34, .5);
  --k-font-head: "Zen Kaku Gothic New", var(--k-gothic);
  --k-font-body: "Zen Kaku Gothic New", var(--k-gothic);
  --k-font-en: "Zen Kaku Gothic New", var(--k-gothic);
  --k-head-w: 900;
  --k-head-ls: .04em;
  --k-body-ls: .04em;
  --k-lh: 1.9;
  --k-border-w: 2px;
  --tb-red-ink: #C8301C;
  --tb-red-deep: #A3241A;
  --tb-yellow: #FFC531;
  --tb-blue: #2F5BE8;
  --tb-green: #19A274;
  --tb-pink: #FF8CB0;
  --tb-wall: #FBF8F3;
  --tb-pop: "Yusei Magic", "Zen Kaku Gothic New", var(--k-gothic);
  --tb-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --tb-thump: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: only light;
  background: var(--k-bg);
}
html.svc-tb body { color: var(--k-ink); background: var(--k-bg); }

.tb-main { overflow-x: clip; background: var(--k-bg); }
.tb-wrap { width: min(100% - 2 * var(--k-gutter), var(--k-max)); margin-inline: auto; }
.tb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tb-c-yellow { color: #FFC531; }
.tb-c-red { color: #E2432F; }
.tb-c-blue { color: #2F5BE8; }
.tb-c-green { color: #19A274; }
.tb-bot-plate { font-family: var(--k-font-head); font-weight: 900; font-size: 7.5px; letter-spacing: .06em; fill: #D63A24; }
.tb-cat-t { font-family: var(--k-font-head); font-weight: 900; font-size: 30px; letter-spacing: .1em; fill: #1F2230; }
.tb-cat-s { font-size: 20px; letter-spacing: .08em; }
.tb-box-t { font-family: var(--k-font-head); font-weight: 900; font-size: 11px; fill: #FFFFFF; }
.tb-pop-t { font-family: var(--tb-pop); font-size: 15px; fill: #A3241A; }

.tb-hero {
  position: relative; overflow: clip; isolation: isolate;
  padding: var(--k-sp-3) 0 var(--k-sp-5);
  background: linear-gradient(180deg, #F4EFE7 0, var(--tb-wall) 22%, var(--tb-wall) 100%);
}
.tb-hall { position: absolute; inset: 0 0 auto; z-index: 0; height: max(clamp(300px, 34vw, 420px), 27.8vw); pointer-events: none; }
.tb-ceil { display: block; width: 100%; height: 100%; }
.tb-hero-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--k-sp-3); }

.tb-banner {
  position: relative; display: grid; justify-items: center; gap: 6px; margin-top: clamp(28px, 4vw, 54px);
  padding: 16px clamp(24px, 4vw, 52px) 20px; text-align: center; color: #FFFFFF;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 22px, rgba(0, 0, 0, .05) 22px 24px, rgba(255, 255, 255, .05) 24px 26px, rgba(0, 0, 0, 0) 26px 48px),
    linear-gradient(180deg, #E24A33, #C9331F);
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 22px 36px -22px rgba(120, 30, 16, .7);
}
.tb-banner::before {
  content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(255, 255, 255, .6); border-radius: 2px; pointer-events: none;
}
.tb-banner::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 100%; height: clamp(28px, 4vw, 54px);
  background:
    linear-gradient(#8B8378, #8B8378) left top / 2px 100% no-repeat,
    linear-gradient(#8B8378, #8B8378) right top / 2px 100% no-repeat;
}
.tb-kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: var(--k-fs-xs); letter-spacing: .14em; }
.tb-kicker span { padding: 0 8px; border-radius: 4px; line-height: 1.9; color: #C8301C; background: #FFFFFF; }
.tb-kicker span + span { color: #FFFFFF; background: rgba(0, 0, 0, .18); }
.tb-mark { width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.tb-title {
  font-weight: 900; font-size: var(--k-fs-hero); line-height: 1.25; letter-spacing: .08em;
  font-feature-settings: "palt"; text-shadow: 0 2px 0 rgba(120, 24, 12, .35);
}

.tb-stage { position: relative; display: grid; justify-items: center; width: 100%; padding-bottom: 46px; }
.tb-stage::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: calc(100% - 64px); width: 100vw; height: 1400px; transform: translateX(-50%);
  background:
    linear-gradient(180deg, #D9CFBF 0, #E7DFD2 3px, #EFE9DF 4px, #F4EFE7 60px, var(--tb-wall) 260px);
}
.tb-board {
  --bw: min(600px, 100%);
  position: relative; z-index: 2; width: var(--bw); margin: 0;
  padding: 14px 14px 0; border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #F1EEE9);
  box-shadow: inset 0 0 0 1px rgba(58, 46, 34, .08), 0 2px 3px rgba(58, 46, 34, .1), 0 34px 54px -30px rgba(58, 46, 34, .6);
}
.tb-board::before, .tb-board::after { content: ""; position: absolute; z-index: -1; left: 50%; transform: translateX(-50%); }
.tb-board::before { top: 100%; width: 18px; height: 44px; background: linear-gradient(90deg, #8E99A5, #E8EDF2 45%, #FFFFFF 55%, #95A1AE); }
.tb-board::after { top: calc(100% + 40px); width: 180px; height: 10px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #C9D0D8, #7C8896); box-shadow: 0 10px 14px -8px rgba(58, 46, 34, .5); }
.tb-board-screen {
  position: relative; display: block; overflow: hidden; border-radius: 6px; background: #1F2230;
  box-shadow: 0 0 0 4px #1F2230; cursor: pointer;
}
.tb-board-screen img { display: block; width: 100%; height: auto; }
.tb-board-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
}
.tb-board-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 2px 12px 4px; }
.tb-board-cap .tb-facts { flex: 1 1 auto; justify-content: flex-start; }
.tb-board-cap .tb-btn { min-height: 48px; margin-left: auto; padding: 0 10px 0 20px; font-size: var(--k-fs-sm); border-radius: 12px; }
.tb-board-cap .tb-btn-ar { width: 28px; height: 28px; border-radius: 8px; }
.tb-board-lamp {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 8px; border-radius: 999px;
  font-weight: 900; font-size: var(--k-fs-xs); line-height: 2; letter-spacing: .1em; color: #FFFFFF; background: var(--k-ink);
}
.tb-board-lamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3FD08F; box-shadow: 0 0 0 3px rgba(63, 208, 143, .25); }
.tb-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.tb-facts li { position: relative; padding-left: 16px; font-weight: 700; font-size: var(--k-fs-xs); line-height: 2; color: var(--k-ink-mid); }
.tb-facts li::before {
  content: ""; position: absolute; left: 1px; top: 50%; width: 9px; height: 5px; margin-top: -4px;
  border-left: 2.2px solid var(--tb-green); border-bottom: 2.2px solid var(--tb-green); transform: rotate(-45deg);
}
.tb-board-slot {
  position: absolute; z-index: 3; right: -5px; top: 46%; width: 10px; height: 64px; border-radius: 4px;
  background: linear-gradient(90deg, #A3241A, #D63A24); box-shadow: inset 2px 0 0 rgba(0, 0, 0, .25), 0 2px 4px rgba(58, 46, 34, .3);
}
.tb-table, .tb-hbot { position: absolute; z-index: 1; display: none; overflow: visible; }

.tb-intro { display: grid; justify-items: center; gap: var(--k-sp-2); max-width: 46em; padding-inline: var(--k-gutter); text-align: center; }
.tb-tagline { font-weight: 900; font-size: var(--k-fs-h2); line-height: 1.45; letter-spacing: .04em; color: var(--k-ink); }
.tb-lead { font-size: var(--k-fs-body); line-height: 1.95; color: var(--k-ink-mid); }
.tb-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: var(--k-sp-1); }
.tb-btn, .svc-cta .btn.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; margin: 0; padding: 0 14px 0 26px;
  font-weight: 900; font-size: var(--k-fs-body); letter-spacing: .06em; text-decoration: none;
  border: 0; border-radius: 14px; cursor: pointer; touch-action: manipulation;
  transition: transform .16s var(--tb-ease), background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.tb-btn-red { color: #FFFFFF; background: var(--k-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 24px -14px rgba(200, 48, 28, .9); }
.tb-btn-line { color: var(--k-ink); background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--k-line-strong); }
.tb-btn-ar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: var(--k-fs-sm); background: rgba(255, 255, 255, .2); }
.tb-btn-line .tb-btn-ar { background: var(--k-bg-alt); }
.tb-btn:active, .svc-cta .btn.tb-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tb-btn-red:hover { background: var(--tb-red-ink); transform: translateY(-2px); }
  .tb-btn-line:hover { color: var(--tb-red-ink); box-shadow: inset 0 0 0 1.5px var(--tb-red-ink); transform: translateY(-2px); }
  .tb-board-screen { transition: transform .2s var(--tb-ease); }
  .tb-board-screen:hover { transform: translateY(-2px); }
}

@media (max-width: 1099px) {
  .tb-board-cap .tb-facts { order: 3; flex-basis: 100%; }
}
@media (max-width: 699px) {
  .tb-board { --bw: min(250px, 66vw); justify-self: start; margin-left: max(0px, calc(50% - 165px)); padding: 10px 10px 0; border-radius: 16px; }
  .tb-board-cap { padding: 8px 0 10px; gap: 8px; }
  .tb-board-cap .tb-btn { width: 100%; justify-content: space-between; }
  .tb-facts { display: none; }
  .tb-board-slot { height: 48px; }
  .tb-hbot { display: block; width: 156px; left: calc(max(0px, 50% - 165px) + min(250px, 66vw) - 64px); bottom: 26px; }
}
@media (min-width: 700px) {
  .tb-hbot { display: block; width: clamp(200px, 24vw, 330px); left: calc(50% + var(--bw-half) - 70px); bottom: 30px; }
  .tb-stage { --bw-half: min(300px, 50%); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .tb-board { --bw: min(520px, 70%); }
  .tb-stage { --bw-half: min(260px, 35%); }
}
@media (min-width: 1100px) {
  .tb-table { display: block; width: 300px; right: calc(50% + 322px); bottom: 26px; }
}

.tb-arm { transform-box: view-box; transform-origin: 0 0; }
.tb-arm-l { transform: rotate(14deg); }
.tb-arm-r { transform: rotate(-14deg); }
.tb-lid { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0); }
.tb-eye { transform-box: view-box; }
.tb-flyer { transform-box: view-box; transform-origin: 0 0; }
.tb-rx-glow { opacity: 0; }

html.js .tb-lid { animation: tb-blink 5.4s linear 3s infinite; }
html.js .tb-rx-1 .tb-rx-glow { animation: tb-rx 3.6s ease-in-out .4s infinite; }
html.js .tb-rx-2 .tb-rx-glow { animation: tb-rx 3.6s ease-in-out .8s infinite; }
html.js .tb-rx-3 .tb-rx-glow { animation: tb-rx 3.6s ease-in-out 1.2s infinite; }
html.js .tb-stage.is-play .tb-post { animation: tb-post 4.4s var(--ease-in-out) .9s both; }
html.js .tb-stage.is-play .tb-flyer { animation: tb-flyer 4.4s var(--ease-in-out) .9s both; }
html.js .tb-stage.is-play .tb-eye { animation: tb-look 4.4s var(--ease-in-out) .9s both; }
html.js .tb-stage.is-play .tb-board-sheen { animation: tb-sheen 1s var(--tb-ease) 3.7s both; }
html.js .tb-stage.is-play .tb-board-lamp::before { animation: tb-lamp 1.4s ease-out 3.6s both; }
@keyframes tb-blink {
  0%, 93%, 100% { transform: scaleY(0); }
  95.5% { transform: scaleY(1); }
}
@keyframes tb-rx {
  0%, 60%, 100% { opacity: 0; }
  20% { opacity: 1; }
}
@keyframes tb-post {
  0%, 100% { transform: rotate(14deg); }
  20%, 42% { transform: rotate(158deg); }
  60%, 72% { transform: rotate(93deg); }
}
@keyframes tb-flyer {
  0%, 100% { transform: rotate(0deg); opacity: 1; }
  20%, 42% { transform: rotate(-148deg); opacity: 1; }
  60% { transform: rotate(-93deg); opacity: 1; }
  72% { transform: translateY(26px) rotate(-93deg) scaleX(.2); opacity: 0; }
  86% { transform: rotate(0deg); opacity: 0; }
}
@keyframes tb-look {
  0%, 100% { transform: none; }
  20%, 42% { transform: translate(-7px, -3px); }
  60%, 72% { transform: translate(-8px, 4px); }
}
@keyframes tb-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes tb-lamp {
  0% { box-shadow: 0 0 0 3px rgba(63, 208, 143, .25); background: #3FD08F; }
  30% { box-shadow: 0 0 0 7px rgba(255, 213, 79, .45); background: #FFD54F; }
  100% { box-shadow: 0 0 0 3px rgba(63, 208, 143, .25); background: #3FD08F; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .tb-lid, html.js .tb-rx-glow, html.js .tb-stage.is-play .tb-post, html.js .tb-stage.is-play .tb-flyer,
  html.js .tb-stage.is-play .tb-eye, html.js .tb-stage.is-play .tb-board-sheen, html.js .tb-stage.is-play .tb-board-lamp::before { animation: none; }
  .tb-btn, .svc-cta .btn.tb-btn, .tb-board-screen { transition: none; }
}

.tb-sec { position: relative; padding-block: var(--k-sec-y); }
.tb-head { display: grid; justify-items: start; gap: 10px; margin-bottom: var(--k-sp-5); }
.tb-head-c { justify-items: center; text-align: center; }
.tb-pop { font-family: var(--tb-pop); font-size: var(--k-fs-h4); line-height: 1.5; color: var(--tb-red-ink); }
.tb-sign {
  position: relative; display: inline-block; margin-top: 22px; padding: 10px 24px 12px;
  font-weight: 900; font-size: var(--k-fs-h2); line-height: 1.4; letter-spacing: var(--k-head-ls); color: var(--k-ink);
  background: #FFFFFF; border: 2px solid #2A2E3A; border-radius: 4px;
  box-shadow: 0 2px 0 rgba(42, 46, 58, .08), 0 18px 26px -18px rgba(58, 46, 34, .5);
}
.tb-sign::before {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: calc(100% + 2px); height: 22px;
  background:
    linear-gradient(#8B8378, #8B8378) left top / 1.5px 100% no-repeat,
    linear-gradient(#8B8378, #8B8378) right top / 1.5px 100% no-repeat;
}
.tb-sign::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 6px; height: 5px;
  background:
    radial-gradient(circle, #8B8378 2px, transparent 2.5px) left center / 9px 5px no-repeat,
    radial-gradient(circle, #8B8378 2px, transparent 2.5px) right center / 9px 5px no-repeat;
}
.tb-head-lead { max-width: 40em; font-size: var(--k-fs-body); line-height: 1.95; color: var(--k-ink-mid); }

.tb-about { background: #FFFFFF; }
.tb-about-in { display: grid; gap: var(--k-sp-5); align-items: center; }
.tb-about-text { display: grid; gap: var(--k-sp-2); font-size: var(--k-fs-body); line-height: 1.95; color: var(--k-ink-mid); }
.tb-about-text .tb-head { margin-bottom: var(--k-sp-2); }
.tb-about-lead { font-weight: 900; font-size: var(--k-fs-h3); line-height: 1.6; color: var(--k-ink); }
.tb-about-em { font-weight: 700; color: var(--k-ink); }
.tb-about-em .nb { background: linear-gradient(transparent 62%, var(--k-sub-soft) 62%); }
.tb-corner { margin: 0; }
.tb-corner svg { display: block; width: 100%; height: auto; overflow: visible; }
.tb-corner-cap { margin-top: 8px; font-size: var(--k-fs-xs); color: var(--k-ink-sub); text-align: right; }
.tb-cat-m { font-size: 18px; letter-spacing: .06em; }
.tb-cat-w { fill: #FFFFFF; }
@media (min-width: 960px) {
  .tb-about-in { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); column-gap: var(--k-sp-6); }
}

.tb-feats { display: grid; gap: var(--k-sp-4) var(--k-sp-3); }
@media (min-width: 640px) { .tb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tb-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tb-feat-i { display: grid; align-content: start; gap: 6px; }
.tb-crop {
  margin: 0 0 10px; overflow: hidden; border-radius: 14px; background: #FFFFFF;
  box-shadow: var(--k-shadow-m), 0 0 0 1px rgba(58, 46, 34, .1);
}
.tb-crop img { display: block; width: 100%; height: auto; }
.tb-feat-h { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: var(--k-fs-h3); line-height: 1.5; }
.tb-feat-h::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k-accent); transform: rotate(45deg); }
.tb-feat-i p { font-size: var(--k-fs-sm); line-height: 1.85; color: var(--k-ink-mid); }

.tb-how { background: #FFFFFF; }
.tb-steps { display: grid; gap: var(--k-sp-4) var(--k-sp-3); }
@media (min-width: 640px) { .tb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-sp-3); } }
.tb-step { display: grid; align-content: start; gap: 8px; }
.tb-vig { margin: 0 0 10px; overflow: hidden; border-radius: 16px; background: #F8F3EC; box-shadow: inset 0 0 0 1px rgba(58, 46, 34, .08); }
.tb-vig svg { display: block; width: 100%; height: auto; }
.tb-step-h { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: var(--k-fs-h3); line-height: 1.5; }
.tb-step-n {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  font-size: var(--k-fs-sm); font-weight: 900; color: #FFFFFF; background: var(--k-ink);
}
.tb-step p { font-size: var(--k-fs-sm); line-height: 1.85; color: var(--k-ink-mid); }
.tb-steps-note { margin-top: var(--k-sp-3); font-size: var(--k-fs-xs); color: var(--k-ink-sub); }
.tb-vt { font-family: var(--k-font-head); font-weight: 700; font-size: 11px; fill: #1F2230; }
.tb-vt-w { fill: #FFFFFF; font-weight: 900; }
.tb-vt-h { font-weight: 900; font-size: 12.5px; }
.tb-vt-k { font-size: 10.5px; fill: #5A5F6E; }
.tb-vt-s { font-size: 9px; fill: #3D4252; }
.tb-vt-r { font-weight: 900; font-size: 13px; fill: #C8301C; }
.tb-vt-g { font-weight: 900; font-size: 11.5px; fill: #4E5E7A; }

.tb-vglow { opacity: .9; }
.tb-press { transform-box: view-box; transform-origin: 0 0; }
.tb-point { transform: rotate(92deg); }
.tb-lens-m { transform-box: view-box; }

html.js [data-tb-play] .tb-src-c { opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .6s var(--tb-ease); }
html.js [data-tb-play].is-play .tb-src-c { opacity: 1; transform: none; }
html.js [data-tb-play].is-play .tb-src-c2 { transition-delay: .15s; }
html.js [data-tb-play].is-play .tb-src-c3 { transition-delay: .3s; }
html.js [data-tb-play] .tb-vglow { opacity: 0; }
html.js [data-tb-play].is-play .tb-vglow { animation: tb-rx 3.6s ease-in-out .6s infinite; }
html.js [data-tb-play].is-play .tb-vglow-2 { animation-delay: 1s; }
html.js [data-tb-play].is-play .tb-vglow-3 { animation-delay: 1.4s; }
html.js [data-tb-play] .tb-hlm { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .45s var(--tb-ease); }
html.js [data-tb-play].is-play .tb-hlm { transform: none; }
html.js [data-tb-play].is-play .tb-hlm-1 { transition-delay: .5s; }
html.js [data-tb-play].is-play .tb-hlm-2 { transition-delay: 1.1s; }
html.js [data-tb-play].is-play .tb-hlm-3 { transition-delay: 1.7s; }
html.js [data-tb-play].is-play .tb-lens-m { animation: tb-lens 2.2s var(--ease-in-out) .3s both; }
html.js [data-tb-play] .tb-tick { opacity: 0; transition: opacity .25s ease; }
html.js [data-tb-play].is-play .tb-tick { opacity: 1; }
html.js [data-tb-play].is-play .tb-vig-2 .tb-tick-1 { transition-delay: 1s; }
html.js [data-tb-play].is-play .tb-vig-2 .tb-tick-2 { transition-delay: 1.6s; }
html.js [data-tb-play].is-play .tb-vig-2 .tb-tick-3 { transition-delay: 2.2s; }
html.js [data-tb-play].is-play .tb-vig-4 .tb-tick-1 { transition-delay: .6s; }
html.js [data-tb-play].is-play .tb-vig-4 .tb-tick-2 { transition-delay: 1s; }
html.js [data-tb-play].is-play .tb-vig-4 .tb-tick-3 { transition-delay: 1.4s; }
html.js [data-tb-play] .tb-seal { opacity: 0; }
html.js [data-tb-play].is-play .tb-seal { animation: tb-thump .34s var(--tb-thump) both; }
html.js [data-tb-play].is-play .tb-seal-0 { animation-delay: .8s; }
html.js [data-tb-play].is-play .tb-seal-1 { animation-delay: 1.3s; }
html.js [data-tb-play].is-play .tb-seal-2 { animation-delay: 1.8s; }
html.js [data-tb-play] .tb-dup { transition: opacity .5s ease; }
html.js [data-tb-play].is-play .tb-dup-1, html.js [data-tb-play].is-play .tb-dup-2 { opacity: .45; transition-delay: 2.3s; }
html.js [data-tb-play].is-play .tb-press { animation: tb-press 1.4s var(--ease-in-out) .6s both; }
html.js [data-tb-play] .tb-cal-on, html.js [data-tb-play] .tb-cal-chip { opacity: 0; transition: opacity .4s ease, transform .5s var(--tb-ease); }
html.js [data-tb-play] .tb-cal-chip { transform: translateY(6px); }
html.js [data-tb-play].is-play .tb-cal-on { opacity: 1; transition-delay: 2s; }
html.js [data-tb-play].is-play .tb-cal-chip { opacity: 1; transform: none; transition-delay: 2.2s; }
html.js .tb-try-bot.is-play .tb-arm-r { animation: tb-wave 2.4s var(--ease-in-out) .3s both; }
@keyframes tb-lens {
  0%, 30% { transform: none; }
  55% { transform: translateY(24px); }
  80%, 100% { transform: translateY(48px); }
}
@keyframes tb-thump {
  0% { opacity: 0; scale: 1.7; }
  60% { opacity: 1; }
  100% { opacity: 1; scale: 1; }
}
@keyframes tb-press {
  0%, 100% { transform: none; }
  15%, 50%, 82% { transform: rotate(-8deg); }
  32%, 66% { transform: rotate(4deg); }
}
@keyframes tb-wave {
  0%, 100% { transform: rotate(-14deg); }
  22%, 46%, 70% { transform: rotate(-150deg); }
  34%, 58% { transform: rotate(-124deg); }
}

.tb-shots-sec { padding-top: var(--k-sp-5); }
.tb-shots { gap: var(--k-sp-4) var(--k-sp-3); }
@media (min-width: 760px) {
  .tb-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .tb-shot-main { grid-column: span 2; }
}
.tb-shot figure { margin: 0; }
.tb-shots .shot {
  overflow: hidden; padding: 0; border: 0; border-radius: 12px; background: #FFFFFF;
  box-shadow: var(--k-shadow-m), 0 0 0 1px rgba(58, 46, 34, .1);
}
.tb-shots .shot::before {
  content: ""; display: block; height: 22px; background-color: #F2EEE8;
  background-image: radial-gradient(circle, #FF6B57 3.5px, transparent 4px), radial-gradient(circle, #FFC531 3.5px, transparent 4px), radial-gradient(circle, #3FD08F 3.5px, transparent 4px);
  background-size: 14px 22px; background-repeat: no-repeat; background-position: 8px 0, 22px 0, 36px 0;
}
.tb-shots .shot img { border-radius: 0; }
.tb-shots .tb-shot-sp .shot { width: min(100%, 236px); margin-inline: auto; padding: 9px; border-radius: 30px; background: var(--k-ink); box-shadow: var(--k-shadow-m), inset 0 0 0 1.5px #3B455C; }
.tb-shots .tb-shot-sp .shot::before { display: none; }
.tb-shots .tb-shot-sp .shot img { border-radius: 22px; }
.tb-shots figcaption { margin-top: 12px; font-weight: 700; font-size: var(--k-fs-sm); line-height: 1.7; color: var(--k-ink-mid); }
.tb-shot-sp figcaption { text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .tb-shots .shot { transition: transform .2s var(--tb-ease); }
  .tb-shots .shot:hover { filter: none; transform: translateY(-3px); }
  .tb-crop { transition: transform .2s var(--tb-ease); }
}
html.svc-tb .svc-lightbox { background: #FFFFFF; color: var(--k-ink); border-color: var(--k-line); }
html.svc-tb .svc-lightbox::backdrop { background: rgba(31, 34, 48, .72); }
html.svc-tb .svc-lb-close { color: var(--k-ink); border-color: var(--k-line-strong); }

.tb-try { padding-top: var(--k-sp-4); }
.tb-try-box {
  position: relative; display: grid; gap: var(--k-sp-2); padding: var(--k-sp-5) var(--k-sp-4) var(--k-sp-3); border-radius: 8px;
  color: #FFFFFF;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 22px, rgba(0, 0, 0, .05) 22px 24px, rgba(255, 255, 255, .05) 24px 26px, rgba(0, 0, 0, 0) 26px 48px),
    linear-gradient(180deg, #E24A33, #C9331F);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 30px 50px -30px rgba(120, 30, 16, .8);
}
.tb-try-box::before { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 4px; pointer-events: none; }
.tb-cta { position: relative; z-index: 1; }
.tb-cta .tb-pop { color: #FFE07A; }
.svc-cta.tb-cta h2 { font-size: var(--k-fs-h2); color: #FFFFFF; text-shadow: 0 2px 0 rgba(120, 24, 12, .3); }
.tb-cta p:not(.tb-pop) { max-width: 30em; font-size: var(--k-fs-body); line-height: 1.95; color: rgba(255, 255, 255, .94); }
.svc-cta .btn.tb-btn { margin-top: var(--k-sp-2); }
.svc-cta .btn.tb-btn-white { color: var(--tb-red-deep); background: #FFFFFF; box-shadow: 0 14px 24px -14px rgba(60, 10, 4, .9); }
.svc-cta .btn.tb-btn-white .tb-btn-ar { color: #FFFFFF; background: var(--k-accent); }
@media (hover: hover) and (pointer: fine) { .svc-cta .btn.tb-btn-white:hover { background: #FFF6DA; transform: translateY(-2px); } }
.tb-try-bot { display: block; justify-self: end; width: min(70%, 220px); height: auto; overflow: visible; margin: -20px -6px 0 0; }
@media (min-width: 760px) {
  .tb-try-box { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; padding: var(--k-sp-5) var(--k-sp-5) var(--k-sp-3); }
  .tb-cta { padding-bottom: var(--k-sp-4); }
  .tb-try-bot { width: 100%; margin: 0; }
}
.tb-nav { margin-top: var(--k-sp-4); }
.tb-nav a { color: var(--k-ink); background: #FFFFFF; border: 0; box-shadow: var(--k-shadow-s), inset 0 0 0 1px var(--k-line); }
.tb-nav .svc-dir { color: var(--tb-red-ink); }
@media (hover: hover) and (pointer: fine) {
  .tb-nav a:hover { color: var(--tb-red-ink); box-shadow: var(--k-shadow-s), inset 0 0 0 1px var(--tb-red-ink); }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-tb-play] .tb-src-c, html.js [data-tb-play] .tb-hlm, html.js [data-tb-play] .tb-tick,
  html.js [data-tb-play] .tb-dup, html.js [data-tb-play] .tb-cal-on, html.js [data-tb-play] .tb-cal-chip { transition: none; }
  html.js [data-tb-play].is-play .tb-vglow, html.js [data-tb-play].is-play .tb-lens-m, html.js [data-tb-play].is-play .tb-seal,
  html.js [data-tb-play].is-play .tb-press, html.js .tb-try-bot.is-play .tb-arm-r { animation: none; }
  html.js [data-tb-play].is-play .tb-seal { opacity: 1; }
  html.js [data-tb-play].is-play .tb-vglow { opacity: .9; }
  html.js [data-tb-play].is-play .tb-lens-m { transform: translateY(48px); }
  .tb-shots .shot, .tb-crop { transition: none; }
}

.tb-cat-g { display: none; }
@media (min-width: 1100px) { .tb-cat-g { display: inline; } }