@charset "UTF-8";

@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

@font-face {
  font-family: "NotoSerifJP-Regular";
  src: url("../fonts/NotoSerifJP-Regular.otf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "NotoSerifJP-SemiBold";
  src: url("../fonts/NotoSerifJP-SemiBold_0.otf") format("truetype");
  font-style: normal;
}

/*******************************
FR241203lovebear
*******************************/
#FR241203lovebear{
  display: block;
  width: 100%;
  padding: 0 0 13.4rem;
  background: #F2F0E8;
  border-bottom: 1px solid #000000;
  box-sizing: border-box;
}

#FR241203lovebear *{box-sizing: border-box;}

/*******************************
img setting
*******************************/
#FR241203lovebear .imgOuter{
  display: block;
  width: 100%;
  height: auto;
  background: #FFFFFF;
  pointer-events: none;
}

#FR241203lovebear .imgOuter > .outer,
#FR241203lovebear .imgOuter picture,
#FR241203lovebear .imgOuter img{
  display: block;
  width: 100%;
  height: auto;
}
#FR241203lovebear .imgOuter > a{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
}


/*******************************
creditLinks
*******************************/
#FR241203lovebear .creditArea{
  display: block;
}

#FR241203lovebear .creditLinks{
  display: block;
  white-space: nowrap;
  text-align: left;
}

#FR241203lovebear .creditLinks > a,
#FR241203lovebear .creditLinks > span{
  display: inline-block;
  white-space: nowrap;
  font-family: "span", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #58595B;
  text-decoration: none;
  font-feature-settings: "palt";
}

#FR241203lovebear .creditLinks > a:not(:last-child)::after,
#FR241203lovebear .creditLinks > span:not(:last-child)::after{
  content: ',';
  display: inline-block;
  padding: 0 0 0 0;
}


/*******************************
lpSection
*******************************/
#FR241203lovebear .lpSection{}


/*******************************
mvBlock
*******************************/
#FR241203lovebear .mvBlock{
  display: block;
  width: 120rem;
  margin: 0 auto 6.9rem;
}

#FR241203lovebear .mvBlock .mvOuter{
  display: block;
  width: 100%;
  height: auto;
}

#FR241203lovebear .mvBlock picture,
#FR241203lovebear .mvBlock img{
  display: block;
  width: 100%;
  height: auto;
}

/*******************************
firstLede
*******************************/
#FR241203lovebear .firstLede{
  display: block;
  margin: 0 auto 6rem;
}

#FR241203lovebear .firstLede p{
  font-family: "NotoSerifJP-Regular", serif;
  font-size: 1.4rem;
  line-height: 2.2;
  letter-spacing: 0.16em;
  text-align: center;
  color: #000000;
  font-weight: 400;
  font-feature-settings: "palt";
}

#FR241203lovebear .firstLede p > strong{
  font-family: "NotoSerifJP-SemiBold", serif;
  font-size: 1.8rem;
  letter-spacing: 0.16em;
}

#FR241203lovebear .firstLede p + p{
  margin-top: 2.1rem;
}

/*******************************
dollsImg
*******************************/
#FR241203lovebear ul.dollsImg{
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 14rem;
}

#FR241203lovebear ul.dollsImg > li{
  display: block;
  width: 15.5rem;
  mix-blend-mode: darken;
  animation: tiltAnim 1.4s linear infinite;
}

#FR241203lovebear ul.dollsImg > li:nth-of-type(1){
  margin-right: 2.55331rem;
  margin-left: 0.6rem;
}

#FR241203lovebear ul.dollsImg > li:nth-of-type(2){
  margin-right: 1.36869rem;
}

#FR241203lovebear ul.dollsImg > li:nth-of-type(3){
  margin-right: 0.91189rem;
}

@keyframes tiltAnim{
  0% {
    transform: rotate(-5deg);
  }
  49% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

#FR241203lovebear ul.dollsImg > li > a,
#FR241203lovebear ul.dollsImg > li picture,
#FR241203lovebear ul.dollsImg > li img{
  display: block;
  width: 100%;
  height: auto;
}


