/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

html {
  font-size:10px;
  scroll-behavior:smooth;
}

body {
  font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'MS PMincho', 'MS Mincho', serif;
  font-weight: 200;
  font-size:1.4rem;
  background:#000;
  color: #000;
}

img {
  max-width: 100%;
}

p {
  margin:0;
}

a {
  text-decoration: none;
}

.btn-reserve {
  display:flex;
  position:relative;
  color:#fff;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  font-size:3rem;
  width:23rem;
  height:6.2rem;
  text-shadow: rgba(0,0,0,.8) 0 0 .5rem, #000 0 0 .3rem;
  background:linear-gradient(160deg, rgba(25,128,141,.9) 0%, rgba(167,153,140,.9) 90%);
  box-shadow: .5rem .5rem 0 rgba(0,0,0,.5);
  z-index:0;
}

.btn-reserve.steam img {
  width:3.7rem;
  margin-right:1.5rem;
  filter: drop-shadow(0 0 .3rem rgba(0,0,0,.7));
}

.btn-reserve:hover {
  background:linear-gradient(160deg, rgba(30,98,75,.85) 0%, rgba(202,158,73,.85) 90%);
  box-shadow: .5rem .5rem 0 rgba(0,0,0,.5), inset 0 0 1.6rem #ff9936;
}

.swiper {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.gallery-swiper {
  width: 100%;
  aspect-ratio: 1400/875;
  background:rgba(0,0,0,.5);
  margin:2rem 0;
}

.gallery-swiper .swiper-slide {
  position:relative;
}

.gallery-swiper .swiper-slide span {
  font-size:3rem;
  color:#fff;
  position: absolute;
  bottom:10%;
  left:0;
  right:0;
  margin:0 auto;
  width:100%;
  text-align: center;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-weight:normal;
  text-shadow: .1rem .1rem 1rem rgba(0,0,0,.3), .1rem .1rem .3rem rgba(0,0,0,1);
}

.gallery-thumb {
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumb .swiper-slide {
  width: 25%;
  height: 100%;
  filter: brightness(.6);
  transition:filter .5s ease;
}

.gallery-thumb .swiper-slide-thumb-active {
  filter: brightness(1);
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-ctrl {
  height:100%;
  aspect-ratio: 1/1;
  background-color:rgba(0,0,0,.3);
  box-sizing: border-box;
  border: .2rem solid #fff;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  cursor: pointer;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-ctrl:hover {
  background-color:rgba(0,0,0,.3);
  box-shadow: 0 0 3rem #2ea796 inset;
  border-color:#57f9a7;
}

.top-menu {
  position:fixed;
  z-index:1;
  height:8rem;
  top:3rem;
  right:6rem;
  display: flex;
  justify-content: space-between;
  z-index:3;
}

.top-menu .btn-ctrl {
  margin-right:1rem;
}

.top-menu .music {
  background-image: url(../images/global/btn_bgm_off.png);
}

.top-menu .music.active {
  background-image: url(../images/global/btn_bgm_on.png);
}

.top-menu .menu {
  background-image: url(../images/global/btn_icon_menu.png);
}

.top-menu .active {
  background-image: url(../images/global/btn_icon_close.png);
}

.top-menu .lang {
  background-image: url(../images/global/btn_icon_cn.png);
}

nav {
  position:fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top:0;
  bottom:0;
  right:0;
  width:40rem;
  background:linear-gradient(to bottom, rgba(0,46,61,.7), rgba(222,200,147,.7));
  z-index:2;
  box-sizing: border-box;
  padding-left:5rem;
  font-size:3rem;
  translate:100% 0;
  transition:translate .5s ease;
}

nav.active {
  translate:0 0;
}

nav a {
  color:#fff;
  margin-bottom:3rem;
}

.section, .combine {
  width:100%;
  display: flex;
  flex-direction: column;
}

.section .title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height:18rem;
  margin:3rem auto;
}

.section .title img {
  height:100%;
}

.section .center-wrap {
  position:relative;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  flex:1;
  margin:0 auto;
  width:140rem;
  max-width:88%;
}

.showcase {
  display: flex;
  flex-direction: column;
  width:100%;
  height:100%;
  box-sizing: border-box;
  background:#ccc;
}

.showcase .frame {
  display: flex;
  align-items: center;
  overflow: auto;
  box-sizing: border-box;
  width:100%;
  height:100%;
}

.showcase .frame.inited::-webkit-scrollbar {
  display: none;
}

.showcase .frame .items-wrap {
  display: flex;
  align-items: center;
  height:100%;
  cursor: pointer;
}

.showcase .reward {
  position: relative;
  display: flex;
  flex-direction: column;
  margin:0 2rem;
  height:90%;
  margin-top:2rem;
}

.showcase .reward .pic {
  position: relative;
  height:25rem;
  width:35.7rem;
  font-size: 0;
}

.showcase .reward .name {
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  line-height: 1.3;
  color:#fff;
  font-size:2.3rem;
  box-sizing: border-box;
  font-weight:normal;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
}

.showcase .scrollbar {
  background:#35407e;
  box-sizing: border-box;
  height:2.5rem;
  display: flex;
  overflow: hidden;
}

.showcase .scrollbar .track {
  flex:1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.showcase .scrollbar .thumb {
  width:30%;
  height:2.5rem;
  cursor: pointer;
  background:#1e2442;
}

#main {
  width: 100%;
  min-width:140rem;
  max-width:260rem;
  margin:0 auto;
  position:relative;
}

#main:before,
#main:after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:4rem;
  background:url(../images/global/deco.png) repeat-y center/100%;
  z-index:1;
}

#main:before {
  left:0;
}

