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

#character_main .inner {
  position: relative; }
  @media screen and (min-width: 769px) {
    #character_main .inner {
      height: 114rem;
      padding: 15rem 0 0; } }
  @media screen and (max-width: 768px) {
    #character_main .inner {
      width: 100% !important;
      margin: 0 auto;
      height: 157.5rem;
      padding: 7.5rem 0 0; } }

#bg_set,
#point_set,
#lines_set {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    #bg_set,
    #point_set,
    #lines_set {
      left: 50%;
      transform: translateX(-50%);
      width: 120rem; } }
  @media screen and (max-width: 768px) {
    #bg_set,
    #point_set,
    #lines_set {
      left: 0 !important;
      transform: translateX(0) !important;
      width: 100% !important; } }

#bg_set figure,
#point_set figure,
#lines_set figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 900ms cubic-bezier(0.74, 0.255, 0.19, 0.955);
  transition-timing-function: cubic-bezier(0.74, 0.255, 0.19, 0.955); }

#bg_set figure.current,
#point_set figure.current,
#lines_set figure {
  opacity: 1; }

#point_set {
  /*z-index: 10;*/ }

#bg_color {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #bg_color {
      height: 55.2rem; } }
  @media screen and (max-width: 768px) {
    #bg_color {
      height: 82rem; } }

#bg_color img {
  width: 100%;
  height: 100% !important; }

@media screen and (min-width: 769px) {
  #character_main h2 {
    width: 48.3rem;
    margin-left: 5.6rem; } }
@media screen and (max-width: 768px) {
  #character_main h2 {
    width: 30rem;
    margin: 0 auto; } }

#tab_area {
  position: relative;
  z-index: 8; }
  @media screen and (min-width: 769px) {
    #tab_area {
      width: 56.5rem;
      margin-top: -2.5rem;
      margin-left: 6.4rem; } }
  @media screen and (max-width: 768px) {
    #tab_area {
      margin-top: 57rem;
      width: 37.5rem !important; } }

#tab_area .tab {
  position: absolute;
  z-index: 8;
  cursor: pointer;
  transition: ease-in-out 0.4s all;
  pointer-events: auto; }
  @media screen and (min-width: 769px) {
    #tab_area .tab {
      top: 0rem;
      width: 17.3rem; } }
  @media screen and (max-width: 768px) {
    #tab_area .tab {
      top: 0rem;
      width: 13.2rem; } }

#tab_area .tab img {
  transition: ease-in-out 0.4s all; }

@media screen and (min-width: 769px) {
  #tab_area .tab:hover img {
    opacity: .7; } }

@media screen and (min-width: 769px) {
  #tab_area #tab_mascot {
    top: 0.5rem; } }
@media screen and (max-width: 768px) {
  #tab_area #tab_mascot {
    top: 0.5rem; } }

#tab_area .tab.current {
  z-index: 10;
  pointer-events: none; }

@media screen and (min-width: 769px) {
  #tab_area #tab_character {
    left: 6.8rem; } }
@media screen and (max-width: 768px) {
  #tab_area #tab_character {
    left: 4.9rem; } }

@media screen and (min-width: 769px) {
  #tab_area #tab_mascot {
    left: 26.5rem; } }
@media screen and (max-width: 768px) {
  #tab_area #tab_mascot {
    left: 19rem; } }

#tab_area figure,
#tab_area .main_binder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none; }

#tab_area .main_binder {
  z-index: 4; }

#tab_area .main_binder.current {
  z-index: 9; }

#tab_area .main_binder.start {
  animation: anime_binder .8s ease-in-out forwards; }

@keyframes anime_binder {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(50%, 0) rotate(25deg); }
  100% {
    transform: translate(0, 0); } }
#tab_area .main_binder .icon_set {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: stretch;
  pointer-events: auto; }
  @media screen and (min-width: 769px) {
    #tab_area .main_binder .icon_set {
      width: 42rem;
      top: 52.5rem;
      left: 6rem; } }
  @media screen and (max-width: 768px) {
    #tab_area .main_binder .icon_set {
      width: 31.5rem;
      top: 59rem;
      left: 3rem; } }

@media screen and (min-width: 769px) {
  #tab_area #main_mascot.main_binder .icon_set {
    top: 50rem; } }
@media screen and (max-width: 768px) {
  #tab_area #main_mascot.main_binder .icon_set {
    top: 49rem; } }

