@charset "UTF-8";

:root {
  --font-poppins: "Poppins", sans-serif;
}

.pane-contents {
  opacity: 0;
  transition: opacity .3s;
}
.pane-contents.show {
  opacity: 1;
}
.pane-contents .container .pane-left-menu {
  display: none;
}
.pane-contents .container .block-genre-page {
  max-width: 920px;
  margin: 0 auto;
}
[data-browse-mode="S"] .block-topic-path {
  display: none;
}

/*-----------------------------------------
common
-----------------------------------------*/
#scbag {
  padding: 0 0 100px;
  color: #000000;
}
#scbag * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#scbag img {
  vertical-align: top;
}
#scbag a {
  text-decoration: none;
}
#scbag a:hover {
  color: inherit;
}
@media screen and (min-width: 751px) {
  #scbag .for-sp {
    display: none;
  }
}
@media screen and (max-width: 750px) {
  #scbag .for-pc {
    display: none;
  }
}

/*-----------------------------------------
  animation
-----------------------------------------*/
#scbag .is-fadeIn {
  opacity: 0;
  transform: translateY(100px);
}
#scbag .is-fadeIn.active {
  animation: fadeIn 1.6s forwards;
}
#scbag .is-fadeIn.active.delay01 {
  animation-delay: 0.6s;
}
#scbag .is-fadeIn.active.delay02 {
  animation-delay: 1.2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*-----------------------------------------
top
-----------------------------------------*/
#scbag .sec-top .mv img {
  width: 100%;
}
#scbag .sec-top .lead {
  margin: 47px 0 0;
  font-size: 18px;
  line-height: 2.222;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 750px) {
  #scbag .sec-top .lead {
    margin: calc(45 / 750 * 100vw) 0 0;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.833;
  }
}

/*-----------------------------------------
content
-----------------------------------------*/
#scbag .content-inner {
  position: relative;
  max-width: min(1230px,calc(1230 / 1530 * 100vw));
  margin: 0 auto;
  padding: 0 15px;
}
#scbag .content-main {
  min-height: min(778px,calc(778 / 1530 * 100vw));
  background-repeat: no-repeat, no-repeat;
  background-position: right top min(280px,calc(280 / 1920 * 100vw)), left top;
  background-size: calc(650 / 1920 * 100vw), calc(1386 / 1920 * 100vw);
}
#scbag .content-title {
  padding: min(106px,calc(106 / 1530 * 100vw)) 0 0;
  font-weight: bold;
  font-size: min(24px,calc(24 / 1530 * 100vw));
  color: #fff;
}
#scbag .content-title .en {
  display: block;
  margin: 0 0 3px;
  font-family: var(--font-poppins);
  font-weight: bold;
  font-size: min(82px,calc(82 / 1530 * 100vw));
  letter-spacing: 0.07em;
  line-height: 1;
}
#scbag .content-item {
  text-align: center;
}
#scbag .content-model {
  position: absolute;
}
#scbag .content-point {
  margin: max(-26px,calc(-26 / 1530 * 100vw)) 0 0;
}
#scbag .content-point-title {
  font-family: var(--font-poppins);
  font-weight: bold;
  font-size: min(58px,calc(58 / 1530 * 100vw));
  line-height: 1;
  letter-spacing: 0.11em;
  text-align: center;
}
#scbag .content-point-list {
  display: flex;
  justify-content: space-between;
  margin: max(45px,calc(45 / 1530 * 100vw)) 0 0;
}
#scbag .content-point-list li {
  flex: 1;
  position: relative;
  text-align: center;
}
#scbag .content-point-list-num {
  width: fit-content;
  margin: 0 0 max(-50px,calc(-50 / 1530 * 100vw)) 0;
  font-family: var(--font-poppins);
  font-weight: bold;
  font-size: min(93px,calc(93 / 1530 * 100vw));
  line-height: 1;
  text-align: left;
  opacity: 0.3;
}
#scbag .content-point-list-img {
  width: min(244px,calc(244 / 1530 * 100vw));
  margin: 0 auto;
}
#scbag .content-point-list-text {
  margin: 23px 0 0;
  font-size: min(18px,calc(18 / 1530 * 100vw));
  line-height: 1.666;
  letter-spacing: 0.05em;
}
#scbag .content-point-list-text span {
  display: block;
  margin: 0 0 12px;
  font-weight: bold;
  font-size: min(20px,calc(20 / 1530 * 100vw));
}
#scbag .content-link {
  margin: 56px 0 0;
}
#scbag .content-link a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 556px;
  height: 90px;
  margin: 0 auto;
  padding: 0 10px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  border-radius: 80px;
}
#scbag .content-link a .en {
  display: block;
  font-family: var(--font-poppins);
  font-weight: bold;
  font-size: 36px;
  letter-spacing: 0.09em;
  line-height: 1;
  color: #fff;
}
#scbag .content-link a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 24px;
  width: 11px;
  height: 12px;
  margin: auto;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#scbag .content-link a:hover {
  opacity: 0.8;
}
@media screen and (max-width: 750px) {
  #scbag .content-inner {
    max-width: 100%;
    padding: 0 calc(30 / 750 * 100vw);
  }
  #scbag .content-main {
    min-height: calc(580 / 750 * 100vw);
    background-position: right top  calc(284 / 750 * 100vw), left top;
    background-size: calc(516 / 750 * 100vw), calc(710 / 750 * 100vw);
  }
  #scbag .content-title {
    padding: calc(48 / 750 * 100vw) 0 0 calc(26 / 750 * 100vw);
    font-size: calc(20 / 750 * 100vw);
  }
  #scbag .content-title .en {
    margin: 0 0 calc(5 / 750 * 100vw);
    font-size: calc(65 / 750 * 100vw);
  }
  #scbag .content-point {
    margin: calc(78 / 750 * 100vw) 0 0;
  }
  #scbag .content-point-title {
    font-size: calc(55 / 750 * 100vw);
  }
  #scbag .content-point-list {
    flex-wrap: wrap;
    gap: calc(68 / 750 * 100vw) 0;
    margin: calc(42 / 750 * 100vw) 0 0;
  }
  #scbag .content-point-list li {
    width: 50%;
  }
  #scbag .content-point-list-num {
    margin: 0 0 calc(-60 / 750 * 100vw) 0;
    font-size: calc(86 / 750 * 100vw);
  }
  #scbag .content-point-list-img {
    width: calc(323 / 750 * 100vw);
  }
  #scbag .content-point-list-text {
    margin: calc(20 / 750 * 100vw) calc(-10 / 750 * 100vw) 0;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.625;
    letter-spacing: 0;
  }
  #scbag .content-point-list-text span {
    margin: 0 calc(-10 / 750 * 100vw) calc(8 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
    letter-spacing: 0.03em;
  }
  #scbag .content-link {
    margin: calc(45 / 750 * 100vw) 0 0;
  }
  #scbag .content-link a {
    width: calc(600 / 750 * 100vw);
    height: calc(95 / 750 * 100vw);
    font-size: calc(18 / 750 * 100vw);
  }
  #scbag .content-link a .en {
    font-size: calc(36 / 750 * 100vw);
  }
  #scbag .content-link a::after {
    right: calc(24 / 750 * 100vw);
    width: calc(11 / 750 * 100vw);
    height: calc(12 / 750 * 100vw);
  }
}

