@charset "utf-8";

#wrap{	font-family: 'Noto Sans JP', sans-serif;font-size: .15rem;}

#bg{
	background-image: url("../img/bg.jpg");
	background-size: 101px auto;
}
.bg{
	background: -webkit-linear-gradient(#006cbf, #e990ec);
	background: -o-linear-gradient(#006cbf, #e990ec);
	background: linear-gradient(#006cbf, #e990ec);
}

header{
	position: relative;
	background-image: url("../img/bg_ttl_news.png");
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: 50% 0;
	padding: 25px 0 40px 0;
	z-index: 2;
}
header h1{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 90px);
}

/* おしらせ */
#bbs{
	position: relative;
	margin:  -20px auto 0 auto;
	z-index: 1;
}
#bbs .text{
	position: relative;
	margin:  0 auto;
	background-image: url("../img/bg_news02.png");
	background-size: 130% auto;
	background-repeat: repeat-y;
	background-position: 50% 0;
}
#bbs::before{
	position: relative;
	content: '';
	display: block;
	background-image: url("../img/bg_news01.png");
	background-size: 130% auto;
	background-repeat: no-repeat;
	background-position: 50% 0;
	width: 100%;
	height: 0;
	padding-top: 37%;
}
#bbs::after{
	position: relative;
	content: '';
	display: block;
	background-image: url("../img/bg_news03.png");
	background-size: 130% auto;
	background-repeat: no-repeat;
	background-position: 50% 0;
	width: 100%;
	height: 0;
	padding-top: 28%;
}
#bbs .text .ttl{
	position: relative;
	margin:  0 auto;
	width: calc(100% - 220px);
}
#bbs .text p{
	position: relative;
	margin:  35px auto 0 auto;
	width: calc(100% - 120px);
	line-height: 2em;
	font-weight: 700;
}

/* 謎 */
#nazo{
    position: relative;
	margin: 0 auto;
    padding: 20px;
	background-color: #fffbed;
	width: calc(100% - 60px);
}
#nazo .nazoImg{
    position: relative;
	margin: 0 auto;
	z-index: 20;
}
.inputArea{
	position: relative;
	margin: 0 auto 10% auto;
}
.inputArea .inputTxt{
	position: relative;
	margin:  20px auto;
	padding: 0 5px;
	border: solid 1px #707070;
	background-color: #f8f8f8;
	border-radius: 5px;
	width: calc(100% - 10px);
	height: 3em;
	font-size: .14rem;
}
.inputArea .btn_send{ 
	position: relative;
	display: block;
	width:  calc(100% - 90px);
	margin: 0 auto;
	padding: 5px;
	text-decoration: none;
	border: none;
	border-radius: 5px;
	background-color: #b83936;
	transition: all 0.16s ease-out;
	text-align: center;
	color: #ffffff;
	font-size: .14rem;
	font-weight: 900;
}
.resultImg{ 
	position: relative;
	margin: 20px auto;
	width: 60%;
}
.resultImg.result{ width: 100%;}
.resultImg.clear{ width: calc(100% - 30px);}
.snsEndShare{width: calc(100% - 70px);margin: 0 auto;}

/* 催事 */
#game{
	position: relative;
	margin: 30px auto;
}
#game .ttl, #goods .ttl, #broadcsat .ttl{
	position: relative;
	margin:  0 auto;
	padding: 30px 0;
	background-image: url("../img/bg_ttl.png");
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: 50% 0;
}
#game .ttl img, #goods .ttl img, #broadcsat .ttl img{
	position: relative;
	margin:  0 auto;
	height: 42px;
	width: auto;
}
#game .text, #goods .text, #form .text, #broadcsat .text{
	position: relative;
	margin: 0 auto;
	background-color: #fffbed;
	padding: 30px 10px;
	width: calc(100% - 40px);
	text-align: center;
}
#game ul{
	position: relative;
	margin: 0 auto;
}
#game ul li{
	position: relative;
	margin: 0 0 10px 0;
	width: 100%;
}

/* シェア */
#shareBox{
	position: relative;
	margin: 0 auto;
}
#shareBox .text{
	position: relative;
	margin:  0 auto;
	padding: 20px 0;
	background-image: url("../img/bg_share02.png");
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: 50% 0;
}
#shareBox::before{
	position: relative;
	content: '';
	display: block;
	background-image: url("../img/bg_share01.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: 50% 0;
	width: 100%;
	height: 0;
	padding-top: 12%;
}
#shareBox::after{
	position: relative;
	content: '';
	display: block;
	background-image: url("../img/bg_share03.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: 50% 0;
	width: 100%;
	height: 0;
	padding-top: 12%;
}
#shareBox .text .ttl{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 160px);
}
#shareBox .text .shareImg{
	position: relative;
	margin: 20px auto;
	width: calc(100% - 90px);
}
#shareBox .text a{
	position: relative;
	margin: 0 auto;
	display: block;
	width: calc(100% - 110px);
}

/* グッズ */
#goods{
	position: relative;
	margin: 30px auto;
}

