@charset "UTF-8";

/* MV用イラスト */
.mv .mv_box{
  position: relative;
  z-index: 2;
}
.pg_home .section{
  position: relative;
  z-index: 1;
}

/* 背景イラスト */
:root{
  --img-size-ratio: 0.4;
}
.home_pos{
  position: absolute;
  z-index: 1;
}

/* MV部分 */
.home_pos.pos1{
  width: calc(343px * var(--img-size-ratio));
  top: 55%;
  left: 0;
  transform: translate(-68%, 0);
}
.home_pos.pos2{
  width: calc(312px * var(--img-size-ratio));
  right: 0;
  top: 24%;
  transform: translate(58%, 0);
}
.home_pos.pos3{
  width: calc(416px * var(--img-size-ratio));
  left: 50%;
  bottom: -26%;
  transform: translate(-71%, 9%) scale(0.5);
}

/* HOME sec1部分 */
.home_pos.pos4{
  width: calc(341px * var(--img-size-ratio));
  right: 0;
  top: 10.2%;
  transform: translate(24%, 0);
}
.home_pos.pos5{
  width: calc(358px * var(--img-size-ratio));
  left: 0;
  bottom: -7%;
  transform: translate(-56%, -52%);
}
.home_pos.pos6{
  width: calc(590px * var(--img-size-ratio));
  right: 0;
  bottom: 0%;
  transform: translate(61%, -33%);
}

/* HOME sec2部分 */
.home_pos.pos7{
  width: calc(372px * var(--img-size-ratio));
  left: 0;
  top: 37.2%;
  transform: translate(-28%, 0);
}
.home_pos.pos8{
  width: calc(466px * var(--img-size-ratio));
  right: 0;
  top: 35.5%;
  transform: translate(31%, 93%);
  z-index: 2;
}
.home_pos.pos9{
  width: calc(231px * var(--img-size-ratio));
  left: 50%;
  top: 37.5%;
  transform: translate(76%, -34%);
  z-index: 2;
}
.home_pos.pos10{
  width: calc(466px * var(--img-size-ratio));
  left: 0;
  bottom: 7%;
  transform: translate(0%, 0);
}
.home_pos.pos11{
  width: calc(568px * var(--img-size-ratio));
  right: 0;
  bottom: -9%;
  transform: translate(41%, 0);
}

/* HOME sec3部分 */
.home_pos.pos12{
  width: calc(412px * var(--img-size-ratio));
  left: 0;
  bottom: 0;
  transform: translate(0%, 112%);
  z-index: 2;
}
.home_pos.pos13{
  width: calc(341px * var(--img-size-ratio));
  right: 0;
  bottom: 0;
  transform: translate(10%, 90%) scale(0.6);
  z-index: 2;
}

/* HOME sec4部分 */
.home_pos.pos14{
  width: calc(398px * var(--img-size-ratio));
  right: 0;
  top: 0;
  transform: translate(55%, 122%);
}
.home_pos.pos15{
  width: calc(341px * var(--img-size-ratio));
  left: 50%;
  bottom: 0;
  transform: translate(74%, -239%);
}

/* HOME sec5部分 */
.home_pos.pos16{
  width: calc(475px * var(--img-size-ratio));
  left: 0;
  top: 0;
  transform: translate(-65%, 11%);
}
.home_pos.pos17{
  width: calc(343px * var(--img-size-ratio));
  left: 50%;
  top: 0;
  transform: translate(67%, 58%) scale(0.6);
}
.home_pos.pos18{
  width: calc(568px * var(--img-size-ratio));
  right: 0;
  top: 0;
  transform: translate(8%, 192%);
}
.home_pos.pos19{
  width: calc(343px * var(--img-size-ratio));
  right: 0;
  bottom: 0;
  transform: translate(53%, -149%);
}
.home_pos.pos20{
  width: calc(466px * var(--img-size-ratio));
  right: 0;
  bottom: 0;
  transform: translate(27%, 26%);
}
.home_pos.pos21{
  width: calc(590px * var(--img-size-ratio));
  left: 0;
  bottom: 0;
  transform: translate(-30%, -37%);
}

