@charset "UTF-8";
/* 1st Anniversary */
/* ============================================ */

/* Base */
/* ============================================ */
:root {
  --anniv-bg: #1a0519;
  --anniv-dt: #ffc5f1;
  --anniv-text: #fff;
  --anniv-copy: #736f67;
  --anniv-font: clamp(12px, 3.2vw, 16px);
}
body#first_anniv {
  background: var(--anniv-bg);
  color: var(--anniv-text);
}
#first_anniv #contents_wrapper {
  background: var(--anniv-bg);
}
#first_anniv #contents_wrapper::before {
  display: none;
}
#first_anniv header,
#first_anniv #fixed_banner,
#first_anniv #fixed_shop_banner {
  display: none;
}
#first_anniv main {
  overflow-x: hidden;
}
#first_anniv .init {
  opacity: 0;
  transform: translateY(2vw);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
#first_anniv .init.appear {
  opacity: 1;
  transform: translateY(0);
}
#first_anniv .anniv_section {
  position: relative;
  overflow: hidden;
}
#first_anniv .anniv_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: no-repeat center top / cover;
  z-index: 0;
  pointer-events: none;
}
#first_anniv .anniv_inner {
  position: relative;
  z-index: 1;
}
#first_anniv .anniv_visual {
  display: block;
}
#first_anniv .anniv_visual img {
  width: 100%;
}
#first_anniv .anniv_note {
  position: relative;
  z-index: 1;
  text-align: left;
  color: var(--anniv-text);
  font-size: var(--anniv-font);
  font-weight: var(--font-normal);
  line-height: 1.6;
}
#first_anniv .anniv_note p {
  margin: 0;
}
#first_anniv .anniv_note p + p {
  margin-top: 1.6em;
}
#first_anniv .anniv_more {
  position: relative;
  display: inline-block;
  margin-top: 1vw;
  padding-left: 5vw;
  color: var(--middle);
  font-size: var(--anniv-font);
  font-weight: var(--font-normal);
  line-height: 1.6;
  filter: brightness(1);
  transition: filter 300ms var(--ease);
}
#first_anniv .anniv_more[hidden] {
  display: none;
}
#first_anniv .anniv_more:hover {
  filter: brightness(1.5);
}
#first_anniv .anniv_more::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 3.48vw;
  height: calc(3.48vw * 0.6666);
  background: url("./images/common/icon_arrow_s.webp") no-repeat center / contain;
  transform: translateY(-50%);
  transition: transform 300ms var(--ease);
}
#first_anniv .anniv_more:hover::before {
  transform: translate(1vw, -50%) rotateX(180deg);
}
@media print, screen and (min-width: 769px) {
  :root {
    --anniv-font: clamp(11px, 1.05vw, 21px);
  }
  #first_anniv .init {
    transform: translateY(1vw);
  }
  #first_anniv .anniv_more {
    margin-top: .3vw;
    padding-left: 1.75vw;
  }
  #first_anniv .anniv_more::before {
    width: 1.2vw;
    height: calc(1.2vw * 0.6666);
  }
  #first_anniv .anniv_more:hover::before {
    transform: translate(.5vw, -50%) rotateX(180deg);
  }
}



