@charset "utf-8";
/* CSS Document */

/*　気まぐれ魔女きのこのワクワク収穫祭*/


#witchmushroom{
	position:relative;
	display:block;
	width:100%;
	overflow:hidden;
	min-width: 1000px;
	background-color: #feb76d;
	background-image: radial-gradient(circle, #f9e7bb6b 10px, transparent 10px), radial-gradient(circle, #fc83355c 10.5px, transparent 10.5px), radial-gradient(circle, #fc83355c 10.5px, transparent 10.5px), radial-gradient(circle, #f9e7bb6b 10px, transparent 10px);
	background-position: 0 0, 40.5px 0, 20.25px 41px, 60.75px 41px;
	background-size: 81px 82px;
}


#witchmushroom_board{   
    display:block;
    width:100%;
    margin: 0px auto;
}

#witchmushroom a img{
	display:inline-block;
	opacity: 1;
	transition: opacity 0.6s ease-out;
}
.titlebg {
  position: relative;
  background: #6f3e77;
  height: 405px;
  margin-bottom: 30px;
}

.titlebg::after {
  content: '';
  position: absolute;
  right: 0;
  left: -8%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 80px;
  background-size: 80px 100%;
  background-image: linear-gradient(135deg, #6f3e77 25%, transparent 25%), linear-gradient(225deg, #6f3e77 25%, transparent 25%);
  background-position: 0 0;
}


#witchmushroom #title{
	width: 1010px;
	height: 390px;
	background: url(/image/event/october2026/garden/title.png) no-repeat center;
	position: relative;
	margin: 0px auto 0 auto;
}



#witchmushroom h2{
	display: none;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}



/*-- メニュー*/



#witchmushroom ul.eventMenu{
	width: 728px;
	height: 79px;
	z-index: 510;
	display: block;
	position: absolute;
	top: 317px;
	left: 170px;
}
#witchmushroom ul.eventMenu li{
	margin: 0;
	padding:0;
	width: 226px;
	text-align: center;
	float:left;
	box-sizing: border-box;
	display: block;
}

#witchmushroom ul.eventMenu li.nav1{margin: 0 5px 0 0;}

#witchmushroom ul.eventMenu li.nav2{margin: 0 5px 0 0;}

#witchmushroom ul.eventMenu li.nav1 img,
#witchmushroom ul.eventMenu li.nav2 img,
#witchmushroom ul.eventMenu li.nav3 img{
 	transition: .3s;
}

#witchmushroom ul.eventMenu li.nav1 img:hover{
	transform: rotate(18deg);
}

#witchmushroom ul.eventMenu li.nav2 img:hover{
	transform: rotate(-20deg);
}
#witchmushroom ul.eventMenu li.nav3 img:hover{
	transform: rotate(20deg);
}
#witchmushroom #event01{
    width: 1200px;
    height: 1200px;
	margin:0 auto;
    background: url(/image/event/october2026/garden/bg_event01.png)no-repeat;
    position: relative;
    z-index: 11;
}

#witchmushroom #event01 .goto_item{
    position: absolute;
    display: block;
    width:203px;
    height:29px;
    top: 660px;
    left: 225px;
    z-index: 13;
}


#witchmushroom #event01 .goto_point{
    position: absolute;
    display: block;
    width:203px;
    height:29px;
    top: 698px;
    left: 225px;
    z-index: 13;
}

#witchmushroom #event01 .goto_buy{
    width: 246px;
    height: 62px;
    position: absolute;
    display: block;
    left: 411px;
    top: 1023px;
}

#witchmushroom #event01 .goto_buy{
    width: 246px;
    height: 62px;
    position: absolute;
    display: block;
    left: 411px;
    top: 1023px;
}
/* スマホ表示（画面幅1200px以下）のときだけ適用 */
@media screen and (max-width: 1200px) {
    #witchmushroom #event01 {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background-size: 100% auto;
    }

    #witchmushroom #event01 .goto_item {
        width: 16.92%; /* 203px ÷ 1200px */
        height: auto;
        top: 55%;      /* 660px ÷ 1200px */
        left: 18.75%;  /* 225px ÷ 1200px */
    }

    #witchmushroom #event01 .goto_point {
        width: 16.92%; /* 203px ÷ 1200px */
        height: auto;
        top: 58.17%;   /* 698px ÷ 1200px */
        left: 18.75%;  /* 225px ÷ 1200px */
    }

    #witchmushroom #event01 .goto_buy {
        width: 20.5%;  /* 246px ÷ 1200px */
        height: auto;
        top: 85.25%;   /* 1023px ÷ 1200px */
        left: 34.25%;  /* 411px ÷ 1200px */
    }
}
#witchmushroom .event02bg {
  position: relative;
  background: #b272f5;
  height: 405px;
  margin-bottom: 30px;
}
#witchmushroom .event02bg::before {
  content: '';
  position: absolute;
  right: 0;
  left: -8%;
  bottom: 100%;
  z-index: 10;
  display: block;
  height: 80px;
  background-size: 80px 100%;
  background-image: linear-gradient(45deg, #b272f5 25%, transparent 25%), linear-gradient(-45deg, #b272f5 25%, transparent 25%);
  background-position: 0 0;
}