/* HOME sec5部分 */
.home_pos.pos22{
  width: calc(372px * var(--img-size-ratio));
  left: 0;
  bottom: 0;
  transform: translate(-10%, 41%);
}

@media (max-width:767px){

  .home_pos.pos3{
    /* display: none; */
  }

}
@media (min-width:768px){

  /* 背景イラスト */
  :root{
    --img-size-ratio: 0.5;
  }

  /* MV部分 */
  .home_pos.pos1{
  }
  .home_pos.pos2{
  }
  .home_pos.pos3{
  }

  /* MV部分 */
  .home_pos.pos1{
    transform: translate(-53%, 0);
  }
  .home_pos.pos2{
    transform: translate(58%, 0);
  }
  .home_pos.pos3{
    transform: translate(-68%, 0);
  }

  /* HOME sec1部分 */
  .home_pos.pos4{
    transform: translate(24%, -130%);
  }
  .home_pos.pos5{
    transform: translate(-56%, -33%);
  }
  .home_pos.pos6{
    transform: translate(61%, 0);
  }

  /* HOME sec2部分 */
  .home_pos.pos7{
    transform: translate(-28%, 338%);
  }
  .home_pos.pos8{
    transform: translate(-12%, 0);
  }
  .home_pos.pos9{
    transform: translate(30%, -118%);
  }
  .home_pos.pos10{
    transform: translate(0%, 76%);
  }
  .home_pos.pos11{
    transform: translate(41%, -25%);
  }

  /* HOME sec3部分 */
  .home_pos.pos12{
    transform: translate(0%, -249%);
  }
  .home_pos.pos13{
    transform: translate(49%, 94%);
  }

  /* HOME sec4部分 */
  .home_pos.pos14{
    transform: translate(21%, 152%);
  }
  .home_pos.pos15{
    transform: translate(38%, -19%);
  }

  /* HOME sec5部分 */
  .home_pos.pos16{
    transform: translate(-61%, 70%);
  }
  .home_pos.pos17{
    transform: translate(28%, 63%);
  }
  .home_pos.pos18{
    transform: translate(29%, 281%);
  }
  .home_pos.pos19{
    transform: translate(53%, -149%);
  }
  .home_pos.pos20{
    transform: translate(27%, 26%);
  }
  .home_pos.pos21{
    transform: translate(-30%, -37%);
  }
}
@media (min-width:1024px){


  /* 背景イラスト */
  :root{
    --img-size-ratio: 0.6;
  }

  .home_pos{
    --img-size: 0.6;
  }




}
@media (min-width:1200px){

  /* 背景イラスト */
  :root{
    --img-size-ratio: 0.7;
  }


  /* MV部分 */
  .home_pos.pos1{
    transform: translate(-53%, 0);
  }
  .home_pos.pos2{
    transform: translate(58%, 0);
  }
  .home_pos.pos3{
    transform: translate(-68%, 0);
  }

  /* HOME sec1部分 */
  .home_pos.pos4{
    transform: translate(24%, 0);
  }
  .home_pos.pos5{
    transform: translate(-56%, 0);
  }
  .home_pos.pos6{
    transform: translate(61%, 0);
  }

  /* HOME sec2部分 */
  .home_pos.pos7{
    transform: translate(-28%, 0);
  }
  .home_pos.pos8{
    transform: translate(-12%, 0);
  }
  .home_pos.pos9{
    transform: translate(-54%, 0);
  }
  .home_pos.pos10{
    transform: translate(0%, 0);
  }
  .home_pos.pos11{
    transform: translate(41%, 0);
  }

  /* HOME sec3部分 */
  .home_pos.pos12{
    transform: translate(0%, 73%);
  }
  .home_pos.pos13{
    transform: translate(-7%, 45%);
  }

  /* HOME sec4部分 */
  .home_pos.pos14{
    transform: translate(-5%, 79%);
  }
  .home_pos.pos15{
    transform: translate(-57%, 25%);
  }

  /* HOME sec5部分 */
  .home_pos.pos16{
    transform: translate(-61%, 11%);
  }
  .home_pos.pos17{
    transform: translate(-8%, 9%);
  }
  .home_pos.pos18{
    transform: translate(8%, 192%);
  }
  .home_pos.pos19{
    transform: translate(53%, -149%);
  }
  .home_pos.pos20{
    transform: translate(27%, 26%);
  }
  .home_pos.pos21{
    transform: translate(-30%, -37%);
  }

}
@media (min-width:1470px){

  /* 背景イラスト */
  :root{
    --img-size-ratio: 1;
  }


}
@media (min-width:1720px){

  /* 背景イラスト */
  :root{
    --img-size-ratio: 1;
  }

}


