@charset "UTF-8";
/*!
 * * ress.css • v4.0.0
 * * MIT License
 * * github.com/filipelinhares/ress */
/* # =================================================================
 * * # Global selectors
 * * # ================================================================= */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

*, ::before, ::after {
  background-repeat: no-repeat;
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: border-box;
}

::before, ::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
 * * # General elements
 * * # ================================================================= */
hr {
  overflow: visible;
  /* Show the overflow in Edge and IE */
  height: 0;
  /* Add the correct box sizing in Firefox */
  color: inherit;
  /* Correct border color in Firefox. */
}

details, main {
  display: block;
  /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: none;
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
}
a:active, a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

pre {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers */
}

b, strong {
  font-weight: bolder;
  /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit;
  /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0;
  /* Remove text indentation in Chrome, Edge, and Safari */
}

/* # =================================================================
 * * # Forms
 * * # ================================================================= */
input {
  border-radius: 0;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
  /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type=search] {
  -webkit-appearance: textfield;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto;
  /* Internet Explorer 11+ */
  resize: vertical;
  /* Specify textarea resizability */
}

button, input, optgroup, select, textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button, [type=button], [type=reset], [type=submit], [role=button] {
  cursor: pointer;
  color: inherit;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button, input, select, textarea {
  background-color: transparent;
  border-style: none;
}

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  -moz-appearance: none;
  /* Firefox 36+ */
  -webkit-appearance: none;
  /* Chrome 41+ */
}
select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}
select::-ms-value {
  color: currentColor;
  /* Internet Explorer 11+ */
}

legend {
  border: 0;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  /* Correct the inability to style clickable types in iOS and Safari */
  -webkit-appearance: button;
  color: inherit;
  font: inherit;
  /* Change font properties to `inherit` in Chrome and Safari */
}