#witchmushroom #event02{
	width: 994px;
	height: 424px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event02.png)  top no-repeat;
	position:relative;
	z-index: 11;
}

#witchmushroom .event02bg::after {
  content: '';
  position: absolute;
  right: 0;
  left: -8%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 80px;
  background-size: 80px 100%;
  background-image: linear-gradient(135deg, #b272f5 25%, transparent 25%), linear-gradient(225deg, #b272f5 25%, transparent 25%);
  background-position: 0 0;
}

#witchmushroom #event03{
	width:1000px;
	height: 393px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event03.png) no-repeat center;
	position:relative;
	z-index: 11;
}



#witchmushroom #event04{
	width:1000px;
	height:461px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event04.png) no-repeat top center;
	position:relative;
    z-index: 11;
}


#witchmushroom #event05{
	width:1000px;
	height:549px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event05.png) no-repeat top center;
	position:relative;
    z-index: 11;
}


#witchmushroom #event06{
	width:1000px;
	height: 460px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event06.png) no-repeat top center;
	position:relative;
	z-index: 11;
}
#witchmushroom #event07{
	width:1000px;
	height: 530px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event07.png) no-repeat top center;
	position:relative;
	z-index: 11;
}

/* #witchmushroom .event08_bg{
	width:100%;
	height: 1094px;
	margin:0 auto;
	padding-top: 30px;
	margin-bottom: 30px;
	background: url(/image/event/october2026/garden/comp_bg.png) repeat top center;
	} */

#witchmushroom .event08_bg::before {
  content: '';
  position: absolute;
  right: 0;
  left: -8%;
  bottom: 100%;
  z-index: 10;
  display: block;
  height: 80px;
  background-size: 80px 100%;
  background-image: linear-gradient(45deg, #7e45a8 25%, transparent 25%), linear-gradient(-45deg, #7e45a8 25%, transparent 25%);
  background-position: 0 0;
}
#witchmushroom .event08_bg{
  position: relative;
  background: #7e45a8;
  height: 1085px;
  margin-bottom: 60px;
  padding-top: 40px;
}


#witchmushroom .event08_bg::after {
  content: '';
  position: absolute;
  right: 0;
  left: -8%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 80px;
  background-size: 80px 100%;
  background-image: linear-gradient(135deg, #7e45a8 25%, transparent 25%), linear-gradient(225deg, #7e45a8 25%, transparent 25%);
  background-position: 0 0;
}
#witchmushroom #event08{
	width:1000px;
	height: 1057px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event08.png) no-repeat top center;
	position:relative;
	z-index: 11;
}

#witchmushroom #event08 .stamp01{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 135px;
	top: 199px;
}


#witchmushroom #event08 .stamp02{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 254px;
	top: 199px;
}

#witchmushroom #event08 .stamp03{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 376px;
	top: 199px;
}

#witchmushroom #event08 .stamp04{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 500px;
	top: 199px;
}

#witchmushroom #event08 .stamp05{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 620px;
	top: 199px;
}

#witchmushroom #event08 .stamp06{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 738px;
	top: 199px;
}

#witchmushroom #event08 .stamp07{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 862px;
	top: 199px;
}

#witchmushroom #event08 .stamp08{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 135px;
	top: 357px;
}


#witchmushroom #event08 .stamp09{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 254px;
	top: 357px;
}

#witchmushroom #event08 .stamp10{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 376px;
	top: 357px;
}

#witchmushroom #event08 .stamp11{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 500px;
	top: 357px;
}

#witchmushroom #event08 .stamp12{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 620px;
	top: 357px;
}

#witchmushroom #event08 .stamp13{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 738px;
	top: 357px;
}

#witchmushroom #event08 .stamp14{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 862px;
	top: 357px;
}

