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

.wrap>section,
.wrap>#button-wrap,
.wrap>#twitter,
.wrap>#pickup{ margin-top: 30px;}
.wrap>img.top-image{
	width: 100%;
	margin: 15px 0 0;
	vertical-align: bottom;
}

.wrap>img.top-image.sp{display: none;}
@media screen and (max-width: 519px) {
	.wrap>img.top-image.pc{display: none;}
	.wrap>img.top-image.sp{display: block;}
}


/*
ul.note-list{
	font-size: 1.8rem;
	margin: 25px 0 0 0;
	padding: 0;
	list-style: none;
}
ul.note-list li {
	position: relative;
	padding-left: 1em;
	margin-bottom: 8px;
}
ul.note-list li::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0.8rem;
	font-size: 1rem;
	color: #129336;
}
*/
.top_text {
	font-size: 1.8rem;
	margin: 25px 0 0 0;
}
.top_text span{font-size: 2.4rem;}


.news_wrap a[href*=".pdf"]::before{background: url("../img/icon_pdf.svg");}
.news_wrap a[href*=".xlsx"]::before{background: url("../img/icon_xlsx.svg");}
.news_wrap a[href*=".docx"]::before{background: url("../img/icon_docx.png");}
.news_wrap a[href*=".pdf"]::before,
.news_wrap a[href*=".xlsx"]::before,
.news_wrap a[href*=".docx"]::before{
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	background-size: 22px;
	margin: 10px 5px 0 5px;
	transform: translateY(25%);
}


/* ==================================================
以下、期日前投票期間
================================================== */

.schedule-earlyvoting{
	padding: 20px;
	margin-top: 32px;
	background-color: #FDFCD8;
	border-radius: 2px;
	font-size: 3.6rem;
	font-weight: bold;
/*	color: #FA1C57;*/
}
.schedule-earlyvoting h2{}
.schedule-earlyvoting dt,.schedule-earlyvoting dd{display: inline-block}
.schedule-earlyvoting dt{width: calc(3.6rem * 13);}
.schedule-earlyvoting small{font-size: 1.8rem;}


/* ==================================================
以下、お知らせ
================================================== */
#info{position: relative;}

#info h2{
	position: absolute;
	font-size: 2.5rem;
	display: block;
	height: 250px;
	width: 180px;
	padding: 15px 85px 15px 15px;
	background: linear-gradient(316.8deg, #FFF8B5 -6.62%, #B4EAC8 106.89%);
	margin-top: -50px;
	border-radius: 2px;
}
#info h2>span{
	display: block;
	position: relative;
	top:50%;
	transform: translateY(-60%);
/*	color: var(--navy);*/
	line-height: 1.2;
}

.news_wrap{
	position: relative;
	margin-right: 0;
	margin-left: auto;
	z-index: 100;
	width: calc(100% - 4px - 203px);
	min-height: 250px;
	margin-top: 100px;
	border: solid 2px lightgray;
	background-color: white;
	border-radius: 10px;
}
.news_wrap ul{
	width: 100%;
	height: 500px;
	list-style: none;
	overflow-y: scroll;
}
.news_wrap ul li {
	padding: 22px 50px;
	border-bottom: 1px solid #b1b1b1;
}
/*.news_wrap ul li:not(:last-of-type) {
	border: none;
}*/
.news_wrap ul li div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}
/* 日付 */
.news_wrap .year{
	font-size: 1.5rem;
	display: block;
	margin-right: 10px;
	word-wrap: break-word;
}
/* 日付 */
.news_wrap .date{
	font-size: 2.2rem;
	display: block;
	margin-right: 15px;
	word-wrap: break-word;
}
/* カテゴリー */
.news_wrap .category{
	font-size: 1.3rem;
	display: block;
	padding: 1px 20px 3px;
	background-color: #FA1C57;
	color: white;
	text-align: center;
	border-radius: 15px;
	transform: translateY(-15%);
}
/* お知らせ内容 */
.news_wrap .text{
	width: 100%;
	display: block;
}
.news_wrap .text a.coming-soon{
	color: black;
	text-decoration: none;
}
.news_wrap .text a.coming-soon{pointer-events: none;}
.news_wrap .text a:hover{text-decoration: underline;}
.news_wrap .text a>span:not(.page-link){
	font-size: 1.2rem;
	color: white;
	background-color: orangered;
	padding: 3px 5px;
	margin-left: 0px;
	font-weight: 500;
}
span.page-link::after{
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url("../img/icon_link.png");
	background-size: cover;
	margin: 0 8px 0 0;
	transform: translateY(8%);
}
#info>a{position: absolute;	right: 0;}
#info>a img{width: 12px; margin-right: 3px;}

.list_link {
	text-align: right;
}

@media screen and (max-width: 959px) {
	#info h2{
		height: 200px;
		width: 130px;
	}
	.news_wrap{
		width: calc(100% - 4px - 153px);
		margin-top: 100px;
	}
}
@media screen and (max-width: 519px) {
	#info h2{
		height: 200px;
		width: 130px;
		padding: 15px 85px 15px 15px;
		background-color: var(--lightyellow);
		margin-top: -100px;
	}
	#info h2>span{
		top:20%;
	}
	.news_wrap{
		width: calc(100% - 4px - 50px);
		margin-top: 150px;
	}
}

