@charset "UTF-8";
/* Reset css */
/* ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
}
body::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

dt {
  font-weight: var(--font-bold);
}

b,
strong {
  font-weight: var(--font-bold);
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
}

th {
  text-align: left;
  font-weight: var(--font-bold);
}



/* Lenis */
/* ============================================ */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}



/* Font */
/* ============================================ */
@font-face {
  font-family: 'LINESeedJP';
  src: url('./fonts/LINESeedJP_OTF_Eb.woff2') format('woff2'),
       url('./fonts/LINESeedJP_OTF_Eb.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}



/* Style */
/* ============================================ */
:root {
  --ease: cubic-bezier(.215,.61,.355,1);
  --black: #052234;
  --white: #fff;
  --cyan: #53FFFC;
  --blue: #1EA2D1;
  --dark: #324B52;
  --ambassador: #941D5C;
  --blur: 3px;
  --font-xs: calc(2.4vw * var(--scale));
  --font-sm: calc(2.933vw * var(--scale));
  --font-base: ;
  --font-lg: calc(4.8vw * var(--scale));
  --scale: 1;
  --opacityFade: opacity 980ms var(--ease);
  --riseInit: translateY(calc(6vw * var(--scale)));
  --riseUp: transform 980ms var(--ease);
}
::selection {
  color: var(--cyan);
  background-color: var(--black);
}
body {
  background:#B5E9FF;
  margin:0;
  text-align:center;
  color: var(--black);
  font-size: calc(3.7333vw * var(--scale));
  font-family: 'LINESeedJP', sans-serif;
  transition: background-color 1200ms var(--ease);
}

.visually-hidden {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#wrapper {
  position: relative;
  width: 100%;
}
#cover {
  position: fixed;
  display: none;
  inset: 0;
  background: #000;
  background: url("./images/bg_pc.webp") no-repeat center top;
}
@media (min-aspect-ratio: 17/9) {
  #cover {
    background-size: 100vw auto;
  }
}
@media (max-aspect-ratio: 17/9) {
  #cover {
    background-size: auto 100vh;
  }
}
#cover_left {
  position: absolute;
  display: flex;
  width: calc((1 - var(--scale)) * 50vw);
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vw;
}
#cover_title {
  width: 22.84vw;
  max-width: 480px;
}
#cover_pv {
  width: 21vw;
  max-width: 441.5px;
}
#cover_copyright {
  position: absolute;
  left: 3%;
  bottom: calc(3vw * var(--scale));
  color: var(--white);
  font-size: var(--font-xs);
}
#cover_right {
  position: absolute;
  right: 0;
  width: calc((1 - var(--scale)) * 50vw);
  height: 100vh;
}
#cover_right::before,
#cover_right::after {
  content: "";
  display: block;
  position: absolute;
}
#cover_right::before {
  right: 0;
  width: 27.13vw;
  height: 33.67vw;
  max-height: 58vh;
  background: url("images/cover_chr1.webp") no-repeat right top / contain;
}
#cover_right::after {
  left: -3.5vw;
  bottom: 0;
  width: 26.9vw;
  height: 23.28vw;
  max-height: 41vh;
  background: url("images/cover_chr2.webp") no-repeat left bottom / contain;
  z-index: -1;
}
#cover_links {
  position: absolute;
  right: 3%;
  bottom: calc(3vw * var(--scale));
  display: flex;
  gap: 2%;
  width: 92%;
}
main {
  position: relative;
  width: calc(100vw * var(--scale));
  margin: 0 auto ;
  background: url("./images/bg_ptn.webp") repeat-y center top / 100%;
  overflow-x: hidden;
  outline: 10px rgba(16, 46, 123, .5) solid;
}
.h2_style {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(4vw * var(--scale));
  padding: 0 calc(15vw * var(--scale));
  color: var(--dark);
  font-size: calc(9vw * var(--scale));
  letter-spacing: -0.15rem;
  background: url("./images/h2_txt_bg.webp") no-repeat center center / 100% 70%;
  text-shadow:
    1px 1px 0 var(--white),
   -1px 1px 0 var(--white),
    1px -1px 0 var(--white),
   -1px -1px 0 var(--white);
}
.h2_style::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(-5vw * var(--scale));
  bottom: 0;
  width: calc(34.4vw * var(--scale));
  height: calc(11.86vw * var(--scale));
  background: url("./images/h2_left.webp") no-repeat left bottom / 100%;
}
.h2_style::after {
  content: "";
  display: block;
  position: absolute;
  right: calc(-5vw * var(--scale));
  bottom: 0;
  width: calc(29.6vw * var(--scale));
  height: calc(11.86vw * var(--scale));
  background: url("./images/h2_right.webp") no-repeat right bottom / 100%;
}

