@charset "UTF-8";

html,body{
  height: 100%;/*高さを100%にして描画エリアをとる*/
  position: relative;
}

.pane-header{
    z-index: 2;
}

.pane-footer{
  position: relative;
  z-index: 2;
}


.pane-main.mickey{
  background-color:#09154d;
  position: relative;
}

#particles-js{
  position:fixed;
  z-index:1;
  width: 100%;
  height: 100%;
}

.brand_collection{
  position: relative;
  
}


.mickey .collection_section {
    padding-bottom: 0rem;
    position: relative;
    z-index: 2;
}

.top_title {
    position: relative;
}


.btn_arrow_light_gold {
    background: #d1a82e;
    background: linear-gradient(299deg, rgba(209, 168, 46, 1) 0%, rgba(237, 242, 138, 1) 50%, rgba(209, 168, 46, 1) 100%);
    color: #421f1b!important;
    font-size: 16px;
    min-width: 280px;
}

.hero{
  max-width:1600px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  background-image: none;
  height: auto;
}


@media screen and (max-width:1366px) {

}

@media screen and (max-width:900px) {
  .btn_arrow_light_gold {
    min-width: auto;
    font-size: 15px;
}

ul.list .btn_arrow_light_gold {
    max-width: 200px;
    font-size: 15px;
    margin: auto;
}
}

@media screen and (max-width:539px) {

}

@media screen and (max-width:376px) {

}

@media screen and (max-width:281px) {

}


/*リード*/
.introduce{
  padding:0px 0 10px;
}

.intro_inner{
  padding: 40px 20px 0px;
  max-width: 660px;
  margin: 0 auto 20px;
  text-align:center;
}

.introduce h1{
  font-size:26px;
  letter-spacing: -.005em;
  color:#fff;
  margin: 0px auto 20px;
  position: relative;
  padding: 0 0 10px;
  border-bottom: dotted 4px #d6b765;
  display: inline-block;
}

.intro_inner p{
  font-size:15px;
  color:#fff;
  padding:0 0 10px;
  line-height: 1.8;
}

.h2_ev-jp h2 span:nth-child(1), h2.h2_ev-jp span:nth-child(1) {
    font-size: 26px;
    display: block;
}

@media (max-width: 376px) {
.introduce h1{
  font-size:19px ;
}
}

@media (max-width: 345px) {
.introduce h1{
  font-size:22px ;
}
}


/*--------------------------------------------------------------
  mokuji_img
--------------------------------------------------------------*/
.mokuji_img {
    max-width: 1400px;
    width: 100%;
    padding: 0px 10px 0px;
    margin: auto;
    text-align:center;
}

.mokuji_img h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
    font-size:26px;
    font-weight:600;
    text-align: center;
    margin: 30px 0 10px;
}

.mokuji_img h2::before,
.mokuji_img h2::after {
    content: '';
    width: 70px;
    height: 3px;
    background-color: #d6b765;
}

.mokuji_img h2::before {
    margin-right: 10px;
}
.mokuji_img h2::after {
    margin-left: 10px;
}

.mokuji_img .page_link{
  max-width: 100%;
  gap: 10px;
}

.mokuji_img .page_link li {
    width: 16.6%;
    max-width: 180px;
    padding: 10px 10px;
    border: solid 1px rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
}

