/*
 * md: 1280 > 830 > 680
 * sm: 428 > 400 > 352
 */

@font-face {
  font-family: "PixelMplus10";
  src:
    url(../fonts/PixelMplus10-Bold.woff2) format("woff2"),
    url(../fonts/PixelMplus10-Bold.woff) format("woff");
  font-display: swap;
}

:root {
  --rem: calc(1rem / 16);
  --em: calc(1em / 16);

  --color-01: #bb0029;
  --color-02: #fad108;

  --duration: .25s;
  --ease: cubic-bezier(.36, 1.13, .7, .97);

  --nav: 56px;

  --leading-trim: calc((1em - 1lh) / 2);

  scroll-behavior: smooth;
}

@media (width < 48rem) {
  :root {
    --vw: calc(100vw / 375);
    --max: 400;
    --gap: 14;
    --nav: calc(65 / 375 * 100vw);
    font-size: calc(16 / 428 * 100dvi);
  }

  .globalMenuSp {
    block-size: 100%;
  }
}

@media (width >= 48rem) {
  :root {
    --vw: calc(100vw / 1280);
    --max: 1280;
    --gap: 20;
    --nav: calc(84 * var(--rem));
    font-size: clamp(9.6px, calc(9.6px + (16 - 9.6) * ((100dvi - 768px) / (1280 - 768))), 16px);
  }
}

:target,
.dragonquest [id] {
  scroll-margin-block-start: var(--nav);
}





