@font-face{font-family:Marvin;src:url(/assets/ba5027165467fa43.woff2) format("woff2");font-display:swap}@font-face{font-family:dicefont;src:url(/assets/87d4c206ffa74aca.woff) format("woff")}@keyframes shake { 
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.zoom-result { display: inline-block; transform-origin: center center; animation: 0.1s ease 0s 1 normal none running shake; }
.size-100 { font-size: 90px; width: 90px; height: 90px; }
.size-100 i { width: 90px; height: 90px; display: block; }
.dice-wrapper i { animation: 0.5s ease 0s 1 normal none running shake; }
.dice-wrapper { display: inline-block; line-height: 1; position: relative; margin: 5px; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  
}
[data-icon]::before { content: attr(data-icon); }
[data-icon]::before, .df-d10-0::before, .df-d10-1::before, .df-d10-10::before, .df-d10-2::before, .df-d10-3::before, .df-d10-4::before, .df-d10-5::before, .df-d10-6::before, .df-d10-7::before, .df-d10-8::before, .df-d10-9::before, .df-d12-1::before, .df-d12-10::before, .df-d12-11::before, .df-d12-12::before, .df-d12-2::before, .df-d12-3::before, .df-d12-4::before, .df-d12-5::before, .df-d12-6::before, .df-d12-7::before, .df-d12-8::before, .df-d12-9::before, .df-d2-1::before, .df-d2-2::before, .df-d20-1::before, .df-d20-10::before, .df-d20-11::before, .df-d20-12::before, .df-d20-13::before, .df-d20-14::before, .df-d20-15::before, .df-d20-16::before, .df-d20-17::before, .df-d20-18::before, .df-d20-19::before, .df-d20-2::before, .df-d20-20::before, .df-d20-3::before, .df-d20-4::before, .df-d20-5::before, .df-d20-6::before, .df-d20-7::before, .df-d20-8::before, .df-d20-9::before, .df-d4-1::before, .df-d4-2::before, .df-d4-3::before, .df-d4-4::before, .df-d6-1::before, .df-d6-2::before, .df-d6-3::before, .df-d6-4::before, .df-d6-5::before, .df-d6-6::before, .df-d8-1::before, .df-d8-2::before, .df-d8-3::before, .df-d8-4::before, .df-d8-5::before, .df-d8-6::before, .df-d8-7::before, .df-d8-8::before, .df-dot-d6-1::before, .df-dot-d6-2::before, .df-dot-d6-3::before, .df-dot-d6-4::before, .df-dot-d6-5::before, .df-dot-d6-6::before, .df-small-dot-d6-1::before, .df-small-dot-d6-2::before, .df-small-dot-d6-3::before, .df-small-dot-d6-4::before, .df-small-dot-d6-5::before, .df-small-dot-d6-6::before, .df-solid-small-dot-d6-1::before, .df-solid-small-dot-d6-2::before, .df-solid-small-dot-d6-3::before, .df-solid-small-dot-d6-4::before, .df-solid-small-dot-d6-5::before, .df-solid-small-dot-d6-6::before { display: inline-block; font-family: dicefont; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizelegibility; text-transform: none; -webkit-font-smoothing: antialiased; }
.df-d10-0::before { content: ""; }
.df-d10-1::before { content: ""; }
.df-d10-10::before { content: ""; }
.df-d10-2::before { content: ""; }
.df-d10-3::before { content: ""; }
.df-d10-4::before { content: ""; }
.df-d10-5::before { content: ""; }
.df-d10-6::before { content: ""; }
.df-d10-7::before { content: ""; }
.df-d10-8::before { content: ""; }
.df-d10-9::before { content: ""; }
.df-d12-1::before { content: ""; }
.df-d12-10::before { content: ""; }
.df-d12-11::before { content: ""; }
.df-d12-12::before { content: ""; }
.df-d12-2::before { content: ""; }
.df-d12-3::before { content: ""; }
.df-d12-4::before { content: ""; }
.df-d12-5::before { content: ""; }
.df-d12-6::before { content: ""; }
.df-d12-7::before { content: ""; }
.df-d12-8::before { content: ""; }
.df-d12-9::before { content: ""; }
.df-d2-1::before { content: ""; }
.df-d2-2::before { content: ""; }
.df-d20-1::before { content: ""; }
.df-d20-10::before { content: ""; }
.df-d20-11::before { content: ""; }
.df-d20-12::before { content: ""; }
.df-d20-13::before { content: ""; }
.df-d20-14::before { content: ""; }
.df-d20-15::before { content: ""; }
.df-d20-16::before { content: ""; }
.df-d20-17::before { content: ""; }
.df-d20-18::before { content: ""; }
.df-d20-19::before { content: ""; }
.df-d20-2::before { content: ""; }
.df-d20-20::before { content: ""; }
.df-d20-3::before { content: ""; }
.df-d20-4::before { content: ""; }
.df-d20-5::before { content: ""; }
.df-d20-6::before { content: ""; }
.df-d20-7::before { content: ""; }
.df-d20-8::before { content: ""; }
.df-d20-9::before { content: ""; }
.df-d4-1::before { content: ""; }
.df-d4-2::before { content: ""; }
.df-d4-3::before { content: ""; }
.df-d4-4::before { content: ""; }
.df-d6-1::before { content: ""; }
.df-d6-2::before { content: ""; }
.df-d6-3::before { content: ""; }
.df-d6-4::before { content: ""; }
.df-d6-5::before { content: ""; }
.df-d6-6::before { content: ""; }
.df-d8-1::before { content: ""; }
.df-d8-2::before { content: ""; }
.df-d8-3::before { content: ""; }
.df-d8-4::before { content: ""; }
.df-d8-5::before { content: ""; }
.df-d8-6::before { content: ""; }
.df-d8-7::before { content: ""; }
.df-d8-8::before { content: ""; }
.df-dot-d6-1::before { content: ""; }
.df-dot-d6-2::before { content: ""; }
.df-dot-d6-3::before { content: ""; }
.df-dot-d6-4::before { content: ""; }
.df-dot-d6-5::before { content: ""; }
.df-dot-d6-6::before { content: ""; }
.df-small-dot-d6-1::before { content: ""; }
.df-small-dot-d6-2::before { content: ""; }
.df-small-dot-d6-3::before { content: ""; }
.df-small-dot-d6-4::before { content: ""; }
.df-small-dot-d6-5::before { content: ""; }
.df-small-dot-d6-6::before { content: ""; }
.df-solid-small-dot-d6-1::before { content: ""; }
.df-solid-small-dot-d6-2::before { content: ""; }
.df-solid-small-dot-d6-3::before { content: ""; }
.df-solid-small-dot-d6-4::before { content: ""; }
.df-solid-small-dot-d6-5::before { content: ""; }
.df-solid-small-dot-d6-6::before { content: ""; }

html, body { margin: 0px; padding: 0px; font-family: Marvin, Arial, sans-serif; font-size: 16px; line-height: 1.5em; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-sizing: border-box; background: radial-gradient(rgb(241, 249, 255), rgb(0, 136, 255)) 0% 0% / 100% 100% no-repeat rgb(0, 136, 255); color: rgb(255, 255, 255); }
body { min-height: 100vh; }
.noselect { user-select: none; }
p, h1, h2, h3, h4, h5, h6, form { position: relative; display: block; margin: 0px; padding: 0px; box-sizing: border-box; }
h1 { font-size: 34px; line-height: 1.2em; }
h2 { font-size: 28px; line-height: 1.2em; }
h3 { font-size: 24px; line-height: 1.2em; }
h4 { font-size: 22px; line-height: 1.2em; }
h5 { font-size: 20px; line-height: 1.2em; }
h6 { font-size: 18px; line-height: 1.2em; }
a { color: rgb(255, 255, 255); position: relative; display: inline-block; text-decoration: none; transition: color 0.35s; }
a:hover { color: rgb(255, 255, 255); transition-duration: 0.06s; }
input:focus, select:focus { outline: 0px; }
div { position: relative; }
span { display: inline; box-sizing: border-box; }
code { font-family: Consolas; background: rgb(243, 243, 243); padding: 1px 10px; border-radius: 0.2em; }
.separator-xs { display: block; height: 10px; width: 100%; }
.separator-sm { display: block; height: 20px; width: 100%; }
.separator-md { display: block; height: 30px; width: 100%; }
.separator-lg { display: block; height: 50px; width: 100%; }
.card { box-sizing: border-box; vertical-align: top; margin-left: auto; margin-right: auto; }
.centered { margin-left: auto; margin-right: auto; }
.padded { padding: 35px 50px; }
.rounded { border-radius: 4px; }
.more-rounded { border-radius: 20px; border: 5px solid rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 98, 183, 0.33) 2px 2px 5px 1px; }
.filled { background: rgba(0, 136, 255, 0.7); }
.full { width: calc(100% - 10px); max-width: 800px; }
.two-thirds { width: 450px; }
.half { width: calc(50% - 10px); max-width: 760px; }
.third { width: 33.33%; max-width: 300px; }
.quarter { width: 25%; max-width: 250px; }
.block { display: block; }
.inline-block { display: inline-block; }
.clear { display: block; clear: both; }
.hide { display: none; }
.inner { width: 100%; max-width: 1070px; margin: 0px auto; text-align: left; }
.light { position: absolute; background-image: url("/assets/f819461473bc0c74.png"); background-size: 100% 100%; background-repeat: repeat-x; background-position: 0px 0px; width: 100%; height: 100%; }
#content { padding-bottom: 20px; background-repeat: repeat; background-image: url("/assets/8da7e63bb5ffed0b.png"); background-size: 500px auto; }
#content .inner { padding: 110px 0px 0px; }
#title { text-align: center; font-size: 64px; }
#logo { filter: saturate(1.05) brightness(1.03); }
#sub-title, #sub-title-vip, #sub-title3 { text-shadow: rgb(0, 136, 255) -1px -1px 0px, rgb(0, 136, 255) 1px -1px 0px, rgb(0, 136, 255) -1px 1px 0px, rgb(0, 136, 255) 3px 3px 0px; letter-spacing: 0.06em; padding: 0px 0px 20px; text-align: center; }
#dice-roll-box { text-align: center; background: rgba(0, 136, 255, 0.45); padding: 30px 15px; }
#sub-title2 { text-shadow: rgb(0, 136, 255) -1px -1px 0px, rgb(0, 136, 255) 1px -1px 0px, rgb(0, 136, 255) -1px 1px 0px, rgb(0, 136, 255) 3px 3px 0px; letter-spacing: 0.02em; padding: 0px; }
#num-select, #type-select, select { display: inline-block; width: calc(50% - 10px); padding: 8px 15px 8px 10px; margin: 15px 5px 10px; border-radius: 0.25em; border: 3px solid rgb(0, 136, 255); font-size: 18px; font-family: Marvin, Arial, sans-serif; background: rgb(255, 255, 255) !important; color: rgb(0, 136, 255) !important; }
#roll-button { width: calc(100% - 10px); box-sizing: border-box; font-size: 22px; padding: 13px 0px; margin-bottom: 10px; text-shadow: rgb(202, 138, 0) -1px -1px 0px, rgb(202, 138, 0) 1px -1px 0px, rgb(202, 138, 0) -1px 1px 0px, rgb(202, 138, 0) 2px 2px 0px; letter-spacing: 0.02em; background: linear-gradient(rgb(255, 235, 0) 0%, rgb(255, 215, 0) 51%, rgb(255, 244, 188) 100%) 0% 0% / auto 200% rgb(255, 215, 0); border-width: 3px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8); transition: 0.1s; }
#roll-button:hover { background-size: auto 200%; background-position: center bottom; }
.tabletop { padding: 10px 0px; }
.rounded-dice { background: rgb(0, 136, 255); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0); }
.result { background: rgb(255, 255, 255); width: calc(100% - 10px); max-width: 300px; margin: 0px auto 10px; padding: 10px 0px; color: rgb(0, 136, 255); border: 3px solid rgb(0, 136, 255); }
.section-title { margin-bottom: 20px; text-shadow: rgb(0, 136, 255) -1px -1px 0px, rgb(0, 136, 255) 1px -1px 0px, rgb(0, 136, 255) -1px 1px 0px, rgb(0, 136, 255) 3px 3px 0px; letter-spacing: 0.02em; }
.section-text p, .blog-excerpt p { font-family: Arial, sans-serif; margin: 20px 0px; line-height: 1.4em; }
.blog-post { padding: 20px 25px; background: rgba(77, 172, 255, 0.9); box-shadow: rgba(0, 98, 183, 0.33) 2px 2px 5px 1px; }
.blog-title { font-size: 18px; margin-bottom: 20px; }
.blog-title a { color: rgb(255, 255, 255); }
.blog-title a:hover { color: rgb(255, 245, 0); }
.blog-more-link a, a.button { font-family: Marvin, Arial, sans-serif; text-align: center; color: rgb(255, 255, 255); background: linear-gradient(rgb(255, 235, 0) 0%, rgb(255, 215, 0) 51%, rgb(255, 244, 188) 100%) 0% 0% / auto 200% rgb(255, 215, 0); width: 160px; padding: 7px 4px; text-shadow: rgb(202, 138, 0) -1px -1px 0px, rgb(202, 138, 0) 1px -1px 0px, rgb(202, 138, 0) -1px 1px 0px, rgb(202, 138, 0) 2px 2px 0px; letter-spacing: 0.02em; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5); }
.blog-more-link a:hover, a.button:hover { background-position: center bottom; }
#footer { letter-spacing: 0.02em; background: rgb(0, 47, 89); padding: 35px 0px 120px; }
#footer .inner { text-align: center; }
#footer a { margin: 0px 7px; padding: 5px 3px; }
.footer-menu-1, .footer-menu-2, .copyright { padding: 15px 0px; }
.copyright { font-size: 13px; }
.loader { position: fixed; top: 0px; min-height: 480px; width: 100%; height: 100%; background: radial-gradient(rgb(210, 235, 254), rgb(0, 136, 255)) rgb(0, 136, 255); opacity: 1; display: block; z-index: 100000; }
.loader-wrapper { display: block; width: 100%; height: 100%; background-repeat: repeat; background-image: url("/assets/8da7e63bb5ffed0b.png"); background-size: 500px auto; }
.loader-title { text-shadow: rgb(0, 136, 255) -1px -1px 0px, rgb(0, 136, 255) 1px -1px 0px, rgb(0, 136, 255) -1px 1px 0px, rgb(0, 136, 255) 3px 3px 0px; letter-spacing: 0.02em; margin-bottom: 20px; visibility: hidden; }
.loader.hide { visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s linear; }
.loader-loader { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -40%); text-align: center; cursor: default; pointer-events: none; width: calc(100% - 20px); max-width: 650px; }
.white-dice { }
#ad-box-top { text-align: center; margin-bottom: 10px; width: 100%; min-height: 250px; }
#ad-box-left { position: relative; text-align: center; width: 300px; height: 600px; margin-right: 10px; }
#ad-box-right { position: relative; text-align: center; width: 300px; height: 600px; margin-left: 10px; }
#ad-box-bottom { text-align: center; margin-top: 20px; min-height: 250px; }
.fixed-ad-top { z-index: 1000; position: fixed; top: 0px; left: 0px; height: 90px; text-align: center; width: 100%; background: rgba(255, 255, 255, 0); }
.fixed-ad-bottom { z-index: 1000; position: fixed; bottom: 0px; left: 0px; height: 90px; text-align: center; width: 100%; background: rgba(255, 255, 255, 0); }
.fixed-ad-bottom .fuse-slot, .fixed-ad-top .fuse-slot { transform: translate3d(0px, 0px, 0px); }
.fixed-ad-bottom, .fixed-ad-top, .fixed-ad-top .adsbygoogle, .fixed-ad-bottom .adsbygoogle { height: 90px; max-height: 90px; }
#ad-box-footer { margin-bottom: 10px; }
.close-top, .close-bottom { display: none; }
@media only screen and (max-width: 650px) {
  .pc-only { display: none !important; }
  .mob-only { display: block !important; }
  .light { display: none; }
  #dice-roll-box { padding: 0px 15px !important; background: none !important; border: unset !important; box-shadow: unset !important; }
  #num-select, #type-select, select { margin: 5px; font-size: 18px !important; padding: 3px 15px 3px 8px !important; border: 2px solid rgb(0, 136, 255) !important; }
  #roll-button { border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8); font-size: 20px !important; padding: 6px 0px !important; margin-bottom: 10px !important; }
  #content .inner { padding: 55px 0px 0px; }
  #title { line-height: 1em !important; font-size: 56px !important; }
  #logo { height: 40px; }
  #sub-title, #sub-title-vip { font-size: 22px; padding-bottom: 10px; }
  #sub-title2 { font-size: 26px; padding: 10px 0px; display: none; }
  .loader-title { font-size: 28px; }
  .result { font-size: 18px; padding: 8px 0px; }
  .tabletop { margin-top: 5px; padding: 0px; }
  #roll-button2 { margin-top: 10px; }
  .separator-sm { height: 10px; }
  .section-title { font-size: 24px; }
  #footer { padding: 20px 0px 60px; }
  .padded { padding: 20px 15px; }
  .more-rounded { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: none !important; border-radius: 0px !important; }
  .size-100 { font-size: 68px !important; width: 68px !important; height: 68px !important; }
  .size-100 i { width: 68px !important; height: 68px !important; }
  .rounded-dice { border-radius: 10px !important; }
  .dice-wrapper { margin: 5px 3px !important; }
  #ad-box-top { display: block; min-height: 250px; max-height: 340px; overflow: hidden; width: 100%; margin: 0px auto 6px; text-align: center; }
  #ad-box-footer, #ad-box-bottom { min-height: 250px; width: 100%; margin: 0px auto; text-align: center; }
}
@media only screen and (max-width: 976px) {
  .fixed-ad-bottom .adsbygoogle, .fixed-ad-top .adsbygoogle { max-height: 50px !important; height: 50px !important; }
  .fixed-ad-bottom { display: block; background: rgb(255, 255, 255); box-shadow: rgba(0, 54, 100, 0) 0px -1px 2px; min-height: 50px !important; max-height: 50px !important; height: auto !important; padding: 0px !important; }
  .fixed-ad-top { display: block; background: rgb(255, 255, 255); box-shadow: rgba(0, 54, 100, 0) 0px 1px 2px; min-height: 50px !important; max-height: 50px !important; height: auto !important; padding: 0px !important; }
  .close-top { display: block; position: absolute; bottom: -18px; right: 0px; color: darkred; font-family: Arial, sans-serif; width: 28px; height: 16px; background: rgb(255, 255, 255); border-radius: 0px 0px 0px 4px; line-height: 1em; padding: 2px 0px; font-size: 14px; font-weight: bold; text-align: center; }
  .close-bottom { display: block; position: absolute; top: -18px; right: 0px; color: darkred; font-family: Arial, sans-serif; width: 28px; height: 16px; background: rgb(255, 255, 255); border-radius: 4px 0px 0px; line-height: 1em; padding: 2px 0px; font-size: 14px; font-weight: bold; text-align: center; }
  .close-bottom:hover, .close-top:hover { color: darkred !important; }
}
@media only screen and (max-width: 650px) and (max-height: 850px) {
  #sub-title { display: none !important; }
}
@media only screen and (max-width: 650px) and (max-height: 700px) {
  #num-select, #type-select, select { font-size: 18px !important; padding: 3px 15px 3px 8px !important; }
  #roll-button { font-size: 20px !important; padding: 6px 0px !important; margin-bottom: 10px !important; }
  #title { font-size: 56px !important; line-height: 1em !important; }
  .result { font-size: 18px !important; padding: 8px 0px !important; }
}
@media only screen and (max-height: 634px) {
  #logo { height: 35px !important; }
  #num-select, #type-select, select { font-size: 16px !important; margin-bottom: 5px !important; padding: 2px 15px 2px 8px !important; }
  #roll-button { font-size: 18px !important; padding: 4px 0px !important; margin-bottom: 10px !important; }
}
@media only screen and (max-width: 930px) {
  .pc-only { display: block; }
  .mob-only { display: none; }
  .full, .two-thirds, .half, .third, .quarter { display: block; width: 100%; margin-left: auto; margin-right: auto; }
  #ad-box-bottom { width: 100%; }
  .fixed-ad-bottom { width: 100% !important; left: 0px !important; }
}
@media only screen and (max-width: 1110px) {
  .pc-only { display: block; }
  .mob-only { display: none; }
  .full, .two-thirds, .half, .third, .quarter { display: block; margin-left: auto; margin-right: auto; }
  #ad-box-right { display: none; }
  #ad-box-left { display: none; }
}
@media only screen and (min-width: 650px) and (max-width: 1110px) {
  #dice-roll-box { padding: 30px 15px !important; }
}
@media only screen and (min-width: 910px) {
  .pc-only { display: block; }
  .mob-only { display: none; }
}
@media only screen and (min-width: 1390px) {
  .inner { text-align: center; width: 1380px; max-width: 1380px; }
  .two-thirds { margin-left: auto; margin-right: auto; }
}
@media only screen and (max-width: 1420px) {
  .two-thirds { width: 100%; max-width: 450px; }
  .size-100 { font-size: 90px; width: 90px; height: 90px; }
  .size-100 i { width: 90px; height: 90px; }
  .rounded-dice { border-radius: 15px; }
}
@media only screen and (min-height: 900px) and (min-width: 650px) {
  #sub-title2 { font-size: 28px; }
}
@media only screen and (max-height: 900px) and (min-width: 650px) {
  #content .inner { padding: 100px 0px 0px !important; }
  #logo { height: 50px !important; font-size: 45px !important; }
  #title { font-size: 45px !important; margin-bottom: 5px !important; }
  h1 { line-height: 1em !important; }
  #sub-title { display: none !important; }
  #dice-roll-box { padding: 20px 15px !important; }
  #num-select, #type-select, select { padding: 5px 15px 5px 7px !important; margin: 5px 5px 0px !important; }
  #roll-button { padding: 7px 0px !important; font-size: 20px !important; }
  .size-100 { width: 80px !important; height: 80px !important; font-size: 80px !important; }
  .size-100 i { width: 80px !important; height: 80px !important; }
  .rounded-dice { border-radius: 12px !important; }
  #ad-box-bottom { margin-top: 10px !important; }
}
@media only screen and (max-height: 680px) and (max-width: 650px) {
}
@media only screen and (max-height: 960px) and (min-width: 1110px) {
}