#witchmushroom #event08 .stamp15{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 540px;
	top: 756px;
}
#witchmushroom #event08 .item_count{
	position: absolute;
	display: block;
	left: 808px;
	top: 599px;
	color:#5c0e7d;
	font-size: 42px;
font-weight: bold;}

#witchmushroom #event08 a{
    position: absolute;
    top: 935px;
    left: 401px;
}



#witchmushroom #event10{
	width:1000px;
	height: 366px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_event10.png) no-repeat top center;
	position:relative;
    z-index: 11;
}

#witchmushroom #event10 .note{
    position: absolute;
    top: 49px;
    left: 123px;
	color: #595959;
}

#witchmushroom #event10 .note li{
margin: 6px 0 0 0;
}


/*--合成アイテム--*/

#witchmushroom #item01{
    width: 1000px;
    height: 1055px;
    margin: 0 auto 0 auto;
    background: url(/image/event/october2026/garden/bg_item01.png) no-repeat top center;
    position: relative;
    top: 0;
    z-index: 10;
}


#witchmushroom #item01 .gotoShop{
    width: 471px;
    height: 71px;
    position: absolute;
    display: inline-block;
    left: 268px;
    bottom: 20px;
    z-index: 10;
}

#witchmushroom #item01 .gotoSynthetic{
	position: absolute;
	top: 831px;
	left: 265px;
}

#witchmushroom #item02{
    width: 1000px;
    height: 370px;
    margin: 0 auto;
    background: url(/image/event/october2026/garden/bg_item02.png) no-repeat top center;
    position: relative;

}

#witchmushroom #item02 img{
    position: absolute;
    left: 162px;
    top: 210px;
}

#witchmushroom #item02 img{
    width: 220px;
    height: 48px;
    position: absolute;
    display: block;
    left: 242px;
    top: 231px;
}


#witchmushroom #item02 img.recipe_r{
    left: 666px;
}


#witchmushroom #item03{
	width:1000px;
	height: 690px;
	margin:0 auto;
	background:url(/image/event/october2026/garden/bg_item03.png) no-repeat top center;
	position:relative;
}




#witchmushroom #item04{
	width:1000px;
	height:340px;
	margin:0 auto;
	position:relative;
	background:url(/image/event/october2026/garden/bg_item04.png) no-repeat top center;
}


#witchmushroom #item05{
	width:1000px;
	height:401px;
	margin:0 auto;
	position:relative;
	background:url(/image/event/october2026/garden/bg_item05.png) no-repeat top center;
}

#witchmushroom #item05 .recipe_n{ 
	position: absolute;
top:277px;
right:55px;}

/*--ランキング--*/

#witchmushroom #ranking01{
	width:1000px;
	height: 135px;
	margin: 0 auto;
	background: url("/image/event/october2026/garden/ranking01.png") no-repeat top 30px center;
	position: relative;
	z-index: 11;
}


#witchmushroom #ranking01 .point{
	position: absolute;
	width:240px;
	top: 61px;
	left:328px;
	color: #f3731d;
	font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
	text-align: right;
	font-size: 24px;
	font-weight: bold;
}

#witchmushroom #ranking01 .yourrank{
	position: absolute;
	width:240px;
	top: 59px;
	left:660px;
	color: #f3731d;
	font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
	text-align: right;
	font-size: 24px;
	font-weight: bold;
}


#witchmushroom #ranking02{width:1000px;
	margin: 0 auto;}
#witchmushroom #ranking02 li{position: relative;}

#witchmushroom #ranking02 .rankbg01{
	width:1000px;
	height: 96px;
background:url("/image/event/october2026/garden/ranking_bg01.png") no-repeat top center;}



#witchmushroom #ranking02 .rankbg02{
	width:1000px;
	height: 1039px;
background:url("/image/event/october2026/garden/ranking_bg02.png") no-repeat top center;}

#witchmushroom #ranking02 .rank_left{width: 470px; float: left; margin-left: 25px; margin-top:30px;}
#witchmushroom #ranking02 .rank_right{width: 470px; float: left; margin-left: 10px; margin-top:30px;}

#witchmushroom #ranking02 li{margin-bottom: 5px;}

#witchmushroom #ranking02 .rank01{
			width:467px;
	height: 89px;
	background:url("/image/event/october2026/garden/rank01.png") no-repeat top center;
	z-index: 11;
	}

#witchmushroom #ranking02 .rank02{
			width:467px;
	height: 89px;
	background:url("/image/event/october2026/garden/rank02.png") no-repeat top center;
	z-index: 11;}
	




