@charset "UTF-8";

:root {
  --color-base: #f0efeb;
  --color-accent: #d43d26;
  --color-font: #141414;
  --color-link: #79b6d8;

  --space-s : 1em;
  --space-m : min(4vw, 40px);
  --space-mm: min(8vw, 80px);
  --space-l : min(12vw, 120px);
  --space-lx2 : min(24vw, 240px);

  --padding: 16px;
  --gap: 4px;

  --fts: 12px;

}

* {
  box-sizing: border-box;
}

html, body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
  line-height: 1.5;
  font-size: var(--fts);
}
html {
	scroll-behavior: smooth;
}
body {
  position: relative;
  color: #141414;
  background: black;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
body::before {
  position: fixed;
  display: block;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) center/cover no-repeat;
  z-index: -1;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  line-height: 1;
}
ul {
  list-style: none;
}
a {
  color: var(--color-link);
}

.c-container {
  padding: var(--space-l) 0;
}
.c-box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.c-inner {
  padding: 0 var(--padding);
}

.c-img-fluid {
  width: auto;
  max-width: 100%;
}

.c-update-history {
  max-width: 960px;
  padding: 2em;
  margin: var(--space-m) auto 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--padding) / 4);
  line-height: 1.3;
}
.c-update-history dt {
  color: var(--color-accent2);
  font-weight: bold;
}
.c-update-history dd {
  margin-top: 4px;
}

.c-dl {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  max-width: 766px;
  margin: 0 auto;
}
.c-dl__item {
  list-style: none;
  max-width: 140px;
  margin-right: 5px;
}

.c-dl__item:last-child {
  margin-right: 0;
}
.c-sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 220px;
  margin: 20px auto 0;
}
.c-sns__item {
  list-style: none;
}
.c-copy {
  font-size: 75%;
  text-align: center;
  padding: 1em 0;
  background: #79b6d8;
}

.p-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-base);
  z-index: 999;
}

.p-bnr-link {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: calc((20px * 1) + (640px * 2));
  margin: 0 auto;
  padding: 0 calc(var(--padding) * 2);
  gap: calc(var(--gap) * 2);
}
.p-bnr-link--val {
  grid-template-columns: 1fr;
  max-width: none;
}
.p-bnr-link__item {
  position: relative;
  width: min(100%, 640px);
  margin: auto;
  box-sizing: content-box;
}
.p-bnr-link__item--fluid {
  width: auto;
  max-width: 100%;
}

.p-navi {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--color-accent);
  z-index: 10;
}
.p-navi-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.p-navi-list__item {
  margin-left: 8px;
}
.p-navi-list__item:last-child {
  margin-left: 0;
}

.p-lineup {
  padding: var(--space-m) 0;
  background: #4a6275;
}
.p-set {
  margin-top: var(--space-mm);
  padding: var(--space-m) 0;
  background: #a793ac;
}
.p-set > a {
  display: block;
  width: auto;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.p-chara,
.p-others {
  background: var(--color-base);
}
.p-chara {
  padding-bottom: 0;
}
.p-dungeon {
  background: rgba(0, 0, 0, .2) url(../img/d-deco.png) center top/135% no-repeat;
}
.p-dungeon__item {
  margin-top: var(--space-m);
}
.p-dungeon__item--bnr {
  margin-top: 4px;
  -webkit-filter: drop-shadow(0 4px 0px #a793ac);
          filter: drop-shadow(0 4px 0px #a793ac);
  transform: translateZ(0);
}
.p-dungeon__more {
  display: block;
  width: min(80%, 928px);
  margin: var(--space-l) auto 0;
}

.p-others__item {
  width: auto;
  max-width: 1120px;
  margin: var(--space-mm) auto 0;
}
.p-others__item--login {
  position: relative;
}
.p-others__stamp {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 48.5%;
  transform: translate(-50%, -11%);
  border: 1px solid var(--color-font);
}

.p-footer {
  padding: 0;
  background: #79b6d8;
  padding-top: var(--space-m);
}
.p-dl__txt {
  font-size: 140%;
  font-weight: bold;
}

.p-dl__contents {
  margin-top: 0.5em;
}
.p-dl__notice {
  margin-top: 1em;
  text-align: center;
  font-size: 75%;
}
.p-back {
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  margin-top: 15px;
}
.p-back a {
  text-decoration: none;
  color: var(--color-font);
  margin: 0 auto;
}
.p-back a::before {
  display: inline-block;
  content: '';
  width: 0;
  height: 0;
  margin-right: 1.5em;
  border-right: 1.73em solid var(--color-font);
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  font-size: 40%;
}

.u-block { display: block !important; }

.u-align-c { text-align: center !important; }
.u-align-l { text-align: left !important; }
.u-align-r { text-align: right !important; }
.u-align-top    { vertical-align: top !important; }
.u-align-middle { vertical-align: middle !important; }
.u-align-bottom { vertical-align: bottom !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-mw-928 { max-width: 928px !important; }
.u-mw-1120 { max-width: 1120px !important; }

.u-mt0 { margin-top: 0 !important; }
.u-mt-s { margin-top: var(--space-s) !important; }
.u-mt-m { margin-top: var(--space-m) !important; }
.u-mt-mm { margin-top: var(--space-mm) !important; }
.u-mt-l { margin-top: var(--space-l) !important; }

.u-pt-xs { padding-top: calc(var(--padding) / 2) !important; }
.u-pb-xs { padding-bottom: calc(var(--padding) / 2) !important; }

.u-fs-75 { font-size: 75% !important; }
.u-fs-80 { font-size: 80% !important; }
.u-fs-125 { font-size: 125% !important; line-height: 0.75; }

@media (any-hover: hover) {
}

@media screen and (min-width: 641px){
  :root {
    --padding: 32px;
    --gap: 8px;
    --fts: 16px;
  }
  .c-box {
    width: min(80%, 1120px);
  }
  .p-navi-list__item {
    margin-left: 16px;
  }
  .p-navi-list__item:last-child {
    margin-left: 0;
  }
  .p-dungeon__item--bnr {
    margin-top: 8px;
    -webkit-filter: drop-shadow(0 8px 0px #a793ac);
            filter: drop-shadow(0 8px 0px #a793ac);
  }
  .p-others__stamp {
    border-width: 2px;
  }
}

@media screen and (min-width: 1024px){
  :root {
    --gap: 16px;
    --fts: 18px;
  }
  .p-dungeon {
    background-size: auto;
  }
}
@media screen and (min-width: 1440px){
  :root {
    --gap: 32px;
  }
  .p-bnr-link {
    gap: var(--gap);
  }
}