/* reset and set
-------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:is(.dragonquest) {
  padding-block: 0;
  padding-block-start: 0;
  font-size: calc(16 * var(--rem));
  font-family: "Noto Sans JP", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
  word-break: normal;
  color: #000;
  background-color: #fff;
  background-position-x: 50%;
  background-position-y: calc(var(--nav) * -1);
  background-repeat: repeat-y, repeat;
  overflow-wrap: anywhere;
  line-break: strict;
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
}

.dragonquest :where(a) {
  text-decoration: none;
  color: inherit;
}

.dragonquest :where(p) {
  color: inherit;
}

.dragonquest :where(img) {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (width < 48rem) {
  :is(.dragonquest) {
    background-image:
      image-set(
        "../images/bg_sm.avif" type("image/avif"),
        "../images/bg_sm.webp" type("image/webp")
      );
    background-size: calc(570 * var(--rem)) auto, calc(28 * var(--rem));
  }
}

@media (width >= 48rem) {
  :is(.dragonquest) {
    background-image:
      image-set(
        "../images/bg_md.avif" type("image/avif"),
        "../images/bg_md.webp" type("image/webp")
      ),
      image-set(
        "../images/grass.avif" type("image/avif"),
        "../images/grass.webp" type("image/webp")
      );
    background-size: calc(1281 * var(--rem)) auto, calc(28 * var(--rem));
  }
}





/* Minimize non-essential motion
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


.dragonquest[data-loading] {
  opacity: 0;
}





/* modules
-------------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.indent {
  @supports not (text-indent: 1em hanging each-line) {
    padding-inline-start: calc(var(--indent, 1) * 1em);
    text-indent: calc(var(--indent, 1) * -1em);
  }

  text-indent: calc(var(--indent, 1) * 1em) hanging;
}

.m-container {
  display: flow-root;
  contain: var(--contain, layout style);
  margin-inline: auto;
}

.m-container.\--container-inline {
  container-type: inline-size;
}

.m-container.\--container-inline .fluid {
  inline-size: 100cqi;
  margin-inline: calc(50% - 50cqi);
}

.m-container.\--m { inline-size: var(--_m); }
.m-container.\--s { inline-size: var(--_s); }

.m-box-1 {
  inline-size: fit-content;
  margin-inline: auto;
  font-family: "PixelMplus10";
  color: #fff;
}

.m-box-1[data-text-box] {
  clip-path: inset(0% 0% 100% 0%);
}

.m-box-1.\--m {
  border-image: url("../images/border-image-1.webp") repeat;
  border-image-width: calc(15 * var(--rem));
  border-image-slice: 30 fill;
}

.m-box-1.\--s {
  border-image: url("../images/border-image-2.webp") repeat;
  border-image-width: calc(7 * var(--rem));
  border-image-slice: 14 fill;
}

.m-box-1__arrow {
  display: flex;
  align-items: center;
  column-gap: calc(12 * var(--rem));
  outline: none;
}

.m-box-1__arrow[type="button"] {
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #fff;
  border-width: 0;
  background-color: #0000;
}

.m-box-1__arrow > .icon {
  inline-size: calc(11 * var(--rem));
  block-size: calc(16 * var(--rem));
  opacity: 0;
}

.m-box-1__arrow:is(:hover, :focus-visible, .is-active) > .icon {
  animation: flash 1s steps(1) infinite;
}

.m-box-1__arrow:is(:hover, :focus-visible, .is-active):has(+ .m-box-1__arrow:is(:hover, :focus-visible, .is-active)) > .icon {
  animation: none;
}

.m-box-2 {
  inline-size: fit-content;
  margin-inline: auto;
  padding: 1lh;
  color: #fff;
  border-image: url("../images/border-image-3.webp") repeat;
  border-image-width: calc(18 * var(--rem));
  border-image-slice: 36 fill;
}

.m-heading {
  margin-inline: auto;
  padding-block-start: calc(6 * var(--rem));
  font-family: "PixelMplus10";
  text-align: center;
  background-image: image-set(
    "../images/heading.avif" type("image/avif"),
    "../images/heading.webp" type("image/webp")
  );
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.m-button {
  display: grid;
  grid-template-columns: calc(13 * var(--rem)) 1fr calc(13 * var(--rem));
  place-items: center;
  inline-size: var(--_inline-size);
  block-size: var(--_block-size);
  margin-inline: auto;
  padding-inline: var(--_padding-inline);
  font-weight: 700;
  font-size: var(--_font-size);
  border-width: var(--_border-width);
  border-style: solid;
  border-radius: calc(infinity * 1px);
}

.m-button.\--primary {
  --_data-hover-color-1: #fff;
  --_data-hover-color-2: var(--color-01);
}

.m-button.\--secondary {
  border-color: #fff;
  --_data-hover-color-1: #000;
  --_data-hover-color-2: #fff;
}

.m-button.\--l {
  --_inline-size: calc(320 * var(--rem));
  --_block-size: calc(62 * var(--rem));
  --_padding-inline: calc(40 * var(--rem));
  --_font-size: calc(20 * var(--rem));
  --_border-width: 3px;
  box-shadow: 0 calc(3 * var(--rem)) calc(6 * var(--rem)) rgb(0 0 0 / .16);
}

.m-button.\--m {
  --_border-width: 3px;
  box-shadow: calc(7 * var(--rem)) calc(7 * var(--rem)) calc(7 * var(--rem)) rgb(0 0 0 / .36);
}

.m-button.\--s {
  --_inline-size: calc(170 * var(--rem));
  --_block-size: calc(36 * var(--rem));
  --_padding-inline: calc(16 * var(--rem));
  --_font-size: calc(12 * var(--rem));
  --_border-width: 2px;
}

.m-button .label {
  grid-column: 2;
}

.m-button .icon {
  grid-column: 3;
}

.m-button.\--l .icon {
  inline-size: calc(13 * var(--rem));
  block-size: calc(9 * var(--rem));
}

:is(.m-button.\--s, .m-button.\--m) .icon {
  inline-size: calc(10 * var(--rem));
  block-size: calc(7 * var(--rem));
}

.m-button.\--s .icon {
  rotate: -90deg;
}

@media (width < 48rem) {
  .m-container {
    --_m: calc(400 * var(--rem));
    --_s: calc(352 * var(--rem));
  }

  .m-section-gap {
    padding-block: calc(114 * var(--rem)) calc(14 * var(--rem));
  }

  .m-box-1.\--m {
    padding: 1lh 1.5lh;
  }

  .m-box-1.\--s {
    padding: calc(10 * var(--rem)) calc(20 * var(--rem));
  }

  .m-heading {
    inline-size: calc(234 * var(--rem));
    block-size: calc(62 * var(--rem));
    margin-block-end: calc(32 * var(--rem));
    line-height: calc(40 * var(--rem));
  }

  .m-button.\--m {
    --_inline-size: calc(170 * var(--rem));
    --_block-size: calc(56 * var(--rem));
    --_padding-inline: calc(12 * var(--rem));
    --_font-size: calc(16 * var(--rem));
  }
}

@media (width >= 48rem) {
  .m-container {
    --_m: calc(830 * var(--rem));
    --_s: calc(680 * var(--rem));
  }

  .m-section-gap {
    padding-block: calc(120 * var(--rem)) calc(40 * var(--rem));
  }

  .m-box-1.\--m {
    padding: 1lh 1.75lh;
  }

  .m-box-1.\--s {
    padding: 1em 2em;
  }

  .m-heading {
    inline-size: calc(275 * var(--rem));
    block-size: calc(73 * var(--rem));
    margin-block-end: calc(40 * var(--rem));
    line-height: calc(46 * var(--rem));
  }

  .m-button.\--m {
    --_inline-size: calc(198 * var(--rem));
    --_block-size: calc(60 * var(--rem));
    --_padding-inline: calc(16 * var(--rem));
    --_font-size: calc(18 * var(--rem));
  }
}





/* modules card
-------------------------------------------------------------------------------- */
.m-cards {
  display: grid;
}

