/*  inview
 * ------------------------------ */
.js_inview,
.js_inviewgroup [inview-group-child]{
  position: relative;
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1.5s ease, filter 1.5s ease;
}
.js_inview.is_active,
.js_inviewgroup.is_active [inview-group-child]{
  opacity: 1;
  filter: blur(0px);
}
.js_inviewgroup [inview-group-child="1"]{
  transition-delay: 0s;
}
.js_inviewgroup [inview-group-child="2"]{
  transition-delay: 1s;
}
.js_inviewgroup [inview-group-child="3"]{
  transition-delay: 3s;
}

/*  fs
 * ------------------------------ */
.fs-l-main{
  margin: 0;
}
.fs-l-main,
.fs-l-pageMain{
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.top-category{
  margin-top: 0 !important;
  padding-top: 120px !important;
}
.top-feature{
  margin-top: 0 !important;
  padding-top: 120px !important;
}
#footer{
  position: relative !important;
  z-index: 9 !important;
  background: #fff !important;
  margin-top: 0 !important;
  padding-top: 40px !important;
}

/*  all
 * ------------------------------ */
html.is_loading,
body.is_loading{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#sakura_lp{
  position: relative;
  font-family: "yu-gothic-pr6n", "游ゴシック体", "游ゴシック", "YuGothic", "Yu Gothic", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
  overflow-x: hidden;
}
#sakura_lp::after{
  content: '';
  z-index: -3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ebddd4;
}
#sakura_lp img{
  max-width: 100%;
  vertical-align: bottom;
}
/*  petal
 * ------------------------------ */
.petal{
  pointer-events: none;
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1.5s 1s ease;
  overflow: hidden;
  mix-blend-mode: multiply;
}
.petal span{
  top: 0;
  left: 50%;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  animation: petal-sp 10s infinite linear;
}
.petal_lg1{
  width: calc(70*(100vw/800));
  aspect-ratio: 70 / 68;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_lg_01.png');
}
.petal_lg2{
  width: calc(64*(100vw/800));
  aspect-ratio: 64 / 53;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_lg_02.png');
}
.petal_sm1{
  width: calc(50*(100vw/800));
  aspect-ratio: 50 / 48;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_sm_01.png');
}
.petal_sm2{
  width: calc(53*(100vw/800));
  aspect-ratio: 53 / 35;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_sm_02.png');
}
.petal_sm3{
  width: calc(29*(100vw/800));
  aspect-ratio: 29 / 50;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_sm_03.png');
}
.petal_sm4{
  width: calc(44*(100vw/800));
  aspect-ratio: 44 / 44;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_sm_04.png');
}
.petal_sm5{
  width: calc(39*(100vw/800));
  aspect-ratio: 39 / 52;
  background-image: url('https://tuhacci.itembox.design/item//2501_sakura/petal_sm_05.png');
}

@media screen and (min-width: 800px) {
  .petal span{
    animation: petal-pc 10s infinite linear;
  }
  .petal_lg1{
    width: 70px;
  }
  .petal_lg2{
    width: 64px;
  }
  .petal_sm1{
    width: 50px;
  }
  .petal_sm2{
    width: 53px;
  }
  .petal_sm3{
    width: 29px;
  }
  .petal_sm4{
    width: 44px;
  }
  .petal_sm5{
    width: 39px;
  }
}
@keyframes petal-pc {
  0% {
    top: 0;
    opacity: 0.2;
    transform: rotate(0deg);
    margin-left: 0vw;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100%;
    transform: rotate(2000deg);
    margin-left: -50vw;
  }
}
@keyframes petal-sp {
  0% {
    top: 0;
    opacity: 0.2;
    transform: rotate(0deg);
    margin-left: 0vw;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100%;
    transform: rotate(2000deg);
    margin-left: -100vw;
  }
}
/*  opening
 * ------------------------------ */