/* ==================================================
以上、お知らせ

以下、候補者情報・期日前投票所一覧
================================================== */

#pickup{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	text-align: center;
	margin-top: 50px;
}
#pickup>.button{
	width: calc((100% / 4) - 15px);
	background: #ffffff;
	/* border: 5px solid #119DD9; */
	background-image: linear-gradient(128.97deg, #FF4EA4 0%, #FAC068 50%, #CFFB53 100%);
	text-decoration: none;
	border-radius: 22px;
	position: relative;
	padding: 5px;
	box-sizing: border-box;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
	bottom: 0;
	right: 0;
	transition: .3s;
}
#pickup>.button:hover:not(.gray_out) {
	bottom: -5px;
	right: -5px;
	box-shadow: none;
}

#pickup>.button div {
	color: #000;
	font-size: 2.0rem;
	background-color: #ffffff;
	border-radius: 18px;
	width: 100%;
	aspect-ratio: 1 / 0.8;
	display: flex;
	align-items: center;
	justify-content: center;
}

#pickup .gray_out {
	background-image: none;
	background-color: lightgray;
	position: static;
}
#pickup .gray_out div {
	background-color: lightgray;
}

@media screen and (max-width: 700px) {
	#pickup {
		justify-content: center;
	}
	#pickup>.button {
	width: calc((100% / 2) - 15px);
	}
	#pickup>.button div {
		aspect-ratio: 1 / 0.4;
	}
}

@media screen and (max-width: 519px) {
	#pickup{flex-direction: column;}
	#pickup>.button{
		width: 100%;
	}
	#pickup>.button div {
		aspect-ratio: 1 / 0.2;
	}
	
}

/* ==================================================
以上、候補者情報・期日前投票所一覧

以下、ボタン一覧
================================================== */

#button-wrap{
	margin: 40px auto;
	padding: 30px;
	background: #F1F4F8;
}
#button-wrap ul {
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#button-wrap li {
	width: calc((100% / 3) - 20px);
	position: relative;
	background-color:white;
	color: black;
	text-decoration: none;
	border-radius: 15px;
	box-sizing: border-box;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
	transition: 0.2s;
	display: flex;
	align-items: center;
}
#button-wrap p::after {
	content: "";
	position: absolute;
	display: inline-block;
	color: #000;
	vertical-align: middle;
	right: 25px;
	transition: 0.3s;
	background-image: url(../img/arrow.png);
	background-size: 35px;
	background-repeat: no-repeat;
	width: 35px;
	height: 35px;
	top: 50%;
	transform: translateY(-50%);
}

#button-wrap p:hover::after {
	right: 20px;
}
#button-wrap a {
	display: block;
	width: 100%;
	color: black;
}
#button-wrap p {
	padding: 25px 65px 25px 3rem;
}

#button-wrap .gray_out {
	background-color: lightgray;
}
#button-wrap .gray_out p:hover::after {
	right: 25px;
}

@media screen and (max-width: 700px) {
	#button-wrap {
		gap: 15px;
	}
	#button-wrap li {
		width: calc((100% / 2) - 15px);
	}
}
@media screen and (max-width: 519px) {
	#button-wrap li {
		width: 100%;
	}
}

/* ==================================================
以上、ボタン一覧

以下、X
================================================== */

/*
#twitter{
	height: 500px;
	width: 400px;
	margin:	auto;
}
#twitter>.contaiter{
	height: 100%;
	width: 100%;
	margin:	auto;
	overflow-y: scroll;
	border: solid 2px lightgray;
}
#twitter>img{	width: 20px; margin-right: 5px; display: inline-block;}
#twitter>p{	display: inline-block;}
@media screen and (max-width: 519px) {	#twitter{width: 100%;}}
#twitter-ie{
	display: none;
	float: right;
}
#twitter-ie a{
	display: flex;
	flex-direction: row;
	font-size: 1.4rem;
	line-height: 1;
	position: relative;
	margin-top: 10px;
	right: 110%;
}
#twitter-ie img{height: 30px; margin-right: 5px;}
#twitter-ie span{white-space: nowrap;}
@media screen and (max-width: 519px) {
	#twitter{width: 90%;}
	#twitter-ie{float: none; justify-content: flex-end;} 
	#twitter-ie a{right: 0;}
}
*/

#twitter{width: 100%;	display: flex;	justify-content: center;}
#twitter img{
	width: 100%;
	max-width: 700px;
	transition: .5s;
}
#twitter img:hover{transform: scale(1.05)}

/* ==================================================
以上、X

以下、グレーアウト
================================================== */



/* ==================================================
以上、グレーアウト

以下、アイコン
================================================== */

/* a[target="_blank"][href^="http"]::after:not(header) {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../img/icon_link.png);
    background-size: 15px;
    margin: 0 5px 0 8px;
    transform: translateY(8%);
} */