/* KV + Thank you */
/* ============================================ */
#first_anniv #anniv_hero::before {
  background-image: url("./images/1st_anniv/bg_1_index.webp");
}
#anniv_kv {
  position: relative;
  height: 174vw;
  overflow: hidden;
  z-index: 1;
}
#anniv_kv .anniv_grad {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
}
#anniv_kv .anniv_kv_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#anniv_kv .anniv_kv_img img {
  width: 100%;
}
#anniv_thanks {
  position: relative;
  height: 143.4vw;
  margin-top: -5.8vw;
  z-index: 2;
}
#anniv_thanks h2 {
  position: absolute;
  top: 0;
  left: 5vw;
  width: 90vw;
  height: calc(90vw * 1116 / 1700);
  background: url("./images/1st_anniv/pv_txt.webp") no-repeat center top / 100% auto;
  text-indent: -999vw;
  overflow: hidden;
}
#first_anniv .anniv_pv {
  display: block;
  position: absolute;
  top: 59.6vw;
  left: 2.25vw;
  width: 95.5vw;
  height: calc(95.5vw * 0.6116);
  transition: filter 300ms var(--ease);
}
#first_anniv .anniv_pv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./images/1st_anniv/pv_frame.webp") no-repeat center / contain;
  z-index: 1;
  pointer-events: none;
}
#first_anniv .anniv_pv img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
}
#first_anniv .anniv_pv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./images/index/pv_play_btn.webp") no-repeat center center / 18%;
  transition: transform 300ms var(--ease);
  z-index: 2;
  pointer-events: none;
}
#first_anniv .anniv_pv:hover {
  filter: brightness(2);
}
#first_anniv .anniv_pv:hover::after {
  transform: rotateX(180deg);
}
@media print, screen and (min-width: 769px) {
  #first_anniv #anniv_hero::before {
    background-image: url("./images/1st_anniv/bg_1_pc.webp");
  }
  #anniv_kv {
    height: 71.73vw;
  }
  #anniv_kv .anniv_grad {
    width: 100%;
    height: auto;
  }
  #anniv_thanks {
    height: 33.2vw;
    margin-top: -9.7vw;
  }
  #anniv_thanks h2 {
    top: .7vw;
    left: 20.8vw;
    width: 28.33vw;
    height: calc(28.33vw * 1116 / 1700);
  }
  #first_anniv .anniv_pv {
    top: .2vw;
    left: 50.5vw;
    width: 32.27vw;
    height: calc(32.27vw * 0.6116);
  }
}



/* NEW ARRIVALS */
/* ============================================ */
#first_anniv #anniv_arrivals::before {
  top: 10vw;
  background-image: url("./images/1st_anniv/bg_3.webp");
}
#anniv_arrivals {
  margin-top: -10vw;
  z-index: 3;
  padding-bottom: 12vw;
}
#first_anniv .anniv_band {
  position: relative;
  height: 10vw;
  background: url("./images/1st_anniv/title_1.webp") no-repeat center top / 190.5vw 10vw;
  text-indent: -999vw;
  overflow: hidden;
  z-index: 1;
}
#anniv_arrivals .anniv_unit {
  position: relative;
  z-index: 1;
}
#anniv_arrivals .anniv_band + .anniv_unit {
  margin-top: 3.9vw;
}
#anniv_arrivals .anniv_unit + .anniv_unit {
  margin-top: 3.3vw;
}
#anniv_arrivals .anniv_unit picture img {
  width: 100%;
}
#anniv_arrivals .anniv_unit .anniv_note {
  padding: 5vw 12vw 0 11vw;
}
#anniv_arrivals .anniv_unit:nth-of-type(1) picture img {
  aspect-ratio: auto 860 / 1018;
}
#anniv_arrivals .anniv_unit:nth-of-type(2) picture img {
  aspect-ratio: auto 860 / 1018;
}
@media print, screen and (min-width: 769px) {
  #anniv_arrivals {
    margin-top: -7vw;
    padding-bottom: 3.8vw;
  }
  #first_anniv #anniv_arrivals::before {
    top: 7vw;
  }
  #first_anniv .anniv_band {
    height: 7vw;
    background-size: 133.33vw 7vw;
  }
  #anniv_arrivals .anniv_band + .anniv_unit {
    margin-top: 2vw;
  }
  #anniv_arrivals .anniv_unit + .anniv_unit {
    margin-top: 0;
  }
  #anniv_arrivals .anniv_unit .anniv_note {
    padding: 1.4vw 0 0 18.25vw;
  }
  #anniv_arrivals .anniv_unit:nth-of-type(1) picture img {
    aspect-ratio: auto 2200 / 986;
  }
  #anniv_arrivals .anniv_unit:nth-of-type(2) picture img {
    aspect-ratio: auto 2200 / 991;
  }
}