/* # =================================================================
 * * # Specify media element style
 * * # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
 * * # Accessibility
 * * # ================================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  position: relative;
  z-index: 0;
  font-size: 16px;
  letter-spacing: 0.1em;
}

p {
  line-height: 1.75em;
}

a {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s ease;
}
a:link {
  color: currentColor;
}
a:active {
  color: currentColor;
}
a:hover {
  opacity: 0.7;
  color: currentColor;
}
a:visited {
  color: currentColor;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

ul, ol {
  padding-left: 1.5rem;
}

pre {
  white-space: pre-wrap;
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

audio, canvas, embed, iframe, img, object, svg, video {
  display: block;
  max-width: 100%;
}

canvas, img, svg, video {
  height: auto;
}

audio {
  width: 100%;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
img[src$=".svg"] {
  max-width: 100%;
  height: auto;
}

svg {
  fill: currentColor;
}

address {
  font-style: normal;
}

.large {
  font-size: 1.1em;
}

.bold {
  font-weight: bold;
}

.caution {
  color: #ff2525;
}

.txt_center {
  text-align: center;
}

.txt_left {
  text-align: left;
}

.youtube {
  width: 100%;
  height: auto;
  margin: auto;
  aspect-ratio: 16/9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.copyright {
  font-family: Arial, Helvetica, "sans-serif";
  width: 100%;
  height: auto;
  margin: 50px auto 0;
  font-size: 0.5em;
  text-align: center;
  letter-spacing: 0em;
}

.pconly {
  display: none;
}

@media screen and (min-width: 960px) {
  .sponly {
    display: none;
  }
  .pconly {
    display: block;
  }
}
a.button-parallelogram {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 15px 0px;
  border: 2px solid rgba(255, 187, 34, 0.5333333333);
  background-color: #222;
  transform: skewX(-25deg);
  filter: drop-shadow(0 0 5px rgba(255, 189, 34, 0.5333333333));
  color: #fff;
  font-size: 1em;
}
a.button-parallelogram span {
  transform: skewX(25deg);
  line-height: 1em;
}
a.button-parallelogram::after {
  position: absolute;
  right: 20px;
  transform: translateY(-40%);
  transform-origin: left;
  width: 2em;
  height: 1em;
  background-color: currentColor;
  clip-path: polygon(0 100%, 100% 100%, 60% 70%, 60% 90%, 0% 90%);
  content: "";
  transition: transform 0.3s;
}
a.button-parallelogram:hover::after {
  transform: translateY(-40%) translateX(10px);
}

.fadeIn {
  opacity: 0;
  transform: translate3d(0, 10vw, 0);
}
.fadeIn.show {
  animation: fadeIn 0.6s ease-in-out forwards;
}
.fadeIn.delay-02 {
  animation-delay: 0.2s;
}
.fadeIn.delay-04 {
  animation-delay: 0.4s;
}
.fadeIn.delay-06 {
  animation-delay: 0.6s;
}
.fadeIn.delay-08 {
  animation-delay: 0.8s;
}
.fadeIn.delay-05 {
  animation-delay: 0.5s;
}
.fadeIn.delay-1 {
  animation-delay: 1s;
}
.fadeIn.delay-15 {
  animation-delay: 1.5s;
}
.fadeIn.delay-2 {
  animation-delay: 2s;
}
.fadeIn.bubblun {
  transform: translate3d(-30vw, 30vw, 20vw);
}
.fadeIn.bubblun.show {
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
a.button-default {
  display: block;
  width: 100%;
  margin: 20px auto 0;
  padding: 10px 0;
  color: #FFFFFF;
  text-align: center;
  font-size: 0.8em;
  border: 1px solid #ffffff;
  position: relative;
}
a.button-default:hover {
  background: #ffffff;
  color: #000;
  opacity: 0.8;
}
a.button-default::after {
  position: absolute;
  right: 20px;
  transform: translateY(-10%);
  transform-origin: left;
  width: 2em;
  height: 1em;
  background-color: currentColor;
  clip-path: polygon(0 100%, 100% 100%, 60% 70%, 60% 90%, 0% 90%);
  content: "";
  transition: transform 0.3s;
}
a.button-default:hover::after {
  transform: translateY(-10%) translateX(10px);
}

@media screen and (min-width: 960px) {
  a.button-default {
    display: block;
    width: 100%;
    margin: 20px auto 0;
    padding: 10px 0;
    color: #FFFFFF;
    text-align: center;
    font-size: 0.8em;
    border: 1px solid #ffffff;
    position: relative;
  }
  a.button-default:hover {
    background: #ffffff;
    color: #000;
    opacity: 0.8;
  }
  a.button-default::after {
    position: absolute;
    right: 20px;
    transform: translateY(-10%);
    transform-origin: left;
    width: 2em;
    height: 1em;
    background-color: currentColor;
    clip-path: polygon(0 100%, 100% 100%, 60% 70%, 60% 90%, 0% 90%);
    content: "";
    transition: transform 0.3s;
  }
  a.button-default:hover::after {
    transform: translateY(-10%) translateX(10px);
  }
}
section {
  width: calc(100% - 40px);
  margin: 0 auto;
}

@media screen and (min-width: 560px) {
  section {
    width: calc(100% - 80px);
  }
}
@media screen and (min-width: 960px) {
  section {
    width: calc(100% - 100px);
  }
}
.carousel {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.carousel .carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
.carousel .carousel-inner .carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease;
  box-sizing: border-box;
}
.carousel .carousel-inner .carousel-item.active {
  opacity: 1;
}
.carousel .carousel-inner .carousel-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero-image {
  width: 100%;
  height: auto;
  position: relative;
  text-align: right;
}
.hero-image h1 {
  width: 100%;
  margin: 0px auto;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  color: #000;
}
.hero-image h1 video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.hero-image:lang(en) img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100;
}
.hero-image .language {
  display: inline-block;
  margin: auto 0 auto auto;
  padding: 10px 20px;
  text-align: right;
  color: #fff;
  text-shadow: 0px 0px 10px #000;
  font-size: 14px;
  letter-spacing: 0;
  align-items: center;
}
.hero-image .language .material-icons {
  font-size: 24px;
}
.hero-image .language .lang {
  display: inline-block;
  padding: 2px 0 0 5px;
  vertical-align: top;
}

@media only screen and (min-width: 560px) {
  .hero-image .language {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: auto;
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    align-items: center;
    z-index: 1000;
  }
  .hero-image .language .material-icons {
    font-size: 36px;
  }
  .hero-image .language .lang {
    display: block;
    padding: 0px;
  }
}
@media only screen and (min-width: 960px) {
  .hero-image .language {
    padding: 20px;
    font-size: 18px;
  }
  .hero-image .language .material-icons {
    font-size: 48px;
  }
}
main .followMe {
  width: 60%;
  max-width: 320px;
  margin: 200px auto 0;
  text-align: center;
  filter: drop-shadow(0 0 10px #000);
}
main .followMe .External {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 30px 50px;
  margin: 50px auto 0;
}
main .followMe .External > h3 {
  flex: 0 0 100%;
  font-size: 1em;
  text-align: center;
}
main .followMe .account {
  width: 50px;
  height: 50px;
  display: grid;
  place-content: center;
  place-items: center;
  padding: 10px;
  border-radius: 10px;
}
main .followMe .account.icon_x {
  background-color: #000;
  border: 1px solid #333;
}
main .followMe .account.icon_instagram {
  background: radial-gradient(circle farthest-corner at -20% 140%, #ffe17d 0%, rgba(255, 205, 105, 0.8) 5%, rgba(250, 145, 55, 0.8) 10%, rgba(235, 65, 65, 0.8) 30%, transparent 60%), linear-gradient(-15deg, #234bd7 12%, #c33cbe 58%);
  border: 1px solid #333;
  padding: 5px;
}
main .followMe .account.icon_tiktok {
  padding: 3px;
  background-color: #000;
  border: 1px solid #333;
}
main .followMe .StoreInfo {
  margin: 50px auto 0;
  font-size: 0.8em;
}
main .followMe .StoreInfo h3 {
  border-top: 2px solid #FFFFFF;
  padding-top: 10px;
}
main .followMe .StoreInfo p:first-of-type {
  border-bottom: 2px solid #FFFFFF;
  padding-bottom: 10px;
}
main .followMe .StoreInfo address {
  display: grid;
  place-items: center;
  margin: 0px;
  padding: 10px;
  text-align: left;
}

footer {
  width: calc(100% - 0px);
  margin: auto;
  padding: 200px 0 0;
  filter: drop-shadow(0 0 10px #000);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 80%);
}
footer .store {
  display: grid;
  place-content: center;
  place-items: center;
  min-height: 60vh;
}
footer .store img {
  display: block;
  width: 150px;
  margin: 0 auto 30px;
}
footer .store p {
  text-align: center;
  font-size: 0.8em;
}
footer .store a {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 10px auto 0px;
  padding: 2px 5px;
  border-bottom: 1px solid #FFF;
  color: #fff;
  line-height: 1em;
  text-decoration: none;
}
footer .store a .button-open-link {
  display: inline;
  width: 12px;
  height: 12px;
  vertical-align: text-top;
  margin: 2px auto 0px;
}
footer .taito-logo {
  width: 40%;
  max-width: 150px;
  margin: 0px auto 50px;
}
footer .arc-logo {
  width: 30%;
  max-width: 100px;
  margin: 0px auto 50px;
}
footer .switch-logo {
  width: 50%;
  max-width: 200px;
  margin: 0px auto 50px;
}
footer .ps5-logo {
  width: 50%;
  max-width: 200px;
  margin: 0px auto 50px;
}
footer .steam-logo {
  width: 50%;
  max-width: 200px;
  margin: 0px auto 50px;
}
footer .info {
  margin: 0px auto 100px;
}
footer .officialAccounts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px 50px;
  width: 250px;
  margin: auto;
  padding: 100px 0px 0px;
}
footer .officialAccounts > h2 {
  grid-column: 1/4;
  grid-row: 1/2;
  font-size: 1em;
  text-align: center;
}
footer .privacyPolicy {
  padding: 50px 0px 0px;
  font-size: 0.8em;
  text-align: center;
}
footer .privacyPolicy li {
  list-style: none;
}
footer .privacyPolicy li:not(:first-of-type) {
  margin-top: 20px;
}
footer .privacyPolicy a {
  text-decoration: none;
  color: #FFF;
}
footer .copyright {
  display: grid;
  place-content: center;
  place-items: center;
  font-size: 0.8em;
  text-align: center;
  letter-spacing: 0.1em;
  border-top: 1px solid #FFF;
}

:root {
  --bg-body: #FFF;
  --bg-primary: #70C240;
  --bg-secondary: #5EB336;
  --color-body: #444444 //本文用;
  --c-primary: #5EB336 //プライマリー;
  --c-secondary: #000046 // セカンダリー;
  --c-tertiary: #FFA800 // ターシャリ;
  --c-quaternary: #FFA800 // クォータナリ;
  --c-error: #ff2525 // エラー用;
  --animate-duration: 1s;
  --animate-delay: .5s !important;
  --animate-repeat: 1;
  --negative-width: 40px;
}
@media (min-width: 560px) {
  :root {
    --negative-width: 60px;
  }
}
@media (min-width: 960px) {
  :root {
    --negative-width: 80px;
  }
}

.cstm-wave-bottom {
  --mask: radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.m-plus-rounded-1c-black {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
}

a, .chronology h3, .modal img, #openBtn, nav ul li > a, nav ul li.dllink {
  transition: all 0.5s ease;
}

body {
  width: 100%;
  height: auto;
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_pink.webp) repeat;
  font-display: swap;
  color: #444;
  line-height: 1.75em;
  letter-spacing: 0.2rem;
}

header {
  margin: 0;
  padding: 0;
  position: relative;
  background: url(/Content/images/apps/bubblebobble_sugardungeon_header_bg_sp.webp) no-repeat;
  background-size: cover;
  z-index: 99;
  position: relative;
}
header .header_title {
  padding: 20px 0px 50px;
  aspect-ratio: 9/16;
  background: url(/Content/images/apps/bubblebobble_sugardungeon_header_bg2_sp.webp) no-repeat;
  background-size: 120%;
  background-position: center 0px;
}
header h1 {
  width: 80%;
  margin: auto;
}
header .header_h2 {
  margin-top: 100%;
  filter: drop-shadow(0px 0px 10px rgba(68, 0, 0, 0.5333333333));
}
header .header_h2 > p {
  width: 95%;
  margin: auto;
  color: #ffddad;
  font-size: clamp(1em, 5vw, 80px);
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}
header .header_h2 > p:first-of-type {
  padding: 1% 2.4%;
  background: url(/Content/images/apps/bubblebobble_sugardungeon_h2_header.webp) no-repeat;
  background-size: 100%;
  aspect-ratio: 691/157;
  text-shadow: -1px -1px 2px #440000, -2px -2px 2px #440000, -3px -3px 2px #440000, 0px -1px 2px #440000, 0px -2px 2px #440000, 0px -3px 2px #440000, 0px -4px 2px #440000, 1px -1px 2px #440000, 2px -2px 2px #440000, 3px -3px 2px #440000, 1px 0px 2px #440000, 2px 0px 2px #440000, 3px 0px 2px #440000, 4px 0px 2px #440000, 1px 1px 2px #440000, 2px 2px 2px #440000, 3px 3px 2px #440000, 0px 1px 2px #440000, 0px 2px 2px #440000, 0px 3px 2px #440000, 0px 4px 2px #440000, -1px 1px 2px #440000, -2px 2px 2px #440000, -3px 3px 2px #440000, -1px 0px 2px #440000, -2px 0px 2px #440000, -3px 0px 2px #440000, -4px 0px 2px #440000;
}
[lang=ja] header .header_h2 > p:first-of-type span {
  letter-spacing: 0.05em;
}
[lang=ja] header .header_h2 > p:first-of-type .char5, [lang=ja] header .header_h2 > p:first-of-type .char8, [lang=ja] header .header_h2 > p:first-of-type .char11, [lang=ja] header .header_h2 > p:first-of-type .char12, [lang=ja] header .header_h2 > p:first-of-type .char13, [lang=ja] header .header_h2 > p:first-of-type .char14 {
  font-size: 0.6em;
}
[lang=ja] header .header_h2 > p:first-of-type > .model {
  display: block;
  margin-top: -1.2em;
  font-size: 0.6em;
}
[lang=en] header .header_h2 > p:first-of-type {
  letter-spacing: 0.05em;
  font-size: clamp(1em, 5.5vw, 80px);
  padding: 4%;
}
[lang=ko] header .header_h2 > p:first-of-type {
  font-size: clamp(1em, 10vw, 80px);
  padding: 0.5%;
}
[lang=ko] header .header_h2 > p:first-of-type .char5, [lang=ko] header .header_h2 > p:first-of-type .char9, [lang=ko] header .header_h2 > p:first-of-type .char13 {
  font-size: 0.4em;
}
[lang=zh-cmn-Hant] header .header_h2 > p:first-of-type {
  font-size: clamp(1em, 8vw, 80px);
  padding: 1%;
}
[lang=zh-cmn-Hant] header .header_h2 > p:first-of-type .char5, [lang=zh-cmn-Hant] header .header_h2 > p:first-of-type .char9, [lang=zh-cmn-Hant] header .header_h2 > p:first-of-type .char13 {
  font-size: 0.4em;
}
[lang=zh-cmn-Hans] header .header_h2 > p:first-of-type {
  font-size: clamp(1em, 8vw, 80px);
  padding: 1%;
}
[lang=zh-cmn-Hans] header .header_h2 > p:first-of-type .char5, [lang=zh-cmn-Hans] header .header_h2 > p:first-of-type .char9, [lang=zh-cmn-Hans] header .header_h2 > p:first-of-type .char13 {
  font-size: 0.4em;
}
header .header_h2 > p:last-of-type {
  line-height: 1.25em;
  text-shadow: -1px -1px 2px #440000, -2px -2px 2px #440000, 0px -1px 2px #440000, 0px -2px 2px #440000, 0px -3px 2px #440000, 1px -1px 2px #440000, 2px -2px 2px #440000, 1px 0px 2px #440000, 2px 0px 2px #440000, 3px 0px 2px #440000, 1px 1px 2px #440000, 2px 2px 2px #440000, 0px 1px 2px #440000, 0px 2px 2px #440000, 0px 3px 2px #440000, -1px 1px 2px #440000, -2px 2px 2px #440000, -1px 0px 2px #440000, -2px 0px 2px #440000, -3px 0px 2px #440000;
}
header .header_h2 > p:last-of-type span {
  font-size: 0.8em;
}

@media (min-width: 960px) {
  header {
    background: url(/Content/images/apps/bubblebobble_sugardungeon_header_bg_pc.webp) no-repeat;
    background-size: cover;
  }
  header .header_title {
    display: grid;
    align-content: center;
    align-items: center;
    padding: 0px 4%;
    aspect-ratio: 16/9;
    background: url(/Content/images/apps/bubblebobble_sugardungeon_header_bg2_pc.webp) no-repeat;
    background-size: 100%;
    background-position: center 0px;
  }
  header h1 {
    width: 45%;
    margin: -5% auto auto 0px;
  }
  header .header_h2 {
    margin-top: 20px;
    filter: drop-shadow(0px 0px 10px rgba(68, 0, 0, 0.5333333333));
  }
  header .header_h2 > p {
    width: 45%;
    margin: auto auto auto 0px;
    font-size: clamp(1em, 2.3vw, 80px);
  }
  header .header_h2 > p:first-of-type {
    padding: 0% 1%;
    background: url(/Content/images/apps/bubblebobble_sugardungeon_h2_header.webp) no-repeat;
    background-size: 100%;
    text-shadow: -1px -1px 2px #440000, -2px -2px 2px #440000, 0px -1px 2px #440000, 0px -2px 2px #440000, 0px -3px 2px #440000, 1px -1px 2px #440000, 2px -2px 2px #440000, 1px 0px 2px #440000, 2px 0px 2px #440000, 3px 0px 2px #440000, 1px 1px 2px #440000, 2px 2px 2px #440000, 0px 1px 2px #440000, 0px 2px 2px #440000, 0px 3px 2px #440000, -1px 1px 2px #440000, -2px 2px 2px #440000, -1px 0px 2px #440000, -2px 0px 2px #440000, -3px 0px 2px #440000;
  }
  [lang=en] header .header_h2 > p:first-of-type {
    padding: 2% 0% 5%;
    font-size: 3.1vw;
    background-position: center 8px;
    letter-spacing: 0.04em;
  }
  [lang=ko] header .header_h2 > p:first-of-type {
    padding: 0% 0% 5%;
    font-size: 6vw;
    background-position: center 15px;
  }
  [lang=zh-cmn-Hant] header .header_h2 > p:first-of-type {
    padding: 0% 0% 5%;
    font-size: 6.5vw;
    background-position: center 15px;
  }
  [lang=zh-cmn-Hans] header .header_h2 > p:first-of-type {
    padding: 0% 0% 5%;
    font-size: 6vw;
    background-position: center 15px;
  }
  header .header_h2 > p:last-of-type {
    line-height: 1em;
    text-shadow: -1px -1px 2px #440000, -2px -2px 2px #440000, 0px -1px 2px #440000, 0px -2px 2px #440000, 0px -3px 2px #440000, 1px -1px 2px #440000, 2px -2px 2px #440000, 1px 0px 2px #440000, 2px 0px 2px #440000, 3px 0px 2px #440000, 1px 1px 2px #440000, 2px 2px 2px #440000, 0px 1px 2px #440000, 0px 2px 2px #440000, 0px 3px 2px #440000, -1px 1px 2px #440000, -2px 2px 2px #440000, -1px 0px 2px #440000, -2px 0px 2px #440000, -3px 0px 2px #440000;
  }
  header .header_h2 > p:last-of-type span {
    font-size: 0.6em;
  }
}
main {
  width: 100%;
  margin: auto;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #444;
}

section {
  width: 100%;
  padding: 100px 0px 150px;
  margin-top: -50px;
  position: relative;
}
section:nth-of-type(1) {
  z-index: 89;
}
section:nth-of-type(2) {
  z-index: 79;
}
section:nth-of-type(3) {
  z-index: 69;
}
section:nth-of-type(4) {
  z-index: 59;
}
section:nth-of-type(5) {
  z-index: 49;
}
section:nth-of-type(6) {
  z-index: 39;
}
section:nth-of-type(7) {
  z-index: 29;
}
section:nth-of-type(8) {
  z-index: 19;
}
section h2.drop-shadow {
  color: #ff72ac;
  line-height: 1.75em;
  text-shadow: -1px -1px 2px #FFFFFF, -2px -2px 2px #FFFFFF, -3px -3px 2px #FFFFFF, 0px -1px 2px #FFFFFF, 0px -2px 2px #FFFFFF, 0px -3px 2px #FFFFFF, 0px -4px 2px #FFFFFF, 0px -5px 2px #FFFFFF, 1px -1px 2px #FFFFFF, 2px -2px 2px #FFFFFF, 3px -3px 2px #FFFFFF, 4px -4px 2px #FFFFFF, 1px 0px 2px #FFFFFF, 2px 0px 2px #FFFFFF, 3px 0px 2px #FFFFFF, 4px 0px 2px #FFFFFF, 5px 0px 2px #FFFFFF, 1px 1px 2px #FFFFFF, 2px 2px 2px #FFFFFF, 3px 3px 2px #FFFFFF, 4px 4px 2px #FFFFFF, 0px 1px 2px #FFFFFF, 0px 2px 2px #FFFFFF, 0px 3px 2px #FFFFFF, 0px 4px 2px #FFFFFF, 0px 5px 2px #FFFFFF, -1px 1px 2px #FFFFFF, -2px 2px 2px #FFFFFF, -3px 3px 2px #FFFFFF, -4px 4px 2px #FFFFFF, -1px 0px 2px #FFFFFF, -2px 0px 2px #FFFFFF, -3px 0px 2px #FFFFFF, -4px 0px 2px #FFFFFF, -5px 0px 2px #FFFFFF;
  filter: drop-shadow(0px 0px 15px rgba(255, 114, 173, 0.8));
}
[lang=en] section h2 {
  text-align: center;
  font-size: clamp(1em, 5vw, 3em);
  max-width: none;
}
[lang=ko] section h2 {
  text-align: center;
  font-size: clamp(1em, 4.5vw, 3em);
  max-width: none;
}
[lang=zh-cmn-Hant] section h2 {
  text-align: center;
  font-size: clamp(1em, 5.5vw, 3em);
  max-width: none;
}
[lang=zh-cmn-Hans] section h2 {
  text-align: center;
  font-size: clamp(1em, 5.5vw, 3em);
  max-width: none;
}

@media (min-width: 960px) {
  section {
    padding: 200px 0px;
  }
  section .flexBox {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 50px;
  }
  section .flexBox > div {
    flex: 0 1 calc(50% - 25px);
  }
  [lang=en] section h2 {
    font-size: clamp(1em, 3vw, 3em);
  }
  [lang=ko] section h2 {
    font-size: clamp(1em, 3.5vw, 3em);
  }
  [lang=zh-cmn-Hant] section h2 {
    font-size: clamp(1em, 3.5vw, 3em);
  }
  [lang=zh-cmn-Hans] section h2 {
    font-size: clamp(1em, 3.5vw, 3em);
  }
}
.information {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_pink.webp) repeat;
  font-size: 1em;
}
.information h2 {
  width: 50%;
  margin: auto;
  filter: drop-shadow(0px 0px 15px rgba(255, 114, 173, 0.8));
}
.information .grid {
  width: calc(100% - var(--negative-width));
  margin: auto;
}
.information .news {
  margin: 80px auto 0px;
}
.information .news_list {
  width: 100%;
  margin: 50px auto 0px;
}
.information .news_list > * {
  display: block;
  color: #444;
  font-weight: bold;
}
.information .news_list > *:not(:first-child) {
  margin-top: 20px;
}
.information .news_list time {
  color: #fff;
  letter-spacing: 0;
  text-shadow: -1px -1px 1px #444, -2px -2px 1px #444, 0px -1px 1px #444, 0px -2px 1px #444, 0px -3px 1px #444, 1px -1px 1px #444, 2px -2px 1px #444, 1px 0px 1px #444, 2px 0px 1px #444, 3px 0px 1px #444, 1px 1px 1px #444, 2px 2px 1px #444, 0px 1px 1px #444, 0px 2px 1px #444, 0px 3px 1px #444, -1px 1px 1px #444, -2px 2px 1px #444, -1px 0px 1px #444, -2px 0px 1px #444, -3px 0px 1px #444;
}
.information .news_list p {
  padding: 0px 2px;
}
.information .news_list .link {
  display: inline-block;
  border-bottom: 2px solid currentColor;
}
.information .youtube {
  margin: 50px auto 0px;
}
.information .store-link {
  width: calc(90% - var(--negative-width));
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: 20px;
  margin: 40px auto 0px;
  filter: drop-shadow(4px 4px 0px #aaa);
}
.information .store-link a {
  display: grid;
  align-items: center;
  align-content: center;
  flex: 1 1 calc(50% - var(--negative-width));
  padding: 10px 20px;
  background-color: #222;
  border-radius: 10px;
  text-align: center;
}
.information .store-link a img {
  margin: auto;
  align-self: center;
}

@media (min-width: 960px) {
  .information .grid {
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: flex-start;
    gap: 50px;
  }
  .information .grid h2 {
    width: calc(80% - var(--negative-width));
  }
  .information .grid .news {
    margin: 0px auto;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .information .grid .youtube {
    margin: 0px auto;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .information .grid .store {
    gap: 50px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .information .grid .store h2 {
    width: calc(70% - var(--negative-width));
  }
  .information .grid .store .store-link {
    width: calc(100% - var(--negative-width));
    gap: 40px;
    filter: drop-shadow(5px 5px 0px #aaa);
    margin: 50px auto 0px;
  }
}
.catch_copy {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_bg_catchcopy_03.webp) no-repeat;
  background-size: cover;
  background-position: top center;
  position: relative;
  padding: 0px;
  color: #FFF;
}
.catch_copy .catch_copy_bg {
  content: "";
  display: block;
  width: 100%;
  padding: 100px 0px;
  background: url(/Content/images/apps/bubblebobble_sugardungeon_bg_catchcopy_04.webp) no-repeat;
  background-size: 100%;
  background-position: top center;
}
.catch_copy h2 img {
  width: 50%;
  margin: -30px auto 0px;
  filter: drop-shadow(4px 4px 0px #440000);
}
.catch_copy h2 img:first-of-type {
  margin-left: 5%;
}
.catch_copy h2 img:last-of-type {
  margin-right: 5%;
}
.catch_copy h2.drop-shadow {
  color: #FFFFFF;
  text-shadow: -1px -1px 2px #440000, -2px -2px 2px #440000, -3px -3px 2px #440000, 0px -1px 2px #440000, 0px -2px 2px #440000, 0px -3px 2px #440000, 0px -4px 2px #440000, 0px -5px 2px #440000, 1px -1px 2px #440000, 2px -2px 2px #440000, 3px -3px 2px #440000, 4px -4px 2px #440000, 1px 0px 2px #440000, 2px 0px 2px #440000, 3px 0px 2px #440000, 4px 0px 2px #440000, 5px 0px 2px #440000, 1px 1px 2px #440000, 2px 2px 2px #440000, 3px 3px 2px #440000, 4px 4px 2px #440000, 0px 1px 2px #440000, 0px 2px 2px #440000, 0px 3px 2px #440000, 0px 4px 2px #440000, 0px 5px 2px #440000, -1px 1px 2px #440000, -2px 2px 2px #440000, -3px 3px 2px #440000, -4px 4px 2px #440000, -1px 0px 2px #440000, -2px 0px 2px #440000, -3px 0px 2px #440000, -4px 0px 2px #440000, -5px 0px 2px #440000;
  filter: drop-shadow(2px 2px 10px #440000);
}
[lang=ko] .catch_copy h2 {
  font-size: clamp(1em, 5vw, 3em);
}
[lang=zh-cmn-Hans] .catch_copy h2 {
  font-size: clamp(1em, 5vw, 3em);
}
.catch_copy .bubblun {
  width: 66.6666666667%;
  padding: 50px 0px;
  margin: 100px auto auto -15%;
}
.catch_copy .inside {
  width: calc(100% - var(--negative-width));
  margin: auto;
}
.catch_copy .inside h3 {
  filter: drop-shadow(3px 3px 0px #440000);
}
.catch_copy .inside h3.drop-shadow {
  text-align: center;
  color: #FFFFFF;
  text-shadow: -1px -1px 2px #440000, -2px -2px 2px #440000, -3px -3px 2px #440000, 0px -1px 2px #440000, 0px -2px 2px #440000, 0px -3px 2px #440000, 0px -4px 2px #440000, 0px -5px 2px #440000, 1px -1px 2px #440000, 2px -2px 2px #440000, 3px -3px 2px #440000, 4px -4px 2px #440000, 1px 0px 2px #440000, 2px 0px 2px #440000, 3px 0px 2px #440000, 4px 0px 2px #440000, 5px 0px 2px #440000, 1px 1px 2px #440000, 2px 2px 2px #440000, 3px 3px 2px #440000, 4px 4px 2px #440000, 0px 1px 2px #440000, 0px 2px 2px #440000, 0px 3px 2px #440000, 0px 4px 2px #440000, 0px 5px 2px #440000, -1px 1px 2px #440000, -2px 2px 2px #440000, -3px 3px 2px #440000, -4px 4px 2px #440000, -1px 0px 2px #440000, -2px 0px 2px #440000, -3px 0px 2px #440000, -4px 0px 2px #440000, -5px 0px 2px #440000;
  filter: drop-shadow(2px 2px 10px #440000);
}
.catch_copy .inside p {
  margin-top: 10px;
  text-shadow: 0px 0px 10px rgba(68, 0, 0, 0.5019607843);
}
.catch_copy .inside p:first-of-type {
  margin-top: 50px;
}

@media (min-width: 960px) {
  .catch_copy .catch_copy_bg {
    content: "";
    display: grid;
    min-height: 720px;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 50px;
    background: url(/Content/images/apps/bubblebobble_sugardungeon_bg_catchcopy_05.webp) no-repeat;
    background-size: 100%;
    background-position: center;
  }
  .catch_copy h2 {
    width: 100%;
    max-width: 640px;
    margin: auto;
    margin-left: 0px;
    padding-top: 50px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .catch_copy h2 img {
    width: 50%;
    margin: -40px auto 0px;
    filter: drop-shadow(4px 4px 0px #440000);
  }
  .catch_copy h2 img:first-of-type {
    margin-left: 0%;
  }
  .catch_copy h2 img:last-of-type {
    margin-right: 0%;
  }
  .catch_copy h2.drop-shadow {
    max-width: 640px;
  }
  [lang=en] .catch_copy h2 {
    font-size: clamp(1em, 2.5vw, 2.5em);
  }
  [lang=ko] .catch_copy h2 {
    font-size: clamp(1em, 2.8vw, 2.8em);
  }
  [lang=zh-cmn-Hant] .catch_copy h2 {
    font-size: clamp(1em, 2.4vw, 2.4em);
  }
  [lang=zh-cmn-Hans] .catch_copy h2 {
    font-size: clamp(1em, 2.4vw, 2.3em);
  }
  .catch_copy .bubblun {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 66.6666666667%;
    max-width: 640px;
    padding: 0px;
    margin: auto auto 2%;
  }
  .catch_copy .bubblun img {
    max-width: 360px;
    margin-left: 0px;
  }
  .catch_copy .inside {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    width: 100%;
    max-width: 640px;
    margin: auto;
    margin-left: 0px;
  }
  .catch_copy .inside h3 {
    width: calc(100% - var(--negative-width));
    margin: auto;
    filter: drop-shadow(3px 3px 0px #440000);
  }
  [lang=zh-cmn-Hant] .catch_copy .inside h3 {
    width: calc(100% - 0px);
    font-size: clamp(0.8em, 1.8vw, 2em);
  }
  [lang=zh-cmn-Hans] .catch_copy .inside h3 {
    width: calc(100% - 0px);
    font-size: clamp(0.8em, 1.8vw, 2em);
  }
  .catch_copy .inside p {
    margin-top: 10px;
    text-shadow: 0px 0px 10px rgba(68, 0, 0, 0.5019607843);
  }
  .catch_copy .inside p:first-of-type {
    margin-top: 50px;
  }
}
.dungeon {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_pink.webp) repeat;
}
.dungeon h2 {
  margin: 50px auto 0px;
  width: calc(100% - var(--negative-width));
}
.dungeon h2 img {
  margin: -40px auto 0px;
  filter: drop-shadow(0px 0px 15px rgba(255, 114, 173, 0.5));
}
.dungeon .carousel {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}
.dungeon .inside {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}

@media (min-width: 560px) {
  .dungeon h2 {
    max-width: 669px;
  }
  .dungeon .carousel {
    width: calc(90% - var(--negative-width));
  }
}
@media (min-width: 960px) {
  .dungeon .carousel {
    width: calc(100% - var(--negative-width));
  }
  .dungeon .slideContent2 .slick-track {
    display: flex;
    gap: 40px;
  }
  .dungeon .slideContent2 img {
    display: block;
    border-radius: 10px;
  }
  .dungeon .inside {
    max-width: 960px;
    text-align: center;
  }
}
.powerup {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_blue.webp) repeat;
}
.powerup h2 {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}
.powerup h2 div {
  margin: -40px auto 0px;
  filter: drop-shadow(0px 0px 15px rgba(255, 114, 173, 0.5));
}
.powerup .strongbox {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
  filter: drop-shadow(0px 0px 15px rgba(255, 114, 173, 0.5));
}
.powerup .flow {
  width: calc(100% - var(--negative-width));
  max-width: 560px;
  margin: 50px auto 0px;
  padding: 20px;
  filter: drop-shadow(0px 0px 15px rgba(255, 114, 173, 0.5));
  background-color: #fff;
  border-radius: 10px;
}
.powerup .flow > div {
  margin-top: 30px;
}
.powerup .item {
  position: relative;
}
.powerup .item .item_img img {
  position: absolute;
  top: 0;
  left: 0;
}
.powerup .slideContent {
  border-radius: 8px;
}
.powerup .slideContent img {
  width: 100%;
}

@media (min-width: 560px) {
  .powerup h2 {
    max-width: 480px;
  }
  .powerup .strongbox {
    max-width: 480px;
  }
  .powerup .flow {
    padding: 30px;
  }
  .powerup .flow:not(:last-of-type) {
    text-align: center;
  }
  .powerup .pconly {
    display: block;
  }
}
@media (min-width: 960px) {
  .powerup .flexBox {
    max-width: 1280px;
    margin: auto;
  }
  .powerup .flow {
    min-width: 560px;
    padding: 30px;
  }
  .powerup .flow:not(:last-of-type) {
    text-align: center;
  }
}
.skill {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_green.webp) repeat;
}
.skill h2 {
  margin: 50px auto 0px;
  width: calc(100% - var(--negative-width));
}
.skill h2 img {
  margin: -40px auto 0px;
  filter: drop-shadow(0px 0px 10px rgba(255, 114, 173, 0.5));
}
.skill .screenshot {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  width: calc(100% - var(--negative-width));
  max-width: 1920px;
  margin: 50px auto 0px;
}
.skill .screenshot > div {
  flex: 1 1 40%;
}
.skill .screenshot > div:first-of-type {
  flex: 1 1 100%;
}
.skill .inside {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}

@media (min-width: 560px) {
  .skill h2 img {
    width: auto;
    height: 67px;
  }
  .skill .screenshot {
    width: calc(90% - var(--negative-width));
  }
}
@media (min-width: 960px) {
  .skill .screenshot {
    width: calc(100% - var(--negative-width));
    gap: 40px;
  }
  .skill .screenshot > div {
    flex: 1 1 20%;
  }
  .skill .screenshot > div:first-of-type {
    flex: 1 1 20%;
  }
  .skill .inside {
    max-width: 960px;
    text-align: center;
  }
}
.stage {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_bg_stage.webp) no-repeat;
  background-size: cover;
  background-position: top center;
  color: #FFF;
}
.stage h2 {
  margin: 50px auto 0px;
  max-width: 599px;
  width: calc(100% - var(--negative-width));
}
.stage h2 img {
  margin: -40px auto 0px;
  filter: drop-shadow(0px 0px 10px rgba(68, 0, 0, 0.5333333333));
}
.stage h2.synopsis {
  padding: 100px 0px 0px;
}
.stage h2.synopsis img {
  width: auto;
  height: 41px;
}
.stage h2.character {
  padding: 50px 0px 0px;
}
.stage h2.character img {
  width: auto;
  height: 41px;
}
.stage > div {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}
.stage .stage_img div {
  max-width: 960px;
  margin: 50px auto 0px;
  position: relative;
}
.stage .stage_img div:nth-of-type(1) img:nth-of-type(2) {
  right: -20px;
}
.stage .stage_img div:nth-of-type(2) img:first-of-type {
  margin: 0px auto;
}
.stage .stage_img div:nth-of-type(2) img:nth-of-type(2) {
  right: -20px;
}
.stage .stage_img div:nth-of-type(2) img:nth-of-type(3) {
  left: -20px;
}
.stage .stage_img img {
  filter: drop-shadow(0px 0px 10px rgba(68, 0, 0, 0.5333333333));
}
.stage .stage_img img:nth-of-type(1) {
  width: 80%;
  border-radius: 10px;
}
.stage .stage_img img:nth-of-type(2) {
  width: 40%;
  position: absolute;
  bottom: 0;
}
.stage .stage_img img:nth-of-type(3) {
  width: 40%;
  position: absolute;
  bottom: 0;
}
.stage .chara {
  width: 90%;
  max-width: 480px;
  margin: 50px auto 0px;
  padding: 20px;
  background-color: #FFF;
  color: #000;
  border-radius: 10px;
  box-shadow: 10px 10px 0px rgba(255, 0, 106, 0.5);
}
.stage .chara img {
  width: 60%;
  margin: auto auto 20px;
}
.stage .chara h3 {
  font-size: 1.4em;
  margin: auto 0px 20px;
}
.stage .chara p {
  filter: none;
}
.stage p {
  filter: drop-shadow(0px 0px 10px rgba(68, 0, 0, 0.8));
}
.stage .synopsis p {
  margin: 20px auto auto;
  text-align: center;
  font-size: 1.4em;
  text-shadow: -1px -1px 2px rgba(255, 0, 106, 0.5019607843), -2px -2px 2px rgba(255, 0, 106, 0.5019607843), 0px -1px 2px rgba(255, 0, 106, 0.5019607843), 0px -2px 2px rgba(255, 0, 106, 0.5019607843), 0px -3px 2px rgba(255, 0, 106, 0.5019607843), 1px -1px 2px rgba(255, 0, 106, 0.5019607843), 2px -2px 2px rgba(255, 0, 106, 0.5019607843), 1px 0px 2px rgba(255, 0, 106, 0.5019607843), 2px 0px 2px rgba(255, 0, 106, 0.5019607843), 3px 0px 2px rgba(255, 0, 106, 0.5019607843), 1px 1px 2px rgba(255, 0, 106, 0.5019607843), 2px 2px 2px rgba(255, 0, 106, 0.5019607843), 0px 1px 2px rgba(255, 0, 106, 0.5019607843), 0px 2px 2px rgba(255, 0, 106, 0.5019607843), 0px 3px 2px rgba(255, 0, 106, 0.5019607843), -1px 1px 2px rgba(255, 0, 106, 0.5019607843), -2px 2px 2px rgba(255, 0, 106, 0.5019607843), -1px 0px 2px rgba(255, 0, 106, 0.5019607843), -2px 0px 2px rgba(255, 0, 106, 0.5019607843), -3px 0px 2px rgba(255, 0, 106, 0.5019607843);
  filter: drop-shadow(2px 2px 5px rgba(255, 0, 106, 0.5019607843));
}

@media (min-width: 960px) {
  .stage h2.synopsis {
    padding: 100px 0px 0px;
  }
  .stage h2.synopsis img {
    width: auto;
    height: 67px;
  }
  .stage h2.character {
    padding: 100px 0px 0px;
  }
  .stage h2.character img {
    width: auto;
    height: 67px;
  }
  .stage > div {
    margin: 100px auto 0px;
  }
  .stage .stage_img {
    max-width: 960px;
  }
  .stage .stage_img div {
    max-width: 640px;
    margin: 100px auto 0px;
    position: relative;
  }
  .stage .stage_img div:nth-of-type(1) {
    margin-left: 0px;
  }
  .stage .stage_img div:nth-of-type(2) {
    margin-right: 0px;
  }
  .stage .inside {
    max-width: 640px;
  }
  .stage .synopsis {
    margin: 50px auto auto;
  }
  .stage .charalist {
    margin: 50px auto auto;
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
  .stage .chara {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0px;
    width: 100%;
    max-width: none;
    margin: auto;
  }
}
@media (min-width: 1280px) {
  .stage .inside {
    max-width: 1280px;
    text-align: center;
  }
}
.symphony {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_pink.webp) repeat;
}
.symphony h2 {
  margin: 50px auto 0px;
  width: calc(100% - var(--negative-width));
}
.symphony h2 img {
  margin: -40px auto 0px;
  filter: drop-shadow(0px 0px 10px rgba(255, 114, 173, 0.5));
}
.symphony .screenshot {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}
.symphony .screenshot > div {
  flex: 1 1 40%;
}
.symphony .inside {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}

@media (min-width: 560px) {
  .symphony h2 {
    max-width: 669px;
  }
  .symphony .screenshot {
    width: calc(90% - var(--negative-width));
  }
}
@media (min-width: 960px) {
  .symphony .screenshot {
    width: calc(100% - var(--negative-width));
    gap: 40px;
  }
  .symphony .screenshot > div {
    flex: 1 1 20%;
  }
  .symphony .inside {
    max-width: 960px;
    text-align: center;
  }
}
.deluxe {
  background: url(/Content/images/apps/bubblebobble_sugardungeon_contents_bg_green.webp) repeat;
  z-index: -1;
}
.deluxe h2 {
  margin: 50px auto 0px;
  width: calc(100% - var(--negative-width));
}
.deluxe h2 img {
  margin: -40px auto 0px;
  filter: drop-shadow(0px 0px 10px rgba(255, 114, 173, 0.5));
}
.deluxe .thumbnail {
  width: 60%;
  max-width: 640px;
  margin: 3em auto 1em;
}
.deluxe .screenshot {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  width: calc(100% - var(--negative-width));
  max-width: 960px;
  margin: 50px auto 0px;
}
.deluxe .screenshot > div {
  flex: 1 1 40%;
}
.deluxe .inside {
  width: calc(100% - var(--negative-width));
  margin: 50px auto 0px;
}

@media (min-width: 560px) {
  .deluxe h2 img {
    width: auto;
    max-height: 67px;
  }
  .deluxe .screenshot {
    width: calc(90% - var(--negative-width));
  }
}
@media (min-width: 960px) {
  .deluxe .thumbnail {
    width: 30%;
  }
  .deluxe .screenshot {
    width: calc(100% - var(--negative-width));
    gap: 40px;
  }
  .deluxe .screenshot > div {
    flex: 1 1 45%;
  }
  .deluxe .inside {
    max-width: 640px;
  }
}
.product {
  width: calc(100% - 40px);
  max-width: 580px;
  margin: 100px auto 0;
  text-align: center;
}
.product dl {
  margin: 0;
  padding: 0;
  border: 5px solid #000046;
}
.product dt {
  padding: 10px;
  margin: 0px;
  color: #FFFFFF;
  border-top: 1px solid #000046;
  background-color: #000046;
  font-weight: bold;
}
.product dt:first-of-type {
  border-top: none;
}
.product dd {
  padding: 20px 10px;
  margin: 0px;
  font-size: 0.8em;
  font-weight: bold;
  background-color: #FFFFFF;
}

@media screen and (min-width: 960px) {
  .product {
    grid-column: 2/3;
    grid-row: 1/5;
    margin-top: 200px;
    max-width: 1080px;
  }
  .product dl {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  .product dt {
    padding: 20px 10px;
    margin-top: 0px;
    border-top: 1px solid #FFFFFF;
  }
  .product dt:first-of-type {
    border-top: none;
  }
  .product dd {
    margin: 0;
    padding: 20px 10px;
    font-size: 1em;
    border-top: 1px solid #000046;
  }
  .product dd:first-of-type {
    border-top: none;
  }
}
footer {
  margin-top: 200px;
  padding: 100px 0 20px;
  background-color: #000046;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  z-index: 50px;
  font-size: 0.9em;
}
footer .brand-logos a {
  display: block;
}
footer .copyright {
  padding: 5%;
  line-height: 1.75em;
}
footer .copyright p {
  margin-top: 10px;
}
footer .copyright img {
  display: inline-block;
}
footer .copyright img:first-of-type {
  width: 14px;
}
footer .copyright img:last-of-type {
  width: 40px;
}

@media screen and (min-width: 960px) {
  footer {
    gap: 50px;
    padding: 100px 0px 50px;
    justify-items: center;
    align-items: center;
  }
  footer .brand-logos {
    display: flex;
    gap: 50px;
    align-items: center;
  }
  footer .copyright {
    padding: 40px;
    padding-bottom: 0px;
  }
  footer .taito-logo {
    max-width: 300px;
  }
}
.button {
  display: inline-block;
  text-decoration: none;
  margin: 50px auto;
  padding: 15px 10px 15px 15px;
  transition: 0.5s;
  color: #FFF;
  font-weight: bold;
  border-radius: 5px;
  background-color: #F56500;
  box-shadow: 0px 5px 0px #753100;
}
.button::after {
  content: "＞";
  padding-left: 10px;
}
.button:hover {
  opacity: 0.6;
}
.button.disable {
  pointer-events: none;
  background-color: #888;
  color: #444;
  box-shadow: none;
}

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 15px;
  filter: drop-shadow(0px 0px 10px rgba(255, 114, 173, 0.8));
  cursor: grab;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE, Edge */
}
.carousel::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}
.carousel.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.slideContent {
  display: flex;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.slideContent > div {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}
.slideContent img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.slideContent .slick-dots li button:before {
  font-size: 36px;
}

.language {
  display: block;
  height: 40px;
  margin: auto;
  padding: 0px;
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  align-items: center;
  z-index: 1000;
  text-align: right;
  letter-spacing: 0;
  align-items: center;
}
[lang=ja] .language a.ja {
  display: none;
}
[lang=en] .language a.en {
  display: none;
}
[lang=ko] .language a.ko {
  display: none;
}
[lang=zh-cmn-Hant] .language a.zh-CHT {
  display: none;
}
[lang=zh-cmn-Hans] .language a.zh-CHS {
  display: none;
}
.language > * {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2666666667);
  transition: opacity 0.3s;
}
.language div.lang {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  pointer-events: auto;
  position: relative;
  z-index: 99;
  cursor: pointer;
}
.language div.lang .material-icons {
  font-size: 24px;
}
.language div.lang span {
  display: inline-block;
}
.language div.lang span:last-of-type {
  margin-left: 5px;
  vertical-align: text-bottom;
}
.language div.lang:hover {
  opacity: 0.6;
}
.language a.lang {
  display: block;
  margin-top: 20px;
  padding: 5px 10px;
  color: #222;
  vertical-align: top;
  text-align: center;
  position: relative;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -50px, 0);
  transition: opacity 0.5s, transform 0.5s;
}
.language.show a.lang {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}
.language a.lang.delay-02 {
  transition-delay: 0.1s;
}
.language a.lang.delay-04 {
  transition-delay: 0.2s;
}
.language a.lang.delay-06 {
  transition-delay: 0.3s;
}
.language a.lang.delay-08 {
  transition-delay: 0.4s;
}
.language a.lang.delay-1 {
  transition-delay: 0.5s;
}
.language.show a.lang:hover {
  opacity: 0.6;
  transition-delay: 0s;
}/*# sourceMappingURL=bb5.css.map */