/* HOMEアコーディオン */
.home_qanda .item .q {
  cursor: pointer;
}
.home_qanda .item .q .img{
  background-image: url('/img/home/toggle_open.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.home_qanda .item .q.on .img{
  background-image: url('/img/home/toggle_close.png');
}
.home_qanda .item .a{
  display: none;
}




/* おひとりさまお葬式とは */
.pg_about{
  position: relative;
  z-index: 1;
}
.pg_about .section{
  position: relative;
  z-index: 1;
}

.about_pos{
  position: absolute;
  z-index: 1;
}


/* おひとりさまお葬式とは sec1部分 */
.about_pos.pos4{
  width: calc(372px * var(--img-size-ratio));
  right: 0;
  bottom: -6.8%;
  transform: translate(17%, 0);
  z-index: 2;
}

/* おひとりさまお葬式とは sec2部分 */
.about_pos.pos3{
  width: calc(342px * var(--img-size-ratio));
  left: 0;
  top: 12.8%;
  transform: translate(-25%, 0);
  z-index: -1;
}

/* おひとりさまお葬式とは sec3部分 */
.about_pos.pos5{
  width: calc(491px * var(--img-size-ratio));
  left: 40.5%;
  top: 0%;
  transform: translate(-41%, 70%);
  
}
.about_pos.pos6{
  width: calc(568px * var(--img-size-ratio));
  left: 0;
  top: 0;
  transform: translate(-50%, 7%);
  z-index: 2;
}
.about_pos.pos7{
  width: calc(341px * var(--img-size-ratio));
  right: 0;
  top: 0;
  transform: translate(55%, -28%);
  z-index: 2;
}
.about_pos.pos8{
  width: calc(372px * var(--img-size-ratio));
  left: 0;
  top: 0;
  transform: translate(-34%, -11%);
  z-index: 2;
}
.about_pos.pos9{
  width: calc(466px * var(--img-size-ratio));
  right: 0;
  bottom: 0;
  transform: translate(74%, 37%);
  z-index: 2;
}

@media (max-width:767px){
  .pg_about .section#sec3 .read_more.about{
    position: relative;
    z-index: 1;
  }
}
@media (min-width:768px){
  /* おひとりさまお葬式とは sec1部分 */
  .about_pos.pos4{
    bottom: -6.8%;
    transform: translate(17%, 0);
  }

  /* おひとりさまお葬式とは sec2部分 */
  .about_pos.pos3{
    top: 12.8%;
    transform: translate(-25%, 0);
  }

  /* おひとりさまお葬式とは sec3部分 */
  .about_pos.pos5{
    left: 40.5%;
    transform: translate(0, 70%);
  }
  .about_pos.pos6{
    transform: translate(-53%, -45%);
  }
  .about_pos.pos7{
    transform: translate(55%, -36%);
  }
  .about_pos.pos8{
    transform: translate(-42%, -65%);
  }
  .about_pos.pos9{
    transform: translate(40%, 55%);
  }
}
@media (min-width:1024px){

}
@media (min-width:1200px){


  /* おひとりさまお葬式とは sec1部分 */
  .about_pos.pos4{
    bottom: -6.8%;
    transform: translate(17%, 0);
  }

  /* おひとりさまお葬式とは sec2部分 */
  .about_pos.pos3{
    top: 12.8%;
    transform: translate(-25%, 0);
  }

  /* おひとりさまお葬式とは sec3部分 */
  .about_pos.pos5{
    left: 40.5%;
    transform: translate(0, 27%);
  }
  .about_pos.pos6{
    transform: translate(-65%, -45%);
  }
  .about_pos.pos7{
    transform: translate(55%, -36%);
  }
  .about_pos.pos8{
    transform: translate(-75%, -65%);
  }
  .about_pos.pos9{
    transform: translate(78%, 29%);
  }
}