@charset "UTF-8";
/* ================================================================ *
* MIXIN
* ================================================================ */
/* ================================================================ *
* BODY
* ================================================================ */
body {
  position: relative;
  caret-color: transparent;
  font-family: ten-mincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Hiragino Mincho", "Noto Serif JP", "游明朝", "游明朝体", "Yu Mincho", "HGS明朝E", "HG明朝E", "HG明朝", "リュウミン", "メイリオ", "Meiryo", serif;
  font-weight: normal;
  font-style: normal;
  color: #1a2039;
  font-size: 18px;
  line-height: 1.6;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 800px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
}

a:link, a:visited {
  color: #2186ee;
  text-decoration: none;
  transition: all 0.15s ease-out;
}

a:active, a:hover {
  color: #ec9800;
  text-decoration: none;
}

a:focus, *:focus {
  outline: none;
}

img {
  border: none;
  outline: none;
  max-width: 100%;
}

@media (min-width: 800px) {
  .sp {
    display: none;
  }
}
@media (max-width: 800px) {
  .pc {
    display: none !important;
  }
}
/* ================================================================ *
* parts
* ================================================================ */
.center {
  text-align: center;
}

.red {
  color: #c0300f;
}

.aalt {
  font-feature-settings: "aalt" 1;
}

.aalt2 {
  font-feature-settings: "aalt" 2;
}

.salt {
  font-feature-settings: "salt" 1;
}

.flex_wrap {
  display: flex;
  gap: 50px;
}
@media (max-width: 800px) {
  .flex_wrap {
    flex-wrap: wrap;
    gap: 30px;
  }
}

.borderBox, .borderBox_white, .borderBox_blue {
  position: relative;
  padding: 70px;
  background: rgba(26, 32, 57, 0.2);
  box-shadow: 0 0 30px rgba(26, 32, 57, 0.3);
}
.borderBox:after, .borderBox_white:after, .borderBox_blue:after {
  content: "";
  display: block;
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  -o-border-image: url(../img/box_border_b.png) 30/20px round;
     border-image: url(../img/box_border_b.png) 30/20px round;
}
.borderBox_white {
  box-shadow: 0 0 30px rgba(26, 32, 57, 0.1);
  background: rgba(255, 255, 255, 0.5);
}
.borderBox_white:after {
  -o-border-image: url(../img/box_border_w.png) 30/20px round;
     border-image: url(../img/box_border_w.png) 30/20px round;
}
@media (max-width: 800px) {
  .borderBox, .borderBox_white, .borderBox_blue {
    padding: 40px 30px;
  }
  .borderBox:after, .borderBox_blue:after, .borderBox_white:after {
    inset: 4px;
    border-image-width: 10px;
  }
}

.btn {
  position: relative;
  width: min(400px, 100%);
  border: 1px solid #1a2039;
  padding: 3px;
  font-feature-settings: "palt" 1;
}
.btn:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #465497;
  transform-origin: 100% 0;
  transform: scaleX(0);
  transition: transform 0.2s ease-out;
}
.btn a {
  display: block;
  position: relative;
  padding: 5px;
  z-index: 2;
  -o-border-image: url(../img/box_border_w.png) 30/13px round;
     border-image: url(../img/box_border_w.png) 30/13px round;
  text-align: center;
  color: #1a2039;
  transition: all 0.2s ease-out;
}
.btn a:after {
  content: "";
  display: block;
  position: absolute;
  width: 0.8em;
  height: 100%;
  top: 0;
  right: 30px;
  background: url(../img/btn_icon.png) 50% 50% no-repeat;
  background-size: contain;
}
.btn:hover:after {
  transform-origin: 0 0;
  transform: scaleX(1);
}
.btn:hover a {
  filter: brightness(0) saturate(100%) invert(91%) sepia(7%) saturate(880%) hue-rotate(333deg) brightness(108%) contrast(84%);
}
@media (max-width: 800px) {
  .btn {
    border-width: 0.5px;
  }
  .btn a {
    border-image-width: 10px;
    padding: 3px 0;
  }
  .btn a:after {
    right: 10px;
  }
}
.btn.btn_w {
  border-color: #eae3d0;
}
.btn.btn_w:after {
  background-color: #e0bec7;
}
.btn.btn_w a {
  color: #eae3d0;
  border-image-source: url(../img/box_border_b.png);
}
.btn.btn_w a:after {
  background-image: url(../img/btn_icon_w.png);
}
.btn.btn_w:hover a {
  filter: brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(788%) hue-rotate(155deg) brightness(96%) contrast(93%);
}
.btn.btn_pg a, .btn.btn_l a {
  padding: 13px 0;
}
@media (max-width: 800px) {
  .btn.btn_pg a, .btn.btn_l a {
    padding: 8px 0;
  }
  .btn.btn_pg a:after, .btn.btn_l a:after {
    right: 15px;
  }
}
.btn.btn_pg a:after {
  transform: rotate(90deg);
}

.btnWrap {
  display: flex;
  gap: 15px;
  justify-content: center;
}
@media (max-width: 800px) {
  .btnWrap {
    flex-wrap: wrap;
    gap: 8px;
  }
  .btnWrap .btn {
    width: 100%;
  }
}
.btnWrap.pg_btnWrap {
  width: min(1200px, 100%);
  margin: -20px auto 50px;
}
@media (max-width: 800px) {
  .btnWrap.pg_btnWrap {
    padding: 0 30px;
    margin: -10px auto 25px;
  }
  .btnWrap.pg_btnWrap a {
    padding: 5px 0;
  }
}

.pp_img_btn {
  position: relative;
  z-index: 1;
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  transition: all 0.3s ease-out;
}
.pp_img_btn:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 10;
  width: 40px;
  height: 40px;
  top: -8px;
  right: -8px;
  border-radius: 20px;
  background: url(../img/popup_icon.png) 45% 45% no-repeat #e0bec7;
  background-size: 60% auto;
}
.pp_img_btn:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
@media (max-width: 800px) {
  .pp_img_btn:after {
    width: 25px;
    height: 25px;
    top: -4px;
    right: -4px;
  }
}

.table_spec, .table_spec_blue {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}
.table_spec tr, .table_spec_blue tr {
  display: flex;
  position: relative;
}
.table_spec tr:before, .table_spec_blue tr:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 20px);
  height: 1px;
  top: 0;
  left: -10px;
  border-top: 1px solid rgba(234, 227, 208, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
}
.table_spec tr:nth-last-of-type(1):after, .table_spec_blue tr:nth-last-of-type(1):after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 20px);
  height: 0.8px;
  bottom: 0;
  left: -10px;
  border-bottom: 1px solid rgba(234, 227, 208, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
}
.table_spec tr th, .table_spec_blue tr th {
  position: relative;
  padding: 15px 1em 15px 3em;
  width: 8em;
  vertical-align: top;
  font-weight: 600;
  font-size: 90%;
  opacity: 0.8;
  color: #e0bec7;
}
@media (min-width: 800px) {
  .table_spec tr th, .table_spec_blue tr th {
    text-align: justify;
    -moz-text-align-last: justify;
         text-align-last: justify;
  }
}
.table_spec tr td, .table_spec_blue tr td {
  padding: 15px 3em 15px 1em;
  flex: 1;
}
.table_spec_blue tr:before {
  border-top: 1px solid rgba(70, 84, 151, 0.5);
}
.table_spec_blue tr:nth-last-of-type(1):after {
  border-bottom: 1px solid rgba(70, 84, 151, 0.5);
}
.table_spec_blue tr th {
  color: #465497;
}
@media (max-width: 800px) {
  .table_spec, .table_spec_blue {
    font-size: 11px;
  }
  .table_spec:not(.special) tr th, .table_spec_blue:not(.special) tr th {
    padding: 8px 0em 8px 1em !important;
    width: 5.5em !important;
    text-align: justify;
    -moz-text-align-last: justify;
         text-align-last: justify;
  }
  .table_spec:not(.special) tr td, .table_spec_blue:not(.special) tr td {
    padding: 8px 0.5em 8px 1.5em !important;
  }
}

.ul_list li {
  margin: 10px 0;
  text-indent: -1em;
  padding-left: 1em;
}

.attention_ul {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ヒラギノ角ゴ", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.8;
}
.attention_ul li {
  margin: 5px 0;
  text-indent: -1em;
  padding-left: 1em;
}
@media (max-width: 800px) {
  .attention_ul {
    font-size: 10px;
  }
}

.attention_txt {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ヒラギノ角ゴ", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 13px;
  opacity: 0.8;
}

