/*common*/
#special_main {
  position: relative;
  width: 100%;
  background: url("../img/cont_bg.jpg") center center repeat; }
  @media screen and (min-width: 769px) {
    #special_main {
      background-size: 136.6rem auto; } }
  @media screen and (max-width: 768px) {
    #special_main {
      background-size: 100% auto; } }

#special_main .bg_dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  @media screen and (min-width: 769px) {
    #special_main .bg_dot {
      background: url("../../character/img/bg_dot.png") center top no-repeat;
      background-size: 136.6rem auto; } }
  @media screen and (max-width: 768px) {
    #special_main .bg_dot {
      background: url("../../character/img/bg_dot_sp.png") center bottom no-repeat;
      background-size: 100% auto; } }

#special_main .inner {
  position: relative;
  display: flex; }
  @media screen and (min-width: 769px) {
    #special_main .inner {
      justify-content: space-between;
      align-items: flex-start;
      padding: 0 0 12rem; } }
  @media screen and (max-width: 768px) {
    #special_main .inner {
      flex-direction: column;
      width: 100%;
      padding: 0 0 8rem; } }

#special_main .bg_en {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #special_main .bg_en {
      top: -11rem;
      left: -45rem;
      width: 130rem;
      height: 130rem;
      background: url("../../character/img/bg_en.png") center top no-repeat;
      background-size: 100% auto; } }
  @media screen and (max-width: 768px) {
    #special_main .bg_en {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("../../character/img/bg_en_sp.png") 0 0 no-repeat;
      background-size: 100% auto; } }

#map_cont {
  position: relative; }
  @media screen and (min-width: 769px) {
    #map_cont {
      width: 58rem;
      padding: 15rem 0 0; } }
  @media screen and (max-width: 768px) {
    #map_cont {
      width: 100%;
      padding: 7.5rem 0 0; } }

#map_cont .h_group {
  position: relative;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #map_cont .h_group {
      width: 46rem;
      gap: 3rem;
      align-items: flex-start;
      justify-content: center; } }
  @media screen and (max-width: 768px) {
    #map_cont .h_group {
      width: 100%;
      gap: 2rem;
      align-items: center;
      justify-content: center; } }

@media screen and (min-width: 769px) {
  #map_cont .h_group h2 {
    width: 46rem; } }
@media screen and (max-width: 768px) {
  #map_cont .h_group h2 {
    width: 20rem; } }

#map_cont .h_group p {
  position: relative;
  display: block;
  font-weight: 500;
  letter-spacing: 0.0em;
  color: #fff;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #map_cont .h_group p {
      width: 35rem;
      line-height: 1.438em;
      font-size: 1.6rem; } }
  @media screen and (max-width: 768px) {
    #map_cont .h_group p {
      text-align: center;
      line-height: 1.563em;
      font-size: 1.6rem; } }

#map_area {
  position: relative; }
  @media screen and (min-width: 769px) {
    #map_area {
      width: 57rem;
      transform: translate(-3rem, -6rem); } }
  @media screen and (max-width: 768px) {
    #map_area {
      width: 100%; } }

#map_area .star {
  position: absolute;
  display: block;
  cursor: pointer; }
  @media screen and (min-width: 769px) {
    #map_area .star {
      width: 4.5rem;
      height: 4.5rem; } }
  @media screen and (max-width: 768px) {
    #map_area .star {
      width: 2.6rem;
      height: 2.6rem; } }

#map_area .star img {
  transition: all 400ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transform: scale(0.5);
  opacity: 0; }

#map_area .star.current img,
#map_area .star:hover img {
  transform: scale(1);
  opacity: 1; }

#map_area .star#star_1 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #map_area .star#star_1 {
      top: 34.5rem;
      left: 34.5rem; } }
  @media screen and (max-width: 768px) {
    #map_area .star#star_1 {
      top: 18.2rem;
      left: 23rem; } }

#map_area .star#star_4 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #map_area .star#star_4 {
      top: 38rem;
      left: 25.5rem; } }
  @media screen and (max-width: 768px) {
    #map_area .star#star_4 {
      top: 20.5rem;
      left: 16.5rem; } }

#map_area .star#star_3 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #map_area .star#star_3 {
      top: 21.5rem;
      left: 19rem; } }
  @media screen and (max-width: 768px) {
    #map_area .star#star_3 {
      top: 11rem;
      left: 15.3rem; } }

#map_area .star#star_2 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #map_area .star#star_2 {
      top: 17.5rem;
      left: 36rem; } }
  @media screen and (max-width: 768px) {
    #map_area .star#star_2 {
      top: 6.5rem;
      left: 23.5rem; } }

#map_area .star#star_5 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #map_area .star#star_5 {
      top: 16rem;
      left: 8rem; } }
  @media screen and (max-width: 768px) {
    #map_area .star#star_5 {
      top: 9rem;
      left: 8rem; } }

#map_area .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: ease-in-out 0.4s all; }

#map_area .line.current {
  opacity: 1; }

#slide_cont {
  position: relative; }
  @media screen and (min-width: 769px) {
    #slide_cont {
      width: 62rem;
      padding: 27rem 0 0; } }
  @media screen and (max-width: 768px) {
    #slide_cont {
      width: 100%;
      padding: 1rem 0 0; } }