#main:after {
  right:0;
}

.top {
  position:relative;
  aspect-ratio: 16 / 9;
  background: url(../images/top/top_bg.jpg) no-repeat center/cover;
}

.top > * {
  position: absolute;
}

.top .logo {
  width:46%;
  top:25%;
  left:5%;
}

.top .logo img,
.top .slogan img,
.top .pv img {
  width:100%;
}

.top .slogan {
  bottom:12%;
  width:38%;
  right:5%;
}

.top .pv {
  width:22%;
  bottom:12%;
  left:8%;
}

.top .pv .pv-img {
  display: flex;
  position: relative;
}

.top .pv .pv-img img {
  filter: brightness(.8);
}

.top .pv .pv-img:before, .top .pv .pv-img:after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:30%;
  aspect-ratio: 1/1;
  margin:auto;
  background-image: url(../images/top/top_btn_play.png);
  background:url(../images/top/top_btn_play.png) no-repeat 0 center/cover;
  transition: transform .5s ease, opacity .5s ease;
  z-index:1;
}

.top .pv .pv-img:after {
  opacity:0;
  background:url(../images/top/top_btn_play.png) no-repeat 100% center/cover;
}

.top .pv:hover .pv-img:before, .top .pv:hover .pv-img:after {
  transform: scale(1.1);
}

.top .pv:hover .pv-img:after {
  opacity:1;
}

.top .links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:25%;
  width:auto;
  bottom:12%;
  left:32%;
}

.top .links > * {
  margin-bottom:15%;
}

.top .links > *:last-child {
  margin-bottom:0;
}

.section.story {
  position: relative;
}

.section.story .title {
  margin-top:-8rem;
}

.section.story .video-bg {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow: hidden;
  z-index:-1;
}

.section.story .video-bg:before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:#000;
  opacity:.7;
  z-index:1;
}

.section.story .video-bg:after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  opacity:.7;
  z-index:1;
}

#story-bg {
  position:absolute;
  left:50%;
  top:50%;
  translate: -50% -50%;
  min-height:100%;
  min-width:100%;
}

.section.story .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size:3rem;
  margin-top:3rem;
  box-sizing: border-box;
  margin-bottom:7rem;
}

.section.story .text p {
  margin:.8rem 0;
  text-align: center;
  line-height:1.8;
}