#tab_area .main_binder .icon {
  position: relative;
  display: block;
  pointer-events: auto; }
  @media screen and (min-width: 769px) {
    #tab_area .main_binder .icon {
      width: 14rem; } }
  @media screen and (max-width: 768px) {
    #tab_area .main_binder .icon {
      width: 10.5rem; } }

/*
#tab_area .main_binder #icon1_1,
#tab_area .main_binder #icon2_1{
	@include mq(pc) {
	left: divceil(80, 10, rem);
	}
    @include mq(sp) {
	left: divceil(35, 10, rem);
	}	
}
#tab_area .main_binder #icon1_2,
#tab_area .main_binder #icon2_2{
	@include mq(pc) {
	left: divceil(215, 10, rem);
	}
    @include mq(sp) {
	left: divceil(135, 10, rem);
	}	
}
#tab_area .main_binder #icon1_3,
#tab_area .main_binder #icon2_3{
	@include mq(pc) {
	left: divceil(350, 10, rem);
	}
    @include mq(sp) {
	left: divceil(230, 10, rem);
	}	
}
*/
#tab_area .main_binder .icon img {
  transition: ease-in-out 0.4s all; }

@media screen and (min-width: 769px) {
  #tab_area .main_binder .icon:hover img {
    opacity: .7; } }

#tab_area #tab_clip {
  z-index: 12; }

#tab_area #tab_clip.start {
  animation: anime_clip 1.0s ease-in-out forwards; }

@keyframes anime_clip {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(0, -10%) rotate(-10deg); }
  100% {
    transform: translate(0, 0); } }
#btn_zoom {
  position: absolute;
  z-index: 8;
  cursor: pointer;
  transition: ease-in-out 0.4s all; }
  @media screen and (min-width: 769px) {
    #btn_zoom {
      bottom: 14rem;
      left: 62.5rem;
      width: 8.6rem; } }
  @media screen and (max-width: 768px) {
    #btn_zoom {
      top: 59rem;
      left: 3rem;
      width: 7rem; } }

#btn_zoom img {
  transition: ease-in-out 0.4s all; }

@media screen and (min-width: 769px) {
  #btn_zoom:hover img {
    transform: scale(1.15); } }

#btn_envelope {
  position: absolute;
  z-index: 8;
  cursor: pointer;
  transition: ease-in-out 0.4s all; }
  @media screen and (min-width: 769px) {
    #btn_envelope {
      bottom: 10rem;
      right: 0rem;
      width: 30rem; } }
  @media screen and (max-width: 768px) {
    #btn_envelope {
      top: 59rem;
      right: 0rem;
      width: 18rem; } }

#btn_envelope.character .character {
  display: block; }

#btn_envelope.character .mascot {
  display: none; }

#btn_envelope.mascot .character {
  display: none; }

#btn_envelope.mascot .mascot {
  display: block; }

#art.character .character {
  display: block; }

#art.character .mascot {
  display: none; }

#art.mascot .character {
  display: none; }

#art.mascot .mascot {
  display: block; }

#zoom.character .character {
  display: block; }

#zoom.character .mascot {
  display: none; }

#zoom.mascot .character {
  display: none; }

#zoom.mascot .mascot {
  display: block; }

/*
#btn_envelope img{
	transition:ease-in-out 0.4s all;
}
#btn_envelope:hover img{
	@include mq(pc) {
		opacity: .7;
	}
}
*/
#btn_envelope .open {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; }

#btn_envelope.start .open {
  opacity: 1;
  transition: ease-out 0.6s all; }

#others {
  position: relative;
  z-index: 3; }

#others::before {
  position: absolute;
  content: "";
  left: 0;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #others::before {
      top: -1.8rem;
      height: 51.8rem;
      background: url("../../character/img/school/bg_others.png") center bottom no-repeat;
      background-size: 100% 100%; } }
  @media screen and (max-width: 768px) {
    #others::before {
      top: -6.2rem;
      height: 115rem;
      background: url("../../character/img/school/bg_others_sp.png") center bottom no-repeat;
      background-size: 100% auto; } }

#others .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  @media screen and (min-width: 769px) {
    #others .bg {
      background: url("../../character/img/school/bg_others_inner.png") center top no-repeat;
      background-size: 136.6rem auto; } }