#slide_cont .slide_set {
  position: relative;
  background: #fff url("../../img/box_bg.png") 0 0 repeat; }
  @media screen and (min-width: 769px) {
    #slide_cont .slide_set {
      background-size: 2.8rem auto;
      width: 54rem;
      height: 57.8rem;
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 768px) {
    #slide_cont .slide_set {
      background-size: 1.8rem auto;
      width: 32.4rem;
      height: 42.2rem;
      border-radius: 0.8rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
      margin: 0 auto; } }

#slide_cont h3 {
  position: absolute;
  z-index: 10; }
  @media screen and (min-width: 769px) {
    #slide_cont h3 {
      top: 3rem;
      left: -2rem;
      width: 20rem; } }
  @media screen and (max-width: 768px) {
    #slide_cont h3 {
      top: -1.5rem;
      left: 8.3rem;
      width: 15.7rem; } }

#slide_cont h3 .tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none; }

#slide_cont h3 .tag.current {
  opacity: 1; }

@media screen and (min-width: 769px) {
  #slide_cont .school {
    padding: 3rem 1.6rem 1.6rem; } }
@media screen and (max-width: 768px) {
  #slide_cont .school {
    padding: 5rem 1rem 1rem; } }

#slide_cont .school > p {
  position: relative;
  display: block;
  font-weight: 400;
  letter-spacing: 0.0em;
  color: #333; }
  @media screen and (min-width: 769px) {
    #slide_cont .school > p {
      margin: 0 0 0 auto;
      width: 32.4rem;
      height: 9.2rem;
      line-height: 1.534em;
      font-size: 1.5rem; } }
  @media screen and (max-width: 768px) {
    #slide_cont .school > p {
      margin: 0 auto;
      width: 30.4rem;
      height: 11.5rem;
      line-height: 1.4em;
      font-size: 1.5rem;
      text-align: justify; } }

#slide_cont .school .character_select {
  position: relative; }
  @media screen and (min-width: 769px) {
    #slide_cont .school .character_select {
      margin: 3rem auto 0;
      width: 50.8rem; } }
  @media screen and (max-width: 768px) {
    #slide_cont .school .character_select {
      width: 30.4rem; } }

#slide_cont .school .character_select .btn_select {
  position: absolute;
  display: block;
  transition: ease-in-out 0.4s all; }

#slide_cont .school .character_select .btn_select img {
  transition: ease-in-out 0.4s all;
  transform-origin: 47% 10%; }

@media screen and (min-width: 769px) {
  #slide_cont .school .character_select .btn_select:hover img {
    z-index: 10;
    transform: rotate(-10deg); } }

#slide_cont .school .character_select .btn_select.select_1 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #slide_cont .school .character_select .btn_select.select_1 {
      top: 28.6rem;
      left: 1.8rem;
      width: 15.2rem; } }
  @media screen and (max-width: 768px) {
    #slide_cont .school .character_select .btn_select.select_1 {
      top: 16.3rem;
      left: 0.4rem;
      width: 9.7rem; } }

#slide_cont .school .character_select .btn_select.select_2 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #slide_cont .school .character_select .btn_select.select_2 {
      top: 25.5rem;
      left: 18.2rem;
      width: 15.2rem; } }
  @media screen and (max-width: 768px) {
    #slide_cont .school .character_select .btn_select.select_2 {
      top: 13.5rem;
      left: 10.5rem;
      width: 9.5rem; } }

#slide_cont .school .character_select .btn_select.select_3 {
  position: absolute; }
  @media screen and (min-width: 769px) {
    #slide_cont .school .character_select .btn_select.select_3 {
      top: 28.6rem;
      left: 33.8rem;
      width: 15.2rem; } }
  @media screen and (max-width: 768px) {
    #slide_cont .school .character_select .btn_select.select_3 {
      top: 16.3rem;
      left: 20rem;
      width: 9.7rem; } }

@media screen and (min-width: 769px) {
  #character .special_character#special_character_3:hover {
    z-index: 10;
    transform: rotate(10deg); } }

.slider_nav .prev_next {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10; }
  @media screen and (min-width: 769px) {
    .slider_nav .prev_next {
      width: 60rem;
      transform: translateX(-3rem);
      margin-top: -30rem; } }
  @media screen and (max-width: 768px) {
    .slider_nav .prev_next {
      width: 16.4rem;
      margin: 2.3rem auto 0; } }

.slider_nav .prev,
.slider_nav .next {
  position: relative;
  transition: ease-out 0.6s all;
  border: #aaa 1px solid !important;
  background: #fff;
  display: block;
  border-radius: 50%;
  pointer-events: auto !important;
  cursor: pointer; }
  @media screen and (min-width: 769px) {
    .slider_nav .prev,
    .slider_nav .next {
      width: 6.6rem;
      height: 6.6rem; } }
  @media screen and (max-width: 768px) {
    .slider_nav .prev,
    .slider_nav .next {
      width: 6.6rem;
      height: 6.6rem; } }

.slider_nav .prev span,
.slider_nav .next span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: ease-in-out 0.4s all;
  background: url("../../character/img/icon_arrow.png") center center no-repeat; }
  @media screen and (min-width: 769px) {
    .slider_nav .prev span,
    .slider_nav .next span {
      background-size: 0.8rem auto; } }
  @media screen and (max-width: 768px) {
    .slider_nav .prev span,
    .slider_nav .next span {
      background-size: 0.9rem auto; } }

.slider_nav .prev span {
  transform: scale(-1, -1); }