.flt_sdw_w {
    filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

@keyframes pikopiko2 {
  0% {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(20deg);
  }
}

@media screen and (min-width:768px) and (max-width:834px) {
.mokuji_img .page_link li {
    width: 18%;
    padding: 0 0px 0px;
}
}

@media screen and (max-width:767px) {
.mokuji_img .page_link li {
    width: 28%;
    padding: 0 0px 0px;
    border-radius: 10px;
}
  }


/*見出し h2*/
h2.title_collection_star{
    font-weight: bold;
    margin: 0rem 0 0;
    padding: 20px 0;
    color: #fff;

    text-align: center;
    background: url(/mickey/img/bg_starL.webp) no-repeat center ;
    background-size: 760px;
}

h2.title_collection_star span:nth-child(1){
    font-size:28px;
    filter: drop-shadow(3px 1px 2px rgba(00, 00, 00, 1));
    display:block;
}

h2.title_collection_star span:nth-child(2){
    font-size:20px;
    filter: drop-shadow(3px 1px 2px rgba(00, 00, 00, 1));
    display:block;
}



/* calendar */
.calendar{
  padding: 1rem !important;
  color: #fff;
}

.bg_blue{
  background: linear-gradient(0deg, rgba(9, 21, 77, 0.6), #12567c, rgba(9, 21, 77, 0.6));
  padding: 10px;
}

.list__special_img_half .collection_img {
    overflow: unset;
}

img.kei_star_1{
  position: absolute;
  right: -6%;
  top: -6%;
  width: 40%;
  z-index: 4;
  filter: drop-shadow(3px 3px 9px rgba(00, 00, 00, .8));
}

img.kei_star_2{
  position: absolute;
  left: -6%;
  bottom: -6%;
  width: 40%;
  z-index: 4;
  filter: drop-shadow(3px 3px 9px rgba(00, 00, 00, .8));
}

.calendar .list__special_text_half p.price {
    color: #fff;
}

#chocolate h3.top_contents_recommend{
  font-size: 18px;
}

.staff_voice_2{
  color: #000;
}

.list__special {
    align-items: center;
}

.series_concept .list__special {
    align-items: flex-start;
}

.list__special_text_half p{
  line-height:1.8;
}


.hw_2023_layout .price_cart_area p.price {
  color: #fff;
}

.list__item_2_text h3, .list__item_3_text h3, .list__item_4_text h3 {
    font-size: 16px;
    color: #fff;
}

.list__item_2_text p.price, .list__item_3_text p.price, .list__item_4_text p.price {
    color: #fff;
    margin: 10px 0;
}


@media (max-width: 767px) {
.calendar{
  padding: 0 1rem 1rem !important;
}
}


/* chocolate */
#chocolate,
#chocolate a,
#chocolate .list__item_2_text h3,
#chocolate .list__item_2_text p.price{
  color:#fff;
}

#chocolate .block-baloon-left_area p{
  color:#231815;
}

.block-baloon-left_area {
      width: 100%;
    margin: 10px auto;
}

#chocolate .block-baloon-left_area img{
  filter: drop-shadow(6px 6px 6px rgba(93, 2, 19, 1));
}

#chocolate .block-baloon-left {
  filter: drop-shadow(6px 6px 6px rgba(93, 2, 19, 0.8));
}


@media (max-width: 376px) {
  #chocolate .list__item_2_text h3{
    letter-spacing: -0.05em;
  }
}

/*cookie*/
#cookie .block-baloon-left_area img{
  filter: drop-shadow(6px 6px 6px rgba(209, 177, 102, 1));
}

#cookie .block-baloon-left {
  filter: drop-shadow(6px 6px 6px rgba(209, 177, 102, 0.9));
}


@media (max-width: 640px) {
    .list__item_2_text h3, .list__item_3_text h3, .list__item_4_text h3 {
        font-size: 1.0rem;
        letter-spacing: -0.01em;
    }
}


/* pc_w360 カートに入れる*/
.pc_w360{
  min-width:360px;
  margin:auto;
}

@media (max-width: 768px) {
.pc_w360{
  min-width:300px;
}
}

@media (max-width: 640px) {
.pc_w360{
  min-width:auto;
}
}


/*--------------------------------------------------------------
 限定粒ご紹介2
--------------------------------------------------------------*/
.chocolate_area2 {
  position: relative;
  width: 100%;
  margin: 0px auto 0px ;
}

.chocolate_area_inner{
  display:flex;
  align-items: flex-end;
  padding: 30px 0px 30px;
}

@media screen and (max-width:767px) {
.chocolate_area2 {
  position: relative;
  width: 100%;
}

.chocolate_area_inner{
  display:block;
}

.chocolate_area_inner_L{
  display:none;
}

}

.chocolate_area2 .flex_list p {
    color: ;
    font-size:14px;
    text-align: center;
}

.chocolate_area2 .flex_list{
  padding: 0 0;
  max-width: 768px;
  margin: auto;
}

.chocolate_area2 p.chocolate_name{
  margin-top:10px;
}

.chocolate_area2 .flex_list p {
    color: ;
    font-size:14px;
    text-align: center;
}

.chocolate_area2 .flex_list{
  padding: 0 0;
  max-width: 768px;
  margin: auto;
}

.chocolate_area2 p.chocolate_name{
  margin-top:10px;
}


.chocolate_area2 p.tsubu_tsubu img{
  filter: drop-shadow(6px 6px 6px rgba(142, 98, 21, 1));
}

/*--------------------------------------------------------------
 限定粒ご紹介
--------------------------------------------------------------*/
.chocolate_area {
  position: relative;
  width: 100%;
  margin: 0px auto 0px ;
}

.chocolate_area_inner{
  display:flex;
  align-items: flex-end;
  padding: 30px 0px 30px;
}

