@charset "utf-8";
.sub .sec_contents {
  max-width: unset;
  position: relative;
}
.sub .sec_contentsWrap{
	padding: min(calc(140 / var(--vw-min) * 100vw), 140px) 0 0;
}
@media screen and (max-width: 1200px) {
    .sub .sec_contentsWrap {
      padding-left: 0;
      padding-right: 0;
    }
    .sub .sec_contents {
        padding-right:0;
        padding-left:0;
    }
}
.header__navBtn{
    background-color: var(--color-lightblue);
}
.ttl_jp {
    color: var(--color-lightblue);
}
.sub_siteTtl .siteTtl__img {
  background-color:var(--color-lightblue);

}
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.characterContents{
  position: relative;
}
.characterSlider{
  align-items: flex-end;
}
@media screen and (max-width:767px){ 
  .characterSwiperBlock{
    position: relative;
    margin-top: calc(-60 / var(--vw-min) * 100vw);
  }
  .characterSlider{
    min-height: unset;
    align-items: unset;
    padding-top: unset;
  }
}
.characterDetailWrap{
  position: relative;
  min-height: min(calc(900 / var(--vw-min) * 100vw), 900px);
}
.characterDetail{
  display: flex;
  justify-content: flex-end;
  position: relative;
  padding-bottom:min(calc(140 / var(--vw-min) * 100vw),140px);
}
@media screen and (max-width:767px){ 
  .characterDetailWrap{
    position: relative;
    padding-bottom: calc(190 / var(--vw-min) * 100vw);
  }
  .characterDetail{
    justify-content: flex-start;
    padding-bottom: 0;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
    border-radius: min(calc(60 / var(--vw-min) * 100vw), 60px) 0 0 min(calc(60 / var(--vw-min) * 100vw), 60px);
    position: unset;
  }
}

/* main img */
.characterDetail__img{
  width: 100%;
  max-width: min(calc(1200 / var(--vw-min) * 100vw), 1200px);
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  z-index: 1;
  margin: auto;
  pointer-events: none;
}
.characterDetail__img img{
  width: min(calc(450 / var(--vw-min) * 100vw),450px);
  height: auto;
}
@media screen and (max-width:767px){ 
  .characterDetail__img{
    position: relative;
    left: unset;
    right: unset;
    bottom: unset;
  }
  .characterDetail__img img{
    width: 100%;
  }
}