.section.story .text strong {
  font-size:3.8rem;
  color:#07695c;
}

.section.keywords {
  padding:10rem 0 5rem 0;
  background:#282125;
  background:linear-gradient(165deg, #5b757f, #292125, #d0b695);
  height:70rem;
}

.section.keywords .keyword-list {
  position:relative;
  display: flex;
  flex-direction: row;
}

.section.keywords .keyword-list > div {
  width:32.6%;
  transition: box-shadow .5s ease;
}

.section.keywords .keyword-list > div .img {
  border:1.2rem solid #fff;
  box-shadow: 0 0 2.5rem rgba(0,0,0,.7);
  cursor: pointer;
  font-size:0;
}

.section.keywords .keyword-list > div .img img {
  object-fit: cover;
  width:100%;
  height:100%;
}

.section.keywords .keyword-list > div.selected .img {
  box-shadow: 0 0 2.5rem #fff000;
}

.section.keywords .keyword-list .the-end .img {
  transform: rotate(-4deg);
}

.section.keywords .keyword-list .flood .img {
  transform: rotate(4deg);
  translate: 4% 16%;
}

.section.keywords .keyword-list .ice-age .img {
  transform: rotate(-1deg);
  translate: 0 -2%;
}

.section.keywords .keyword-list .name {
  font-size:4.2rem;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
}

.section.keywords .keyword-list .name:before {
  content:'';
  background:#fff;
  width:1rem;
  height:1rem;
  border-radius: .5rem;
  margin-right:1.5rem;
}

.section.keywords .keyword-list .the-end .name {
  margin-top:6%;
}

.section.keywords .keyword-list .flood .name {
  margin-top:-77%;
}

.section.keywords .keyword-list .ice-age .name {
  margin-top:3%;
}

.section.keywords .keyword-list .description {
  position:absolute;
  top:66%;
  bottom:0;
  width:100%;
  left:0;
  font-size:3.5rem;
  color:#fff;
  line-height: 1.7;
  opacity:0;
  z-index:0;
  transition: opacity .5s ease;
}

.section.keywords .keyword-list > .selected .description {
  opacity:1;
  z-index:1;
}

.section.chara {
  background:
    radial-gradient(circle at 0 0, #8b857e 0%, transparent 20%),
    radial-gradient(circle at 100% 0, #8b857e 0%, transparent 20%),
    radial-gradient(circle at 0 100%, #8b857e 0%, transparent 20%),
    radial-gradient(circle at 100% 100%, #8b857e 0%, transparent 20%),
  #fcfcfa;
}

.section.chara .chara-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  aspect-ratio: 1/.49;
  margin:6rem 0 15rem 0;
}

.section.chara .chara-list > div {
  width:23.5%;
  aspect-ratio: 1/1;
  font-size:0;
  cursor: pointer;
  position:relative;
}

.section.chara .chara-list > div:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:linear-gradient(to right bottom, #ffed53, #f9ee5f, #34ffd6);
  opacity:0;
  transition:opacity .5s ease;
}

.section.chara .chara-list > div:hover:before {
  opacity:.5;
}

.section.chara .chara-list > div:after {
  content:'';
  position:absolute;
  width:30%;
  aspect-ratio: 1/1;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:auto;
  background:url(../images/chara/chara_icon_plus.png) no-repeat center/100%;
  opacity:0;
  transition:opacity .5s ease;
}

.section.chara .chara-list > div:hover:after {
  opacity:1;
}

.section.chara .chara-list > div span {
  position: absolute;
  bottom:4%;
  right:4%;
  font-size:3rem;
  line-height:1;
  color:#fff;
}

.section.gallery {
  background:url(../images/gallery/gallery_bg.jpg) no-repeat top center/cover;
}

.section.gallery {
  padding-bottom: 20rem;
}

.section.spin {
  aspect-ratio: 10/5;
  position: relative;
  box-shadow: 0 0 1rem rgba(0,0,0,.5);
  background:#fff url(../images/spin/spin_bg.jpg) no-repeat bottom center/cover;
}

.section.spin .title {
  margin-top:-8rem;
}

.section.spin .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:6.5rem;
  color:#fff;
  margin-top:-5rem;
  text-shadow: 0 0 3rem rgba(85,38,79,.7), 0 0 3rem rgba(85,38,79,.7);
}

.section.spin .text .line-en {
  margin-bottom:3rem;
  letter-spacing: .8rem;
  margin-left:1rem;
}

.section.spin .text .line-kj {
  letter-spacing: 3rem;
  margin-left:3rem;
}

.combine {
  background:url(../images/global/combine_bg.jpg) no-repeat bottom center/cover;
}

.section.special {
  color:#fff;
  padding-bottom:18rem;
}

.section.special .lsp,
.section.special .modian {
  box-sizing: border-box;
  padding:3rem;
}

.section.special .lsp {
  background:url(../images/special/special_lsp_bg.png) no-repeat right top/cover;
}

.section.special .subtitle {
  font-weight: bold;
  font-size:4.2rem;
  line-height:1;
  height:8rem;
  display: flex;
  align-items: center;
  margin-bottom:2rem;
  text-shadow: 0 0 1rem #000;
}

.section.special .subtitle img {
  height:100%;
  margin-right:1rem;
}

.section.special .intro .main {
  font-size:5rem;
}

.section.special .intro .sub {
  font-size:2.4rem;
  margin-top:1rem;
}

.section.special .lsp .gift-frame {
  background:linear-gradient(to bottom, #1e4688, #4f5392);
  height:40rem;
}

.section.special .lsp .guide-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:auto;
  box-sizing: border-box;
  padding:0 2.5rem;
  margin-top:3rem;
}

.section.special .lsp .guide-wrap .intro {
  flex:1;
}

.section.special .lsp .guide-wrap .intro .reserve-status {
  font-size:2.6rem;
  margin-top:2rem;
  background:linear-gradient(to right, transparent, #333c98, transparent);
  height:5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width:70%;
}

.section.special .lsp .guide-wrap .intro .reserve-status .reserve-count {
  font-weight:normal;
  font-size:3rem;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
  margin:0 1rem;
}

.section.special .lsp .guide-wrap .guide {
  display: flex;
  flex-direction: column;
  width:68rem;
}

.section.special .lsp .guide-wrap .guide .step {
  display: flex;
  justify-content: flex-end;
  margin-bottom:2rem;
}

.section.special .lsp .guide-wrap .guide .step:last-child {
  margin-bottom:0;
}

.section.special .lsp .guide-wrap .guide .step .order {
  position:relative;
  width:7rem;
  display: flex;
  justify-content: flex-end;
  font-size:4.5rem;
  z-index:1;
  font-style: italic;
}

.section.special .lsp .guide-wrap .guide .step .order:before {
  content:'STEP';
  position:absolute;
  font-size:1.8rem;
  padding:.1rem 0 .1rem .3rem;
  left:0;
  top:2.5rem;
  width:7rem;
  background: linear-gradient(to right, #33399b 30%, transparent 100%);
  display: flex;
  align-items: center;
  line-height:1;
  z-index:-1;
  font-style: normal;
}

.section.special .lsp .guide-wrap .guide .step .text {
  flex:1;
  font-size:2rem;
  display: flex;
  align-items: center;
  margin-left:2rem;
  margin-right:2rem;
}

.section.special .modian {
  background:url(../images/special/special_modian_bg.png) no-repeat right top/cover;
  margin-top:3rem;
}

.section.special .modian .flex {
  display: flex;
  height:44rem;
}

.section.special .modian .sample {
  width:50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.special .modian .sample img {
  height:100%;
  width:100%;
  object-fit: contain;
}

.section.special .modian .intro {
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section.special .modian .btn-modian {
  color:#000;
  background:#40cba4;
  display: flex;
  justify-content: center;
  align-items: center;
  width:70%;
  min-width:40rem;
  height:8rem;
  border-radius: 1.5rem;
  font-size:2.6rem;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
  font-weight:300;
  margin-top:4rem;
  box-shadow: .3rem .5rem 0 rgba(0,0,0,.7);
}

.section.staff {
  background:linear-gradient(to right bottom, rgba(10,59,55,.85), rgba(7,33,21,.85), rgba(10,58,39,.85));
  box-shadow: 0 0 2rem rgba(0,0,0,.9);
  padding-bottom:5rem;
}

.section.staff .title {
  margin-top:-8rem;
}

.section.staff .staff-line {
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  flex-wrap: wrap;
  margin:2rem 0;
}

.section.staff .staff-line.division {
  margin-top:5rem;
}

.section.staff .staff-line.main {
  margin:8rem 0;
}

.section.staff .staff-line .item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right:6rem;
}

.section.staff .staff-line.narrow .item {
  margin-right:4rem;
}

.section.staff .staff-line .item:last-child {
  margin-right:0;
}

.section.staff .staff-line .item .pos {
  position: relative;
  font-size:2.6rem;
  height:3rem;
  z-index:0;
  min-width:8rem;
  margin-right:2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.staff .staff-line .item .pos:before {
  content:'';
  position: absolute;
  height:3rem;
  left:-1rem;
  right:-1rem;
  bottom:-.5rem;
  margin:auto;
  background:url(../images/staff/staff_item_bg_1.png) no-repeat center/100% 100%;
  z-index:-1;
}

.section.staff .staff-line .item .pos.deco3:before {
  height:3.5rem;
  background:url(../images/staff/staff_item_bg_2.png) no-repeat center/100% 90%;
}

.section.staff .staff-line .item .name {
  font-size:4.8rem;
  text-shadow: 0 0 1.2rem #cde4b7, .5rem .8rem .5rem rgba(0,0,0,.7);
  letter-spacing: .2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section.staff .staff-line .item .name span {
  margin-right:3.5rem;
}

.section.staff .staff-line .item .name span:last-child {
  margin-right:0;
}

.section.footer {
  padding:6rem 0;
}

.section.footer .logos {
  display: flex;
  justify-content: center;
  width:100%;
  height:10rem;
}

.section.footer .logos img {
  width:100%;
  height:100%;
  object-fit: contain;
}

.section.footer .logos > * {
  margin-right:6rem;
}

.section.footer .logos > *:last-child {
  margin-right:0;
}

.section.footer .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
  font-weight:normal;
  font-size:1.8rem;
  margin-top:6rem;
}

.section.footer .text > * {
  margin-bottom:1rem;
}

.section.footer .text > *:last-child {
  margin-bottom:0;
}

.chara-page {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:#000 url(../images/chara/chara_bg2.jpg) no-repeat center top/cover;
  z-index:10;
  overflow:auto;
  min-width:140rem;
  visibility: hidden;
  opacity:0;
  transition: visibility .5s ease, opacity .5s ease, filter .5s ease;
  filter:blur(2rem);
}

.chara-page.active {
  visibility:visible;
  opacity:1;
  filter: blur(0);
}

.chara-page .close-page {
  position:fixed;
  width:6rem;
  height:6rem;
  background:rgba(255,255,255,.5) url(../images/global/btn_icon_close.png) no-repeat center/100%;
  z-index:1;
  top:3rem;
  right:3rem;
  cursor: pointer;
  border:.1rem solid #fff;
}

.chara-page .chara-wrap {
  position: relative;
  margin-bottom:30rem;
}

.chara-page .center-wrap {
  max-width:140rem;
  margin:0 auto;
  position: relative;
  box-sizing: border-box;
  padding:0 3rem;
}

.chara-page .top-wrap {
  position: relative;
}

.chara-page .top-wrap .cg {
  height:80rem;
}

.chara-page .chara-wrap.chara-1 .top-wrap .cg {
  background: url(../images/chara/chara01_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-2 .top-wrap .cg {
  background: url(../images/chara/chara02_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-3 .top-wrap .cg {
  background: url(../images/chara/chara03_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-4 .top-wrap .cg {
  background: url(../images/chara/chara04_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-5 .top-wrap .cg {
  background: url(../images/chara/chara05_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-6 .top-wrap .cg {
  background: url(../images/chara/chara06_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-7 .top-wrap .cg {
  background: url(../images/chara/chara07_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-8 .top-wrap .cg {
  background: url(../images/chara/chara08_cg.jpg) no-repeat center/cover;
}
.chara-page .chara-wrap.chara-9 .top-wrap .cg {
  background: url(../images/chara/chara09_cg.jpg) no-repeat center/cover;
}

.chara-page .top-wrap .cg .stand {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  z-index:1;
  height:100rem;
  right:10%;
  top:-5rem;
}

.chara-page .chara-wrap.chara-8 .top-wrap .cg .stand img {
  translate: 6rem 0;
}

.chara-page .top-wrap .cg .stand img {
  height:100%;
  margin-right:12rem;
  object-fit: contain;
}

.chara-page .top-wrap .avatar {
  height:40rem;
  width:100%;
  font-size: 0;
}

.chara-page .top-wrap .avatar img {
  height:100%;
  aspect-ratio: 1100/920;
  object-fit: contain;
  position:relative;
  z-index: 2;
}

.chara-page .sayings {
  background:#000;
  color:#fff;
  writing-mode: vertical-lr;
  height:auto;
  position:absolute;
  font-size:3rem;
  padding:1.5rem .5rem;
}

.chara-page .chara-wrap.chara-1 .sayings {
  background:#a03343;
}

.chara-page .chara-wrap.chara-2 .sayings {
  background:#fee340;
  color:#000;
}

.chara-page .chara-wrap.chara-3 .sayings {
  background:#1a4991;
}

.chara-page .chara-wrap.chara-4 .sayings {
  background:#50832c;
}

.chara-page .chara-wrap.chara-5 .sayings {
  background:#4b2f7b;
}

.chara-page .chara-wrap.chara-6 .sayings {
  background:#782235;
}

.chara-page .chara-wrap.chara-7 .sayings {
  background:#8f734f;
}

.chara-page .chara-wrap.chara-8 .sayings {
  background:#a97808;
}

.chara-page .sayings.saying-1 {
  top:0rem;
  right:0;
}

.chara-page .sayings.saying-2 {
  top:13rem;
  right:5rem;
}

.chara-page .chara-wrap.chara-5 .sayings.saying-2 {
  top:30rem;
}

.chara-page .chara-wrap.chara-6 .sayings.saying-2 {
  top:32rem;
}

.chara-page .chara-wrap.chara-7 .sayings.saying-2 {
  top:33rem;
}

.chara-page .chara-wrap.chara-8 .sayings.saying-2 {
  top:20rem;
}

.chara-page .intro {
  font-size:1.8rem;
  color:#fff;
  line-height:1.6;
  height:40rem;
  overflow: hidden;
  font-weight:normal;
  position:absolute;
  padding-left:53rem;
  padding-top:4rem;
  box-sizing: border-box;
  left:0;
  right:0;
  top:0;
  display: flex;
  flex-direction: column;
  z-index:1;
}

.chara-page .intro p {
  margin:.5rem 0;
}

.chara-page .intro .text {
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chara-page .voice-sample {
  display: flex;
  margin:2rem 0;
}

.chara-page .voice-sample .voice-play {
  cursor:not-allowed;
  filter:grayscale(1);
  opacity:.5;
  width:5rem;
  height:5rem;
  background: url(../images/chara/chara_btn_voice.png) no-repeat center/100%;
  margin-right:2rem;
}

.chara-page .voice-sample .voice-play:last-child {
  margin-right:0;
}

#reserve-success {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:999;
  display: flex;
  justify-content: space-between;
  transition: visibility .5s ease, opacity .5s ease;
  color:#252525;
  font-family: Arial, Helvetica, sans-serif, 'Microsoft YaHei', 'Microsoft JhengHei';
  font-size: 1.8rem;
  visibility: hidden;
  opacity: 0;
}

#reserve-success.active {
  visibility: visible;
  opacity:1;
}

#reserve-success .dialog {
  background: #fff;
  height:30rem;
  width:50rem;
  display: flex;
  flex-direction: column;
  margin:auto;
  box-sizing: border-box;
  padding:4rem;
}

#reserve-success .title {
  font-size:4rem;
  color: #d24f70;
}

#reserve-success .text {
  flex:1;
  margin:2rem 0;
  display: flex;
  align-items: center;
  line-height: 1.5;
}

#reserve-success .actions {
  color:#fff;
}

#reserve-success .actions > * {
  height:4rem;
  background:#d24f70;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#reserve-success .actions > *:hover {
  background:#c14464;
}

@media screen and (max-width: 1600px) {
  html {
    font-size:9px;
  }

  #main {
    min-width:130rem;
  }
}

@media screen and (max-width: 1420px) {
  html {
    font-size:8px;
  }
}

@media screen and (max-width: 1280px) {
  html {
    font-size:7px;
  }

  #main {
    min-width:80rem;
  }
}

@media screen and (max-width: 1120px) {
  .section.staff .staff-line .item {
    flex-direction: column;
  }

  .section.staff .staff-line .item .pos {
    margin-right:0;
    margin-bottom:2rem;
  }
}

@media screen and (max-width: 1020px) {
  .section.special .lsp .guide-wrap {
    flex-direction: column;
    width:100%;
    padding:0;
  }

  .section.special .lsp .guide-wrap .intro {
    text-align: center;
  }

  .section.special .lsp .guide-wrap .guide {
    margin-top:3rem;
    max-width:100%;
  }

  .section.special .lsp .guide-wrap .intro .reserve-status {
    width:100%;
  }

  .chara-page {
    min-width: unset;
  }
}

@media screen and (max-width: 930px) {
  .chara-page .top-wrap {
    height:auto;
  }

  .chara-page .center-wrap {
    width:93%;
  }

  .chara-page .intro {
    position:relative;
    color:#fff;
    line-height:1.6;
    flex-direction: column-reverse;
    padding-top:0;
    height:auto;
    margin-top:0;
    font-size:2.4rem;
    padding-left:0;
    text-shadow: .1rem .1rem .2rem #000;
  }

  .chara-page .top-wrap .cg img {
    height:100%;
  }
}

@media screen and (max-width: 885px) {
  .chara-page {
    width:100%;
    min-width:50rem;
  }

  .chara-page .top-wrap .cg .stand {
    right:1%;
    top:-15rem;
    height:100rem;
  }

  .chara-page .top-wrap .cg .stand img {
    margin-right:10%;
  }

  .chara-page .top-wrap .avatar {
    aspect-ratio: 10/3.8;
    height:auto;
  }

  .chara-page .sayings.saying-1 {
    top:5rem;
  }

  .chara-page .sayings.saying-2 {
    top:18rem;
  }
}

@media screen and (max-width: 800px) {
  #main {
    width:100%;
    min-width:400px;
    max-width: unset;
    overflow: hidden;
  }

  #main:before, #main:after {
    width:5%;
  }

  .section .title {
    height:14rem;
  }

  .top {
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height:100vh;
    min-height:180rem;
    box-sizing: border-box;
    padding-top:5%;
    padding-bottom:10%;
    background:url(../images/top/top_bg_mobile.jpg) no-repeat center/cover;
  }

  .top > * {
    position: static;
  }

  .top .logo {
    width:90%;
    max-width:73rem;
  }

  .top .slogan {
    margin:auto auto 0 auto;
    width:80%;
    max-width:68rem;
  }

  .top .pv {
    width:60%;
    max-width:63rem;
    margin-top:2rem;
  }

  .top .links {
    width:90%;
    height:auto;
    margin:3rem auto 0 auto;
    flex-direction: row;
  }

  .top .links > * {
    margin-bottom:unset;
    margin-right:5rem;
  }

  .top .links > *:last-child {
    margin-right:0;
  }

  .section.story .title {
    margin-top:4rem;
  }

  .section.keywords {
    height:auto;
  }

  .section.keywords .keyword-list {
    flex-direction: column;
  }

  .section.keywords .keyword-list > div {
    width:auto;
    margin-bottom:10%;
  }

  .section.keywords .keyword-list > div:last-child {
    margin-bottom:0;
  }

  .section.keywords .keyword-list .the-end .name,
  .section.keywords .keyword-list .flood .name,
  .section.keywords .keyword-list .ice-age .name {
    margin-top:5%;
  }

  .section.keywords .keyword-list > div.selected .img {
    box-shadow: 0 0 2.5rem rgba(0,0,0,.7);
  }

  .section.keywords .keyword-list .the-end .img,
  .section.keywords .keyword-list .flood .img,
  .section.keywords .keyword-list .ice-age .img {
    translate: unset;
  }

  .section.keywords .keyword-list .description {
    position:static;
    line-height: 1.6;
    opacity:unset;
    z-index:unset;
    margin-top:2rem;
    font-size:2.6rem;
  }

  .section.chara .chara-list {
    aspect-ratio: 1/2.04;
  }

  .section.chara .chara-list > div {
    width:48%;
  }

  .section.gallery {
    padding-bottom: 13rem;
  }

  .gallery-swiper .swiper-slide span {
    font-size:2.4rem;
  }

  .section.spin {
    aspect-ratio: unset;
    height:60rem;
  }

  .section.spin .text .line-en {
    letter-spacing: .3rem;
    margin-left:.6rem;
  }

  .section.spin .text {
    font-size:4rem;
  }

  .section.special .lsp,
  .section.special .modian {
    padding:2rem 3rem 5rem 3rem;
  }

  .section.special .lsp .guide-wrap .intro .reserve-status {
    width:100%;
  }

  .section.special .modian .flex {
    flex-direction: column;
    align-items: center;
    height:auto;
  }

  .section.special .modian .sample {
    width:90%;
  }

  .section.special .modian .intro {
    width:100%;
    margin-top:2rem;
  }

  .section.special .modian .intro .btn-modian {
    width:75%;
    font-size:3.8rem;
  }

  .section.staff .title {
    margin-top:3rem;
  }

  .section.staff .staff-group .item {
    width:50%;
    margin-bottom:6rem;
  }

  .section.staff .staff-group .item .pos {
    margin:0;
    font-size:2.4rem;
  }

  .section.staff .staff-group .item .name {
    font-size:3.4rem;
  }

  .section.footer .logos > * {
    height:8rem;
  }

  .section.footer .text {
    font-size:2.2rem;
  }
}

@media screen and (max-width: 720px) {
  .section.staff .staff-line .item {
    margin-right:4rem;
  }

  .section.staff .staff-line .item .pos {
    font-size:2.2rem;
  }

  .section.staff .staff-line .item .name {
    font-size:3.8rem;
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size:6px;
  }

  #main {
    min-width:60rem;
  }

  .chara-page {
    min-width:60rem;
  }

  .top {
    padding-top:15%;
    min-height:160rem;
  }

  .top .pv {
    width:80%;
  }

  .top .links > * {
    margin-right:5rem;
  }
}

@media screen and (max-width: 520px) {
  .section.spin .text .line-kj {
    letter-spacing: 1rem;
  }
  .section.staff .staff-line .item {
    margin-right:3rem;
  }

  .section.staff .staff-line .item .pos {
    font-size:2rem;
  }

  .section.staff .staff-line .item .name {
    font-size:3rem;
  }

  .section.staff .staff-line .item .name span {
    margin-right:2rem;
  }

  .section.footer .text {
    font-size: 2rem;
  }
}