/* サポーター */
/* ============================================ */
#first_anniv #anniv_supporter::before {
  background-image: url("./images/1st_anniv/bg_4_index.webp");
}
#anniv_supporter {
  padding: 5.2vw 0 8.8vw;
}
#anniv_supporter .anniv_visual {
  width: 92.6vw;
  margin: 0 auto;
  aspect-ratio: auto 2200 / 883;
}
#anniv_supporter .anniv_note {
  padding: 2.6vw 12vw 0 11vw;
}
@media print, screen and (min-width: 769px) {
  #first_anniv #anniv_supporter::before {
    background-image: url("./images/1st_anniv/bg_4_pc.webp");
  }
  #anniv_supporter {
    padding: 2.2vw 0 5.2vw;
  }
  #anniv_supporter .anniv_visual {
    width: 64vw;
  }
  #anniv_supporter .anniv_note {
    padding: 1.2vw 0 0 18.25vw;
  }
}



/* SBR ジョニィ・ジョースター */
/* ============================================ */
#first_anniv #anniv_sbr::before {
  background-image: url("./images/1st_anniv/bg_5_index.webp");
}
#anniv_sbr {
  padding: 12.8vw 0 14.4vw;
}
#anniv_sbr h2 {
  width: 92.6vw;
  height: calc(92.6vw * 76 / 860);
  margin: 0 auto;
  background: url("./images/1st_anniv/title_2_index.webp") no-repeat center top / 100% auto;
  text-indent: -999vw;
  overflow: hidden;
}
#anniv_sbr .anniv_visual {
  width: 92.6vw;
  margin: 2.8vw auto 0;
  aspect-ratio: auto 2200 / 1146;
}
#anniv_sbr .anniv_note_box {
  width: 92.6vw;
  margin: 2.7vw auto 0;
  padding: 3.5vw 7.3vw 3vw;
  background-color: rgba(0, 0, 0, .55);
}
@media print, screen and (min-width: 769px) {
  #first_anniv #anniv_sbr::before {
    background-image: url("./images/1st_anniv/bg_5_pc.webp");
  }
  #anniv_sbr {
    padding: 6vw 0 6.7vw;
  }
  #anniv_sbr h2 {
    width: 64vw;
    height: calc(64vw * 146 / 2200);
    background-image: url("./images/1st_anniv/title_2_pc.webp");
  }
  #anniv_sbr .anniv_visual {
    width: 64vw;
    margin-top: 1vw;
  }
  #anniv_sbr .anniv_note_box {
    width: 64vw;
    margin-top: 1.1vw;
    padding: 1.2vw 1.5vw 1vw;
  }
}



/* オリジナルストーリー第2弾 */
/* ============================================ */
#first_anniv #anniv_story::before {
  background-image: url("./images/1st_anniv/bg_6.webp");
}
#anniv_story {
  padding: 7vw 0 9vw;
}
#anniv_story h2 {
  width: 84.3vw;
  height: calc(84.3vw * 150 / 860);
  margin: 0 auto;
  background: url("./images/1st_anniv/title_3_index.webp") no-repeat center top / 100% auto;
  text-indent: -999vw;
  overflow: hidden;
}
#anniv_story .anniv_visual {
  width: 88.5vw;
  margin: 4.4vw auto 0;
}
#anniv_story .anniv_visual img {
  aspect-ratio: auto 860 / 1625;
}
#anniv_story .anniv_note_center {
  margin-top: 8vw;
  text-align: center;
}
#anniv_story .anniv_note_center .anniv_more {
  margin-top: .5vw;
}
@media print, screen and (min-width: 769px) {
  #anniv_story {
    padding: 3.8vw 0 4.7vw;
  }
  #anniv_story h2 {
    width: 64.2vw;
    height: calc(64.2vw * 321 / 2200);
    background-image: url("./images/1st_anniv/title_3_pc.webp");
  }
  #anniv_story .anniv_visual {
    width: 65.47vw;
    margin-top: 2vw;
  }
  #anniv_story .anniv_visual img {
    aspect-ratio: auto 1680 / 1109;
  }
  #anniv_story .anniv_note_center {
    margin-top: 0;
  }
  #anniv_story .anniv_note_center .anniv_more {
    margin-top: .3vw;
  }
}



