@charset "utf-8";
/* CSS Document */

.renewal_campaign_area *{
	box-sizing: border-box;
	scroll-behavior: smooth;
}
.renewal_campaign_area img{
	max-width: 100%;
}

.renewal_campaign_area h1,.renewal_campaign_area h2,.renewal_campaign_area h3{
	line-height: 1.4;	
}

/*sp幅のメインビジュアルの設定*/

.renewal_campaign_mainvisual{
	margin-bottom: 24px;/*tab-pc 60px*/
}

.mv_tablet-pc,.mv_pc{
	display: none;
}

/*「応募資格」「応募方法」部分の見出しデザイン*/
.headline_design {
  position: relative;
  display: block;/*pcではinline-block*/
  margin-bottom: 0.5rem;
  padding: 0 65px;
  text-align: center;
}

.headline_design:before,
.headline_design:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

.headline_design:before {
  left: 0;
}

.headline_design:after {
  right: 0;
}

/*　テキストの設定　
※応募資格・応募方法・夢と希望賞の応募条件・ページ下部の注意事項に影響　*/

.renewal_campaign_textbox{
	margin-bottom: 20px;
	padding: 0.5rem;
	color: #333;
}
.renewal_campaign_textbox h2{
	font-size: 18px;
	font-weight: bold;
}
.renewal_campaign_textbox p,.renewal_campaign_textbox ul li{
	line-height: 1.5;
}

.about_campaign p{
	font-size: 14px;
}


/*注意事項(ページ下部)*/
.attention{
	color: #fff;
	background: #2f59a0;
}

.attention ul{
	margin-bottom: 1rem;
}
.renewal_campaign_textbox a{
	color: deepskyblue;
}


/*夢と希望賞・ふるさと賞の見出しデザイン*/
.prize_headline{
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 20px;
	background-color: #FEF24D;
	padding: 0.75rem 0.5rem 0.5rem;
	border-top: 3px solid #333;
	border-bottom: 3px solid #333;
}
.prize_headline:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #333 transparent transparent;
}

.prize_headline:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #FEF24D transparent transparent transparent;
}

.furusato .prize_headline{
	background-color: #B660EA;
	color: #fff;
}
.furusato .prize_headline:after{
	border-color: #B660EA transparent transparent transparent;
}
.prize_headline_wrap{
	position: relative;
}
.number_of_winners_box{
	position: absolute;
	top:50%;
	left: 9rem;
	transform: translateY(-50%);
	width: 5.75rem;
	padding: 0.25rem 0.5rem;
	background: #fff;
	font-weight: bold;
	text-align: center;
}
.number_of_winners_box span{
	font-weight: bold;
	font-size: 1.5rem;
}
	

.requirements_to_apply{
	border: 2px dotted #2f59a0;
}


.requirements_to_apply ul li::before{
  content: "●";
  color: yellow;
}
.br_yume{
	display: none;
}
.renewal_campaign_area .copy_yume_kibou{
	max-width: 300px;
	}

/*ふるさと賞--------------------------------------------------------------------------------------*/

/*///////各エリアへのリンクボタン///////*/
.area_links_wrap{
	width: 100%;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
}
.area_links_wrap li{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	text-align: center;	
}


.area_links_wrap li a{
	width: 100%;
	padding: 0.25rem 0;
	display: block;
	color: #fff;
}
.area_links_wrap li a p{
}

.area_links_wrap li a:hover{
	opacity: 0.8;}

.area_links_wrap li:nth-child(2) a{/*播磨エリア*/
	color: #194F5C;
}

.area_links_wrap{
	font-size: 12px;
}

.area_links_wrap span{
	font-size: 12px;
}

.area_links_wrap li:nth-child(1) a{/*摂津エリア*/
	background: #68D680;
}
.area_links_wrap li:nth-child(2) a{/*播磨エリア*/
	background: #70C4D8;
}
.area_links_wrap li:nth-child(3) a{/*但馬エリア*/
	background: #D12929;
}
.area_links_wrap li:nth-child(4) a{/*丹波エリア*/
	background: #7C4B21;
}
.area_links_wrap li:nth-child(5) a{/*淡路エリア*/
	background: #5B59D2;
}

/*///////ふるさと賞の賞品カードの設定///////*/


.prize_wrap{
	margin-bottom: 20px;	
}
/*賞品カードの表示サイズ*/
.prize_gridlayout{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	grid-gap: 1rem;
}

/*賞品カード内のデザイン*/
.prize_item{
	box-sizing: border-box;
	background-color: #ffffff;
	border: #68D680 1px solid;
	padding: 0.5rem;
	position: relative;
}

.prize_item_inner{
	display: flex;
	flex-direction: column;
}

