/*リセット・共通*/
body{
  margin: 0;
}

.halloween ul,ol,li,h1,h2,h3,h4,h5,h6,p,blockquote {
    margin: 0;
    padding: 0;
}

.halloween a{
    text-decoration: none;
}


.halloween h1,h2,h3,p{
  font-size:100%;
  color:#f2e9e9;
  font-family: "Hina Mincho",  "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  font-style: normal;
}


.halloween h2{
  font-size: 2rem;
  letter-spacing: 0.1rem;
  padding: 1rem;
}

.halloween p{
  font-size:1.2rem;
  line-height: 2.2rem;
  letter-spacing: 0.1rem;
  padding: 0.3rem;
}

.halloween span{
  font-size:2rem;
}

.sp_only{
  display:none;
}


/*ハロウィン以下から*/

/*パンくずリストハロウィン仕様*/
#halloween2025 main{
  background-color: #771F6F;
}

.breadcrumb li{
  color:#ffffff;
}

.breadcrumb li a{
  color:#ffffff;
}
/*パンくずリストハロウィン仕様ここまで*/

/*ページトップボタン*/
.pagetop_btn{
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 115;
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}


.pagetop_btn img{
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-3%);
  }
  100% {
    transform: translateX(3%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}
/*ページトップボタンここまで*/


.concept{
    width:100%;
    height:2700px;
    background-image: url(img/concept_backimg_pc.webp);
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
    position: absolute;
    z-index: 50;
}

.main_logo{
    display: block;
    margin: 0 auto;
    position: relative;
    top: 42rem;
}

.concept_detail{
    position: relative;
    max-width:650px;
    margin: 0 auto;
    top: 47rem;
}

.concept_detail img{
    display: block;
    margin: 0 auto;
}

.concept_left{
    position: absolute;
    bottom: -4rem;
    left: 2rem;
}

.concept_right{
    position: absolute;
    right: -1rem;
    top: -3rem;
}

/*Animationここから*/
.concept_left{
  animation: floating-y 1.5s ease-in-out infinite alternate-reverse;

  @keyframes floating-y {
    0% {
      transform: translateY(-8%);
    }
    100% {
      transform: translateY(8%);
    }
  }
}

.concept_right{
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;

  @keyframes floating-y {
    0% {
      transform: translateY(-8%);
    }
    100% {
      transform: translateY(8%);
    }
  }
}
/*Animationここまで*/

.cake_wrapper{
  margin-top:18rem;
}

.product_detail{
  margin:8rem;
}

.approval{
  font-family: "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.halloween_cake{
    width:100%;
    height:5200px;
    background-image: url(img/cake_backimg_pc.webp);
    background-position: top;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    text-align: center;
    z-index: 60;
    top:1840px;
}

.product_detail img{
  width:100%;
  max-width:840px;
}

.sales_period_orage{
  width:270px;
  margin:0 auto 1rem;
  background-color: #f0831E;
}

.halloween_baked{
  width:100%;
  height:3250px;
  background-image: url(img/baked_backimg_pc.webp);
  background-position: top;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  text-align: center;
  z-index: 70;
  top:5300px;
}

.baked_wrapper{
  margin-top:18rem;
}

.baked_wrapper img{
  width:100%;
  max-width: 850px;
}

.sales_period_purple{
  width:400px;
  margin:0 auto 1rem;
  background-color: #771F6F;
}


.ghost_back{
  position: absolute;
  top:7130px;
  left:0;
  right:0;
  z-index: 75;
  text-align: center;
}

.ghost_back img{
  margin:0 auto;
}

.ghost_hand{
  position: absolute;
  left:0;
  right:0;
  z-index: 85;
}

.ghost_hand img{
  margin:0 auto;
}

.online_wrapper{
  width: 100%;
  height:2240px;
  background-image: url(img/tsuhan_backimg_pc.webp);
  background-position: top;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  text-align: center;
  z-index: 80;
  top:7300px;
}

.online_detail{
  margin-top:18rem;
}

.online_detail img{
  width: 100%;
  max-width: 850px;
}

.online_delivery{
  width:130px;
  border: 3px solid #00BBFF;
  background-color: #f2e9e9;
  color:#00BBFF;
  text-align: center;
  font-family: "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  margin: 2rem auto 0;
}

.online_shop_btn p{
  width:100%;
  max-width:37rem;
  height:6rem;
  font-size: 2rem;
  background-color: #976CD0;
  text-align: center;
  margin:4rem auto 0;
  line-height: 6rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}


.online_shop_btn p::after{
  content:'';
  display: block;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: #f0831E;
  transform: translateY(-100%);
  transition:0.5s;
  z-index: -1;
}

.online_shop_btn p:hover::after{
  transform: translateY(0);
}

/*Fotter挙動制御*/
#halloween2025 footer{
  z-index: 110 !important;
  position: absolute !important;
  top: 9435px !important;
  bottom:auto;
  background-color: #3e3a39 !important;
}