.opening{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('https://tuhacci.itembox.design/item//2501_sakura/opening_bg.png') #ebddd4 no-repeat center/cover;
  transition: opacity 1.5s ease;
}
.opening_txt{
  width: calc(499*(100vw/800));
  aspect-ratio: 499 / 765;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.opening.is_start .opening_txt{
  opacity: 1;
}
.opening.is_end{
  opacity: 0;
  pointer-events: none;
}
.opening.is_start .petal{
  z-index: 999;
  opacity: 1;
}
.opening.is_start + .petal{
  opacity: 1;
}
@media screen and (min-width: 800px) {
  .opening_txt{
    width: 499px;
  }
}
/*  contents
 * ------------------------------ */
.contents{
  max-width: 800px;
  margin: 0 auto;
  color: #333;
}
/*  lead
 * ------------------------------ */
.lead{
  position: relative;
}
.lead_txt{
  z-index: 2;
  position: relative;
  aspect-ratio: 800 / 1465;
  background: url('https://tuhacci.itembox.design/item//2501_sakura/lead_bg.png') no-repeat;
  background-size: 100% auto;
}
.lead_txt::before{
  content: '';
  position: absolute;
  top: calc(-23*(100vw/800));
  left: 50%;
  width: 1px;
  height: calc(123*(100vw/800));
  background-color: #c29795;
}
.lead_subttl{
  width: calc(311*(100vw/800));
  margin: 0 auto;
  padding-top: calc(220*(100vw/800));
  line-height: 1;
}
.lead_mainttl{
  width: calc(371*(100vw/800));
  margin: 0 auto;
  margin-top: calc(324*(100vw/800));
  line-height: 1;
}
.lead_copy{
  margin-top: calc(50*(100vw/800));
}
.lead_copy p{
  font-size: calc(24*(100vw/800));
  line-height: 2;
  text-align: center;
  font-family: "yu-gothic-pr6n", "游ゴシック体", "游ゴシック", "YuGothic", "Yu Gothic", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
}
.lead_blur{
  position: absolute;
  top: 0;
  left: 0;
}
.lead_blur_top{
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
.lead_blur_bottom{
  z-index: -1;
  position: absolute;
  bottom: calc(475*(100vw/800));
  left: 0;
}
@media screen and (min-width: 800px) {
  .lead_txt::before{
    top: -23px;
    height: 123px;
  }
  .lead_subttl{
    width: 311px;
    padding-top: 230px;
  }
  .lead_mainttl{
    width: 371px;
    margin-top: 324px;
  }
  .lead_copy{
    margin-top: 50px;
  }
  .lead_copy p{
    font-size: 24px;
  }
  .lead_blur_bottom{
    bottom: 475px;
  }
}
/*  item - common
 * ------------------------------ */
.item{
  position: relative;
}
.item_check{
  z-index: 3;
  position: fixed;
  bottom: 20px;
  left: 50%;
  margin-left: auto;
  opacity: 0;
  align-items: center;
  justify-content: center;
  width: calc(213*(100vw/800));
  height: calc(213*(100vw/800));
  margin-top: calc(105*(100vw/800));
  margin-left: calc(150*(100vw/800));
  transition: .6s;
}
.item_check.is_active{
  opacity: 1;
  pointer-events: none;
}
.item_check.is_hide{
  opacity: 0;
}
.item_check_circle{
  position: absolute;
  top: 0;
  left: 0;
  animation: rotate 20s linear infinite;
}
.item_check_txt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  width: calc(136*(100vw/800));
  text-align: center;
  margin-bottom: calc(10*(100vw/800));
}
@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.item_num{
  margin: 0 auto;
}
.item_colorlist{
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(22*(100vw/800));
  font-size: 0;
}
.item_colorlist_active{
  position: absolute;
  top: 0;
  top: calc(-20*(100vw/800));
  width: calc(125*(100vw/800));
  height: calc(54*(100vw/800));
  border: 1px solid #5d4143;
  border-radius: 100%;
}
.item_colorname{
  display: flex;
  align-items: center;
  font-size: 0;
}
.item_colorname_head{
  width: calc(172*(100vw/800));
  margin-right: calc(3*(100vw/800));
}
.item_colorname_babypink{
  width: calc(105*(100vw/800));
}
.item_colorname_pinkbaige{
  width: calc(112*(100vw/800));
}
.item_colorname_pink{
  width: calc(45*(100vw/800));
}
.item_colortip{
  display: flex;
}
.item_colortip img{
  width: calc(72*(100vw/800));
}
.item_copy{
  font-size: calc(24*(100vw/800));
  line-height: 2;
  letter-spacing: 0.05em;
}
.item_name{
  font-size: calc(20*(100vw/800));
  letter-spacing: 0.05em;
}
.item_price{
  margin-top: calc(3*(100vw/800));
  font-size: calc(20*(100vw/800));
  letter-spacing: 0.05em;
}
.item_more a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(230*(100vw/800));
  height: calc(50*(100vw/800));
  text-align: center;
  background-color: #5d4143;
}
.item_more span{
  display: block;
  width: calc(230*(100vw/800));
  height: calc(50*(100vw/800));
}
.item_more a img{
  width: calc(105*(100vw/800));
  margin-left: calc(15*(100vw/800));
}
.item_notes{
  font-size: calc(15*(100vw/800));
  letter-spacing: 0.1rem;
  padding-top: 10px;
}
.item_babypink .item_notes{
  text-align: left;
}
@media screen and (min-width: 800px) {
  .item_notes{
    font-size: 1rem;
  }
  .item_check{
    width: 213px;
    height: 213px;
    margin-top: 105px;
    margin-left: 150px;
  }
  .item_check.is_fixed{
    top: 0;
  }
  .item_check_txt{
    width: 136px;
    margin-bottom: 10px;
  }
  .item_colorlist{
    gap: 22px;
  }
  .item_colorlist_active{
    top: -20px;
    width: 125px;
    height: 54px;
  }
  .item_colorname_head{
    width: 172px;
    margin-right: 3px;
  }
  .item_colorname_babypink{
    width: 105px;
  }
  .item_colorname_pinkbaige{
    width: 112px;
  }
  .item_colorname_pink{
    width: 45px;
  }
  .item_colortip img{
    width: 72px;
  }
  .item_copy{
    font-size: 24px;
  }
  .item_name{
    font-size: 20px;
  }
  .item_price{
    margin-top: 3px;
    font-size: 20px;
  }
  .item_more a, .item_more span{
    width: 230px;
    height: 50px;
  }
  .item_more a img{
    width: 105px;
    margin-left: 15px;
  }
}