.hoverFx,
.swiper-pagination-bullet {
  display: block;
  filter: brightness(1);
  transition: filter 350ms var(--ease);
}
.hoverFx:hover,
.swiper-pagination-bullet:hover {
  filter: brightness(1.2);
}
@media print, screen and (min-width: 769px) {
  :root {
    --scale: 0.4;
  }
  #cover {
    display: block;
  }
}
@media (min-width: 1024px) {
  :root {
    --scale: .27;
  }
  #cover_links {
    width: 65%;
  }
}



/* INDEX */
/* ============================================ */
#kv_section {
  position: relative;
}
#kv_img {
  width: 100%;
  height: calc(200.53vw * var(--scale));
  overflow: hidden;
}
#kv_img img {
  transform: scale(1.2);
  filter: brightness(2);
  transition: transform 1450ms var(--ease),
              filter 1200ms ease-in;
}
#kv_section.appear #kv_img img {
  transform: scale(1);
  filter: brightness(1);
}
#kv_title {
  position: absolute;
  top: 29.8%;
  left: 0;
  right: 0;
  width: calc(62.4vw * var(--scale));
  margin: 0 auto;
  transform: scale(1.1);
  filter: brightness(2);
  transition: transform 1000ms var(--ease),
              filter 1000ms var(--ease);
}
#kv_section.appear #kv_title {
  transform: scale(1);
  filter: brightness(1);
}
#kv_txt1, #kv_txt2 {
  position: absolute;
  top: calc(6.6666vw * var(--scale));
  width: calc(8.266vw * var(--scale));
  opacity: 0;
  transform: translateY(-10%);
}
#kv_txt1 {
  right: calc(5.5vw * var(--scale));
  background: url("./images/kv_txt1.webp") no-repeat center top / 100%;
  height: calc(65.46vw * var(--scale));
}
#kv_txt2 {
  left: calc(5.5vw * var(--scale));
  background: url("./images/kv_txt2.webp") no-repeat center top / 100%;
  height: calc(83.33vw * var(--scale));
}
#kv_section.appear #kv_txt1 {
  opacity: 1;
  transform: translateY(0);
  transition: var(--opacityFade) 350ms,
              transform 1000ms var(--ease) 350ms;
}
#kv_section.appear #kv_txt2 {
  opacity: 1;
  transform: translateY(0);
  transition: var(--opacityFade) 650ms,
              transform 800ms var(--ease) 550ms;
}
#kv_ticker {
  position: relative;
  width: 100%;
  margin-top: calc(-18vw * var(--scale));
  padding-top: calc(3.5vw * var(--scale));
  padding-bottom: calc(3.5vw * var(--scale));
  background-color: rgba(134, 232, 48, .3);
  outline: 1px #8CFBC7 solid;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  overflow-x: hidden;
}
#kv_ticker h3 {
  position: relative;
  width: 100%;
  height: calc(12.4vw * var(--scale));
}
#kv_ticker h3 img {
  position: absolute;
  left: 0;
  width: calc(135.2vw * var(--scale));
  max-width: none;
  height: calc(12.4vw * var(--scale));
}
#kv_ticker h3 img:nth-of-type(1) {
  animation: slideInit 15s linear forwards,
             slideLoop 30s linear infinite 15s;
}
#kv_ticker h3 img:nth-of-type(2) {
  animation: slideLoop 30s linear infinite;
}
@keyframes slideInit {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes slideLoop {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}



/* news section */
/* ============================================ */
#news_section {
  height: calc(192vw * var(--scale));
  margin-top: calc(7vw * var(--scale));
  background: url("./images/bg_art_news.webp") no-repeat center calc(40vw * var(--scale)) / 100%;
}
#news_section h4 {
  color: var(--dark);
  font-size: calc(4.8vw * var(--scale));
  margin-bottom: calc(2vw * var(--scale));
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#pv {
  width: calc(84.26vw * var(--scale));
  margin: 0 auto calc(5vw * var(--scale));
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#follow_link {
  width: calc(82vw * var(--scale));
  height: calc(25.6vw * var(--scale));
  margin: 0 auto calc(10vw * var(--scale));
  padding: calc(3.33vw * var(--scale));
  border-radius: calc(12.8vw * var(--scale));
  background-color: rgba(179, 179, 179, .18);
  box-shadow: inset 0 calc(1.333vw * var(--scale)) 2px 0 rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px rgba(255, 255, 255, .5) solid;
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#news_section h4.appear,
a.appear #pv,
#follow_link.appear {
  opacity: 1;
  transform: translateY(0);
}