.m-card {
  display: grid;
  grid-template-rows: max-content 1fr;
  row-gap: .5em;
}

[data-card] {
  clip-path: inset(0% 0% 100% 0%);
}

.m-card__body {
  display: grid;
  grid-template-rows: repeat(var(--card-body-rows), auto);
  row-gap: .125em;
}

.m-card__badge {
  inline-size: calc(16 * var(--rem));
  block-size: calc(15 * var(--rem));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 36'%3E%3Cpath fill='%23e55499' d='M8.112 35.349a.592.592 0 0 1-.582-.7l2.242-11.883-8.8-8.293a.592.592 0 0 1 .331-1.018l11.991-1.54L18.467.989a.592.592 0 0 1 1.07 0l5.169 10.928 11.991 1.539a.592.592 0 0 1 .331 1.018l-8.8 8.293 2.245 11.883a.592.592 0 0 1-.866.629l-10.605-5.8-10.605 5.8a.6.6 0 0 1-.284.073'/%3E%3C/svg%3E%0A");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.m-card__title {
  font-feature-settings: "halt" 1;
  line-height: 1.125;
}

.m-card__tag {
  display: grid;
  place-items: center;
  align-self: start;
  inline-size: calc(60 * var(--rem));
  block-size: calc(16 * var(--rem));
  margin-block-end: auto;
  color: #fff;
  border-radius: calc(infinity * 1px);
  background-color: var(--tag-background-color);
}

.m-card__tag:empty {
  block-size: 0;
}

.m-card__size {
  min-block-size: 1lh;
  margin-block-start: auto;
}

.m-card__price {
  margin-block-start: auto;
}

.m-card__price:has(+ .m-card__note:empty) {
  margin-block-end: -.5em;
}

@media (width < 48rem) {
  .m-container.\--s {
    inline-size: calc(406 * var(--rem));
  }

  .m-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(8 * var(--rem)) calc(6 * var(--rem));
  }

  .m-card__image {
    inline-size: calc(152 * var(--rem));
    block-size: calc(152 * var(--rem));
  }

  .m-card__price {
    font-size: calc(10 * var(--rem));
  }

  .m-card__price > span {
    font-size: calc(14 * var(--rem));
  }
}

@media (width >= 48rem) {
  .m-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 * var(--rem)) calc(6 * var(--rem));
  }

  .m-card__image {
    inline-size: calc(174.672 * var(--rem));
    block-size: calc(174.672 * var(--rem));
  }

  .m-card__price {
    font-size: calc(11 * var(--rem));
  }

  .m-card__price > span {
    font-size: calc(15 * var(--rem));
  }
}





/* modules character
-------------------------------------------------------------------------------- */
.m-character {
  position: relative;
}

.m-character__image {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--_ibe) * var(--rem));
  inline-size: calc(var(--_is) * var(--rem));
  margin-inline: auto;
  translate: calc(var(--_tx) * var(--rem)) 0;
}

.m-character__image:nth-of-type(1) {
  inset-inline-end: calc(var(--_iie) * var(--rem));
}