/*  item - BABY PINK
 * ------------------------------ */
.item_babypink{
  position: relative;
  padding-top: calc(400*(100vw/800));
  padding-bottom: calc(272*(100vw/800));
}
.item_babypink::after{
  content: '';
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #ebddd4, #ebddd4);
}
.item_babypink_blur{
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
}
.item_babypink .item_num{
  width: calc(95*(100vw/800));
}
.item_babypink_imggroup1{
  width: calc(574*(100vw/800));
  margin-top: calc(52*(100vw/800));
  margin-right: calc(65*(100vw/800));
  margin-left: auto;
}
.item_babypink_imggroup2{
  width: calc(550*(100vw/800));
  margin-top: calc(127*(100vw/800));
}
.item_babypink_imggroup3{
  position: absolute;
  right: 0;
  width: calc(359*(100vw/800));
  margin-top: calc(-75*(100vw/800));
  margin-left: auto;
}
.item_babypink .item_colorlist{
  margin-top: calc(125*(100vw/800));
}
.item_babypink .item_colorlist_active{
  left: calc(335*(100vw/800));
}
.item_babypink .item_colorname{
  margin-top: calc(25*(100vw/800));
  margin-left: calc(62*(100vw/800));
}
.item_babypink .item_colortip{
  margin-top: calc(20*(100vw/800));
  margin-left: calc(65*(100vw/800));
}
.item_babypink .item_copy{
  margin-top: calc(210*(100vw/800));
  margin-left: calc(60*(100vw/800));
}
.item_babypink .item_info{
  margin-top: calc(18*(100vw/800));
  margin-left: calc(60*(100vw/800));
}
.item_babypink .item_more{
  margin-top: calc(-50*(100vw/800));
  margin-right: calc(60*(100vw/800));
  text-align: right;
}
.item_babypink .item_more a, .item_babypink .item_more span{
  margin-left: auto;
}
@media screen and (min-width: 800px) {
  .item_babypink{
    padding-top: 400px;
    padding-bottom: 272px;
  }
  .item_babypink .item_num{
    width: 95px;
  }
  .item_babypink_imggroup1{
    width: 574px;
    margin-top: 52px;
    margin-right: 65px;
  }
  .item_babypink_imggroup2{
    width: 550px;
    margin-top: 127px;
  }
  .item_babypink_imggroup3{
    width: 359px;
    margin-top: -75px;
  }
  .item_babypink .item_colorlist{
    margin-top: 125px;
  }
  .item_babypink .item_colorlist_active{
    left: 335px;
  }
  .item_babypink .item_colorname{
    margin-top: 25px;
    margin-left: 62px;
  }
  .item_babypink .item_colortip{
    margin-top: 20px;
    margin-left: 65px;
  }
  .item_babypink .item_copy{
    margin-top: 210px;
    margin-left: 60px;
  }
  .item_babypink .item_info{
    margin-top: 18px;
    margin-left: 60px;
  }
  .item_babypink .item_more{
    margin-top: -50px;
    margin-right: 60px;
  }
}

