@charset "UTF-8";


.contents01, .contents03, .contents04, .contents05, .contents06{
  margin-top: auto;
}

p:not(:last-child) {
  margin-bottom: 0px;
}

.mv{
  position: relative;
  padding: 28px 0;
  z-index: 2;
}



.angels_ttl02::before{
  content: "";
  width: 100%;
  height: 1000px;
  position: absolute;
  top: -380px;
  left: -160px;
  background: url(/pisj/angels/images/p_bg2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  z-index: 1;
}
.angels_ttl02::after{
  content: "";
  width: 100%;
  height: 1000px;
  position: absolute;
  top: 130px;
  right: -130px;
  background: url(/pisj/angels/images/p_bg_over.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  z-index: 1;
}
@media (min-width: 641px) {
.angels_ttl02::before{
  top: -320px;
  left: -680px;
}
.angels_ttl02::after{
  top: 0px;
  right: -760px;
}
}

.p_flex_btn::before{
  content: "";
  width: 100%;
  height: 1100px;
  position: absolute;
  top: -490px;
  left: -160px;
  background: url(/pisj/angels/images/b_bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  z-index: -1;
}
.p_flex_btn::after{
  content: "";
  width: 100%;
  height: 1100px;
  position: absolute;
  bottom: -400px;
  right: -140px;
  background: url(/pisj/angels/images/b_bg_r.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  z-index: -1;
}
@media (min-width: 641px) {
.p_flex_btn::before{
  top: -380px;
  left: -850px;
}
.p_flex_btn::after{
  bottom: 20px;
  right: -740px;
}
}




.mv .flexInner.type01:after {
  content: "";
  width: 100%;
  min-width: 100vw;
  height: 100%;
  height: auto;
  position: absolute;
  top: -40px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 calc(50% - 50vw);
  background: url(/pisj/angels/images/angels_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}
@media (min-width: 641px){
.mv:after {
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image:none;
 }
}

.sec_bg{
  position: relative;
  z-index: 1;
}




.sec_bg::after{
  content: "";
  min-width: 100vw;
  width: 100%;
  height: calc(100% + 20vw);
  background-image: url(/pisj/angels/images/sec_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  top: -20vw;
  left: 0;
  right: 0;
  margin: 0 calc(50% - 50vw);
  z-index: -1;
  bottom: 0;
}
@media (min-width: 641px) {
.sec_bg::after{
  height: calc(100% + 60vw);
}
}

.mv_top_pc{
  position: relative;
  top: -60px;
  left: -170px;
}

.mv_top_sp{
  position: relative;
  top: -40px;
  left: -50px;
  max-width: 150%;
}


.mv_top::before{
  content:"";
  display: block;
  width: 1px;
  height: 104px;
  background-color: #F983AF;
  position: absolute;
  left: 50%;
  bottom: -40px;
}
@media (min-width: 641px) {
.mv_top::before{
  width: 2px;
  height: 244px;
  left: 50%;
  bottom: -100px;
}
}


main.top2023 #top img {

  width: auto;
}

.wrapper {
  box-shadow: none;
  background: none;
}

.top_flag img{
  position: absolute;
  top: 250px;
  right: -50px;
}
.top_flag p{
  width: 220px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 400px;
  right: -5px;
}
.section_bg{
  background-color: aqua;
}



/* ここからsec1 */

.angels_ttl01 img{
  margin: 0 auto;
}

.angels_txt{
  position: relative;
  text-align: center;
  line-height: 3;
  text-decoration: underline dotted;
  color: #fff;
}
@media (min-width: 641px) {
.angels_txt{
  font-size: 22px;
}
}

/* ここからsec2 */

.flex_list{
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.sp_img{
  width: 100%;
  margin-top: 20px;
}
@media (min-width: 641px){
.flex_list{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 200px;
}
.left_img{
  max-width: 25%;

}
.right_img{
  max-width: 25%;

}
}

.flex_list::before{
  content: "";
  display: block;
  width: 1px;
  height: 114px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  bottom: -140px;
}
@media (min-width: 641px) {
  .flex_list::before{
  width: 2px;
  height: 278px;
  left: 50%;
  bottom: -300px;
}
}


/* ここからsec3 */
.p_flex{
  display: flex;
  flex-direction: column;
  margin-bottom:150px;
}
@media (min-width: 641px) {
.p_flex{
  display: flex;
  flex-direction: row;
  margin-bottom:380px;
}
}

.p_flex::before{
  content: "";
  display: block;
  width: 1px;
  height: 70px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  bottom: -83px;
}
@media (min-width: 641px) {
  .p_flex::before{
  width: 2px;
  height: 196px;
  left: 50%;
  bottom: -190px;
}
}



.p_profile{
  background-color: #fff;
  border-radius: 10px;
  padding: 50px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
}


.p_img{
  position: relative;
  max-width: 100%;
  bottom: -50px;
  z-index: 2;
}
@media (min-width: 641px) {
.p_img{
  position: relative;
  left: -130px;
  top: -10px;
  max-width: 170%;
  z-index: 2;
}
}

.p_ttl{
  font-weight: bold;
  font-size: 22px;
  border-bottom: 1px solid #E8CACA;
  padding-bottom: 20.5px;
}
.p_profile img{
  margin: 20.5px 0px;
}

/* ここからsec4 */

.contents04r-inner{
  max-width: 1020px;
  margin: 0 auto;
}


.p_flex_btn{
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 30px;
}
.p_flex_btn a{
  max-width: calc((100% - 30px)/2);
}

.p_center_btn{
  padding-bottom: 120px;
}
.p_center_btn a img{
  display: block;
  margin: 0 auto;
  max-width: 70%;
}
@media (min-width: 641px) {
.p_flex_btn{
  margin-bottom: 170px;
}
.p_flex_btn a{
  width: calc((100% - 292px)/2);
}
.p_center_btn{
  padding-bottom: 120px;
}
.p_center_btn img{
  width: 100%;
}
}



.p_btn_group{
  position: relative;
  z-index: 1;
}

.p_btn_group::before{
  content: "";
  display: block;
  width: 180px;
  height: 180px;
  border: 1px solid #Fff;
  transform: rotate(-45deg);
  position: absolute;
  top: -30px;
  left: calc((100% - 179.5px)/2);
  z-index: -5;
}
@media (min-width: 641px) {
.p_btn_group::before{
  content: "";
  display: block;
  width: 512px;
  height: 512px;
   border: 2px solid #Fff;
  transform: rotate(-45deg);
  position: absolute;
  top: -85px;
  left: 25%;
  z-index: -1;
}
}

.coming_soon {
  position: relative;
}

.coming_soon::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(/pisj/angels/images/comingsoon.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}


@media (min-width: 641px) {
/* で元々のhoverアクションを解除した */
a:hover{
  opacity: 1;
}
/* 下記新しいhover */

.hover_circle{
  position: relative;
}
.hover_circle::after{
  content: "";
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #FB82AE;
  position: absolute;
  top: -19px;
  left: -17px;
  z-index: -1;
  opacity: 0;
  transition: opacity .6s ease;
}

.hover_circle:hover::after{
  opacity: 1;
}

.hover_circle_2{
  position: relative;
}
.hover_circle_2::after{
  content: "";
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #FB82AE;
  position: absolute;
  top: -20px;
  left: 331px;
  z-index: -2;
  opacity: 0;
  transition: opacity .6s ease;
}
.hover_circle_2:hover::after{
  opacity: 1;
}
}

/* 以下ハートのアニメーション */

.top_flag::before,.top_flag::after{
  content: "";
  position: absolute;
  opacity: 1;
}
.top_flag::before{
  background: url(/pisj/angels/images/heart_med.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 21px;
  height: 21px;
  top: 53px;
  right: 42px;
}
.top_flag::after{
  background: url(/pisj/angels/images/heart_small.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  top: 57px;
  right: 31px;
}
@media (min-width: 641px) {
.top_flag::before,.top_flag::after{
  content: "";
  position: absolute;
  opacity: 0;
}
.top_flag::before{
  background: url(/pisj/angels/images/heart_med.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 45px;
  height: 45px;
  top: 246px;
  right: 93px;
}
.top_flag::after{
  background: url(/pisj/angels/images/heart_small.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  top: 250px;
  right: 74px;
}

}

@media (min-width: 641px) {
.top_flag:hover::before {
  animation-name: heart; /* アニメーションの名前 */
  animation-duration: 1.5s; /* アニメーションの実行時間 */
  animation-iteration-count: infinite; /* アニメーションを繰り返す回数 */
  animation-timing-function: ease-out; /* アニメーションの進行割合を指定 */
}
.top_flag:hover::after {
  animation-name: heart;
  animation-duration: 1.5s;
  animation-delay: 0.2s; /* アニメーションの開始を遅らせる */
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
}

@keyframes heart {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0;
  }
}