@media screen and (max-width:767px) {
.chocolate_area {
  position: relative;
  width: 100%;
}

.chocolate_area_inner{
  display:block;
}

.chocolate_area_inner_L{
  display:none;
}

}

.chocolate_area .flex_list p {
    color: #fff;
    font-size:14px;
    text-align: center;
}

.chocolate_area .flex_list{
  padding: 0 0;
  max-width: 768px;
  margin: auto;
}

.chocolate_area p.chocolate_name{
  margin-top:10px;
}


@media screen and (max-width:767px) {

}

.chocolate_box_flex{
  display: flex;
  justify-content: center;
  padding: 20px 10px;
}

.chocolate_box_flex .chocolat{
  padding: 5px 5px;
  width: calc((100% - 10px) / 9);
  text-align: center;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  cursor:pointer!important;
}

.chocolate_box_flex .chocolat img{
  margin-bottom:7px;
}

.chocolate_box_flex .chocolat p{
  font-size:12px;
  font-weight:400;
  line-height:1.4;
}

@media screen and (max-width:912px) {
  .chocolate_box_flex{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  flex-wrap: wrap;
}

.chocolate_box_flex .chocolat{
  padding: 5px 5px;
  width: calc((100% - 10px) / 5);
}

}

@media screen and (max-width:540px) {
  .chocolate_box_flex{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 20px;
  flex-wrap: wrap;
}

.chocolate_box_flex .chocolat{
  padding: 5px 5px;
  width: calc((100% - 10px) / 3);
}

}

@media screen and (max-width:420px) {
  .chocolate_box_flex{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 20px;
  flex-wrap: wrap;
}

.chocolate_box_flex .chocolat{
  padding: 5px 5px;
  width: calc((100% - 10px) / 2);
}
}

/*--------------------------------------------------------------
 tsubu_tsubu モーダルボタン 限定チョコレート
--------------------------------------------------------------*/
.flex_list_box{
  margin: 0px 0!important;
  width: calc((100% - 50px) / 3);
  text-align:center;
  padding: 10px;
  cursor: pointer;
}

.flex_list_box p{
  font-size:13px;
  letter-spacing: -.01em;
}

p.tsubu_tsubu{
  padding: 20px;
  margin:0;
}

p.tsubu_tsubu img{
  filter: drop-shadow(6px 6px 6px rgba(93, 2, 19, 1));
}

.icon_arrow_right{
  position: relative;
  left: 4px;
  top: -1px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

@media screen and (min-width:541px) and ( max-width:845px) {
  .flex_list_box{
  margin: 0px 0!important;
  width: calc((100% - 50px) / 3);
  padding: 5px;
}

p.tsubu_tsubu{
  padding: 10px;
}
  }

@media screen and (max-width:540px) {
  .flex_list_box{
  margin: 0px 0px 15px!important;
  width: calc((100% - 50px) / 2);
  padding: 0 3px;
}
p.tsubu_tsubu{
  padding: 10px;
}
  }

/**/

.dokidoki{
    animation-name:dokidoki;  /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 3s; /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite; /* アニメーションをループさせる */
}

@keyframes dokidoki {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.dokidoki2{
    animation-name:dokidoki;  /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 4s; /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite; /* アニメーションをループさせる */
}

@keyframes dokidoki2 {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    65% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.dokidoki3{
    animation-name:dokidoki;  /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 2s; /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite; /* アニメーションをループさせる */
}

@keyframes dokidoki3 {
    0% {
        transform: scale(1);
    }
    33% {
        transform: scale(1.05);
    }
    66% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}



/*ディズニー公式サイトはこちら*/
.disney_site{
  margin:0px auto 0px;
  padding: 30px 0;
  text-align:center;
}

/*時間差でフェードイン*/
.fadeInBlock {
    position: absolute;
}

.fadeInBlock .block {
    padding: 80px 50px;
}

@media screen and (max-width:1023px) {
  .fadeInBlock .block {
    padding: 30px 20px;
    width:70%;
}

}

/* ここから時間差フェードインアニメーション */
/* 1秒間かけてフェードイン */
.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}
@keyframes fadeIn1500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 0.5秒間かけて、右横からフェードイン */
.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* 2秒間かけてフェードイン */
.fadeIn2s {
    animation-name: fadeIn2s;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}
@keyframes fadeIn2s {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*--------------------------------------------------------------
mickey_area キャンペーン
--------------------------------------------------------------*/
.holiday_area{
  padding: 0px 0;
  text-align: center;
}

.holiday_area .bnr_area_z1{
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto ;
  padding: 30px 10px 50px;
}

.holiday_area h2{
  color: #fff;
  font-size: 20px;
  margin: 0 0 20px;
}