/*-----------------------------------------
edgelink
-----------------------------------------*/
#scbag .sec-edgelink .content-main {
  margin: 108px 0 0;
  background-image: url(/img/usr/genre_free/scbag/bg_edgelink_02.jpg), url(/img/usr/genre_free/scbag/bg_edgelink_01.jpg);
}
#scbag .sec-edgelink .content-item {
  margin: max(-306px,calc(-306 / 1530 * 100vw)) 0 0;
}
#scbag .sec-edgelink .content-item img {
  width: min(883px,calc(883 / 1530 * 100vw));
  margin: 0 min(18px,calc(18 / 1530 * 100vw)) 0 0;
}
#scbag .sec-edgelink .content-model {
  top: min(280px,calc(280 / 1530 * 100vw));
  left: max(-210px,calc(-210 / 1530 * 100vw));
  width: min(276px,calc(276 / 1530 * 100vw));
}
#scbag .sec-edgelink .content-point-list-num {
  color: #ff880f;
}
#scbag .sec-edgelink .content-link a {
  background: #191919;
}
#scbag .sec-edgelink .content-link a .en {
  color: #ff8000;
}
@media screen and (max-width: 750px) {
  #scbag .sec-edgelink .content-main {
    margin: calc(65 / 750 * 100vw) 0 0;
    background-image: url(/img/usr/genre_free/scbag/bg_edgelink_02_sp.jpg), url(/img/usr/genre_free/scbag/bg_edgelink_01_sp.jpg);
  }
  #scbag .sec-edgelink .content-item {
    margin: calc(-190 / 750 * 100vw) 0 0;
    text-align: right;
  }
  #scbag .sec-edgelink .content-item img {
    width: calc(536 / 750 * 100vw);
    margin: 0 calc(10 / 750 * 100vw) 0 0;
  }
  #scbag .sec-edgelink .content-model {
    top: calc(334 / 750 * 100vw);
    left: calc(10 / 750 * 100vw);
    width: calc(159 / 750 * 100vw);
  }
}