#news_dl {
  display: flex;
  width: calc(88vw * var(--scale));
  margin: 0 auto;
  padding: calc(2vw * var(--scale)) calc(4vw * var(--scale)) calc(4vw * var(--scale));
  flex-wrap: wrap;
  background-color: rgba(239, 249, 252, .45);
  text-align: left;
  line-height: calc(5.6vw * var(--scale));
  border: 1px rgba(255, 255, 255, .5) solid;
  border-radius: calc(3.333vw * var(--scale));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 calc(0.8vw * var(--scale)) 2px 0 rgba(90, 152, 185, 0.5);
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#news_dl.appear {
  opacity: 1;
  transform: translateY(0);
}
#news_dl dt, #news_dl dd {
  padding-top: calc(1vw * var(--scale));
  border-bottom: 1px var(--white) solid;
}
#news_dl dt {
  flex: 0 0 25%;
  font-size: calc(2.66vw * var(--scale));
}
#news_dl dd {
  flex: 0 0 75%;
  padding-top: calc(1vw * var(--scale));
}



/* character section */
/* ============================================ */
#chara_section {
  height: calc(185.466vw * var(--scale));
  margin-top: calc(-21vw * var(--scale));
  background: url("./images/bg_art_chara.webp") no-repeat center top / 100%;
}
#chara_section h2 {
  top: calc(11vw * var(--scale));
}
#chara_list {
  display: flex;
  padding: 0 calc(2vw * var(--scale));
  flex-wrap: wrap;
  gap: calc(2vw * var(--scale)) 1.5%;
  justify-content: center;
  margin-top: calc(17vw * var(--scale));
}
#chara_list li {
  flex: 0 0 31%;
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#chara_list.appear li {
  opacity: 1;
  transform: translateY(0);
}
#chara_list li:nth-of-type(1) { transition-delay: 0; }
#chara_list li:nth-of-type(2) { transition-delay: 150ms }
#chara_list li:nth-of-type(3) { transition-delay: 250ms; }
#chara_list li:nth-of-type(4) { transition-delay: 350ms; }
#chara_list li:nth-of-type(5) { transition-delay: 430ms; }
#chara_list li:nth-of-type(6) { transition-delay: 530ms; }
#chara_list li:nth-of-type(7) { transition-delay: 630ms; }
#chara_list li:nth-of-type(8) { transition-delay: 710ms; }
#chara_list li:nth-of-type(9) { transition-delay: 800ms; }
#chara_list li:nth-of-type(10){ transition-delay: 850ms; }
#chara_list li:nth-of-type(11){ transition-delay: 900ms; }
#chara_list li:nth-of-type(12){ transition-delay: 930ms; }