.m-character__image:nth-of-type(2) {
  inset-inline-start: calc(var(--_iis) * var(--rem));
}

@media (width < 48rem) {
  .m-character__image.\--1-1 { --_iie: 210; --_ibe: -7; --_is: 187; --_tx: -38; }
  .m-character__image.\--1-2 { --_iis: 259; --_ibe: -2; --_is: 179; }
  .m-character__image.\--2-1 { --_iie: 210; --_ibe: 16; --_is: 220; --_tx: -54; }
  .m-character__image.\--2-2 { --_iis: 264; --_ibe: -4; --_is: 170; }
  .m-character__image.\--3-1 { --_iie: 210; --_ibe: 1;  --_is: 162; --_tx: -36; }
  .m-character__image.\--3-2 { --_iis: 253; --_ibe: 9; --_is: 190; }
  .m-character__image.\--4-1 { --_iie: 210; --_ibe: -2; --_is: 304; --_tx: -101; }
  .m-character__image.\--4-2 { --_iis: 273; --_ibe:  14; --_is: 144; }
  .m-character__image.\--5-1 { --_iie: 232; --_ibe:  72; --_is: 129; }
  .m-character__image.\--5-2 { --_iis: 251; --_ibe: -9; --_is: 225; }
}

@media (width >= 48rem) {
  .m-character__image.\--1-1 { --_iie: 417; --_ibe: -14; --_is: 187; }
  .m-character__image.\--1-2 { --_iis: 457; --_ibe: -14; --_is: 179; }
  .m-character__image.\--2-1 { --_iie: 480; --_ibe: -15; --_is: 220; --_tx: -5; }
  .m-character__image.\--2-2 { --_iis: 457; --_ibe: -24; --_is: 170; }
  .m-character__image.\--3-1 { --_iie: 385; --_ibe: -6;  --_is: 162; }
  .m-character__image.\--3-2 { --_iis: 460; --_ibe: -13; --_is: 190; }
  .m-character__image.\--4-1 { --_iie: 640; --_ibe: -31; --_is: 304; --_tx: -28; }
  .m-character__image.\--4-2 { --_iis: 370; --_ibe:  -9; --_is: 144; }
  .m-character__image.\--5-1 { --_iie: 492; --_ibe:  -2; --_is: 142; }
  .m-character__image.\--5-2 { --_iis: 469; --_ibe: -31; --_is: 250; }
}





/* hero
-------------------------------------------------------------------------------- */
.hero__billboard {
  position: relative;
  inline-size: calc(var(--_inline-size) * var(--rem));
  block-size: calc(var(--_block-size) * var(--rem));
  margin-inline: auto;
}

.hero__billboard-image {
  position: absolute;
  inset-block-end: 0;
}

.hero__character {
  position: relative;
  block-size: calc(var(--_block-size) * var(--rem));
}

.hero__character-image {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
}

.hero__character-image:is(.\--1, .\--2, .\--3) {
  inset-inline-start: calc(var(--_inset-inline-start) * var(--rem));
  inset-block-start: calc(var(--_inset-block-start) * var(--rem));
  inline-size: calc(var(--_inline-size) * var(--rem));
  block-size: calc(var(--_block-size) * var(--rem));
}

.hero__character-image.\--1 {
  translate: 0;
  rotate: 0deg;
  scale: 1;
  transform-origin: 50% 46%;
  /* animation: monster-float 1.6s linear infinite; */
}

.hero__character-image.\--2 {
  /* animation: slime 2s ease-in-out infinite; */
}

.hero__character-image.\--3 {
  /* animation: momonja-float 2s ease-in-out infinite; */
}

[data-character]:not(.is-shown) {
  opacity: 0;
}

.hero__text-box {
  position: relative;
}

.hero__text-box-2 {
  position: absolute;
  inset-inline: calc(var(--_inset-inline-start) * var(--rem)) 0;
  inset-block-end: calc(var(--_inset-block-end) * var(--rem));
}

.hero__media {
  inline-size: calc(var(--_inline-size) * var(--rem));
  margin-inline: auto;
  margin-block-start: calc(var(--_margin-block-start) * var(--rem));
  aspect-ratio: 16 / 9;
}

.hero__media > iframe {
  inline-size: 100%;
  block-size: 100%;
}