/*-----------------------------------------
jbj
-----------------------------------------*/
#scbag .sec-jbj .content-main {
  margin: 212px 0 0;
  background-position: left top min(280px,calc(280 / 1920 * 100vw)), right top;
  background-size: calc(650 / 1920 * 100vw), calc(1563 / 1920 * 100vw);
  background-image: url(/img/usr/genre_free/scbag/bg_jbj_02.jpg), url(/img/usr/genre_free/scbag/bg_jbj_01.jpg);
}
#scbag .sec-jbj .content-title {
  width: fit-content;
  margin: 0 0 0 auto;
  color: #191919;
}
#scbag .sec-jbj .content-title .en {
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
#scbag .sec-jbj .content-title .en small {
  display: block;
  font-size: min(69px,calc(69 / 1530 * 100vw));
}
#scbag .sec-jbj .content-item {
  margin: max(-385px,calc(-385 / 1530 * 100vw)) 0 0;
}
#scbag .sec-jbj .content-item img {
  width: min(963px,calc(963 / 1530 * 100vw));
  margin: 0 min(163px,calc(163 / 1530 * 100vw)) 0 0;
}
#scbag .sec-jbj .content-model {
  top: min(257px,calc(257 / 1530 * 100vw));
  right: max(-152px,calc(-152 / 1530 * 100vw));
  width: min(355px,calc(355 / 1530 * 100vw));
}
#scbag .sec-jbj .content-point-list-num {
  background: linear-gradient(127deg, #a9c9f7, #eabbf9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.65;
}
#scbag .sec-jbj .content-link a {
  width: 576px;
  background: linear-gradient(180deg, #7a97ec, #d086e8);
}
#scbag .sec-jbj .content-link a .en {
  font-size: 34px;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 750px) {
  #scbag .sec-jbj .content-main {
    margin: calc(130 / 750 * 100vw) 0 0;
    background-position: left top calc(280 / 750 * 100vw), right top;
    background-size: calc(516 / 750 * 100vw), calc(710 / 750 * 100vw);
    background-image: url(/img/usr/genre_free/scbag/bg_jbj_02_sp.jpg), url(/img/usr/genre_free/scbag/bg_jbj_01_sp.jpg);
  }
  #scbag .sec-jbj .content-title {
    padding-left: 0;
    padding-right: calc(35 / 750 * 100vw);
  }
  #scbag .sec-jbj .content-title .en {
    margin: 0 0 calc(14 / 750 * 100vw);
    letter-spacing: 0.05em;
  }
  #scbag .sec-jbj .content-title .en small {
    font-size: calc(37 / 750 * 100vw);
    letter-spacing: 0.07em;
  }
  #scbag .sec-jbj .content-item {
    margin: calc(-226 / 750 * 100vw) 0 0;
    text-align: left;
  }
  #scbag .sec-jbj .content-item img {
    width: calc(585 / 750 * 100vw);
    margin: 0;
  }
  #scbag .sec-jbj .content-model {
    top: calc(402 / 750 * 100vw);
    right: 0;
    width: calc(211 / 750 * 100vw);
  }
  #scbag .sec-jbj .content-link a {
    width: calc(600 / 750 * 100vw);
  }
  #scbag .sec-jbj .content-link a .en {
    font-size: calc(34 / 750 * 100vw);
    letter-spacing: 0.05em;
  }
}

/*-----------------------------------------
champion
-----------------------------------------*/
#scbag .sec-champion .content-main {
  margin: 218px 0 0;
  background-image: url(/img/usr/genre_free/scbag/bg_champion_02.jpg), url(/img/usr/genre_free/scbag/bg_champion_01.jpg);
}
#scbag .sec-champion .content-title .en {
  letter-spacing: 0;
}
#scbag .sec-champion .content-item {
  margin: max(-297px,calc(-297 / 1530 * 100vw)) 0 0;
}
#scbag .sec-champion .content-item img {
  width: min(877px,calc(877 / 1530 * 100vw));
  margin: 0 min(32px,calc(32 / 1530 * 100vw)) 0 0;
}
#scbag .sec-champion .content-model {
  top: min(247px,calc(247 / 1530 * 100vw));
  left: max(-142px,calc(-142 / 1530 * 100vw));
  width: min(204px,calc(204 / 1530 * 100vw));
}
#scbag .sec-champion .content-point-list-num {
  color: #dd1b32;
}
#scbag .sec-champion .content-link a {
  background: #303468;
}
#scbag .sec-champion .content-link a .en {
  letter-spacing: 0.03em;
}
@media screen and (max-width: 750px) {
  #scbag .sec-champion .content-main {
    margin: calc(132 / 750 * 100vw) 0 0;
    background-image: url(/img/usr/genre_free/scbag/bg_champion_02_sp.jpg), url(/img/usr/genre_free/scbag/bg_champion_01_sp.jpg);
  }
  #scbag .sec-champion .content-item {
    margin: calc(-192 / 750 * 100vw) 0 0 0;
    text-align: right;
  }
  #scbag .sec-champion .content-item img {
    width: calc(570 / 750 * 100vw);
    margin: 0;
  }
  #scbag .sec-champion .content-model {
    top: calc(326 / 750 * 100vw);
    left: calc(46 / 750 * 100vw);
    width: calc(132 / 750 * 100vw);
  }
}