@font-face{font-family:MADE Evolve Sans EVO;font-weight:500;src:url(/youcode-table/made-evolve-sans-evo-subset.woff2) format("woff2")}:root{--max-width: 1280px;--side-gap: 16px;--flow-space: 1.5rem}@media (min-width: 640px){:root{--side-gap: 32px}}@media (min-width: 1024px){:root{--side-gap: 48px}}@media (min-width: 1440px){:root{--side-gap: 64px}}html,body{margin:0;font-family:Raleway,Helvetica,ヒラギノ角ゴ pron,hiragino kaku gothic pron,游ゴシック medium,游ゴシック,游ゴシック体,YuGothic,yu gothic,メイリオ,Meiryo,ＭＳ ゴシック,ms gothic,HiraKakuProN-W3,takaoexゴシック,TakaoExGothic,motoyalcedar,droid sans japanese,sans-serif;color:#1b4c62}body{height:100%}.p-small{font-size:.75rem;line-height:1.5}.section-padding{--section-padding-top: calc(1.5 * var(--flow-space));--section-padding-bottom: calc(1.5 * var(--flow-space));padding-top:var(--section-padding-top);padding-bottom:var(--section-padding-bottom)}.section-padding.section-padding--top{padding-bottom:0}.section-padding.section-padding--bottom{padding-top:0}.container{max-width:var(--max-width);padding-left:var(--side-gap);padding-right:var(--side-gap);margin-left:auto;margin-right:auto}.table-container{overflow:auto;padding-bottom:var(--section-padding-bottom);margin:0 calc(var(--side-gap) * -1)}.compare{--square-grid-background: calc(50% + 530px) calc(50% + 320px) / 400px no-repeat url(/youcode-table/square-grid.svg);--plus-grid-background: calc(50% - 450px) calc(50% - 100px) / 200px no-repeat url(/youcode-table/plus-grid.svg);position:relative;background:var(--square-grid-background),var(--plus-grid-background);background-color:#dbd2ff;height:100%}.purple-gradient{position:absolute;width:70px;top:30px;right:calc(8% + var(--side-gap));will-change:transform}@media (min-width: 1024px){.purple-gradient{width:100px}}.compare table{--border-radius: 48px;--outer-border-thickness: 9px;--youcode-shadow-1: 4px rgba(136, 104, 252, .3);--youcode-shadow-2: 15px rgba(136, 104, 252, .2);--youcode-shadow-overhang: 2px 4px var(--youcode-shadow-1), 5px 10px var(--youcode-shadow-2);--youcode-shadow-middle: 2px 2px var(--youcode-shadow-1), 5px 15px var(--youcode-shadow-2);--inset: 10%;--hue: 253;--saturation-start: 100%;--saturation-end: 76%;--saturation-diff: calc(var(--saturation-start) - var(--saturation-end));--lightness-start: 79%;--lightness-end: 52%;--lightness-diff: calc(var(--lightness-start) - var(--lightness-end));padding:0 var(--side-gap);margin-top:32px;margin-bottom:32px;min-width:1000px;filter:drop-shadow(10px 30px 30px rgba(112,85,216,.15));border-spacing:0}.compare table td,.compare table th{position:relative;padding:24px 16px;text-align:center}.compare table td.youcode{padding-top:9px}.compare table col:not(.features){width:25%}.compare table thead th:not(.youcode){border-top:var(--outer-border-thickness) solid #5b44b4}.compare table thead th:not(.youcode):last-of-type{border-right:var(--outer-border-thickness) solid #5b44b4;border-top-right-radius:var(--border-radius)}.compare table tbody td:last-of-type{height:100%;border-right:var(--outer-border-thickness) solid #5b44b4}.compare table tbody tr:last-of-type td:not(.youcode){border-bottom:var(--outer-border-thickness) solid #5b44b4}.compare table tbody tr:last-of-type td:not(.youcode):last-of-type{border-bottom-right-radius:var(--border-radius)}.compare table .overhang.top{border-top-left-radius:100%;box-shadow:inset 0 var(--outer-border-thickness) 0 0 #5b44b4}.compare table .overhang.bottom{box-shadow:inset 0 calc(var(--outer-border-thickness) * -1 + 1px) 0 0 #5b44b4}.compare table :is(thead th:not(.youcode),tbody tr:not(:last-of-type) td):after{content:"";position:absolute;bottom:0;left:0;height:1px;background-color:#dbd2ff}.compare table :is(thead th:not(.youcode),tbody tr:not(:last-of-type) td):not(.youcode):after{width:100%}.compare table :is(thead th:not(.youcode),tbody tr:not(:last-of-type) td).youcode:after{left:var(--inset);width:calc(100% - var(--inset) * 2);border-radius:1px;background-color:#9476ff}.compare table td:not(.youcode):not(:last-of-type):before{content:"";position:absolute;top:var(--inset);right:0;width:1px;height:calc(100% - var(--inset) * 2);background-color:#dbd2ff}.compare table tbody th{--border: 1px solid #8868fc;padding-left:24px;padding-right:24px;color:#fff;border-left:var(--border);background-color:#5b44b4}.compare table tbody tr:first-of-type th{border-top:var(--border);border-top-left-radius:var(--border-radius)}.compare table tbody tr:last-of-type th{border-bottom:var(--border);border-bottom-left-radius:var(--border-radius)}.compare table :is(thead th,tbody td):not(.youcode){background-color:#fff}.compare table .youcode:not(.overhang),.compare table .youcode.overhang.top:before,.compare table .youcode.overhang.bottom:after{--saturation-from: calc( var(--saturation-start) - var(--saturation-diff) * var(--p-start) );--saturation-to: calc( var(--saturation-start) - var(--saturation-diff) * var(--p-end) );--lightness-from: calc( var(--lightness-start) - var(--lightness-diff) * var(--p-start) );--lightness-to: calc( var(--lightness-start) - var(--lightness-diff) * var(--p-end) );color:#fff;background-image:linear-gradient(hsl(var(--hue),var(--saturation-from),var(--lightness-from)),hsl(var(--hue),var(--saturation-to),var(--lightness-to)))}.compare table .youcode.overhang.top{background-image:linear-gradient(90deg,transparent,transparent 49.9%,#ffffff 50%,#ffffff)}.compare table .youcode.overhang.bottom{border:0;border-bottom:1px solid;-o-border-image:linear-gradient(90deg,#8868fc,#8868fc 49.9%,#5b44b4 50%,#5b44b4) 1;border-image:linear-gradient(90deg,#8868fc,#8868fc 49.9%,#5b44b4 50%,#5b44b4) 1;background-image:linear-gradient(90deg,#5b44b4,#5b44b4 49.9%,#fff 50%,#fff)}.compare table .youcode.overhang.top:before,.compare table .youcode.overhang.bottom:after{content:"";position:absolute;left:0;height:calc(100% + 16px);width:100%}.compare table .youcode.overhang.top:before{bottom:0;z-index:1;box-shadow:var(--youcode-shadow-overhang);border-top-right-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}.compare table .youcode.overhang.bottom:after{top:0;z-index:1;box-shadow:var(--youcode-shadow-overhang);border-bottom-right-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.compare table .youcode.overhang p{position:relative;color:#fff;opacity:1;z-index:2}.compare table td.youcode{box-shadow:var(--youcode-shadow-middle);z-index:1}.youcode-header{font-family:MADE Evolve Sans EVO;font-weight:500;text-transform:uppercase;letter-spacing:1px;line-height:16px;left:50%;width:-moz-fit-content;width:fit-content;margin:0;transform:translate(-50%) scale(2.2)}td.youcode:before{--size: 16px;content:"";z-index:2;position:relative;left:50%;transform:translate(-50%);display:block;width:var(--size);height:var(--size);margin-bottom:6px;background:url(/youcode-table/star.svg) left center/auto var(--size) no-repeat}