.hero__media[data-text-box] {
  clip-path: inset(0% 0% 100% 0%);
}

@media (width < 48rem) {
  .hero__billboard {
    --_inline-size: 332;
    --_block-size: 212;
  }

  .hero__character {
    --_block-size: 198;
  }

  .hero__character-image.\--1 {
    --_inset-inline-start: -272;
    --_inset-block-start: -10;
    --_inline-size: 202;
    --_block-size: 206;
  }

  .hero__character-image.\--2 {
    --_inset-inline-start: -30;
    --_inset-block-start: 10;
    --_inline-size: 188;
    --_block-size: 188;
  }

  .hero__character-image.\--3 {
    --_inset-inline-start: 265;
    --_inset-block-start: 97;
    --_inline-size: 134;
    --_block-size: 100;
  }

  .hero__text-box-2 {
    --_inset-inline-start: 214;
    --_inset-block-end: -32;
  }

  .hero__media {
    --_inline-size: 400;
    --_margin-block-start: 80;
  }
}

@media (width >= 48rem) {
  .hero__billboard {
    --_inline-size: 412;
    --_block-size: 260;
  }

  .hero__character {
    --_block-size: 236;
  }

  .hero__character-image.\--1 {
    --_inset-inline-start: -276;
    --_inset-block-start: -23;
    --_inline-size: 221;
    --_block-size: 226;
  }

  .hero__character-image.\--2 {
    --_inset-inline-start: 0;
    --_inset-block-start: 11;
    --_inline-size: 205;
    --_block-size: 205;
  }

  .hero__character-image.\--3 {
    --_inset-inline-start: 338;
    --_inset-block-start: 89;
    --_inline-size: 155;
    --_block-size: 116;
  }

  .hero__text-box-2 {
    --_inset-inline-start: 270;
    --_inset-block-end: -46;
  }

  .hero__media {
    --_inline-size: 586;
    --_margin-block-start: 100;
  }
}





/* lineup
-------------------------------------------------------------------------------- */
.lineup__boxs {
  display: grid;
  row-gap: calc(16 * var(--rem));
  margin-inline: auto;
  margin-block-end: calc(32 * var(--rem));
}

.lineup__box {
  inline-size: 100%;
}

.lineup__box.\--1 {
  text-align: center;
}

.lineup__box.\--2 {
  position: relative;
  padding: 1em;
  padding-inline-start: calc(1.5em + (38 * var(--rem)));
}