/*  item - PINK BAIGE
 * ------------------------------ */
.item_pinkbaige{
  position: relative;
  padding-bottom: calc(370*(100vw/800));
}
.item_pinkbaige::after{
  content: '';
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #ebddd4, #e8d6cf);
}
.item_pinkbaige .item_num{
  width: calc(121*(100vw/800));
}
.item_pinkbaige .item_colorlist{
  margin-top: calc(95*(100vw/800));
}
.item_pinkbaige .item_colorlist_active{
  left: calc(464*(100vw/800));
}
.item_pinkbaige .item_pinkbaige_imggroup1{
  position: relative;
  margin-top: calc(75*(100vw/800));
}
.item_pinkbaige .item_pinkbaige_imggroup1_blur{
  z-index: -1;
  position: absolute;
  top: calc(-515*(100vw/800));
  left: 0;
}
.item_pinkbaige .item_pinkbaige_imggroup2{
  width: calc(380*(100vw/800));
  margin-left: calc(62*(100vw/800));
}
.item_pinkbaige .item_copy{
  margin-top: calc(60*(100vw/800));
  text-align: center;
}
.item_pinkbaige .item_pinkbaige_row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: calc(70*(100vw/800));
  padding-right: calc(60*(100vw/800));
}
.item_pinkbaige .item_info{
  text-align: right;
}
.item_pinkbaige .item_colortip{
  justify-content: flex-end;
}
.item_pinkbaige .item_colortip{
  margin-top: calc(23*(100vw/800));
}
.item_pinkbaige .item_more{
  margin-top: calc(10*(100vw/800));
  margin-bottom: calc(10*(100vw/800));
}
.item_pinkbaige .item_more a, .item_pinkbaige .item_more span{
  margin-left: auto;
}
.item_pinkbaige .item_pinkbaige_imggroup3{
  position: relative;
  margin-top: calc(155*(100vw/800));
}
.item_pinkbaige .item_pinkbaige_imggroup3_img{
  z-index: 2;
  position: relative;
  display: block;
  width: calc(426*(100vw/800));
  margin: 0 auto;
}
.item_pinkbaige .item_pinkbaige_imggroup3_blur{
  z-index: -1;
  position: absolute;
  top: calc(-200*(100vw/800));
  right: 0;
}
.item_pinkbaige .item_colorname{
  justify-content: center;
  margin-top: calc(35*(100vw/800));
}
@media screen and (min-width: 800px) {
  .item_pinkbaige{
    padding-bottom: 370px;
  }
  .item_pinkbaige .item_num{
    width: 121px;
  }
  .item_pinkbaige .item_colorlist{
    margin-top: 95px;
  }
  .item_pinkbaige .item_colorlist_active{
    left: 464px;
  }
  .item_pinkbaige .item_pinkbaige_imggroup1{
    margin-top: 75px;
  }
  .item_pinkbaige .item_pinkbaige_imggroup1_blur{
    top: -515px;
  }
  .item_pinkbaige .item_pinkbaige_imggroup2{
    width: 380px;
    margin-left: 62px;
  }
  .item_pinkbaige .item_copy{
    margin-top: 60px;
  }
  .item_pinkbaige .item_pinkbaige_row{
    margin-top: 70px;
    padding-right: 60px;
  }
  .item_pinkbaige .item_colortip{
    margin-top: 23px;
  }
  .item_pinkbaige .item_more{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item_pinkbaige .item_pinkbaige_imggroup3{
    margin-top: 155px;
  }
  .item_pinkbaige .item_pinkbaige_imggroup3_img{
    width: 426px;
  }
  .item_pinkbaige .item_pinkbaige_imggroup3_blur{
    top: -200px;
  }
  .item_pinkbaige .item_colorname{
    margin-top: 35px;
  }
}

/*  item - PINK
 * ------------------------------ */
.item_pink{
  position: relative;
  padding-bottom: calc(44*(100vw/800));
}
.item_pink::after{
  content: '';
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #e8d6cf, #e0cac4);
}
.item_pink_blur{
  z-index: -1;
  position: absolute;
  top: calc(-300*(100vw/800));
  left: 0;
}
.item_pink .item_num{
  width: calc(125*(100vw/800));
}
.item_pink .item_colorlist{
  margin-top: calc(90*(100vw/800));
}
.item_pink .item_colorlist_active{
  top: calc(-10*(100vw/800));
  left: calc(590*(100vw/800));
  width: calc(75*(100vw / 800));
  height: calc(38*(100vw / 800));
}
.item_pink .item_pink_imggroup1{
  width: calc(538*(100vw/800));
  margin: calc(67*(100vw/800)) auto 0;
}
.item_pink .item_pink_imggroup2{
  position: relative;
  margin-top: calc(73*(100vw/800));
}
.item_pink .item_pink_imggroup2_img1{
  position: relative;
  z-index: 2;
  width: calc(400*(100vw/800));
  margin-left: auto;
}
.item_pink .item_pink_imggroup2_img2{
  width: calc(520*(100vw/800));
  margin-top: calc(-103*(100vw/800));
}
.item_pink .item_pink_imggroup2_blur{
  z-index: -1;
  position: absolute;
  left: 0;
  bottom: calc(500*(100vw/800));
}
.item_pink .item_colorname{
  justify-content: flex-end;
  width: calc(510*(100vw/800));
  margin-top: calc(30*(100vw/800));
}
.item_pink .item_pink_imggroup3{
  position: relative;
}
.item_pink .item_pink_imggroup3_blur{
  z-index: -1;
  position: absolute;
  top: calc(-250*(100vw/800));
  left: 0;
}
.item_pink .item_copy{
  margin-top: calc(115*(100vw/800));
  text-align: center;
}
.item_pink .item_info{
  margin-top: calc(40*(100vw/800));
  text-align: center;
}
.item_pink .item_colortip{
  margin-top: calc(18*(100vw/800));
  justify-content: center;
}
.item_pink .item_more{
  margin-top: calc(15*(100vw/800));
  text-align: center;
}
.item_pink .item_more a, .item_pink .item_more span{
  margin: 0 auto;
}
@media screen and (min-width: 800px) {
  .item_pink{
    padding-bottom: 44px;
  }
  .item_pink_blur{
    top: -300px;
  }
  .item_pink .item_num{
    width: 125px;
  }
  .item_pink .item_colorlist{
    margin-top: 90px;
  }
  .item_pink .item_colorlist_active{
    top: -12px;
    left: 590px;
    width: 75px;
    height: 38px;
  }
  .item_pink .item_pink_imggroup1{
    width: 538px;
    margin-top: 67px;
  }
  .item_pink .item_pink_imggroup2{
    margin-top: 73px;
  }
  .item_pink .item_pink_imggroup2_img1{
    width: 400px;
  }
  .item_pink .item_pink_imggroup2_img2{
    width: 520px;
    margin-top: -103px;
  }
  .item_pink .item_pink_imggroup2_blur{
    bottom: 500px;
  }
  .item_pink .item_colorname{
    width: 510px;
    margin-top: 30px;
  }
  .item_pink .item_pink_imggroup3_blur{
    top: -250px;
  }
  .item_pink .item_copy{
    margin-top: 115px;
  }
  .item_pink .item_info{
    margin-top: 40px;
  }
  .item_pink .item_colortip{
    margin-top: 18px;
  }
  .item_pink .item_more{
    margin-top: 15px;
  }
}

/*  footer
 * ------------------------------ */
.footer{
  position: relative;
}
.footer::after{
  content: '';
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #e0cac4, #e8d4d0);
}