/*******************************
sec01
*******************************/
#FR241203lovebear #sec01{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 16.2rem;
  position: relative;
}

#FR241203lovebear #sec01 .secTop{
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#FR241203lovebear #sec01 .secBottom{
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

#FR241203lovebear #sec01 .secTop picture,
#FR241203lovebear #sec01 .secTop img,
#FR241203lovebear #sec01 .secBottom picture,
#FR241203lovebear #sec01 .secBottom img{display: block; width: 100%; height: auto;}


#FR241203lovebear #sec01 .secInner{
  display: block;
  width: 100%;
  position: relative;
}


#FR241203lovebear #sec01 .sec01TTL{
  display: block;
  width: 40rem;
  position: absolute;
  right: -48.6rem;
  top: 12.4rem;
  z-index: 1;
}

#FR241203lovebear #sec01 .sec01TTL span.pcView{
  display: block;
  width: 100%;
  height: auto;
}

#FR241203lovebear #sec01 .sec01TTL svg{
  width: 100%;
  height: auto;
}

#FR241203lovebear #sec01 .sec01TTL svg path{
  fill: #b02626;
}


#FR241203lovebear #sec01 .img0102Wrap{
  position: relative;
  z-index: 10;
  display: block;
  width: 92rem;
  margin: 0 auto;
  padding: max(50dvh - 64rem / 2, 13rem + 15.4rem) 0 max(50dvh - 64rem / 2, 13rem + 52.4rem);
  transform: translateX(3rem);
}


#FR241203lovebear #sec01 .img0102Wrap .img01{
  position: sticky;
  /*top: 25rem;*/
  top: max(50dvh - 64rem / 2, 13rem);
  width: 48rem;
  z-index: 2;
}

#FR241203lovebear #sec01 .img0102Wrap .img01 > .text{
  display: block;
  position: absolute;
  left: -10rem;
  top: -0.2rem;
}


#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p{
  writing-mode: vertical-rl;
  font-family: "NotoSerifJP-Regular", serif;
  font-size: 1.7rem;
  line-height: 2.2;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: #000000;
  font-feature-settings: "palt";
}

#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span{
  display: block;
  letter-spacing: 0.16em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(2){
  padding-top: 13.6rem;
}



#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(1) > span:nth-of-type(1){
  letter-spacing: -0.06em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(1) > span:nth-of-type(2){
  letter-spacing: 0.12em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(1) > span:nth-of-type(3){
  letter-spacing: 0.1em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(1) > span:nth-of-type(4){
  letter-spacing: 0.1em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(1) > span:nth-of-type(5){
  letter-spacing: 0.016em;
}


#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(2) > span:nth-of-type(1){
  letter-spacing: 0.16em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(2) > span:nth-of-type(2){
  letter-spacing: 0.16em;
  margin-top: -0.1em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(2) > span:nth-of-type(3){
  letter-spacing: -0.01em;
  margin-top: -0.1em;
}
#FR241203lovebear #sec01 .img0102Wrap .img01 > .text > p > span:nth-of-type(2) > span:nth-of-type(4){
  letter-spacing: 0.12em;
}



#FR241203lovebear #sec01 .img0102Wrap .img01 > .creditArea{
  padding-top: 3rem;
} 


#FR241203lovebear #sec01 .img0102Wrap .img02{
  position: sticky;
  top: max(50dvh - 64rem / 2, 13rem);
  width: 42rem;
  z-index: 1;
  margin: 0 0 0 auto;
  transform: rotate(15deg) translate(-3.4rem,15.6rem);
  transform-origin: center center;
  z-index: 3;
}


/*******************************
sec02
*******************************/
#FR241203lovebear #sec02{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 22.2rem;
}

#FR241203lovebear #sec02 .sec02TTL{
  display: block;
  width: 43.93115rem;
  margin: 0 auto;
}

