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





/* /////////メイン画像フェードイン//////// */


.container{
  animation: fadein 3s ease-out forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}











/* /////////タイトルエリア//////// */
.ttl_container{
	background-image: url(../img/sweets/season/halloween/23halloween_bg.jpg);
	text-align: center;
	font-size:1.5em;
	padding: 6%;	
}

/* 画面サイズ 599px 未満 */
@media (max-width: 599px) {
.ttl_container{
	background-image: url(../img/sweets/season/halloween/23halloween_bg.jpg);
	text-align: center;
	font-size:1.2em;
	padding: 15% 6% 15% 6%;	
}
}

/* 画面サイズ 600px 以上 1200px 未満 */
@media (min-width: 601px) and (max-width: 1200px) {
.ttl_container{
	background-image: url(../img/sweets/season/halloween/23halloween_bg.jpg);
	text-align: center;
	font-size:1.5em;
	padding: 6%;	
}
}

/* 画面サイズ 1200px 以上 */
@media (min-width: 1201px) {
.ttl_container{	
	background-image: url(../img/sweets/season/halloween/23halloween_bg.jpg);
	text-align: center;
	font-size:1.5em;
	padding: 6%;	
}
}

.ttl{
	width: 35%;
	margin: 0 auto;
}

@media (max-width: 599px) {
.ttl{
	width: 90%;
	margin: 0 auto;
}
}

/* /////////購入ボタン(オレンジ)のスタイル//////// */


.btn_orange a {
	margin: 0 auto;
	background: #ff701e;
	border-radius: 60px;
	color: #fff;
	display: block;
	max-width: 300px;
	padding: 15px 40px;
	text-align: center;
	transition: .3s;
}




.btn_orange a:hover {
	background: #ed6e29;
	transform: translateY(-7px);
}


/* /////////購入ボタン(紫)のスタイル///////// */

.btn_purple a {
	margin: 0 auto;animation-delay: 
	text-align: center;
	background: #88157b;
	border-radius: 60px;
	color: #fff;
	display: block;
	max-width: 250px;
	padding: 15px 40px;
	text-align: center;
	transition: .3s;
}


.btn_purple a:hover {
	background: #88157b;
	transform: translateY(-7px);
}











/* /////////フレーバー画像///////// */
.pg {
	text-align: center;
	margin-top: 5%;
	margin-bottom: 3%;
}

/* 画面サイズ 599px 未満 */
@media (max-width: 599px) {
.pg {
	text-align: center;
	margin-top: 15%;
	margin-bottom: 8%;
}
}





/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1s ease-out;
 }