.snsbox {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.snsbox > div {
  display: inline-block;
  width: 45px;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1px;
  transition: all 0.3s ease-out;
  border-radius: 5px;
  overflow: hidden;
}
.snsbox a {
  display: block;
  width: 100%;
  height: 100%;
}
.snsbox .twitter {
  background-image: url(../img/snsicon_x_w.png);
}
.snsbox .line {
  background-image: url(../img/snsicon_line.png);
}
@media (max-width: 800px) {
  .snsbox {
    gap: 10px;
  }
  .snsbox > div {
    width: 40px;
    height: 40px;
  }
}

.prr:not(.ndf) {
  filter: blur(12px);
  opacity: 0;
  transition: all 0.8s ease-out;
}
.prr:not(.ndf).show {
  filter: blur(0);
  opacity: 1;
}

/* ================================================================ *
* loading
/* ================================================================ */
#loading {
  position: fixed;
  width: 100vw;
  height: 100svh;
  top: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1.2s ease-out 0.6s;
  opacity: 1;
}
#loading .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  transition: all 0.5s ease-out;
}
#loading p {
  font-size: 16px;
  color: #1a2039;
  opacity: 0.4;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Hiragino Mincho", "Noto Serif JP", "游明朝", "游明朝体", "Yu Mincho", "HGS明朝E", "HG明朝E", "HG明朝", "リュウミン", "メイリオ", "Meiryo", serif;
  letter-spacing: 1px;
  font-weight: 600;
}
#loading .bar {
  position: relative;
  transition: all 0.5s ease-out;
  width: 100px;
  aspect-ratio: 1/1;
  background: rgba(26, 32, 57, 0.1);
  -webkit-mask: url(../img/loading_mask.png) 50% 50% no-repeat;
          mask: url(../img/loading_mask.png) 50% 50% no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
#loading .bar span {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(70, 84, 151, 0) 33.333%, #465497 66%);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 300%;
}
#loading.off {
  opacity: 0;
  pointer-events: none;
}
#loading.off .box {
  filter: blur(10px);
  opacity: 0;
}
#loading.off .box .bar {
  transform: rotate(30deg) scale(1.2);
}
@media (max-width: 800px) {
  #loading p {
    font-size: 12px;
    letter-spacing: 0;
  }
  #loading .bar {
    width: 60px;
  }
}

/* ================================================================ *
* menu
/* ================================================================ */
#menuIcon {
  position: fixed;
  z-index: 100;
  right: 15px;
  top: 15px;
  width: 84px;
  border-radius: 7px;
  background: #1a2039;
  padding: 13px 14px 14px;
  aspect-ratio: 1/1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
}
#menuIcon .icon {
  position: relative;
  width: 100%;
  aspect-ratio: 1/0.6;
  display: flex;
  justify-content: center;
  align-items: center;
}
#menuIcon .icon span {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  background: #fff;
}
#menuIcon .icon span:before, #menuIcon .icon span:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: #fff;
  transition: all 0.15s ease-out;
}
#menuIcon .icon span:before {
  transform: translateY(-11px);
}
#menuIcon .icon span:after {
  transform: translateY(11px);
}
#menuIcon p {
  position: relative;
  width: 100%;
  color: #fff;
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
  text-indent: 0px;
}
#menuIcon p img {
  vertical-align: top;
}
#menuIcon.on .icon span {
  background: transparent;
}
#menuIcon.on .icon span:before {
  transform: rotate(30deg);
}
#menuIcon.on .icon span:after {
  transform: rotate(-30deg);
}
@media (max-width: 800px) {
  #menuIcon {
    width: 52px;
    top: 6px;
    right: 6px;
    padding: 8px 9px;
    border-radius: 4px;
    gap: 4px;
  }
  #menuIcon .icon span:before {
    transform: translateY(-7px);
  }
  #menuIcon .icon span:after {
    transform: translateY(7px);
  }
  #menuIcon p {
    font-size: 10px;
    letter-spacing: 0;
  }
}

#gMenu {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transform: scale(1.1);
  filter: blur(8px);
  transition: all 0.3s ease-out;
  pointer-events: none;
  background: #465497;
}
#gMenu.show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  pointer-events: auto;
}
#gMenu .wrap {
  position: absolute;
  width: 100%;
  height: 100svh;
  top: 0;
  left: 0;
  display: flex;
}
#gMenu .bg {
  width: 50%;
  box-shadow: 0 0 200px inset rgba(26, 32, 57, 0.5);
  background: url(../img/story_bg.webp) 50% 50% no-repeat;
  background-size: cover;
}
#gMenu nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #465497;
  text-align: center;
}
#gMenu nav ul {
  width: 80%;
  height: 100%;
  max-height: 900px;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
}
#gMenu nav ul li {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#gMenu nav ul li:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
}
#gMenu nav ul li:nth-last-of-type(1):after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.8px;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
}
#gMenu nav ul li a {
  position: relative;
  display: block;
  padding: 10px;
  width: 90%;
  z-index: 1;
  color: #fff;
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 1px;
}
#gMenu nav ul li a span.m {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1lh;
  padding: 0 0.3%;
}
#gMenu nav ul li a span.m img {
  vertical-align: baseline;
  filter: brightness(1.2);
}
@media (min-width: 800px) {
  #gMenu nav ul li a span.m {
    transform: translateY(-1px);
  }
}
#gMenu nav ul li a:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.8;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white 30%, white 70%, rgba(255, 255, 255, 0));
  transform: scaleX(0);
  transition: all 0.15s ease-out;
}
#gMenu nav ul li a:hover {
  color: #465497;
}
#gMenu nav ul li a:hover:after {
  transform: scaleX(1);
}
#gMenu nav ul li a:hover span.m img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(61%) saturate(614%) hue-rotate(192deg) brightness(88%) contrast(83%);
}
@media (max-width: 800px) {
  #gMenu .wrap {
    flex-direction: column;
  }
  #gMenu .bg {
    width: 100%;
    height: 25%;
    background-position: 0 0;
    box-shadow: 0 0 50px inset rgba(26, 32, 57, 0.5);
  }
  #gMenu nav ul {
    width: 90%;
    padding: 30px 0;
  }
  #gMenu nav ul li a {
    font-size: 18px;
    padding: 10px 0;
  }
}

/* ================================================================ *
* fiter,rose
/* ================================================================ */
#filter {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: radial-gradient(rgba(32, 18, 0, 0) 60%, rgba(32, 18, 0, 0.2));
  pointer-events: none;
}

.obj_rose {
  position: absolute;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(calc(-50% + 80px));
  filter: blur(20px);
  transition: all 1.2s ease-out;
}
.obj_rose.show {
  opacity: 0.7;
  transform: translateY(-50%);
  filter: blur(0px);
}
@media (max-width: 800px) {
  .obj_rose {
    transform: scale(0.4) translateY(calc(-50% + 40px));
  }
  .obj_rose.show {
    transform: scale(0.4) translateY(-50%);
    filter: blur(0px);
    isolation: isolate;
    perspective: 1000px;
    backface-visibility: hidden;
  }
}

section.pg:not(#story):not(#foot_story) .obj_rose {
  top: 0;
}

section.pg:nth-of-type(odd):not(#story):not(#foot_story) .obj_rose {
  left: 0;
  background-position: 0 0;
  transform-origin: 0 0;
}

section.pg:nth-of-type(even):not(#story):not(#foot_story) .obj_rose {
  right: 0;
  background-position: 100% 0;
  transform-origin: 100% 0;
}

#story .obj_rose {
  left: auto;
  transform-origin: 100% 0;
  bottom: 0;
  right: 80px;
  aspect-ratio: 449/475;
  width: 490px;
  background-image: url(../img/rose_story.webp?1);
  transform: translateY(80px);
}
#story .obj_rose.show {
  transform: translateY(0);
}
@media (max-width: 800px) {
  #story .obj_rose {
    bottom: -440px;
    right: 10px;
    transform: translateY(40px) scale(0.35);
  }
  #story .obj_rose.show {
    transform: translateY(0) scale(0.35);
  }
}

#detail .obj_rose {
  aspect-ratio: 351/406;
  width: 351px;
  background-image: url(../img/rose_detail.webp?1);
}

#tracklist .obj_rose {
  aspect-ratio: 279/489;
  width: 279px;
  right: 40px !important;
  background-image: url(../img/rose_tracklist.webp?1);
}
@media (max-width: 800px) {
  #tracklist .obj_rose {
    right: 10px !important;
  }
}

#movie .obj_rose {
  aspect-ratio: 353/450;
  width: 353px;
  background-image: url(../img/rose_movie.webp?1);
}