/* ambassador section */
/* ============================================ */
#ambr_section {
  height: calc(184vw * var(--scale));
  margin-top: calc(-14vw * var(--scale));
  background: url("./images/bg_art_ambr.webp") no-repeat center top / 100%;
}
#ambr_section .h2_style {
  color: var(--ambassador);
  top: calc(16vw * var(--scale));
}
#ambr_section .h2_style::before {
  background: url("./images/h2_left_ambr.webp") no-repeat left bottom / 100%;
}
#ambr_section .h2_style::after {
  background: url("./images/h2_right_ambr.webp") no-repeat left bottom / 100%;
}
#ambr_contents {
  width: 86.933%;
  margin: calc(20vw * var(--scale)) auto calc(4vw * var(--scale));
  padding: calc(6.666vw * var(--scale));
  background: rgba(255, 208, 235, .45) url("./images/bg_ambr_ptn.webp") repeat center top / calc(6.4vw * var(--scale));
  border: 1px rgba(255, 255, 255, .5) solid;
  border-radius: calc(3.333vw * var(--scale));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 calc(0.8vw * var(--scale)) 2px 0 rgba(200, 54, 158, 0.5);
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#ambr_contents h3 {
  color: var(--ambassador);
  font-size: calc(5.8666vw * var(--scale));
  line-height: 1.1;
  margin-bottom: calc(3vw * var(--scale));
}
#ambr_contents h3 small {
  font-size: calc(4.533vw * var(--scale));
}
.ambr_imgs {
  position: relative;
  width: 96%;
  margin: 0 auto calc(2vw * var(--scale));
}
.ambr_imgs img:nth-of-type(1) {
  position: relative;
  left: 2%;
  width: calc(52.26vw * var(--scale));
}
.ambr_imgs img:nth-of-type(2) {
  position: absolute;
  right: 0;
  top: calc(26vw * var(--scale));
  width: calc(30.93vw * var(--scale));
}
.ambr_name {
  position: relative;
  margin: 0 auto calc(2vw * var(--scale));
}
#ambr_more {
  color: var(--ambassador);
  font-size: calc(4.533vw * var(--scale));
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#ambr_contents.appear,
#ambr_more.appear {
  opacity: 1;
  transform: translateY(0);
}



/* game section */
/* ============================================ */
#game_section {
  height: calc(210.2vw * var(--scale));
  margin-top: calc(-30vw * var(--scale));
  background: url("./images/bg_art_game.webp") no-repeat center top / 100%;
}
#game_section h2 {
  top: calc(14.5vw * var(--scale));
}
#game_section .swiper {
  margin: calc(20vw * var(--scale)) auto calc(4vw * var(--scale));
}
.swiper {
  opacity: 0;
  transform: var(--riseInit);
  transition: var(--opacityFade), var(--riseUp);
}
#game_section.appear .swiper {
  opacity: 1;
  transform: translateY(0);
}
.system_img {
  position: relative;
  width: calc(73.6vw * var(--scale));
  border: calc(1.2vw * var(--scale)) var(--white) solid;
  margin: 0 auto;
  margin-bottom: calc(7vw * var(--scale));
}
.system_img::after {
  content: "※画面は開発中のものになります";
  display: block;
  position: absolute;
  left: calc(-1vw * var(--scale));
  bottom: calc(-6.3vw * var(--scale));
  font-family: sans-serif;
  font-size: var(--font-sm);
}
.system_txt {
  width: 100%;
  height: calc(21.2vw * var(--scale));
  background: no-repeat center top / contain;
}
.system1 .system_txt { background-image: url("./images/system_txt1.webp"); }
.system2 .system_txt { background-image: url("./images/system_txt2.webp"); }
.system3 .system_txt { background-image: url("./images/system_txt3.webp"); }
.system4 .system_txt { background-image: url("./images/system_txt4.webp"); }
.system5 .system_txt { background-image: url("./images/system_txt5.webp"); }

.system_link {
  position: absolute;
  top: calc(58vw * var(--scale)) !important;
  width: calc(11.86vw * var(--scale)) !important;
  height: calc(22.66vw * var(--scale)) !important;
  margin: 0 !important;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display:none;
}
.btn_prev {
  left: calc(2vw * var(--scale)) !important;
  background: url("./images/btn_prev.webp") no-repeat center / contain;
  opacity: 0;
}
.btn_next {
  right: calc(2vw * var(--scale)) !important;
  background: url("./images/btn_next.webp") no-repeat center / contain;
  opacity: 0;
}
@keyframes btnPrevIn {
  from { opacity: 0; transform: translateX(calc(-5vw * var(--scale))); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes btnPrevLoop {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(calc(-1vw * var(--scale))); }
  100% { transform: translateX(0); }
}
@keyframes btnNextIn {
  from { opacity: 0; transform: translateX(calc(5vw * var(--scale))); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes btnNextLoop {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(calc(1vw * var(--scale))); }
  100% { transform: translateX(0); }
}
#game_section.appear .btn_prev {
  animation: btnPrevIn 400ms var(--ease) forwards 600ms,
             btnPrevLoop 1200ms var(--ease) infinite 1000ms;
}
#game_section.appear .btn_next {
  animation: btnNextIn 400ms var(--ease) forwards 600ms,
             btnNextLoop 1200ms var(--ease) infinite 1000ms;
}