/* キャンペーン */
/* ============================================ */
#first_anniv #anniv_campaign::before {
  background-image: url("./images/1st_anniv/bg_2_index.webp");
}
#anniv_campaign {
  padding: 16.2vw 0 12.4vw;
}
#anniv_campaign .anniv_campaign_item + .anniv_campaign_item {
  margin-top: 7.3vw;
}
#anniv_campaign .anniv_campaign_item h2 {
  width: 84.3vw;
  height: calc(84.3vw * 119 / 860);
  margin: 0 auto;
  text-indent: -999vw;
  overflow: hidden;
  background: no-repeat center top / 100% auto;
}
#anniv_campaign .anniv_campaign_item:nth-of-type(1) h2 {
  background-image: url("./images/1st_anniv/title_4_index.webp");
}
#anniv_campaign .anniv_campaign_item:nth-of-type(2) h2 {
  background-image: url("./images/1st_anniv/title_5_index.webp");
}
#anniv_campaign .anniv_campaign_item:nth-of-type(3) h2 {
  background-image: url("./images/1st_anniv/title_6_index.webp");
}
#anniv_campaign .anniv_campaign_item:nth-of-type(4) h2 {
  background-image: url("./images/1st_anniv/title_7_index.webp");
}
#anniv_campaign .anniv_campaign_item .anniv_visual {
  width: 78.1vw;
  margin: 0 auto;
  aspect-ratio: auto 2200 / 1155;
}
#anniv_campaign .anniv_campaign_item .anniv_note {
  padding: 2vw 12vw 0 11vw;
}
@media print, screen and (min-width: 769px) {
  #first_anniv #anniv_campaign::before {
    background-image: url("./images/1st_anniv/bg_2_pc.webp");
  }
  #anniv_campaign {
    padding: 8.5vw 0 4.75vw;
  }
  #anniv_campaign .anniv_campaign_item + .anniv_campaign_item {
    margin-top: 2.7vw;
  }
  #anniv_campaign .anniv_campaign_item h2 {
    width: 64.2vw;
    height: calc(64.2vw * 254 / 2200);
  }
  #anniv_campaign .anniv_campaign_item:nth-of-type(1) h2 {
    background-image: url("./images/1st_anniv/title_4_pc.webp");
  }
  #anniv_campaign .anniv_campaign_item:nth-of-type(2) h2 {
    background-image: url("./images/1st_anniv/title_5_pc.webp");
  }
  #anniv_campaign .anniv_campaign_item:nth-of-type(3) h2 {
    background-image: url("./images/1st_anniv/title_6_pc.webp");
  }
  #anniv_campaign .anniv_campaign_item:nth-of-type(4) h2 {
    background-image: url("./images/1st_anniv/title_7_pc.webp");
  }
  #anniv_campaign .anniv_campaign_item .anniv_visual {
    width: 60vw;
  }
  #anniv_campaign .anniv_campaign_item .anniv_note {
    padding: 1vw 0 0 20.25vw;
  }
}