/* profile */
.characterDetail__profile{
  width: calc(100% - (100% - calc(1200 / var(--vw-min) * 100vw) / 2) + min(calc(340 / var(--vw-min) * 100vw),340px));
  background-color: #FFF;
  border-radius: min(calc(60 / var(--vw-min) * 100vw),60px) 0 0 min(calc(60 / var(--vw-min) * 100vw),60px);
  position: relative;
}
.profileList{
  display: flex;
  padding:min(calc(40 / var(--vw-min) * 100vw),40px) min(calc(140 / var(--vw-min) * 100vw),140px);
}
.profileList:first-child{
  padding-top: min(calc(100 / var(--vw-min) * 100vw),100px);
  padding-bottom: min(calc(50 / var(--vw-min) * 100vw),50px);
  position: relative;  
}
.profileList:first-child::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(calc(6 / var(--vw-min) * 100vw),6px);
  -webkit-mask: url(../img/common/line.png) repeat-x left bottom;
  mask: url(../img/common/line.png) repeat-x left bottom;
   mask-size: auto 100%;
   background-color: var(--color-lightblue);
}
.profileList._profile{
    padding-bottom: min(calc(140 / var(--vw-min) * 100vw),140px);
}
@media screen and (max-width:767px){ 
  .characterDetail__profile{
    width: 100%;
    background-color:unset;
    position: unset;
  }
  .profileList{
    padding:calc(40 / var(--vw-min) * 100vw);
  }
  .profileList:first-child::after{
    height: calc(16 / var(--vw-min) * 100vw);
  }
}
/* face */
.charaFaceImg{
  position: absolute;
  left: min(calc(260 / var(--vw-min) * 100vw),260px);
  bottom: max(calc(-120 / var(--vw-min) * 100vw),-120px);
}
.charaFaceImg img{
  width: min(calc(205 / var(--vw-min) * 100vw),205px);
  height: auto;
}
@media screen and (max-width:767px){ 
  .charaFaceImg{
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
  }
  .charaFaceImg img{
    width: calc(310 / var(--vw-min) * 100vw);
  }
}
/* profileList__ttl */
.profileList__ttl{
  color: var(--color-lightblue);
  margin-right:min(calc(12 / var(--vw-min) * 100vw),12px);
  position: relative;
  line-height: min(calc(20 / var(--vw-min) * 100vw),20px);
  font-weight: 900;
  letter-spacing: .12em;
  width: min(calc(118 / var(--vw-min) * 100vw),118px);
  text-align: right;
}
.profileList._profile .profileList__ttl{
  line-height: min(calc(36 / var(--vw-min) * 100vw),36px);
}
.profileList__ttl__inner{
  position: relative;
  padding-right:min(calc(36 / var(--vw-min) * 100vw),36px);
}
.profileList__ttl__inner::after{
  content: "";
  display: block;
  position: absolute;
  width: min(calc(17 / var(--vw-min) * 100vw),17px);
  height: min(calc(17 / var(--vw-min) * 100vw),17px);
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-mask: url(../img/deco/deco_tulip.png) no-repeat center center / contain;
  mask: url(../img/deco/deco_tulip.png) no-repeat center center / contain;
  background-color: var(--color-lightblue);
}
.character__name{
    font-size: min(calc(34 / var(--vw-min) * 100vw),34px);
    line-height: min(calc(20 / var(--vw-min) * 100vw),20px);
    margin-bottom: min(calc(20 / var(--vw-min) * 100vw),20px);
}
.character__cv{
  display: flex;
}
.cv__ttl{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
  color: var(--color-lightblue);
  width: min(calc(35 / var(--vw-min) * 100vw),35px);
  height: min(calc(35 / var(--vw-min) * 100vw),35px);
  border-radius: 50%;
  border: 1px solid var(--color-lightblue);
  margin-right: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.cv__name{
  font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
}
.profileList._profile .profileList__txt{
  line-height: 2;
  font-size:  min(calc(18 / var(--vw-min) * 100vw),18px);
}
@media screen and (max-width:767px){ 
  .profileList__ttl{
    margin-right:calc(24 / var(--vw-min) * 100vw);
    font-size: calc(26 / var(--vw-min) * 100vw);
    width:calc(170 / var(--vw-min) * 100vw);
  }
  .profileList._name .profileList__ttl{
    line-height: calc(50 / var(--vw-min) * 100vw);
  }
  .character__name{
    font-size:calc(50 / var(--vw-min) * 100vw);
    line-height: calc(50 / var(--vw-min) * 100vw);
    margin-bottom: calc(14 / var(--vw-min) * 100vw);
}
  .cv__ttl{
    font-size: calc(20 / var(--vw-min) * 100vw);
    width: calc(41 / var(--vw-min) * 100vw);
    height: calc(41 / var(--vw-min) * 100vw);
    margin-right: min(calc(10 / var(--vw-min) * 100vw), 10px);
  }
  .cv__name{
    font-size: calc(26 / var(--vw-min) * 100vw);
  }
  .profileList._profile .profileList__ttl{
    line-height:calc(48 / var(--vw-min) * 100vw);
  }
  .profileList._profile .profileList__txt{
    font-size:  calc(24 / var(--vw-min) * 100vw);
    line-height:calc(48 / var(--vw-min) * 100vw);
  }
}

/* characterChangeLists */
.characterChangeListsWrap{
    position: absolute;
    z-index: 10;
    right: min(calc(70 / var(--vw-min) * 100vw),70px);
    top:max(calc(-35 / var(--vw-min) * 100vw),-35px);
}
.charaBtnLists{
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:767px){ 
    .characterChangeListsWrap{
      width: calc(540 / var(--vw-min) * 100vw);
      position: relative;
      right: unset;
      top: unset;
      margin: 0 auto;
  }
  .charaBtnLists{
    flex-wrap: wrap;
  }
}
/* charaBtn */
.charaBtnWrap{
    margin: 0 min(calc(8 / var(--vw-min) * 100vw),8px);
}
.charaBtn{
    display: block;
    border:5px solid #FFF;
    background-color:#cfe6e5;
    width:min(calc(80 / var(--vw-min) * 100vw), 80px);
    height:min(calc(80 / var(--vw-min) * 100vw), 80px);
    border-radius: min(calc(30 / var(--vw-min) * 100vw), 30px);
    overflow: hidden;
    position: relative;
    transition: all .4s ease;
    box-shadow: 3px 3px 11px 0 rgba(0, 0, 0, 0.3);
}
@media screen and (max-width:767px){ 
    .charaBtnWrap{
        margin: 0 calc(7 / var(--vw-min) * 100vw);
    }
    .charaBtnWrap:nth-child(n+5){
        margin-top:calc(24 / var(--vw-min) * 100vw);
    }
    .charaBtn{
        border: calc(6 / var(--vw-min) * 100vw) solid #FFF;
        width:calc(120 / var(--vw-min) * 100vw);
        height:calc(120 / var(--vw-min) * 100vw);
        border-radius: calc(45 / var(--vw-min) * 100vw);
    }
}
.charaBtn img{
    width: 100%;
    height: auto;
    transition: transform .4s ease;
}
.thumBox{
    display: block;
    transition: all .4s ease;
    background: none;
}
/* active */
.charaBtn.is-active{
    border:5px solid var(--color-lightblue);
}
.charaBtn.is-active img{
    transform: scale(1.1);
}

@media screen and (hover:hover) and (pointer: fine){
  .charaBtn:hover{
    border:5px solid var(--color-lightblue);
  }	
  .charaBtn:hover img{
    transform: scale(1.1);
  }
}

/* control */
.controlBlock._character{
    position: absolute;
    width: 100%;
    top:min(calc(150 / var(--vw-min) * 100vw), 150px);
    left: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
@media screen and (max-width:767px){ 
  .controlBlock._character{
      position: absolute;
      top: calc(400 / var(--vw-min) * 100vw);
      bottom: unset;
  }
}
.controlBlock._character .charaArrowBtn{
  width:min(calc(160 / var(--vw-min) * 100vw), 160px);
  height:min(calc(160 / var(--vw-min) * 100vw), 160px);
  border-radius: 50%;
  z-index: 2;
  position: relative;
  background-color: #cfe6e5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.controlBlock._character .charaArrowBtn._next{
  margin-right: max(calc(-80 / var(--vw-min) * 100vw), -80px);
}
.controlBlock._character .charaArrowBtn._prev{
  margin-left: max(calc(-80 / var(--vw-min) * 100vw), -80px);
}
/*
.controlBlock._character .arrowBtn::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  background-color: var(--color-lightblue);
  width:min(calc(160 / var(--vw-min) * 100vw), 160px);
  height:min(calc(160 / var(--vw-min) * 100vw), 160px);
  border-radius: 50%;
}*/
.controlBlock._character .charaArrowBtn::after{
  content: "";
  display: block;
  position: absolute;
  right: max(calc(-12 / var(--vw-min) * 100vw), -12px);
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: -2;
  background-color: var(--color-lightblue);
  width:min(calc(160 / var(--vw-min) * 100vw), 160px);
  height:min(calc(160 / var(--vw-min) * 100vw), 160px);
  border-radius: 50%;
  pointer-events: none;
}

.controlBlock._character .charaArrowBtn._prev::after{
   left: max(calc(-12 / var(--vw-min) * 100vw), -12px);
   right: unset;
}
.charaArrowBtn .ic_arrow{
  -webkit-mask: url(../img/common/icon/ic_arrow.png) no-repeat center center / contain;
  mask: url(../img/common/icon/ic_arrow.png) no-repeat center center / contain;
  width:min(calc(26 / var(--vw-min) * 100vw),26px);
  height: min(calc(19 / var(--vw-min) * 100vw),19px);
  background-color: #FFF;
  display: block;
  left: unset;
  right: unset;
}
.charaArrowBtn._next .ic_arrow{
  left:min(calc(40 / var(--vw-min) * 100vw),40px);
}
.charaArrowBtn._prev .ic_arrow{
  right: min(calc(40 / var(--vw-min) * 100vw),40px);
  transform: rotate(-180deg);
}

@media screen and (hover:hover) and (pointer: fine){
	.charaArrowBtn .ic_arrow{
    transition:all .3s ease;
	}
  .charaArrowBtn._next:hover .ic_arrow{
    left: min(calc(45 / var(--vw-min) * 100vw),45px);
  }
	.charaArrowBtn._prev:hover .ic_arrow{
    right: min(calc(45 / var(--vw-min) * 100vw),45px);
  }
}
  
 .characterDetail__img img{
    opacity: 0;
    transition: all .4s ease;
    transform-origin: center center;
    transition: transform .3s ease-in-out ,opacity .2s ease-in-out; /
 }
.swiper-slide-active .characterDetail__img img{
    opacity: 1;
    animation: rotateAnimation .3s ease-in-out forwards;
}
.swiper-slide:nth-child(even).swiper-slide-active .characterDetail__img img{
    opacity: 1;
    animation: rotateAnimation2 .3s ease-in-out forwards;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(0) scale(100%);
  }
}
@keyframes rotateAnimation2 {
  from {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(0) scale(100%);
  }
}
.charaFaceImg img{
  opacity: 0;
}
.swiper-slide-active .charaFaceImg img{
    animation: face_ani .2s ease-in-out forwards;
}
.swiper-slide-active .charaFaceImg img:nth-child(2){
    animation-delay: .2s;
}

@keyframes face_ani{
  from {
    transform: scale(0%);
    opacity: 0;
  }
  to {
    transform:scale(100%);
    opacity: 1;
  }
}


/* bg */
.chara__bg{
    position: absolute;
    bottom: 0;
    margin: auto;
    left: 0;
	  width: 100%;
    height:100%;
    background: url(../img/deco/bg_deco.png) no-repeat center bottom;
    background-size: 100% auto;
}

.chara__deco.deco_b{
  right: unset;
  top: unset;
  bottom:calc(450 / var(--vw-min) * 100vw);
  left:calc(90 / var(--vw-min) * 100vw);
  animation: fuwafuwa 3s ease-in-out infinite alternate;
}
@media screen and (max-width:767px){ 
  .chara__deco.deco_b,
  .chara__bg{
      display: none;
  }
}