.lineup__box.\--2::before {
  position: absolute;
  inset-inline-start: 1em;
  inset-block: 0;
  inline-size: calc(38 * var(--rem));
  block-size: calc(36 * var(--rem));
  margin: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 36'%3E%3Cpath fill='%23e55499' d='M8.112 35.349a.592.592 0 0 1-.582-.7l2.242-11.883-8.8-8.293a.592.592 0 0 1 .331-1.018l11.991-1.54L18.467.989a.592.592 0 0 1 1.07 0l5.169 10.928 11.991 1.539a.592.592 0 0 1 .331 1.018l-8.8 8.293 2.245 11.883a.592.592 0 0 1-.866.629l-10.605-5.8-10.605 5.8a.6.6 0 0 1-.284.073'/%3E%3C/svg%3E%0A");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}

.lineup__box .yellow {
  color: #fff61a;
}

.lineup__inner {
  display: flex;
  flex-wrap: wrap;
  margin-inline: auto;
}

@media (width < 48rem) {
  .lineup__boxs {
    inline-size: calc(352 * var(--rem));
  }

  .lineup__inner {
    gap: calc(20 * var(--rem)) calc(12 * var(--rem));
    inline-size: calc(352 * var(--rem));
  }
}

@media (width >= 48rem) {
  .lineup__boxs {
    inline-size: calc(412 * var(--rem));
  }

  .lineup__inner {
    gap: calc(24 * var(--rem)) calc(16 * var(--rem));
    inline-size: calc(412 * var(--rem));
  }
}





/* misc
-------------------------------------------------------------------------------- */
.misc__foot-image {
  margin-inline: auto;
}

.misc__foot-image.is-playing {
  animation: slime .6s ease-in-out;
}

.misc__foot-body {
  position: relative;
  inline-size: fit-content;
  margin-inline: auto;
}

.misc__foot-box.\--2 {
  position: absolute;
  display: grid;
  row-gap: .25em;
}

@media (width < 48rem) {
  .misc__foot-image {
    inline-size: calc(180 * var(--rem));
    margin-block: calc(36 * var(--rem)) calc(6 * var(--rem));
  }

  .misc__foot-box.\--1 {
    margin-inline-end: calc(66 * var(--rem));
  }

  .misc__foot-box.\--2 {
    inset-inline-end: calc(-48 * var(--rem));
    inset-block-end: calc(-40 * var(--rem));
  }
}

@media (width >= 48rem) {
  .misc__foot-image {
    inline-size: calc(180 * var(--rem));
    margin-block: calc(64 * var(--rem)) calc(13 * var(--rem));
  }

  .misc__foot-box.\--1 {
    margin-inline-end: calc(90 * var(--rem));
  }

  .misc__foot-box.\--2 {
    inset-inline-end: calc(-46 * var(--rem));
    inset-block-end: calc(-46 * var(--rem));
  }
}





/* campaign
-------------------------------------------------------------------------------- */
.campaign__items {
  display: grid;
  font-weight: 700;
}

.campaign__item {
  display: grid;
  grid-template-rows: max-content 1fr auto;
  row-gap: 1em;
  padding-block-end: 2em;
}

.campaign__item-head {
  display: grid;
  grid-template-columns: calc(80 * var(--rem)) 1fr;
  align-items: center;
  column-gap: calc(10 * var(--rem));
  font-size: calc(18 * var(--rem));
  color: var(--color-02);
}

.campaign__item-image {
  border-radius: calc(5 * var(--rem));
}

.campaign__item-body {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: 1lh;
}

.campaign__item-text {
  font-feature-settings: "halt" 1;
  text-align: justify;
}

.campaign__item-period {
  color: var(--color-02);
}

@media (width < 48rem) {
  .campaign {
    padding-block-end: calc(64 * var(--rem));
  }

  .campaign__items {
    row-gap: 1rem;
  }
}

@media (width >= 48rem) {
  .campaign {
    padding-block-end: calc(80 * var(--rem));
  }

  .campaign__items {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(24 * var(--rem)) calc(12 * var(--rem));
  }

  .campaign__item {
    inline-size: calc(334 * var(--rem));
  }

  .campaign__item.\--md-single {
    grid-column: span 2;
  }
}





/* information
-------------------------------------------------------------------------------- */
.information__inner {
  background-color: #afd18b99;
}

.information__body {
  display: grid;
  justify-items: center;
  row-gap: 1lh;
}

.information__button-wrapper {
  display: grid;
  row-gap: calc(20 * var(--rem));
}

@media (width < 48rem) {
  .information__inner {
    padding-block: calc(64 * var(--rem));
  }
}

@media (width >= 48rem) {
  .information__inner {
    padding-block: calc(80 * var(--rem));
  }
}





/* override
-------------------------------------------------------------------------------- */
#header #logoBlc img {
  inline-size: 120px;
}

@media (width < 48rem) {
  #header #logoBlc .originally-h1 {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    padding: 0;
    transform: translateY(-50%);
  }

  #header #logoBlc img {
    inline-size: 100%;
  }
}

#fLnkBlc .wrapper2022 .bnr_txt {
  display: grid;
  inline-size: min(100% - calc(40 * var(--rem)), 1000px);
}

#fLnkBlc .wrapper2022 .bnr_txt .box {
  inline-size: 100%;
  block-size: calc(80 * var(--rem));
}

#fLnkBlc .wrapper2022 .flxB.bnr_txt > div.bnr_coupon a,
#fLnkBlc .wrapper2022 .flxB.bnr_txt > div a {
  all: revert;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding-inline: calc(18 * var(--rem));
  font-weight: 700;
  font-size: calc(16 * var(--rem));
  text-decoration: none;
  color: #ca0336;
  border: 1px solid #e2e2e2;
  border-radius: calc(8 * var(--rem));
  background-color: #fff;
  background-position: calc(18 * var(--rem)) 50%, right calc(22 * var(--rem)) top 50%;
  background-repeat: no-repeat;
  background-size: calc(48 * var(--rem)) auto, calc(12 * var(--rem)) calc(20 * var(--rem));
}