#privilege .obj_rose {
  aspect-ratio: 246/460;
  width: 246px;
  right: 50px !important;
  background-image: url(../img/rose_privilege.webp?1);
}
@media (max-width: 800px) {
  #privilege .obj_rose {
    right: 10px !important;
  }
}

#special .obj_rose {
  aspect-ratio: 324/413;
  width: 324px;
  background-image: url(../img/rose_special.webp?1);
}

#foot_story .obj_rose {
  transform: translateY(80px);
}
#foot_story .obj_rose.show {
  transform: translateY(0);
}
@media (max-width: 800px) {
  #foot_story .obj_rose {
    transform: scale(0.4) translateY(40px);
  }
  #foot_story .obj_rose.show {
    transform: scale(0.4) translateY(0);
  }
}
#foot_story .obj_rose.foot_rose_1 {
  top: 150px;
  right: 60px;
  transform-origin: 100% 0;
  aspect-ratio: 341/402;
  width: 341px;
  background-image: url(../img/rose_foot_1.webp?1);
}
@media (max-width: 800px) {
  #foot_story .obj_rose.foot_rose_1 {
    right: 15px;
    top: 100px;
  }
}
#foot_story .obj_rose.foot_rose_2 {
  bottom: -80px;
  left: 60px;
  transform-origin: 0 100%;
  aspect-ratio: 380/475;
  width: 470px;
  background-image: url(../img/rose_foot_2.webp?1);
}
@media (max-width: 800px) {
  #foot_story .obj_rose.foot_rose_2 {
    left: 10px;
    bottom: 10px;
  }
}

/* ================================================================ *
* common
* ================================================================ */
#container {
  min-width: 1200px;
  z-index: 2;
  padding: 0;
  background: url(../img/bg.webp);
  text-align: left;
}
@media (min-width: 800px) {
  #container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 800px) {
  #container {
    min-width: 0;
    background-size: 400px auto;
  }
}

#wrapper {
  position: relative;
}
@media (max-width: 800px) {
  #wrapper {
    background-size: contain;
  }
}

section.pg {
  position: relative;
  z-index: 1;
  padding: 180px 30px 220px;
}
@media (max-width: 800px) {
  section.pg {
    padding: 120px 10px 120px;
  }
}

.pg_wrap {
  position: relative;
  width: min(1200px, 100%);
  margin: 0 auto;
}
h1, h2, h3, h4 {
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.h01 {
  position: relative;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 60px;
}
.h01 .en {
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  font-size: 140px;
  line-height: 1;
  color: #465497;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.h01 .en span {
  display: block;
  min-width: 0.2em;
  filter: blur(8px);
  opacity: 0;
  transform: translateY(30px) rotate(0);
}
.h01 .en span:nth-of-type(1) {
  transition: all 0.6s ease-out 0.05s;
}
.h01 .en span:nth-of-type(2) {
  transition: all 0.6s ease-out 0.1s;
}
.h01 .en span:nth-of-type(3) {
  transition: all 0.6s ease-out 0.15s;
}
.h01 .en span:nth-of-type(4) {
  transition: all 0.6s ease-out 0.2s;
}
.h01 .en span:nth-of-type(5) {
  transition: all 0.6s ease-out 0.25s;
}
.h01 .en span:nth-of-type(6) {
  transition: all 0.6s ease-out 0.3s;
}
.h01 .en span:nth-of-type(7) {
  transition: all 0.6s ease-out 0.35s;
}
.h01 .en span:nth-of-type(8) {
  transition: all 0.6s ease-out 0.4s;
}
.h01 .en span:nth-of-type(9) {
  transition: all 0.6s ease-out 0.45s;
}
.h01 .en span:nth-of-type(10) {
  transition: all 0.6s ease-out 0.5s;
}
.h01 .en span:nth-of-type(11) {
  transition: all 0.6s ease-out 0.55s;
}
.h01 .en span:nth-of-type(12) {
  transition: all 0.6s ease-out 0.6s;
}
.h01 .en span:nth-of-type(13) {
  transition: all 0.6s ease-out 0.65s;
}
.h01 .en span:nth-of-type(14) {
  transition: all 0.6s ease-out 0.7s;
}
.h01 .en span:nth-of-type(15) {
  transition: all 0.6s ease-out 0.75s;
}
.h01 .en span:nth-of-type(16) {
  transition: all 0.6s ease-out 0.8s;
}
.h01 .en span:nth-of-type(17) {
  transition: all 0.6s ease-out 0.85s;
}
.h01 .en span:nth-of-type(18) {
  transition: all 0.6s ease-out 0.9s;
}
.h01 .en span:nth-of-type(19) {
  transition: all 0.6s ease-out 0.95s;
}
.h01 .en span:nth-of-type(20) {
  transition: all 0.6s ease-out 1s;
}
.h01 .en span.m {
  position: relative;
  width: 1em;
  height: 1lh;
  padding: 0.3% 0.4% 8%;
}
.h01 .en span.m img {
  vertical-align: baseline;
}
.h01 .ja {
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 1px 120px;
  margin: 15px auto 0;
  background: linear-gradient(to left, rgba(70, 84, 151, 0) 0, #465497 20%, #465497 80%, rgba(70, 84, 151, 0) 100%);
  opacity: 0;
  filter: blur(8px);
  transform: scaleX(0);
  transition: all 0.8s ease-out;
}
.h01.show .en span {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.h01.show .ja {
  opacity: 1;
  filter: blur(0);
  transform: scaleX(1);
}
@media (max-width: 800px) {
  .h01 {
    margin-bottom: 30px;
  }
  .h01 .en {
    font-size: 50px;
  }
  .h01 .ja {
    font-size: 11px;
    padding: 0 50px;
    margin-top: 7px;
  }
}

.h02 {
  color: #465497;
  font-size: 230%;
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.h02:before {
  content: "{";
  display: block;
  position: relative;
}
.h02:after {
  content: "}";
  display: block;
  position: relative;
}
.h02.pink {
  color: #e0bec7;
}
@media (max-width: 800px) {
  .h02 {
    font-size: 160%;
    line-height: 1;
    gap: 8px;
    margin-bottom: 20px;
  }
}

section.pg:nth-of-type(odd):not(#story) {
  color: #fff;
}
section.pg:nth-of-type(odd):not(#story) .h01 {
  white-space: nowrap;
}
section.pg:nth-of-type(odd):not(#story) .h01 .en {
  color: #eae3d0;
}
section.pg:nth-of-type(odd):not(#story) .h01 .ja {
  color: #465497;
  margin-top: 0px;
  background: linear-gradient(to left, rgba(234, 227, 208, 0) 0, #eae3d0 20%, #eae3d0 80%, rgba(234, 227, 208, 0) 100%);
}

/* ================================================================ *
* top
* ================================================================ */
#top {
  position: sticky;
  height: 100svh;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5svh 100px;
  background: url(../img/top_bgtxt.png) 50% 0 no-repeat;
  background-size: 100% auto;
}
@media (min-width: 800px) {
  #top:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 30vh;
    bottom: 0;
    left: 0;
    background: url(../img/top_btmtxt.png) 20px calc(100% - 30px) no-repeat;
    z-index: 1;
  }
}
#top .content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
#top .txt_wrap {
  text-align: center;
  padding-top: 30px;
}
#top .txt_wrap .txt {
  font-weight: 600;
  font-size: clamp(0.938rem, -0.313rem + 1.67vw, 1.563rem);
  letter-spacing: 6px;
  margin-bottom: 10px;
}
#top .txt_wrap .txt .sub {
  display: block;
  font-size: 70%;
}
#top .txt_wrap .logo {
  position: relative;
  height: 43svh;
  padding-bottom: clamp(10px, 5svh, 50px);
  display: flex;
  justify-content: center;
  align-items: center;
}
#top .txt_wrap .logo img {
  max-height: 100%;
}
#top .txt_wrap .day {
  color: #eae3d0;
  font-size: clamp(1.563rem, 0.625rem + 1.25vw, 2.188rem);
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  font-weight: 600;
  padding-top: 20px;
  text-shadow: 0 0 30px #465497, 0 0 30px #465497, 0 0 30px #465497;
}
#top .txt_wrap .day span.kakko {
  display: inline-block;
  margin: 0 20px;
  font-family: ten-mincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Hiragino Mincho", "Noto Serif JP", "游明朝", "游明朝体", "Yu Mincho", "HGS明朝E", "HG明朝E", "HG明朝", "リュウミン", "メイリオ", "Meiryo", serif;
  font-weight: 400;
}
#top .img_wrap {
  position: relative;
  background: url(../img/top_img.webp) 50% 50% no-repeat;
  background-size: contain;
  max-width: 849px;
  max-height: 1000px;
  height: 90vh;
}
#top .img_wrap img {
  max-width: 100%;
  max-height: 100%;
}
#top .side_txt {
  position: absolute;
  top: 0;
  height: 100%;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