.bt_Twitter img{
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

.bt_Instagram img{
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}


@media screen and (max-width:750px){
  .sp_only{
    display: block;
  }

  .pc_only{
    display: none;
  }

  .halloween h2{
    font-size: 1rem;
  }

  .halloween p{
    font-size:0.8rem;
    line-height: 1.5rem;;
  }

  .halloween span{
    font-size:1.3rem;
  }
  
  .pagetop_btn{
    right:1rem;
    bottom:1rem;
  }

  .concept{
    background:url(img/concept_backimg_sp.webp) no-repeat top center;
    height: 2030px;
  }

  .main_logo{
    width:80%;
    max-width: 500px;
    top:30rem;
  }

  .concept_detail{
    width:100%;
    max-width:90vw;
    top:33rem;
  }

  .concept_window{
    width:100%;
    max-width: 500px;
  }

  .concept_left{
    width:25%;
    bottom:-1.5rem;
    left:2rem;
  }

  .concept_right{
    width:25%;
    top:-1rem;
    right: 2rem;
  }


  .halloween_cake{
    background: url(img/cake_backimg_sp.webp) no-repeat top center;
    top:1500px;
    height:2700px;
  }

  .cake_wrapper{
    margin-top:1rem;
  }

  .product_detail{
    margin:0;
    padding:3rem 2rem 0 2rem;
  }

  .product_detail img{
    width:100%;
    max-width: 500px;
  }

  .sales_period_orage{
    width:200px;
  }

  .halloween_baked{
    background:url(img/baked_backimg_sp.webp) no-repeat top center;
    top:3450px;
    height:2300px;
  }

  .baked_wrapper{
    margin-top:3rem;
    padding:3rem 2rem 0 2rem;
  }

  .baked_wrapper img{
    width:100%;
    max-width: 500px;
  }

  .sales_period_purple{
    width:250px;
  }

  .ghost_back{
    top:4550px;
  }

  .ghost_back img{
    width:100%;
    max-width: 200px;
  }

  .ghost_hand{
    top:0;
  }

  .ghost_hand img{
    width: 100%;
    max-width: 200px;
  }

  .online_wrapper{
    background:url(img/tsuhan_backimg_sp.webp) no-repeat top center;
    top:4650px;
    height:1180px;
  }

  .online_detail img{
    width:100%;
    max-width: 500px;
  }

  .online_detail{
    margin-top:5rem;
    padding: 3rem 2rem 0 2rem;
  }

  .online_shop_btn p{
    width: 100%;
    max-width:300px;
    height: 4rem;
    line-height: 4;
    margin-top:2rem;
  }

  #halloween2025 footer{
    top: 5830px !important;
}

}

/*調整・490px以下*/
@media screen and (max-width:490px){
  .halloween_cake{
    top:1300px;
  }
  
  .halloween_baked{
    top:3230px;
    height:2000px;
  }

  .ghost_back{
    top:4220px;
  }

  .ghost_back img{
    max-width: 150px;
  }

  .online_wrapper{
    top:4300px;
  }

  .ghost_hand img{
    max-width: 150px;
  }

  #halloween2025 footer{
    top: 5470px !important;
  }
}

/*調整・450px以下*/
@media screen and (max-width:450px) {

  .halloween_cake{
    top:1250px;
  }
   
  .ghost_back{
    top:4100px;
  }

  .halloween_baked{
    top:3145px;
  }

  .online_wrapper{
    top:4180px;
  }
  #halloween2025 footer{
    top: 5350px !important;
  }
}


/*調整・375px以下*/
@media screen and (max-width:375px){
  .halloween_cake{
    top:1200px;
  }

  .halloween_baked{
    top:2900px;
  }

  .online_shop_btn p{
    max-width:250px;
  }  

  .ghost_back{
    top:3920px;
  }

  .online_wrapper{
    top:4000px;
  }

  #halloween2025 footer{
    top: 5160px !important;
  }
}