#fLnkBlc .wrapper2022 .flxB > div a span,
#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_service a span,
#fLnkBlc .wrapper2022 .flxB.bnr_txt > div.bnr_coupon a span {
  all: revert;
  inline-size: fit-content;
  padding-inline-start: calc(64 * var(--rem));
  line-height: 1.2;
  text-align: center;
}

#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_qa a      { background-image: url(/shimamura/lib6/images/common/icon_qa.svg), url(/shimamura/lib6/images/common/icon_arrwR.svg); }
#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_service a { background-image: url(/shimamura/lib6/images/common/icon_service.svg), url(/shimamura/lib6/images/common/icon_arrwR.svg); }
#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_coupon a  { background-image: url(/shimamura/lib6/images/common/icon_coupon.svg), url(/shimamura/lib6/images/common/icon_arrwR.svg) !important; }

@media (width < 48rem) {
  #fLnkBlc .wrapper2022 .bnr_txt {
    row-gap: 1em;
  }

  #fLnkBlc .wrapper2022 .flxB.bnr_txt > div.bnr_coupon a,
  #fLnkBlc .wrapper2022 .flxB.bnr_txt > div a {
    inline-size: calc(349 / 375 * 100vw);
    font-size: calc(20 / 375 * 100vw);
  }

  #fLnkBlc .wrapper2022 .flxB > div.bnr_coupon a span img {
    inline-size: calc(152 / 375 * 100vw);
    block-size: auto;
    translate: 0 calc(2 / 375 * 100vw);
  }
}

@media (width >= 48rem) {
  #fLnkBlc .wrapper2022 .bnr_txt {
    grid-template-columns: repeat(3, 1fr);
  }

  #fLnkBlc .wrapper2022 .bnr_txt .box.bnr_qa a,
  #fLnkBlc .wrapper2022 .bnr_txt .box.bnr_service a {
    font-size: calc(20 * var(--rem));
  }

  #fLnkBlc .wrapper2022 .bnr_txt .box.bnr_coupon a span {
    padding-inline-start: calc(60 * var(--rem)) !important;
  }
}

.fade {
  transition-timing-function: linear(0, 0.0167, 0.0334, 0.0499, 0.0663, 0.0826, 0.0987, 0.1148, 0.1307, 0.1465, 0.1622, 0.1778, 0.1933, 0.2086, 0.2238, 0.2389, 0.2539, 0.2688, 0.2835, 0.2981, 0.3126, 0.327, 0.3413, 0.3554, 0.3694, 0.3833, 0.397, 0.4106, 0.4241, 0.4375, 0.4508, 0.4639, 0.4769, 0.4897, 0.5025, 0.5151, 0.5275, 0.5399, 0.5521, 0.5641, 0.5761, 0.5879, 0.5995, 0.6111, 0.6225, 0.6337, 0.6448, 0.6558, 0.6667, 0.6774, 0.6879, 0.6983, 0.7086, 0.7187, 0.7287, 0.7385, 0.7482, 0.7578, 0.7672, 0.7764, 0.7855, 0.7944, 0.8032, 0.8118, 0.8203, 0.8286, 0.8367, 0.8447, 0.8525, 0.8602, 0.8677, 0.875, 0.8822, 0.8892, 0.896, 0.9026, 0.9091, 0.9153, 0.9214, 0.9273, 0.9331, 0.9386, 0.9439, 0.949, 0.954, 0.9587, 0.9632, 0.9675, 0.9716, 0.9755, 0.9791, 0.9825, 0.9856, 0.9885, 0.9911, 0.9935, 0.9955, 0.9972, 0.9986, 0.9996, 1);
}





/* fx
-------------------------------------------------------------------------------- */
[data-hover="button"] {
  color: var(--_data-hover-color-1);
  background-color: var(--_data-hover-color-2);
  transition-property: color, background-color;
  transition-timing-function: linear;
  /* backface-visibility: hidden; */
}