#top .side_txt.side_txt_l {
  left: 15px;
}
#top .side_txt.side_txt_r {
  right: 15px;
}
#top .scroll_btn {
  position: absolute;
  bottom: 25px;
  right: 20px;
  z-index: 2;
  width: 110px;
  aspect-ratio: 208/60;
}
#top .scroll_btn a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/top_scroll_bg.png) 50% 50% no-repeat;
  background-size: contain;
}
#top .scroll_btn a:after {
  content: "";
  display: block;
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #eae3d0;
  transform-origin: 100% 0;
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}
#top .scroll_btn a:hover:after {
  transform-origin: 0 0;
  transform: scaleX(1);
}
#top .scroll_btn a:hover img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(61%) saturate(614%) hue-rotate(192deg) brightness(88%) contrast(83%);
}
#top.scroll {
  pointer-events: none;
}
@media (min-width: 800px) {
  #top {
    transition: all 0.6s ease-out;
  }
  #top.scroll {
    opacity: 0;
    filter: blur(30px);
  }
}
@media (max-width: 800px) {
  #top {
    position: relative;
    height: auto;
    display: block;
    padding: 20px 10px;
    background: none;
  }
  #top .bgtxt {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: url(../img/top_bgtxt_sp_b.png) 0 0 no-repeat;
    background-size: auto 100%;
    transition: all 0.5s ease-out;
  }
  #top .bgtxt:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url(../img/top_bgtxt_sp_p.png) 0 0 no-repeat;
    background-size: auto 100%;
    -webkit-mask: linear-gradient(to bottom, transparent 250px, #000 70%, transparent 98%);
            mask: linear-gradient(to bottom, transparent 250px, #000 70%, transparent 98%);
  }
  #top.scroll .bgtxt {
    opacity: 0;
  }
  #top .side_txt, #top .scroll_btn {
    display: none;
  }
  #top .content {
    flex-direction: column;
    gap: 3px;
  }
  #top .txt_wrap {
    display: contents;
  }
  #top .txt_wrap .txt {
    order: 1;
    font-size: 13px;
    letter-spacing: 0px;
    margin-bottom: 0;
  }
  #top .txt_wrap .logo {
    order: 2;
    width: 140px;
    height: auto;
    padding-bottom: 0;
  }
  #top .txt_wrap .btmtxt {
    order: 4;
    width: 180px;
    margin: 7px 0 0;
  }
  #top .txt_wrap .day {
    order: 5;
    font-size: 21px;
  }
  #top .txt_wrap .day span.kakko {
    margin: 0 8px;
  }
  #top .img_wrap {
    order: 3;
    height: auto;
    margin-left: 9px;
  }
}

/* ================================================================ *
* story
* ================================================================ */
.story_wrap {
  position: relative;
  margin-top: -20svh;
  padding-bottom: 100px;
  top: 0;
  z-index: 1;
}
.story_wrap .bg {
  position: absolute;
  inset: 0;
  clip-path: inset(0);
  z-index: 1;
  width: 100%;
  height: calc(100% + 45svh - 200px);
  top: -25svh;
  left: 0;
  -webkit-mask: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 10svh, rgba(0, 0, 0, 0.8) 20svh, #000 35svh, #000 calc(100% - 600px), transparent 100%);
          mask: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 10svh, rgba(0, 0, 0, 0.8) 20svh, #000 35svh, #000 calc(100% - 600px), transparent 100%);
}
.story_wrap .bg:before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(../img/bg_blue.png);
}
.story_wrap .bg_wrap {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: all 0.9s ease-out;
  height: 100svh;
  opacity: 0;
  transition: all 1.2s ease-out;
  filter: blur(30px);
  -webkit-mask: linear-gradient(to top, transparent 50px, #000 400px);
          mask: linear-gradient(to top, transparent 50px, #000 400px);
}
.story_wrap .mado {
  position: absolute;
  inset: 40px 40px 0 40px;
  z-index: 2;
  border: 1px solid #465497;
  -webkit-mask: url(../img/story_mado.svg) no-repeat 50% 50%;
          mask: url(../img/story_mado.svg) no-repeat 50% 50%;
  -webkit-mask-size: 0 0;
          mask-size: 0 0;
}
.story_wrap .mado:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(rgba(255, 255, 255, 0.3) 30%, rgba(26, 32, 57, 0.2));
  box-shadow: inset 0 0 100px rgba(26, 32, 57, 0.5);
}
.story_wrap .mado span {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: url(../img/story_bg.webp) 50% 0 no-repeat;
  background-size: cover;
}
.story_wrap .mado_line {
  position: absolute;
  inset: 30px 30px -5px 30px;
  z-index: 2;
  opacity: 0.2;
  background: url(../img/story_mado_ol.svg) 50% 50% no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 10px #fff);
}
.story_wrap.scroll .bg_wrap {
  opacity: 1;
  filter: blur(0px);
}
@media (max-width: 800px) {
  .story_wrap {
    margin-top: -50px;
  }
  .story_wrap .bg {
    height: calc(100% + 400px - 200px);
    top: -400px;
  }
  .story_wrap .bg:before {
    background-size: 400px auto;
  }
  .story_wrap .mado {
    inset: 20px 20px -30px 20px;
    z-index: 2;
    -webkit-mask-image: url(../img/story_mado_sp.svg);
            mask-image: url(../img/story_mado_sp.svg);
  }
  .story_wrap .mado:after {
    box-shadow: none;
  }
  .story_wrap .mado_line {
    inset: 15px 15px -35px 15px;
    background-image: url(../img/story_mado_ol_sp.svg);
  }
}

#story {
  position: relative;
  text-align: center;
  z-index: 3;
  padding: 300px 0 0 0;
  margin-top: -200px;
}
#story .pg_wrap {
  position: relative;
  z-index: 3;
  padding: 100px 200px 220px;
  margin-top: -150px;
}
#story .pg_wrap .catch {
  font-size: 160%;
  line-height: 1.5;
  letter-spacing: 5px;
  margin-bottom: 60px;
}
#story .pg_wrap .catch p:not(:nth-last-of-type(1)) {
  margin-bottom: 20px;
}
#story .pg_wrap .txt {
  font-size: 110%;
  line-height: 1.8;
  letter-spacing: 5px;
}
#story .pg_wrap .txt p:not(:nth-last-of-type(1)) {
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  #story {
    padding-top: 170px;
    margin-top: -50px;
  }
  #story .pg_wrap {
    padding: 100px 0px 0px;
  }
  #story .pg_wrap .catch {
    font-size: 130%;
    letter-spacing: 2px;
    margin-bottom: 30px;
  }
  #story .pg_wrap .catch p:not(:nth-last-of-type(1)) {
    margin-bottom: 10px;
  }
  #story .pg_wrap .txt {
    font-size: 90%;
    letter-spacing: 0px;
  }
  #story .pg_wrap .txt p:not(:nth-last-of-type(1)) {
    margin-bottom: 10px;
  }
}