#FR241203lovebear #sec02 .sec02TTL picture,
#FR241203lovebear #sec02 .sec02TTL img{
  display: block;
  width: 100%;
  height: auto;
}

#FR241203lovebear #sec02 .creditArea{
  padding: 3rem 0 4.8rem;
}
#FR241203lovebear #sec02 .creditArea .creditLinks{
  text-align: center;
}

#FR241203lovebear #sec02 .creditArea .creditLinks > a{
  color: #B02626;
  font-size: 1.4rem;
}

#FR241203lovebear #sec02 .img03{
  display: block;
  width: 76rem;
  margin: 0 auto;
  position: relative;
}

#FR241203lovebear #sec02 .img03::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #B02626;
  position: absolute;
  left: 2rem;
  top: 2rem;
  z-index: 1;
}

#FR241203lovebear #sec02 .img03 .imgOuter{
  position: relative;
  z-index: 2;
}

#FR241203lovebear #sec02 .img03 .text{
  display: block;
  width: 30.31235rem;
  position: absolute;
  left: 4.6rem;
  top: 32.4rem;
  z-index: 3;
  pointer-events: none;
}

#FR241203lovebear #sec02 .img03 .text svg{
  width: 100%;
  height: auto;
}

#FR241203lovebear #sec02 .img03 .text svg path{
  fill: #FFFFFF;
}



/*******************************
allItemBtn
*******************************/
#FR241203lovebear .allItemBtn{
  display: block;
  width: 29.1rem;
  margin: 0 auto 15.7rem;
  position: relative;
  transform: translateX(5rem);
}

#FR241203lovebear .allItemBtn a,
#FR241203lovebear .allItemBtn img{
  display: block;
  width: 100%;
  height: auto;
}

#FR241203lovebear .allItemBtn a::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 0.5px solid #000000;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
  filter: blur(0.5px);
}

#FR241203lovebear .allItemBtn .btn{
  display: block;
  width: 100%;
  height: auto;
}

#FR241203lovebear .allItemBtn .doll{
  display: block;
  width: 16.54413rem;
  position: absolute;
  left: -10.79412rem;
  top: -3.80298rem;
  z-index: 1;
  animation: bitAnim 1.5s linear infinite;
}

@keyframes bitAnim{
  0% {
    transform: translateY(6%);
  }
  50% {
      transform: translateY(-6%);
  }
  100% {
      transform: translateY(6%);
  }
}


/*******************************
lpStaffList
*******************************/
#FR241203lovebear dl.lpStaffList{
  display: block;
  margin: 0 auto;
  overflow: hidden;
}

#FR241203lovebear dl.lpStaffList > dt,
#FR241203lovebear dl.lpStaffList > dd{
  display: block;
  font-family: "span", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.95;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
  text-align: center;
  color: #58595B;
}

#FR241203lovebear dl.lpStaffList > dt{
  transform: translateX(0.3rem);
}

#FR241203lovebear dl.lpStaffList > dd{
  transform: translateX(0.3rem);
}


#FR241203lovebear dl.lpStaffList > dd > span{}

#FR241203lovebear dl.lpStaffList > dd > br.spView + span::before{
  content: '/';
  margin: 0 0 0;
}

/*******************************
fadeInSetting
*******************************/
#FR241203lovebear .fadeInBlock{
  opacity: 0;
  transform: translateY(6rem);
  transition: opacity 1s ease,transform 1s ease;
}

#FR241203lovebear .fadeInBlock.view{
  opacity: 1;
  transform: translateY(0);
}


/*fadeInList *****************/
#FR241203lovebear .fadeInList{}

#FR241203lovebear .fadeInList > *{
  opacity: 0;
  transition: opacity 0.2s ease;
}

#FR241203lovebear .fadeInList > *.view{
  opacity: 1;
}

/*******************************
overRide
*******************************/
#FR241203lovebear .spView{display: none;}