@media (any-hover: hover) {
  [data-hover] {
    transition-duration: var(--duration);
  }

  [data-hover="opacity"] {
    transition-property: opacity;
  }

  [data-hover="opacity"]:is(:hover, :focus-visible) {
    opacity: .5;
  }

  [data-hover="button"]:is(:hover, :focus-visible) {
    color: var(--_data-hover-color-2);
    background-color: var(--_data-hover-color-1);
  }
}

@keyframes flash {
  0%  { opacity: 1; }
  50% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes slime {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(4px) scale(1.04, 0.96); }
  50% { transform: translateY(0) scale(0.98, 1.02); }
  75% { transform: translateY(2px) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes momonja-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes monster-float {
  0%, 100% {
    translate: 0 calc(-8 * var(--rem));
    rotate: 8deg;
    /* scale: .99 1.02; */
  }

  11% {
    translate: calc(4 * var(--rem)) calc(6 * var(--rem));
    rotate: -4deg;
    /* scale: 1.02 .98; */
  }

  20% {
    translate: calc(6 * var(--rem)) calc(10 * var(--rem));
    rotate: -8deg;
    /* scale: 1.04 .96; */
  }

  34% {
    translate: calc(9 * var(--rem)) calc(-2 * var(--rem));
    rotate: 0deg;
    /* scale: 1 1; */
  }

  46% {
    translate: calc(10 * var(--rem)) calc(-10 * var(--rem));
    rotate: 6deg;
    /* scale: .99 1.03; */
  }

  63% {
    translate: calc(5 * var(--rem)) calc(6 * var(--rem));
    rotate: 10deg;
    /* scale: 1.02 .98; */
  }

  71% {
    translate: calc(2 * var(--rem)) calc(10 * var(--rem));
    rotate: 14deg;
    /* scale: 1.04 .96; */
  }

  80% {
    translate: 0 calc(5 * var(--rem));
    rotate: 12deg;
    /* scale: 1.01 .99; */
  }

  91% {
    translate: calc(-2 * var(--rem)) calc(-7 * var(--rem));
    rotate: 9deg;
    /* scale: .99 1.02; */
  }
}






/* utilities
-------------------------------------------------------------------------------- */
.font-noto { font-family: "Noto Sans JP"; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.text-10 { font-size: calc(10 * var(--rem)); }
.text-11 { font-size: calc(11 * var(--rem)); }
.text-12 { font-size: calc(12 * var(--rem)); }
.text-14 { font-size: calc(14 * var(--rem)); }
.text-17 { font-size: calc(17 * var(--rem)); }
.text-20 { font-size: calc(20 * var(--rem)); }
.text-26 { font-size: calc(26 * var(--rem)); }

@media (max-width: 767.98px) {
  .sm-block        { display: block; }
  .sm-flex         { display: flex; }
  .sm-grid         { display: grid; }
  .sm-inline-block { display: inline-block; }
  .sm-contents     { display: contents; }
  .sm-hidden       { display: none; }

  .sm-text-10 { font-size: calc(10 * var(--rem)); }
  .sm-text-11 { font-size: calc(11 * var(--rem)); }
  .sm-text-12 { font-size: calc(12 * var(--rem)); }
  .sm-text-14 { font-size: calc(14 * var(--rem)); }
  .sm-text-17 { font-size: calc(17 * var(--rem)); }
  .sm-text-18 { font-size: calc(18 * var(--rem)); }
  .sm-text-20 { font-size: calc(20 * var(--rem)); }
  .sm-text-24 { font-size: calc(24 * var(--rem)); }
}

@media (min-width: 768px) {
  .md-block        { display: block; }
  .md-flex         { display: flex; }
  .md-grid         { display: grid; }
  .md-inline-block { display: inline-block; }
  .md-contents     { display: contents; }
  .md-hidden       { display: none; }

  .md-text-11 { font-size: calc(11 * var(--rem)); }
  .md-text-12 { font-size: calc(12 * var(--rem)); }
  .md-text-14 { font-size: calc(14 * var(--rem)); }
  .md-text-15 { font-size: calc(15 * var(--rem)); }
  .md-text-18 { font-size: calc(18 * var(--rem)); }
  .md-text-21 { font-size: calc(21 * var(--rem)); }
  .md-text-26 { font-size: calc(26 * var(--rem)); }
  .md-text-28 { font-size: calc(28 * var(--rem)); }
}