/* ================================================================ *
* character
* ================================================================ */
#character {
  position: relative;
  z-index: 2;
  padding-top: 150px;
}
#character .ch_wrap {
  position: relative;
  z-index: 2;
  width: min(1400px, 100%);
  margin: -20px auto 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#character .ch_wrap.show li {
  filter: drop-shadow(0 0 10px rgba(26, 32, 57, 0.2)) blur(0px);
  transform: translateY(0);
  opacity: 1;
}
#character .ch_wrap li {
  position: relative;
  aspect-ratio: 230/801;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(26, 32, 57, 0.2)) blur(8px);
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.8s ease-out;
}
@media (min-width: 800px) {
  #character .ch_wrap li {
    flex: 1;
  }
  #character .ch_wrap li:nth-of-type(even) {
    top: 100px;
  }
}
#character .ch_wrap li span {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: all 0.3s ease-out;
}
#character .ch_wrap li span:after {
  content: "";
  display: block;
  position: absolute;
  inset: -5px -10px;
  z-index: 3;
}
#character .ch_wrap li span:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0.3;
  -webkit-mask: url(../img/ch_thumb_eiichi.png) 50% 50% no-repeat;
          mask: url(../img/ch_thumb_eiichi.png) 50% 50% no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: all 0.3s ease-out;
}
@media (min-width: 800px) {
  #character .ch_wrap li span:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 10px 20px rgba(26, 32, 57, 0.4));
  }
  #character .ch_wrap li span:hover:before {
    opacity: 0.3;
  }
}
#character .ch_wrap li.eiichi {
  transition-delay: 0s;
}
#character .ch_wrap li.eiichi span {
  background: url(../img/ch_thumb_eiichi.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.eiichi span:before {
  background: #d2383a;
}
#character .ch_wrap li.kira {
  transition-delay: 0.1s;
}
#character .ch_wrap li.kira span {
  background: url(../img/ch_thumb_kira.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.kira span:before {
  background: #366bb3;
}
#character .ch_wrap li.nagi {
  transition-delay: 0.2s;
}
#character .ch_wrap li.nagi span {
  background: url(../img/ch_thumb_nagi.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.nagi span:before {
  background: #ecba30;
}
#character .ch_wrap li.eiji {
  transition-delay: 0.3s;
}
#character .ch_wrap li.eiji span {
  background: url(../img/ch_thumb_eiji.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.eiji span:before {
  background: #674498;
}
#character .ch_wrap li.van {
  transition-delay: 0.4s;
}
#character .ch_wrap li.van span {
  background: url(../img/ch_thumb_van.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.van span:before {
  background: #dd6b25;
}
#character .ch_wrap li.yamato {
  transition-delay: 0.5s;
}
#character .ch_wrap li.yamato span {
  background: url(../img/ch_thumb_yamato.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.yamato span:before {
  background: #da5e9e;
}
#character .ch_wrap li.shion {
  transition-delay: 0.6s;
}
#character .ch_wrap li.shion span {
  background: url(../img/ch_thumb_shion.webp) 50% 50% no-repeat;
  background-size: contain;
}
#character .ch_wrap li.shion span:before {
  background: #83ad27;
}
#character .ch_wrap li.eiichi span:after {
  inset: -10px -30px;
  background: url(../img/ch_thumb_rose_eiichi.png) 0 100% no-repeat;
}
#character .ch_wrap li.kira span:after {
  inset: 8px -10px 5px -10px;
  background: url(../img/ch_thumb_rose_kira_a.png) 0 0 no-repeat, url(../img/ch_thumb_rose_kira_b.png) 100% 100% no-repeat;
}
#character .ch_wrap li.nagi span:after {
  background: url(../img/ch_thumb_rose_nagi.png) 0 0 no-repeat;
}
#character .ch_wrap li.eiji span:after {
  inset: 5px -15px 7px -5px;
  background: url(../img/ch_thumb_rose_eiji_a.png) 0 0 no-repeat, url(../img/ch_thumb_rose_eiji_b.png) 100% 100% no-repeat;
}
#character .ch_wrap li.van span:after {
  inset: -6px -25px;
  background: url(../img/ch_thumb_rose_van.png) 100% 0 no-repeat;
}
#character .ch_wrap li.yamato span:after {
  inset: 0 5px 5px -8px;
  background: url(../img/ch_thumb_rose_yamato_a.png) 100% 0 no-repeat, url(../img/ch_thumb_rose_yamato_b.png) 0 100% no-repeat;
}
#character .ch_wrap li.shion span:after {
  inset: -15px -30px;
  background: url(../img/ch_thumb_rose_shion.png) 100% 100% no-repeat;
}
@media (max-width: 800px) {
  #character {
    padding: 0px 10px 50px;
    margin-top: 50px;
  }
  #character .ch_wrap {
    padding: 0 10px;
    margin: -15px auto 50px;
    flex-wrap: wrap;
    gap: 10px 2%;
    justify-content: center;
  }
  #character .ch_wrap li {
    width: 23.5%;
  }
  #character .ch_wrap li:nth-of-type(1) {
    margin-left: 10px;
  }
  #character .ch_wrap li:nth-of-type(2), #character .ch_wrap li:nth-of-type(5), #character .ch_wrap li:nth-of-type(6) {
    top: 30px;
  }
  #character .ch_wrap li:nth-of-type(3) {
    margin-right: 10px;
  }
  #character .ch_wrap li.eiichi span:after {
    inset: 0px -20px;
    background-size: 50% auto;
  }
  #character .ch_wrap li.kira span:after {
    inset: 0 -5px;
    background-size: 50% auto, 50% auto;
  }
  #character .ch_wrap li.nagi span:after {
    inset: 0 -8px;
    transform: scaleX(-1);
    inset: 0px -5px;
    background-size: 58% auto;
  }
  #character .ch_wrap li.eiji span:after {
    inset: 0 -5px;
    background-size: 50% auto, 46% auto;
  }
  #character .ch_wrap li.van span:after {
    background-position: 0 100%;
    inset: -4px -5px;
    background-size: 60% auto;
  }
  #character .ch_wrap li.yamato span:after {
    inset: -3px -3px 0;
    background-size: 46% auto, 49% auto;
  }
  #character .ch_wrap li.shion span:after {
    inset: -8px -10px;
    background-size: 50% auto;
  }
}

/* ================================================================ *
* detail
* ================================================================ */
#detail {
  position: relative;
  background: none;
}
#detail .bg {
  position: absolute;
  inset: -550px 0 0 0;
  clip-path: inset(0);
  z-index: 1;
  -webkit-mask: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 100px, rgba(0, 0, 0, 0.8) 200px, #000 300px);
          mask: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 100px, rgba(0, 0, 0, 0.8) 200px, #000 300px);
}
#detail .bg:before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(../img/bg_blue.png);
}
#detail .h01, #detail .pg_wrap {
  position: relative;
  z-index: 2;
}
#detail .jk_wrap {
  margin-bottom: 70px;
  align-items: center;
}
#detail .jk_wrap .img {
  width: 500px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
#detail .jk_wrap .txt {
  flex: 1;
}
#detail .jk_wrap .txt h2 {
  font-size: 245%;
  line-height: 1;
  margin-bottom: 30px;
}
#detail .jk_wrap .txt h2 .sub {
  font-size: 50%;
  margin-bottom: 5px;
}
#detail .tokuten {
  width: 100%;
  justify-content: space-between;
  padding: 40px 30px;
}
#detail .tokuten dt {
  position: relative;
  text-align: center;
  font-size: 130%;
  line-height: 1.3;
  padding-bottom: 30px;
}
#detail .tokuten dt:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.8px;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid rgba(234, 227, 208, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 20%, #000 80%, transparent);
          mask: linear-gradient(to left, transparent, #000 20%, #000 80%, transparent);
}
#detail .tokuten dd {
  padding: 30px 50px 10px;
}
#detail .tokuten dd .img {
  width: 400px;
}
#detail .tokuten dd .txt {
  flex: 1;
  font-size: 120%;
  line-height: 1.4;
}
#detail .tokuten dd .txt .ul_list li {
  margin: 25px 0;
}
#detail .tokuten dd .txt .ul_list span {
  font-size: 80%;
  opacity: 0.7;
}
@media (max-width: 800px) {
  #detail .bg:before {
    background-size: 400px auto;
  }
  #detail .pg_wrap {
    padding: 0 10px;
  }
  #detail .jk_wrap {
    justify-content: center;
    margin-bottom: 25px;
  }
  #detail .jk_wrap .img {
    width: 80%;
  }
  #detail .jk_wrap .txt h2 {
    font-size: 160%;
    text-align: center;
    margin-bottom: 20px;
  }
  #detail .tokuten {
    padding: 22px 10px;
  }
  #detail .tokuten dt {
    padding-bottom: 15px;
    font-size: 110%;
  }
  #detail .tokuten dd {
    padding: 10px 20px 8px;
    gap: 10px;
    justify-content: center;
  }
  #detail .tokuten dd .img {
    width: 80%;
  }
  #detail .tokuten dd .txt {
    font-size: 100%;
  }
  #detail .tokuten dd .txt .ul_list {
    line-height: 1.3;
  }
  #detail .tokuten dd .txt .ul_list li {
    margin: 10px 0;
  }
}

/* ================================================================ *
* tracklist
* ================================================================ */
#tracklist .tracklist {
  position: relative;
  text-align: left;
}
#tracklist .tracklist li {
  position: relative;
  padding: 13px 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