#others .inner {
  position: relative; }
  @media screen and (min-width: 769px) {
    #others .inner {
      height: 50rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-start; } }
  @media screen and (max-width: 768px) {
    #others .inner {
      height: 105rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem; } }

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

@media screen and (min-width: 769px) {
  #others .h_group h2 {
    width: 53rem; } }
@media screen and (max-width: 768px) {
  #others .h_group h2 {
    width: 25rem;
    margin-left: 1rem; } }

#others .btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: #aaa 1px solid;
  background: #fff; }
  @media screen and (min-width: 769px) {
    #others .btn {
      margin-left: 13rem;
      width: 33.6rem;
      height: 7.6rem;
      border-radius: 3.8rem; } }
  @media screen and (max-width: 768px) {
    #others .btn {
      margin: 1rem auto 0;
      width: 30rem;
      height: 6.8rem;
      border-radius: 3.4rem; } }

#others .btn p {
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.0em;
  color: #333; }
  @media screen and (min-width: 769px) {
    #others .btn p {
      line-height: 1em;
      font-size: 1.6rem;
      transform: translateY(0.3rem); } }
  @media screen and (max-width: 768px) {
    #others .btn p {
      line-height: 1em;
      font-size: 1.6rem;
      transform: translateY(0.5rem); } }

#others .btn > span {
  position: absolute;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  transition: .4s ease-in-out; }
  @media screen and (min-width: 769px) {
    #others .btn > span {
      right: 4rem;
      width: 1.2rem;
      height: 1.2rem; } }
  @media screen and (max-width: 768px) {
    #others .btn > span {
      right: 4rem;
      width: 1.2rem;
      height: 1.2rem; } }

#others .btn {
  transition: ease-in-out 0.4s all; }

@media screen and (min-width: 769px) {
  #others .btn:hover {
    opacity: .7; } }

.others_set {
  position: relative;
  display: flex; }
  @media screen and (min-width: 769px) {
    .others_set {
      align-items: stretch;
      justify-content: flex-end;
      gap: 4rem;
      padding: 10.5rem 12rem 0 0; } }
  @media screen and (max-width: 768px) {
    .others_set {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
      padding: 0; } }

.others_set .box {
  position: relative;
  display: flex;
  background: #fff; }
  @media screen and (min-width: 769px) {
    .others_set .box {
      width: 21rem;
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }
  @media screen and (max-width: 768px) {
    .others_set .box {
      width: 21.4rem;
      border-radius: 1.5rem;
      box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1); } }

.box_btn {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center; }
  @media screen and (min-width: 769px) {
    .box_btn {
      gap: 1rem; } }
  @media screen and (max-width: 768px) {
    .box_btn {
      gap: 1rem; } }

.box_btn .arrow {
  position: relative;
  display: inline-block;
  background: #457cca;
  transition: ease-in-out 0.4s all; }
  @media screen and (min-width: 769px) {
    .box_btn .arrow {
      width: 4.3rem;
      height: 4.3rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem; } }
  @media screen and (max-width: 768px) {
    .box_btn .arrow {
      width: 4.8rem;
      height: 4.8rem;
      border-top-left-radius: 1.5rem;
      border-bottom-right-radius: 1.5rem; } }

.box_btn .arrow::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '';
  transition: ease-in-out 0.4s all;
  background: url("../img/box_arrow.svg") center center no-repeat; }
  @media screen and (min-width: 769px) {
    .box_btn .arrow::after {
      background-size: 1rem auto; } }
  @media screen and (max-width: 768px) {
    .box_btn .arrow::after {
      background-size: 1rem auto; } }