#witchmushroom #ranking02 .charaimg{
position: absolute;
	top:13px;
	left:67px;
	width:64px;
	height:64px;
}


#witchmushroom #ranking02 .charaname{
	position: absolute;
	top:36px;
	left:137px;
	width:170px;
	color: #978356;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 16px;
	font-weight: bold;
	
}

#witchmushroom #ranking02 .charaname span{
  font-size: 12px;
}


#witchmushroom #ranking02 .charapoint{
	position: absolute;
	top:48px;
	left:319px;
	width:140px;
	color: #646464;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 14px;
	font-weight: bold;
	text-align: center;
	
}

#witchmushroom #ranking02 .rank03{
			width:467px;
	height: 89px;
	background:url("/image/event/october2026/garden/rank03.png") no-repeat top center;
	z-index: 11;}



#witchmushroom #ranking02 .rank01 p,
#witchmushroom #ranking02 .rank02 p,
#witchmushroom #ranking02 .rank03 p{
	display: none;}

#witchmushroom #ranking02 .rank_list{
	width:467px;
	height: 89px;
	background:url("/image/event/october2026/garden/rank_bg.png") no-repeat top center;
position:relative;
z-index: 11;}

#witchmushroom #ranking02 .rank_list p{display: block;
	position: absolute;
	width:54px;
	height: 20px;
	font-size: 16px;
	font-weight: bold;
	color:#fff;
	top :34px;
	left:0;
	text-align: center;
	
}


#witchmushroom #ranking02 .rankbg_pager{
		width:585px;
	height: 38px;
background-color: #fff;
	opacity: 0.8;
border-radius: 9px;
text-align: center;
padding: 1px 0 0 0;
margin: 20px auto;}


#witchmushroom #ranking02 .rankbg03{
	width:1000px;
	height: 130px;
background:url("/image/event/october2026/garden/ranking_bg03.png") no-repeat top center;
z-index: 11;
}





#witchmushroom .note{
    position: absolute;
    top: 107px;
    left: 133px;
}



#witchmushroom .note li{
	position: relative;
	color: #635026;

}

#witchmushroom .note li::before{
	content: "※";
	position: absolute;
	top: 0;
	left: -16px;
}

#witchmushroom .about_link li{
	position: relative;
}

#witchmushroom .about_link li::before{
	content: "≫";
	position: absolute;
	top: 0;
	left: -16px;
}

#witchmushroom .about_link{
	position: absolute;
	font-weight: bold;
	left: 762px;
	top: 218px;
    z-index: 10;
	color: #635026;
}

#witchmushroom .about_link a{
	color: #635026;
}

/*-------------------------------------- */ 

/* ページトップへ戻る */
#witchmushroom .pageTop{
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 0;
    margin: 0 auto;
}
    
#witchmushroom .pageTop a{
    left: auto;
    display: block; 
    margin-left: 980px;
    margin-top: 0;
    padding:1em 0 0 2px;
    z-index:800;
    animation:moveY 2s ease-in-out infinite alternate;
}

#witchmushroom .pageTop a:hover{
    opacity: 8;
}


#witchmushroom .pageTop img{
    width: 95px;
    height: 178px;
    max-width: none;
}

@keyframes moveY {
    0% {margin-bottom: -20px}   
    100% {margin-bottom: 20px}
}


/*--アニメーション--*/

#witchmushroom #event08 #EdgeID{
	position: absolute;
	left: 418px;
	top: 589px;
	z-index: -10;
}
#witchmushroom #item03 #EdgeID2{
	position: absolute;
	left: 452px;
	top: 128px;
	z-index: 10;
}
#witchmushroom #item03 #EdgeID3{
	position: absolute;
	left: 698px;
	top: 176px;
	z-index: 10;
}


/*--ボタン カウント--*/
#witchmushroom .countArea01{
    width:144px;
    height:12px;
    color: #fffff0;
    font-weight: bold;
}

#witchmushroom .countArea01 span{
    color: #d5ff19;
}

#witchmushroom a,
#witchmushroom #colorbox a,
#witchmushroom .pop-box a{
    display:inline-block;
    opacity: 1;
    transition: 0.2s ;
    text-decoration: none;
}


#witchmushroom #colorbox a:hover,
#witchmushroom .pop-box a:hover,
#witchmushroom .howtodo02 a:hover,
#witchmushroom .howtodo03 a:hover
{
    opacity: 0.6;
}