#tracklist .tracklist li:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 20px);
  height: 1px;
  top: 0;
  left: -10px;
  border-top: 1px solid rgba(70, 84, 151, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
}
#tracklist .tracklist li:nth-last-of-type(1):after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 20px);
  height: 0.8px;
  bottom: 0;
  left: -10px;
  border-bottom: 1px solid rgba(70, 84, 151, 0.5);
  -webkit-mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(to left, transparent, #000 15%, #000 85%, transparent);
}
#tracklist .tracklist li .track {
  position: relative;
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  font-size: 140%;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  color: #465497;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: flex;
  justify-content: center;
  gap: 2px;
}
#tracklist .tracklist li .track:after {
  content: ".";
  display: inline-block;
}
#tracklist .tracklist li .txt {
  flex: 1;
}
#tracklist .tracklist li .txt .ttl {
  font-size: 28px;
  line-height: 1.2;
}
#tracklist .tracklist li .txt .ttl .sub {
  font-size: 80%;
  margin-right: 10px;
}
#tracklist .tracklist li .txt .ttl .offvocal {
  font-size: 80%;
  display: inline-block;
  opacity: 0.5;
}
#tracklist .tracklist li .txt .singer, #tracklist .tracklist li .txt .composer {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ヒラギノ角ゴ", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 75%;
  line-height: 1.1;
  margin-top: 6px;
  font-feature-settings: "palt" 1;
}
@media (min-width: 800px) {
  #tracklist .tracklist li .txt .singer span:not(:nth-last-of-type(1)), #tracklist .tracklist li .txt .composer span:not(:nth-last-of-type(1)) {
    display: inline-block;
    position: relative;
    padding-right: 0.5em;
  }
  #tracklist .tracklist li .txt .singer span:not(:nth-last-of-type(1)):after, #tracklist .tracklist li .txt .composer span:not(:nth-last-of-type(1)):after {
    content: " / ";
  }
}
#tracklist .tracklist li .player {
  width: 46px;
  aspect-ratio: 1/1;
}
#tracklist .tracklist li .player .jp-audio {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  cursor: pointer;
  background: url(../img/btn_play.png) 0 50% no-repeat;
  background-size: auto 100%;
}
#tracklist .tracklist li .player .jp-audio.on {
  background-position: 100% 50%;
}
@media (max-width: 800px) {
  #tracklist .tracklist li {
    padding: 8px 20px;
    gap: 8px;
  }
  #tracklist .tracklist li .track {
    font-size: 14px;
    letter-spacing: -1px;
  }
  #tracklist .tracklist li .txt .ttl {
    font-size: 18px;
    line-height: 1.2;
  }
  #tracklist .tracklist li .txt .singer, #tracklist .tracklist li .txt .composer {
    font-size: 9px;
    line-height: 1.1;
    margin-top: 3px;
  }
  #tracklist .tracklist li .txt .singer span, #tracklist .tracklist li .txt .composer span {
    display: block;
  }
  #tracklist .tracklist li .player {
    width: 30px;
  }
}

/* ================================================================ *
* movie
* ================================================================ */
#movie {
  position: relative;
  z-index: 1;
}
#movie .bg {
  position: absolute;
  inset: 0;
  clip-path: inset(0);
  z-index: 1;
}
#movie .bg:before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100svh;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/bg_blue.png);
}
#movie .h01, #movie .pg_wrap {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}
#movie .pp_movie_btn {
  width: min(800px, 100%);
  margin: 0 auto;
}
#movie .pp_movie_btn .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.35s ease-out;
}
#movie .pp_movie_btn .thumb img {
  width: 100%;
}
#movie .pp_movie_btn .thumb:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.2;
  transition: all 0.2s ease-out;
}
#movie .pp_movie_btn .thumb:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url(../img/movie_playbtn.png) 50% 50% no-repeat rgba(0, 0, 0, 0.2);
  background-size: 120px auto;
  transition: all 0.3s ease-out;
}
#movie .pp_movie_btn.active {
  opacity: 1;
}
#movie .pp_movie_btn:hover .thumb {
  transform: scale(1.03) translateY(-10px);
  box-shadow: 0 10px 30px rgba(26, 32, 57, 0.4);
}
#movie .pp_movie_btn:hover .thumb:before {
  opacity: 0;
}
@media (max-width: 800px) {
  #movie .bg:before {
    background-size: 400px auto;
  }
  #movie .pp_movie_btn .thumb:after {
    background-size: 70px auto;
  }
}

/*================================================================ *
* privilege,#special
* ================================================================ */
#privilege .pg_wrap:not(:nth-last-of-type(1)), #special .pg_wrap:not(:nth-last-of-type(1)) {
  margin-bottom: 50px;
}
#privilege .disc_wrap, #special .disc_wrap {
  text-align: center;
  margin-bottom: 40px;
}
#privilege .disc_wrap .disc, #special .disc_wrap .disc {
  margin-bottom: 25px;
}
#privilege .disc_wrap .table_spec, #privilege .disc_wrap .table_spec_blue, #special .disc_wrap .table_spec, #special .disc_wrap .table_spec_blue {
  margin-bottom: 25px;
}
@media (min-width: 800px) {
  #privilege .disc_wrap .table_spec th, #privilege .disc_wrap .table_spec_blue th, #special .disc_wrap .table_spec th, #special .disc_wrap .table_spec_blue th {
    width: 18em;
    padding-inline: 10em 4em;
  }
}
#privilege .disc_wrap .attention_ul, #special .disc_wrap .attention_ul {
  text-align: center;
}
@media (max-width: 800px) {
  #privilege .pg_wrap:not(:nth-last-of-type(1)), #special .pg_wrap:not(:nth-last-of-type(1)) {
    margin-bottom: 25px;
  }
  #privilege .disc_wrap, #special .disc_wrap {
    text-align: left;
    margin-bottom: 20px;
  }
  #privilege .disc_wrap .disc, #special .disc_wrap .disc {
    margin-bottom: 12px;
  }
  #privilege .disc_wrap .table_spec, #privilege .disc_wrap .table_spec_blue, #special .disc_wrap .table_spec, #special .disc_wrap .table_spec_blue {
    margin-bottom: 12px;
  }
  #privilege .disc_wrap .attention_ul, #special .disc_wrap .attention_ul {
    text-align: left;
  }
}

/* ================================================================ *
* privilege
* ================================================================ */
#privilege .item_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 2%;
  padding: 0;
  font-feature-settings: "palt" 1;
  text-align: center;
}
@media (min-width: 800px) {
  #privilege .item_wrapper .item_box {
    --cut: 15px;
  }
}
@media (max-width: 800px) {
  #privilege .item_wrapper .item_box {
    --cut: 6px;
  }
}
#privilege .item_wrapper .item_box {
  background: rgba(26, 32, 57, 0.05);
  -webkit-mask: radial-gradient(var(--cut) at var(--cut) var(--cut), transparent 98%, #000 101%) calc(-1 * var(--cut)) calc(-1 * var(--cut));
  mask: radial-gradient(var(--cut) at var(--cut) var(--cut), transparent 98%, #000 101%) calc(-1 * var(--cut)) calc(-1 * var(--cut));
  position: relative;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.8s ease-out, translate 0.8s ease-out;
}
@media (min-width: 800px) {
  #privilege .item_wrapper .item_box {
    width: 31.83333%;
  }
}
#privilege .item_wrapper .item_box.show {
  translate: 0 0;
}
#privilege .item_wrapper .item_box .img_wrap {
  position: relative;
  margin-bottom: 12px;
}
#privilege .item_wrapper .item_box .txt {
  margin-bottom: 10px;
  line-height: 1.2;
}
#privilege .item_wrapper .item_box .txt .boxttl {
  margin-bottom: 5px;
  font-weight: 600;
  color: #465497;
  font-size: 105%;
}
#privilege .item_wrapper .item_box .txt .boxttl span {
  display: block;
  font-size: 72%;
}
#privilege .item_wrapper .item_box .txt .item {
  font-size: 90%;
  margin-bottom: 3px;
}
#privilege .item_wrapper .item_box .txt .item_disc {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ヒラギノ角ゴ", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 75%;
  opacity: 0.8;
  line-height: 1;
  margin-top: 2px;
  margin-bottom: 3px;
}
#privilege .item_wrapper .item_box .btn {
  margin-top: auto;
  padding: 2px;
}
#privilege .item_wrapper .item_box .btn a {
  font-size: 85%;
  border-image-width: 10px;
}
@media (max-width: 800px) {
  #privilege .item_wrapper {
    margin: 0;
    gap: 10px 3%;
  }
  #privilege .item_wrapper .item_box {
    width: 48.5%;
    padding: 15px 12px;
  }
  #privilege .item_wrapper .item_box .img_wrap {
    margin-bottom: 8px;
  }
  #privilege .item_wrapper .item_box .txt {
    font-size: 90%;
    margin-bottom: 4px;
    line-height: 1;
  }
  #privilege .item_wrapper .item_box .txt .boxttl {
    font-size: 95%;
    margin-bottom: 5px;
  }
  #privilege .item_wrapper .item_box .txt .item {
    font-size: 90%;
  }
  #privilege .item_wrapper .item_box .txt .item_disc {
    margin-top: 0;
  }
  #privilege .item_wrapper .item_box .btn a {
    font-size: 10px;
    border-image-width: 8px;
  }
}