.prize_item .number{
	margin-right: 0.5rem;
}
.prize_item .prize_number{
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	margin-bottom: 0.5rem;
	padding: 0.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #68D680;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

	/*エリアごとのカードパーツ色指定変更*/

	.harima_area{
		border: #70C4D8 1px solid;
	}
	.harima_area .prize_number{
		background-color: #70C4D8;
		color: #194F5C;
	}
	.tajima_area{
		border: #D12929 1px solid;
	}
	.tajima_area .prize_number{
		background-color: #D12929;
	}
	.tanba_area{
		border: #7C4B21 1px solid;
	}

	.tanba_area .prize_number{
		background-color: #7C4B21;
	}

	.awaji_area{
		border: #5B59D2 1px solid;
	}
	.awaji_area .prize_number{
		background-color: #5B59D2;
	}

	/*「●●名様」部分*/
	.prize_item .number_of_winners{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		color: #68D680;/*settsu_area*/
		font-size: 14px; 
		font-weight: bold;
		padding: 4px 2px; 
	}
	.number_of_winners span{
		background: yellow;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.harima_area .number_of_winners{
		color: #70C4D8;
	}
	.tajima_area .number_of_winners{
		color: #D12929;
	}
	.tanba_area .number_of_winners{
		color: #7C4B21;
	}
	.awaji_area .number_of_winners{
		color: #5B59D2;
	}
	/*その他文字部分*/
	.prize_about{
		padding-top: 6px;
	}
	.prize_about_layout{
		display: flex; 
		justify-content: space-between; 
		align-items: center;
	}
	.prize_item .prize_about p{
		margin: 0 0 2px 0;
		padding: 0;
		font-weight: bold;
		line-height: 1.25;
	}
	.area_name{
		font-size:14px;
	}
	.prize_name{
		font-size:18px;
	}

	/*賞品画像の設定*/
	.prize_item figure img{
		object-fit: cover;
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}


/*ボタン--------------------------------------------------------------------------------------*/
.renewal_campaign_area .btn_wrap{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16px;
}

.renewal_campaign_btn{
	width:100%; 
	height: 4rem;
	margin-bottom: 16px;
	padding: 10px 30px;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	vertical-align: middle;
	background-color: cadetblue;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	box-shadow: 4px 4px 0px 0px rgba(170,170,170,0.50);
	transition: 0.3s;
}

.renewal_campaign_area .btn_oubo{
	margin-top: 48px;
	background-color: salmon;
	}

.renewal_campaign_btn:hover {
  opacity: 0.8;
  transition: 0.3s;
  box-shadow: 0 0 rgba(170,170,170,0.50);
  color: #fff;
  background-color: #cadetblue;
}
.renewal_campaign_btn:visited {
  color: #fff;
}

/*　レスポンシブ--------------------------------------------*/

@media screen and (min-width: 480px) {
/*
.prize_gridlayout{
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}*/
	
.headline_design {
  position: relative;
  display: inline-block;/*小デバイスではblock*/
  margin-bottom: 0.5rem;
  padding: 0 65px;
  text-align: center;
}

.area_links_wrap li a{
	font-size: 14px;
	padding: 0.5rem 0;
}
	
}

/*　キャンペーン終了のお知らせ
ーーーーーーーーーーーーーーーーーー*/

.renewal_fin {
	font-size: 20px;
	text-align: center;
	color: #e50112;
	background-color: #ffe0e0;
	padding: 10px;
	margin-bottom: 24px;
	font-weight: 700;
}
@media screen and (min-width: 768px) {
	.renewal_fin {
		font-size: 45px;
		padding: 20px;
}


	
@media screen and (min-width: 768px) {
	
.prize_gridlayout{
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/*メインビジュアルの設定*/

	.mv_tablet-pc{
	display: block;
}
	.mv_sp{
	display: none;
}
	
.renewal_campaign_textbox{
	padding: 1rem;
}
	
/*夢と希望賞*/
.prize_about_inner{
	margin-bottom: 12px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.renewal_campaign_area .photo_chikamoto{
	max-width: 380px;
	margin-left: 16px;
}
/*
.renewal_campaign_area .copy_yume_kibou{
	max-width: 340px;
	}
*/
	
	
.number_of_winners_box{
	position: absolute;
	top:50%;
	right: 3rem;
}

	
/*ボタン*/
.renewal_campaign_btn{
	width: 70%;
	margin-right: 8px;
	margin-bottom: 0;

}
.renewal_campaign_btn a:last-child{
	margin-right: 0;
}
.renewal_campaign_area .btn_wrap{
	
	flex-direction: row;
}

.renewal_campaign_area .btn_oubo{
		width: 50%;
	}	
	
	
}
@media screen and (min-width: 1024px) {

.renewal_campaign_btn{
	width: 50%;
}	
}
@media screen and (min-width: 1281px) {
	.mv_pc{
	display: block;
}
	.mv_tablet-pc{
	display: none;
}
	.nbr_yume{
	display: none;
}
	.br_yume{
	display: block;
}
}