@media screen and (min-width: 769px) {
  .others_set .box:hover .box_btn .arrow {
    background: #1a3661; } }

@media screen and (min-width: 769px) {
  .others_set .box:hover .box_btn .arrow::after {
    transform: translateX(5px); } }

/**/
#modal {
  position: fixed;
  /*z-index:8900;*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  pointer-events: none;
  overflow: hidden;
  background: url("../../character/img/school/bg_modal.png") 0 0 repeat;
  background-size: 100%;
  transition: all 300ms cubic-bezier(0.74, 0.255, 0.19, 0.955);
  transition-timing-function: cubic-bezier(0.74, 0.255, 0.19, 0.955);
  opacity: 0; }
  @media screen and (min-width: 769px) {
    #modal {
      padding: 0rem 0;
      z-index: 9900; } }
  @media screen and (max-width: 768px) {
    #modal {
      z-index: 9900;
      padding: 0rem; } }

#modal.open {
  opacity: 1;
  pointer-events: auto !important; }

#modal .inner {
  position: relative;
  margin: 0 auto;
  overflow-y: auto !important;
  overflow-x: hidden !important; }
  @media screen and (min-width: 769px) {
    #modal .inner {
      width: 100%;
      height: 100%;
      padding: 6rem; } }
  @media screen and (max-width: 768px) {
    #modal .inner {
      width: 100%;
      height: 100%;
      padding: 0 1rem; } }

#modal .inner > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #modal .inner > div {
      min-height: 100%;
      gap: 2.5rem 0; } }
  @media screen and (max-width: 768px) {
    #modal .inner > div {
      min-height: 100%;
      gap: 2rem 0; } }

#modal .inner #zoom {
  margin: 0 auto;
  height: 0;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #modal .inner #zoom {
      width: 75rem; } }
  @media screen and (max-width: 768px) {
    #modal .inner #zoom {
      width: 100%; } }

#modal .inner #art {
  margin: 0 auto;
  height: 0;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #modal .inner #art {
      width: 82rem; } }
  @media screen and (max-width: 768px) {
    #modal .inner #art {
      width: 35.5rem; } }

#modal .inner #zoom.open {
  height: auto;
  overflow: visible; }

#modal .inner #art.open {
  height: auto;
  overflow: visible; }

#modal .inner #art figure {
  transform: translate(40%, 30%) scale(0.3) rotate(30deg); }

#modal .inner #art.open figure {
  transition: all 600ms cubic-bezier(0.74, 0.255, 0.19, 0.955);
  transition-timing-function: cubic-bezier(0.74, 0.255, 0.19, 0.955);
  transform: translate(0, 0) scale(1) rotate(0);
  display: block !important;
  transition-delay: .6s; }

.close_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: #aaa 1px solid;
  background: #fff;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    .close_btn {
      width: 33.6rem;
      height: 7.6rem;
      border-radius: 3.8rem; } }
  @media screen and (max-width: 768px) {
    .close_btn {
      width: 30rem;
      height: 6.8rem;
      border-radius: 3.4rem; } }

.close_btn p {
  position: relative;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.0em;
  color: #333; }
  @media screen and (min-width: 769px) {
    .close_btn p {
      line-height: 1em;
      font-size: 1.6rem; } }
  @media screen and (max-width: 768px) {
    .close_btn p {
      line-height: 1em;
      font-size: 1.6rem; } }

.close_btn > span {
  position: absolute;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  transition: .4s ease-in-out; }
  @media screen and (min-width: 769px) {
    .close_btn > span {
      right: 4rem;
      width: 1.6rem;
      height: 1.6rem; } }
  @media screen and (max-width: 768px) {
    .close_btn > span {
      right: 4rem;
      width: 1.6rem;
      height: 1.6rem; } }

.close_btn {
  transition: ease-in-out 0.4s all; }

@media screen and (min-width: 769px) {
  .close_btn:hover {
    opacity: .7; } }

/**/
#character_main #bg_set,
#character_main #point_set,
#character_main #lines_set {
  clip-path: inset(100% 0 0 0);
  transition: all 900ms cubic-bezier(0.74, 0.255, 0.19, 0.955);
  transition-timing-function: cubic-bezier(0.74, 0.255, 0.19, 0.955); }
  @media screen and (min-width: 769px) {
    #character_main #bg_set,
    #character_main #point_set,
    #character_main #lines_set {
      transform: translateY(7rem) translateX(-50%); } }
  @media screen and (max-width: 768px) {
    #character_main #bg_set,
    #character_main #point_set,
    #character_main #lines_set {
      transform: translateY(3rem) translateX(-50%); } }

#character_main.active #bg_set,
#character_main.active #point_set,
#character_main.active #lines_set {
  clip-path: inset(0 0 0 0);
  transform: translateY(0rem) translateX(-50%);
  transition-delay: 0.6s; }

#character_main .inner {
  opacity: 0; }
  @media screen and (min-width: 769px) {
    #character_main .inner {
      transform: translateY(5rem); } }
  @media screen and (max-width: 768px) {
    #character_main .inner {
      transform: translateY(4rem); } }

#character_main.active .inner {
  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);
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s; }