/* ================================================================ *
* special
* ================================================================ */
#special {
  position: relative;
  background: none;
  z-index: 2;
  padding-bottom: 50px;
}
#special .bg {
  position: absolute;
  inset: 0 0 -30vh 0;
  z-index: 1;
  clip-path: inset(0);
  -webkit-mask: linear-gradient(to top, transparent 0, #000 30vh);
          mask: linear-gradient(to top, transparent 0, #000 30vh);
}
#special .bg:before {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: url(../img/bg_blue.png);
}
#special .h01, #special .pg_wrap {
  position: relative;
  z-index: 2;
}
#special .h01, #special .pg_wrap, #special .pg_btnWrap {
  position: relative;
  z-index: 2;
}
#special .table_spec, #special .table_spec_blue {
  transition: all 0.3s ease-out;
}
#special .table_spec tr th, #special .table_spec_blue tr th {
  width: 12em;
  padding-inline: 6em 2em;
}
#special .table_spec .flex_wrap, #special .table_spec_blue .flex_wrap {
  padding: 10px 0;
  gap: 30px;
}
#special .table_spec .flex_wrap .img, #special .table_spec_blue .flex_wrap .img {
  width: min(380px, 100%);
}
#special .table_spec .flex_wrap .txt, #special .table_spec_blue .flex_wrap .txt {
  flex: 1;
}
#special .table_spec .flex_wrap .txt .item, #special .table_spec_blue .flex_wrap .txt .item {
  font-size: 130%;
}
#special .link {
  text-align: center;
  margin-top: 40px;
}
#special .link .btnWrap {
  margin-top: 20px;
}
@media (max-width: 800px) {
  #special .bg:before {
    background-size: 400px auto;
  }
  #special .table_spec tr, #special .table_spec_blue tr {
    display: block;
    padding: 8px 5px 5px;
  }
  #special .table_spec tr th, #special .table_spec_blue tr th {
    display: block;
    padding: 0;
    width: 100%;
    display: flex;
    gap: 0.2em;
    align-items: center;
  }
  #special .table_spec tr th:before, #special .table_spec_blue tr th:before {
    content: "";
    display: inline-block;
    width: 0.8em;
    aspect-ratio: 1/1;
    background: url(../img/icon_spec.png) 50% 50% no-repeat;
    background-size: contain;
  }
  #special .table_spec tr td, #special .table_spec_blue tr td {
    display: block;
    padding: 0;
    margin-top: 3px;
  }
  #special .table_spec .flex_wrap, #special .table_spec_blue .flex_wrap {
    padding: 5px 0 0 0;
    gap: 10px;
    flex-direction: column;
  }
  #special .table_spec .flex_wrap .img, #special .table_spec_blue .flex_wrap .img {
    width: 80%;
    margin: 0 auto;
  }
}

/* ================================================================ *
* foot_story
* ================================================================ */
#foot_story {
  min-height: calc(100svh + 100px);
  padding: 600px 0 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#foot_story:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0px;
  left: 0;
  z-index: 2;
  background: linear-gradient(to bottom, #465497 10px, rgba(70, 84, 151, 0));
}
#foot_story:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 40%;
  bottom: 0;
  left: 0;
  z-index: 3;
  background: linear-gradient(to top, #fff 10px, rgba(255, 255, 255, 0));
}
#foot_story .bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0);
}
#foot_story .bg:after {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../img/story_bg.webp) 50% 0 no-repeat;
  background-size: cover;
}
#foot_story .pg_wrap {
  position: relative;
  z-index: 4;
  color: #1a2039;
  font-size: 23px;
  line-height: 2.5;
  letter-spacing: 4px;
  text-shadow: 0 0 10px rgba(70, 84, 151, 0.3);
}
#foot_story .pg_wrap p:not(:nth-last-of-type(1)) {
  margin-bottom: 30px;
}
@media (max-width: 800px) {
  #foot_story {
    padding: 300px 0 200px;
  }
  #foot_story .pg_wrap {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0px;
  }
  #foot_story .pg_wrap p:not(:nth-last-of-type(1)) {
    margin-bottom: 15px;
  }
}

/* ================================================================ *
* footer
* ================================================================ */
#gfooter {
  background: url(../img/foot_bgtxt.png) 50% 100% no-repeat, url(../img/foot_rose.webp) 100% 100% no-repeat #1e264b;
  background-size: contain, auto;
  padding: 150px 30px 300px;
  color: #eae3d0;
  text-align: center;
}
#gfooter .sns {
  margin-bottom: 50px;
}
#gfooter .sns p {
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  font-size: 30px;
  margin-bottom: 5px;
}
#gfooter .btnWrap {
  margin-bottom: 30px;
}
#gfooter .btnWrap .btn {
  font-size: 90%;
}
#gfooter .btnWrap .btn a:after {
  display: none;
}
#gfooter .copy {
  font-size: 12px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ヒラギノ角ゴ", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  opacity: 0.7;
}
@media (max-width: 800px) {
  #gfooter {
    padding: 50px 30px 170px;
    background: url(../img/foot_bgtxt_sp.png) 50% 100% no-repeat, url(../img/foot_rose.webp) 100% 100% no-repeat #1e264b;
    background-size: contain, 70% auto;
  }
  #gfooter .sns {
    margin-bottom: 30px;
    gap: 15px;
  }
  #gfooter .sns p {
    font-size: 20px;
  }
  #gfooter .link {
    margin-bottom: 30px;
  }
  #gfooter .link .btn {
    margin: 0 auto 10px;
  }
  #gfooter .link .btn a, #gfooter .link .btn p {
    font-size: 14px;
    padding: 10px;
  }
  #gfooter .copy {
    font-size: 10px;
  }
}

/* ================================================================ *
* popup
* ================================================================ */
#popup, #popup_movie {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1010;
  pointer-events: none;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.3s ease-out;
}
#popup > .bg, #popup_movie > .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
#popup > .bg:after, #popup_movie > .bg:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: #1a2039;
  opacity: 0.9;
}
@media (max-width: 800px) {
  #popup > .bg:after, #popup_movie > .bg:after {
    background-size: 90% auto;
    background-position: calc(100% + 30px) 100%;
  }
}
#popup .close, #popup_movie .close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 85px;
  border-radius: 7px;
  z-index: 10;
  background: #1a2039;
  padding: 13px 14px 14px;
  aspect-ratio: 1/1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: all 0.3s ease-out;
}
#popup .close.on, #popup_movie .close.on {
  opacity: 1;
}
#popup .close .icon, #popup_movie .close .icon {
  position: relative;
  width: 100%;
  aspect-ratio: 1/0.6;
  display: flex;
  justify-content: center;
  align-items: center;
}
#popup .close .icon span, #popup_movie .close .icon span {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
}
#popup .close .icon span:before, #popup .close .icon span:after, #popup_movie .close .icon span:before, #popup_movie .close .icon span:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: #fff;
}
#popup .close .icon span:before, #popup_movie .close .icon span:before {
  transform: rotate(30deg);
}
#popup .close .icon span:after, #popup_movie .close .icon span:after {
  transform: rotate(-30deg);
}
#popup .close p, #popup_movie .close p {
  position: relative;
  width: 100%;
  color: #fff;
  font-family: erotique-alternate, sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 2px;
  text-indent: 0px;
  margin-top: 5px;
}
#popup .close.on, #popup_movie .close.on {
  opacity: 1;
}
#popup .content, #popup_movie .content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all 0.3s ease-out;
  opacity: 0;
  transform: scale(1.05);
}
#popup .content.on, #popup_movie .content.on {
  opacity: 1;
  transform: scale(1);
}
#popup .content .wrapper, #popup_movie .content .wrapper {
  position: relative;
  z-index: 10;
  opacity: 0;
  transition: all 0.3s ease-out;
}
#popup .content .wrapper.on, #popup_movie .content .wrapper.on {
  opacity: 1;
}
#popup .content .loading, #popup_movie .content .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: all 0.3s ease-out;
  opacity: 1;
  letter-spacing: 2px;
  text-indent: 2px;
  font-size: 85%;
  color: #fff;
}
#popup .content .loading.on, #popup_movie .content .loading.on {
  opacity: 0;
}
#popup.on, #popup_movie.on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 800px) {
  #popup .close, #popup_movie .close {
    width: 52px;
    top: 6px;
    right: 6px;
    padding: 8px 9px;
    border-radius: 4px;
    gap: 4px;
  }
  #popup .close p, #popup_movie .close p {
    font-size: 10px;
    letter-spacing: 0;
  }
  #popup .content .wrapper, #popup_movie .content .wrapper {
    padding: 0;
  }
}