/* footer section */
/* ============================================ */
#footer_section {
  position: relative;
  margin-top: calc(10.8vw * var(--scale));
  padding-top: calc(10.8vw * var(--scale));
  background: url("./images/bg_footer.webp") no-repeat center top / calc(132vw * var(--scale));
  color: var(--white);
}
#app_contents {
  width: 90%;
  margin: 0 auto;
}
#app_contents img {
  width: calc(47.73vw * var(--scale));
  margin: 0 auto;
}
#app_list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2vw * var(--scale)) calc(4vw * var(--scale));
  margin: calc(7vw * var(--scale)) auto;
}
#app_list dt,
#app_list dd {
  line-height: calc(6vw * var(--scale));
}
#app_list dt {
  flex: 0 0 27%;
  font-size: var(--font-sm);
  text-align: right;
}
#app_list dd {
  flex: 1 1 60%;
  text-align: left;
}
#app_list .caption {
  font-size: var(--font-xs);
}
#footer_contents {
  position: relative;
}
#footer_img {
  width: 80%;
  margin: 0 0 0 auto;
}
#footer_links {
  position: absolute;
  width: 38%;
  top: calc(29vw * var(--scale));
  left: 5.33%;
}
#footer_sns {
  display: flex;
  width: 100%;
  height: calc(10.666vw * var(--scale));
  align-items: center;
  gap: calc(3.5vw * var(--scale));
  margin-bottom: calc(4vw * var(--scale));
}
#footer_sns li,
#footer_sns a {
  display: flex;
  align-items: center;
  height: 100%;
}
#footer_sns img {
  height: 100%;
  width: auto;
  max-width: none;
}
#footer_sns li:nth-of-type(2) img {
  transform: scale(.75);
}
#footer_nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2vw * var(--scale));
  font-size: var(--font-sm);
}
#footer_nav li {
  position: relative;
  padding-left: 1.8em;
}
#footer_nav li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(4.266vw * var(--scale));
  height: calc(4.266vw * var(--scale));
  background: url("./images/footer_icon.webp") no-repeat center / contain;
}
#footer_copyright {
  position: absolute;
  left: 5.33%;
  bottom: calc(3vw * var(--scale));
  color: var(--white);
  font-size: var(--font-xs);
}




/* policy page */
/* ============================================ */
#header_logo {
  width: calc(36.133vw * var(--scale));
  margin: calc(3vw * var(--scale)) calc(4vw * var(--scale)) calc(7vw * var(--scale));
}
#article_section {
  margin-bottom: calc(20vw * var(--scale));
}
#article_body {
  width: 84%;
  margin: 2.5em auto;
  text-align: left;
}
#article_body h3 {
  width: fit-content;
  font-size: var(--font-lg);
  margin-top: calc(6vw * var(--scale));
  margin-bottom: calc(2vw * var(--scale));
  border-bottom: 1px var(--blue) solid ;
}
#article_body p {
  font-family: sans-serif;
  line-height: 1.8;
  margin-bottom: calc(3vw * var(--scale));
}
#article_body li {
  position: relative;
  font-family: sans-serif;
  line-height: 1.8;
  padding-left: 1em;
  margin-bottom: calc(2vw * var(--scale));
}
#article_body li::before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  line-height: 2.4;
  font-size: var(--font-sm);
}



/* youtube modal */
/* ============================================ */
#youtube_modal {
  display: flex;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  background: rgba(30, 162, 209, 0.5);
  opacity: 0;
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
#youtube_modal.active {
  opacity: 1;
  pointer-events: auto;
  animation: modalAppear 500ms var(--ease);
}
@keyframes modalAppear {
  from { clip-path: polygon(49% 49%, 30% 71%, 51% 51%, 70% 30%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
#youtube_frame {
  aspect-ratio: 16 / 9;
  width: 100vw;
  border: none;
}
@media print, screen and (min-width: 769px) {
  #youtube_frame {
    width: min(90vw, 1600px);
  }
}