/* アンケート */
#form{
	position: relative;
	margin: -20px auto 0 auto;
}
#form .ttl{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 160px);
	transform: translateY(40px);
	z-index: 3;
}
#form .text p{padding: 30px 0;}

/* 放送情報*/
#broadcsat{
	position: relative;
	margin: 30px auto;
}
#broadcsat .text div {width: 100%;}
#broadcsat .text img{
	width: 50%;
	margin: 0 auto 20px auto;
}
#broadcsat .text div span{font-size: .13rem;}

#caution{
	position: relative;
	margin: 40px auto 100px auto;
	background-color: #142543;
	padding: 20px;
	width: calc(100% - 60px);
	color: #ffffff;
	font-size: .14rem;
}

a.endBtn{
	position: relative;
	margin: 20px auto 0 auto;
	display: block;
	width: calc(100% - 30px);
	background-color: #8520ab;
	color: #ffffff ;
	text-decoration: none;
	padding: 8px 0;
	font-size: .16rem;
}
a.endBtn::after{
	position: absolute;
	content: '';
	display: block;
	top:50%;
	right: 5px;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	background-image: url("../img/arrow.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}
#form .text a.endBtn{margin: 0 auto;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {

	#wrap{padding: 0;font-size: .18rem;}
	
	#bg{background-size: 202px auto;}
	
	header{
		margin: 0 auto !important;
		padding: 42px 0 64px 0;
	}
	header h1{width: 466px;}

	/* おしらせ */
	#bbs{margin:  -40px auto 0 auto;}
	#bbs .text{width: 732px;}
	#bbs::before{
		margin: 0 auto;
		background-size: 100% auto;
		width: 950px;
		padding-top: 280px;
	}
	#bbs::after{
		margin: 0 auto;
		background-size: 100% auto;
		width: 950px;
		padding-top: 240px;
	}
	#bbs .text .ttl{width: 193px;}
	#bbs .text p{
		margin:  40px auto 0 auto;
		width: 500px;
		text-align: center;
	}

	/* 謎 */
	#nazo{
		padding: 45px;
		width: 890px;
	}
	#nazo .nazoImg{width: 700px;}
	.inputArea{margin: 0 auto 50px auto;width: 520px;}
	.inputArea .inputTxt{
		margin:  30px auto;
		padding: 0 5px;
		width: 520px;
		font-size: .16rem;
	}
	.inputArea .btn_send{ 
		width:  220px;
		padding: 10px;
		font-size: .16rem;
	}
	.inputArea .btn_send:hover{opacity: .6;cursor: pointer;}
	.resultImg{ 
		margin: 0 auto 20px auto;
		width: 260px;
	}
	.resultImg.clear{ width: 600px;}
	.snsEndShare{width: 500px;}

	/* 催事 */
	#game{margin: 35px auto 0 auto;}
	#game .ttl, #goods .ttl, #broadcsat .ttl{padding: 60px 0 50px 0;}
	#game .ttl img, #goods .ttl img, #broadcsat .ttl img{height: 58px;}
	#game .text, #goods .text, #form .text, #broadcsat .text{
		padding: 45px;
		width: 890px;
	}
	#game ul{width: 750px;}
	#game ul li{
		margin: 0 0 20px 0;
		width: calc(50% - 10px);
	}

	/* シェア */
	#shareBox{width: 980px;}
	#shareBox .text{padding: 35px 0;}
	#shareBox::before{padding-top: 87px;}
	#shareBox::after{
		background-position: 50% 100%;
		padding-top: 100px;
	}
	#shareBox .text .ttl{width:330px;}
	#shareBox .text .shareImg{
		margin: 30px auto 50px auto;
		width: 560px;
	}
	#shareBox .text a{width: 380px;}

	/* グッズ */
	#goods{margin: 35px auto;}
	#goods img{width: 760px;margin: 0 auto;}

	/* アンケート */
	#form .ttl{
		width: 246px;
		transform: translateY(80px);
	}
	#form .text p{padding: 100px 0 30px 0;}

	#caution{
		margin: 60px auto 130px auto;
		padding: 40px;
		width: 520px;
		font-size: .16rem;
		text-align: center;
	}
	
	/* 放送情報*/
	#broadcsat{margin: 35px auto;}
	#broadcsat .text div.visual {width:240px;}
	#broadcsat .text div.data {width:460px;}
	#broadcsat .text div.flexbox{width:700px;}
	#broadcsat .text img{
		width: 220px;
		margin: 0 auto;
	}
	#broadcsat .text div span{font-size: .14rem;}
	
	a.endBtn{
		width: 480px;
		padding: 15px 0;
		font-size: .18rem;
	}
	#broadcsat a.endBtn{width: 300px;}
	a.endBtn:hover{color: #FFDBDB !important;}
	a.endBtn::after{
		right: 15px;
		width: 24px;
		height: 24px;
	}
	#game ul li a.endBtn{width: 220px;padding: 5px 0;font-size: .14rem;}
	#game ul li a.endBtn::after{
		right: 15px;
		width: 14px;
		height:14px;
	}
}