#popup.img .content {
  padding: 0px;
  margin-bottom: 10px;
  height: auto;
  width: -moz-fit-content;
  width: fit-content;
}
#popup.img .content .wrapper {
  padding: 0;
  position: relative;
  text-align: center;
}
#popup.img .content .wrapper img {
  position: relative;
  z-index: 5;
}

#popup_movie {
  z-index: 1001;
}
#popup_movie #movie_wrap {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  max-height: 100%;
  opacity: 0;
  transform: scale(1.05);
  aspect-ratio: 16/9;
  transition: all 0.4s ease-out 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}
#popup_movie #movie_wrap iframe {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  aspect-ratio: 16/9;
}
#popup_movie #movie_wrap iframe.shorts {
  aspect-ratio: 9/16;
}
#popup_movie #movie_wrap iframe.on {
  display: block;
}
@media (max-width: 800px) {
  #popup_movie #movie_wrap {
    width: 100%;
    height: auto;
    padding: 10px;
  }
  #popup_movie #movie_wrap iframe.shorts {
    aspect-ratio: 9/16;
  }
}
#popup_movie.on {
  top: 0;
}
#popup_movie.on #movie_wrap {
  opacity: 1;
  transform: scale(1);
}

#popup.pp_character .wrapper {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.1);
  filter: blur(8px);
  transition: all 0.3s ease-out;
}
#popup.pp_character .wrapper.on {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
#popup.pp_character .ch_wrap {
  position: absolute;
  inset: 0;
  background: url(../img/bg.webp);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
#popup.pp_character .ch_wrap:after {
  content: "";
  display: block;
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  mix-blend-mode: multiply;
}
#popup.pp_character .ch_wrap .img {
  position: relative;
  aspect-ratio: 543/734;
  width: 543px;
  z-index: 2;
  max-height: 100%;
}
#popup.pp_character .ch_wrap .img:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
#popup.pp_character .ch_wrap .txt {
  position: relative;
  z-index: 2;
}
#popup.pp_character .ch_wrap .txt .name_wrap {
  margin: 20px 0 10px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  white-space: nowrap;
}
#popup.pp_character .ch_wrap .txt .name_wrap .ja {
  font-size: 30px;
  margin-bottom: 30px;
}
#popup.pp_character .ch_wrap .txt .ch {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0px 20px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 50px;
}
#popup.pp_character .ch_wrap .txt .disc {
  color: #fff;
  font-size: 20px;
  line-height: 2;
}
#popup.pp_character .ch_wrap.eiichi:after {
  background: linear-gradient(to top, #d2383a 10%, rgba(210, 56, 58, 0) 100%);
}
#popup.pp_character .ch_wrap.eiichi .img {
  background: url(../img/ch_eiichi.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.eiichi .name_wrap {
  color: #d2383a;
}
#popup.pp_character .ch_wrap.eiichi .ch {
  background: #d2383a;
}
#popup.pp_character .ch_wrap.eiichi .disc {
  text-shadow: 0 0 2px #d2383a, 0 0 20px #d2383a;
}
#popup.pp_character .ch_wrap.kira:after {
  background: linear-gradient(to top, #366bb3 10%, rgba(54, 107, 179, 0) 100%);
}
#popup.pp_character .ch_wrap.kira .img {
  background: url(../img/ch_kira.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.kira .name_wrap {
  color: #366bb3;
}
#popup.pp_character .ch_wrap.kira .ch {
  background: #366bb3;
}
#popup.pp_character .ch_wrap.kira .disc {
  text-shadow: 0 0 2px #366bb3, 0 0 20px #366bb3;
}
#popup.pp_character .ch_wrap.nagi:after {
  background: linear-gradient(to top, #ecba30 10%, rgba(236, 186, 48, 0) 100%);
}
#popup.pp_character .ch_wrap.nagi .img {
  background: url(../img/ch_nagi.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.nagi .name_wrap {
  color: #ecba30;
}
#popup.pp_character .ch_wrap.nagi .ch {
  background: #ecba30;
}
#popup.pp_character .ch_wrap.nagi .disc {
  text-shadow: 0 0 2px #ecba30, 0 0 20px #ecba30;
}
#popup.pp_character .ch_wrap.eiji:after {
  background: linear-gradient(to top, #674498 10%, rgba(103, 68, 152, 0) 100%);
}
#popup.pp_character .ch_wrap.eiji .img {
  background: url(../img/ch_eiji.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.eiji .name_wrap {
  color: #674498;
}
#popup.pp_character .ch_wrap.eiji .ch {
  background: #674498;
}
#popup.pp_character .ch_wrap.eiji .disc {
  text-shadow: 0 0 2px #674498, 0 0 20px #674498;
}
#popup.pp_character .ch_wrap.van:after {
  background: linear-gradient(to top, #dd6b25 10%, rgba(221, 107, 37, 0) 100%);
}
#popup.pp_character .ch_wrap.van .img {
  background: url(../img/ch_van.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.van .name_wrap {
  color: #dd6b25;
}
#popup.pp_character .ch_wrap.van .ch {
  background: #dd6b25;
}
#popup.pp_character .ch_wrap.van .disc {
  text-shadow: 0 0 2px #dd6b25, 0 0 20px #dd6b25;
}
#popup.pp_character .ch_wrap.yamato:after {
  background: linear-gradient(to top, #da5e9e 10%, rgba(218, 94, 158, 0) 100%);
}
#popup.pp_character .ch_wrap.yamato .img {
  background: url(../img/ch_yamato.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.yamato .name_wrap {
  color: #da5e9e;
}
#popup.pp_character .ch_wrap.yamato .ch {
  background: #da5e9e;
}
#popup.pp_character .ch_wrap.yamato .disc {
  text-shadow: 0 0 2px #da5e9e, 0 0 20px #da5e9e;
}
#popup.pp_character .ch_wrap.shion:after {
  background: linear-gradient(to top, #83ad27 10%, rgba(131, 173, 39, 0) 100%);
}
#popup.pp_character .ch_wrap.shion .img {
  background: url(../img/ch_shion.webp) 50% 50% no-repeat;
  background-size: contain;
}
#popup.pp_character .ch_wrap.shion .name_wrap {
  color: #83ad27;
}
#popup.pp_character .ch_wrap.shion .ch {
  background: #83ad27;
}
#popup.pp_character .ch_wrap.shion .disc {
  text-shadow: 0 0 2px #83ad27, 0 0 20px #83ad27;
}
#popup.pp_character .ch_wrap.kira .txt .name_wrap, #popup.pp_character .ch_wrap.van .txt .name_wrap, #popup.pp_character .ch_wrap.yamato .txt .name_wrap {
  margin-bottom: 30px;
}
@media (max-width: 800px) {
  #popup.pp_character .wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #popup.pp_character .ch_wrap {
    display: block;
    position: relative;
    padding: 30px 20px 50px;
    background-size: 400px auto;
  }
  #popup.pp_character .ch_wrap:after {
    inset: 65% 0 0 0;
  }
  #popup.pp_character .ch_wrap .img {
    width: 90%;
    margin: 0 auto 20px;
  }
  #popup.pp_character .ch_wrap .txt .position {
    width: 180px;
  }
  #popup.pp_character .ch_wrap .txt .name_wrap {
    margin: 5px 0 0;
    gap: 10px;
  }
  #popup.pp_character .ch_wrap .txt .name_wrap .en img {
    height: 80px;
  }
  #popup.pp_character .ch_wrap .txt .name_wrap .ja {
    font-size: 20px;
    margin-bottom: 15px;
  }
  #popup.pp_character .ch_wrap .txt .ch {
    margin-bottom: 25px;
  }
  #popup.pp_character .ch_wrap .txt .disc {
    font-size: 15px;
    line-height: 1.5;
  }
  #popup.pp_character .ch_wrap.kira .txt .name_wrap, #popup.pp_character .ch_wrap.van .txt .name_wrap, #popup.pp_character .ch_wrap.yamato .txt .name_wrap {
    margin-bottom: 10px;
  }
}/*# sourceMappingURL=style.css.map */