/* Footer */
/* ============================================ */
#first_anniv #anniv_footer::before {
  background-image: url("./images/1st_anniv/bg_2_index.webp");
}
#first_anniv #anniv_footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./images/1st_anniv/bg_gradation.webp") no-repeat center bottom / cover;
  transform: scaleY(-1);
  z-index: 0;
  pointer-events: none;
}
#anniv_footer {
  padding: 43.4vw 0 16.8vw;
}
#anniv_footer a {
  filter: brightness(1);
  transition: filter 300ms var(--ease);
}
#anniv_footer a:hover {
  filter: brightness(1.5);
}
#anniv_footer .anniv_footer_inner {
  position: relative;
  z-index: 1;
}
#anniv_app {
  display: grid;
  grid-template-columns: 25.5vw 1fr;
  grid-template-areas:
    "icon dl"
    "store store";
  column-gap: 3.5vw;
  margin: 0 11vw;
  text-align: left;
}
#anniv_app > img {
  grid-area: icon;
  width: 25.5vw;
  aspect-ratio: auto 818 / 818;
}
#anniv_app dl {
  grid-area: dl;
  font-size: clamp(9px, 2.4vw, 14px);
  line-height: 1.06;
}
#anniv_app dt {
  color: var(--anniv-dt);
  font-weight: var(--font-normal);
}
#anniv_app dd {
  margin-bottom: 1.9vw;
  color: var(--white);
}
#anniv_app .anniv_store {
  grid-area: store;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3.2vw 4vw;
  width: 78vw;
  margin: 2.8vw auto 0;
}
#anniv_app .anniv_store img {
  height: 12.2vw;
  width: auto;
}
#anniv_footer .anniv_footer_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 11.3vw 8vw 0 8.7vw;
}
#first_anniv #footer_nav {
  position: static;
  top: auto;
  width: auto;
  margin: 0;
  color: var(--middle);
}
#first_anniv #footer_nav ul {
  gap: 0 8vw;
  margin-bottom: 0;
}
#anniv_footer .anniv_gumi {
  display: block;
  width: 27.8vw;
}
#anniv_footer .anniv_gumi img {
  width: 100%;
  aspect-ratio: auto 238 / 59;
}
#anniv_footer .anniv_copyright {
  margin: 6vw 8.5vw 0;
  text-align: left;
  color: var(--anniv-copy);
  font-size: clamp(8px, 2vw, 12px);
  line-height: 2.1;
}
#anniv_footer .anniv_sep {
  display: none;
}
#anniv_footer .anniv_sep_keep {
  display: inline;
}
@media print, screen and (min-width: 769px) {
  #first_anniv #anniv_footer::before {
    background-image: url("./images/1st_anniv/bg_2_pc.webp");
  }
  #anniv_footer {
    height: 49vw;
    padding: 19.4vw 0 0;
  }
  #anniv_app {
    grid-template-columns: 13.63vw 1fr;
    grid-template-areas:
      "icon dl"
      "icon store";
    column-gap: 4.6vw;
    margin: 0 0 0 21.75vw;
  }
  #anniv_app > img {
    width: 13.63vw;
  }
  #anniv_app dl {
    display: grid;
    grid-template-columns: 7vw 1fr;
    column-gap: 0;
    row-gap: .85vw;
    align-self: start;
    margin-top: 1vw;
    font-size: clamp(11px, 1.05vw, 21px);
    line-height: 1.1;
  }
  #anniv_app dt {
    white-space: nowrap;
  }
  #anniv_app dd {
    margin: 0;
  }
  #anniv_app dd::before {
    content: "―";
    margin-right: 1vw;
    color: var(--anniv-dt);
  }
  #anniv_app .anniv_store {
    justify-content: flex-start;
    gap: 1.5vw;
    width: auto;
    margin: 1.7vw 0 0;
  }
  #first_anniv .anniv_store .apple_store,
  #first_anniv .anniv_store .google_store {
    display: block;
  }
  #anniv_app .anniv_store img {
    height: 4vw;
  }
  #anniv_app .anniv_store a {
    transform: scale(1);
    transition: transform 300ms var(--ease), filter 300ms var(--ease);
  }
  #anniv_app .anniv_store a:hover {
    transform: scale(1.06);
  }
  #anniv_footer .anniv_footer_row {
    display: block;
    margin: 5vw 0 0 10vw;
  }
  #first_anniv #footer_nav {
    top: auto;
    width: auto;
    margin: 0;
  }
  #first_anniv #footer_nav ul {
    gap: 0 2vw;
  }
  #anniv_footer .anniv_gumi {
    position: absolute;
    top: 21.9vw;
    right: 9.5vw;
    width: 9.5vw;
  }
  #anniv_footer .anniv_copyright {
    width: 65vw;
    margin: 1vw 0 0 10vw;
    font-size: clamp(8px, .75vw, 14px);
    line-height: 1.7;
  }
  #anniv_footer .anniv_sep {
    display: inline;
  }
}