@charset "UTF-8";
/* CSS Document */
/* =============================================
全ページ共通要素のみ記載。
ページ特有のcssは別ファイルに記載すること。
トップページ			：top_layout.css
下層ページ(検索結果以外)：subpage_layout.css
下層ページ(検索結果のみ)：serch.css
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
@media screen and (max-width: 959px) {}
@media screen and (max-width : 519px ){}

html{background-color: white; font-size: 62.5%;}  /*　フォントサイズ　1rem=10pt　*/
@media screen and (max-width: 959px) {html{font-size: 50%;}}

body {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	color: black;
	line-height: 1.75;
	font-family: 'Noto Sans JP',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,Verdana,sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.6rem;
}

a{color: #1F469B; text-decoration: none; cursor: pointer;}
a:hover{text-decoration: underline;}

ul {list-style: none;}

span.triangle::before{
	content:  '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 0 3px 5px;
	display:  inline-block;
	vertical-align:  middle;
	position:  relative;
	top: -2px;
	margin-right: 10px;
}
span.triangle::before{border-color: transparent transparent transparent #4d4d4d;}
a>span.triangle::before{border-color: transparent transparent transparent #0b61a8;}


.red{color: #ef5a24;}
.size12rem{font-size: 1.2rem;}
.size14pt{font-size: 1.4rem;}
.size18pt{font-size: 1.8rem;}
.size20rem{font-size: 2.0rem;}
.size23pt{font-size: 2.3rem;}

:root{
	--lightblue:#D1F1FF;
	--navy:#1F469B;
	--seablue:#6367F1;
	--cyaan:#5DBAFC;
	--skyblue:#A3E4FF;
	--red : #DB3A04;
	--lightyellow:#FBF999;
	--green:#129336;
	--blue-gradation: linear-gradient(135deg, #674699 0%, #1F469B 50%, #119DD9 100%);
	--gradation: linear-gradient(128.97deg, #FF4EA4 0%, #FAC068 50%, #CFFB53 100%);
}

/* ==================================================
以下、見出し
================================================== */
h1{
	box-sizing: border-box;
	width: 100%;
	padding: 5px 20px 5px 80px;
	background: #8e8e8e;
	position: relative;
	font-size: 2.2rem;
	color: white;
}
h1>img{
	position: absolute;
	height: 30px;
	margin: 0 0 0 -40px;
	top: 50%;
	transform: translate(-40%,-50%);
}
h1 small{
	display: block;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 20px;
}

/* ==================================================
以上、見出し

以下、ヘッダー(ロゴ、文字サイズ・色合い変更、サイトマップ等)
================================================== */

header{	width: 100%; margin: 0 auto;}
header>.header_wrap{
	width: calc( 100% - 30px );
	max-width: 970px;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}
header>div>div>a{ width: 350px; margin: 50px 0 0 20px;}
header>div>div>a>img{ width: 100%; vertical-align: top;}
header>.header_wrap>div{
	display: flex;
	flex-direction: column;
	width: 100%;
}
/*　文字サイズ・色合い変更、都庁総合ホームページ　*/
.header_link{
	padding: 30px 0 10px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.header_link>a{
	margin: 10px 0 0 20px;
	color: #222222;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.header_link>a:hover{text-decoration: underline;}
/*　サイトマップ・検索窓*/
.header_map-serch{
	width: 100%;
	display: flex;
	flex-direction:row;
	justify-content: flex-end;
	flex-wrap: wrap;
	align-items:center;
}
.header_map-serch>a{
	padding: 2px 20px 3px;
	margin: 0 0 15px 20px;
	color: #002063;
	background-color: #dfe0e6;
	font-size: 1.4rem;
	text-align: center;
	text-decoration: none;
}
.header_map-serch>a:hover{text-decoration: underline;}
.header_map-serch>form{
	text-align: end;
	margin-bottom: 10px;
	width: 60%;
	min-width: 180px;
	padding: 0 0 5px 0;
}
.header_map-serch>form label{height: 0; font-size: 0; overflow: hidden;}
#search-input{height: 20px;	width: calc( 100% - 70px);}
#search-buttom{	width: 50px;}

@media screen and (max-width: 959px) {	
	header>div>div>a{
		width: 300px;
	}
}
@media screen and (max-width: 519px) {
	.header_link,.header_map-serch{display: none;}	
	header>.header_wrap{
		display: block;
	}
	header>div>div>a{
		width: calc(100% - 80px);
		max-width: 250px;
		margin-left: 0;
	}
}

/* ==================================================
以上、ヘッダー(ロゴ、文字サイズ・色合い変更、サイトマップ等)

以下、コロナ
================================================== */

header>.covid-voting_link{
	width: calc( 100% - 30px );
	max-width: 970px;
	padding: 10px 20px;
	box-sizing: border-box;
	margin: 0 auto 10px;
	border: solid 5px #fee433;
	font-weight: 500;
	font-size: 2.3rem;
}

/* ==================================================
以上、コロナ

以下、commingsoon
================================================== */

.comming-soon {
	text-align: center;
	line-height: 1.2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.comming-soon span {
	color: gray;
}

/* ==================================================
以上、commingsoon


以下、グローバルメニュー
================================================== */

.global_menu{
	width: 100%;
	background-color: #002063;
	color: white;
	padding: 0;
}
.global_menu>ul{
	width: calc( 100% - 30px );
	max-width: 970px;
	margin: 0 auto;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.global_menu>ul::after{
	content:"";
	display: block;
	width:20%;
}
.global_menu>ul>li{
	width: 20%;
	height: auto;
	min-width: 140px;
	font-size: 1.6rem;
	color: white;
	vertical-align: middle;
	position: relative;
}
.global_menu>ul>li>a{
	width: 100%;
	height: 100%;
	color: white;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	display: block;
	position: relative;
	transition: .3s;
}
.global_menu>ul>li:first-child >a{
	background-color: white;
	color: #002063;
}
.global_menu>ul>li>a img{ height: 22px;}
.global_menu>ul>li>a>span{ 
	position: relative;
	top:50%;
	transform: translateY(-50%);
	display: block;
}
.global_menu>ul>li>a span.size10{ font-size: 1rem;}
.global_menu>ul>li>a:hover{
	background: white;
	color: #002063;
	text-decoration: underline;
}
.global_menu .sp{display: none;}
.menu_hmb{display: none;}

span.menu-new{
	background-color: orangered;
	color: white;
	padding: 10px 6px;
	border-radius: 50%;	
	font-size: 1.2rem;
	font-weight: 500;
	position: relative;
	margin-right: 5px;
}


@media screen and (max-width: 959px) {	
	.global_menu>ul>li,
	.global_menu>ul::after{	width: 33.3%;}
}
@media screen and (max-width: 519px) {
	.global_menu{display: none;}
	.menu_hmb{
		display: inline-block;
		width: 50px;
		height: 50px;
		background-color: #002063;
		position: absolute;
		top:5vw;
		right: 15px;
		color: white;
		text-align: center;
		text-decoration: none;
		font-size: 1rem;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 25px;
		height: 22px;
		margin-top: 8px;
		background: none;
		border: none;
		appearance: none;
		cursor: pointer;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
		border-radius: 2px;
	}
	.menu-trigger span:nth-of-type(1) {	top: 0;}
	.menu-trigger span:nth-of-type(2) {	top: 9.5px;}
	.menu-trigger span:nth-of-type(3) {	bottom: 0;}
	
	.menu-trigger.active span:nth-of-type(1) {transform: translateY(9.5px) rotate(-45deg);}
	.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
	.menu-trigger.active span:nth-of-type(3) {transform: translateY(-9.5px) rotate(45deg);}
	.global_menu>ul>li{width: 100%; padding: 10px 0;}
	.global_menu>ul>li{font-size: 1.8rem;}
	.global_menu .sp{display: block;}
	.global_menu>ul>li:nth-last-child(-n+2){font-size: 1rem;}
	.global_menu form{
		width: 100%;
		text-align: center;
		margin-bottom: 15px;
	}
	#search-input_sp{height: 20px; width: calc( 70% - 70px);}
	#search-buttom_sp{width: 50px;}

}

/* ==================================================
以上、グローバルメニュー

以下、本文(横幅統一のため)
================================================== */
.wrap{
	width: calc( 100% - 30px );
	max-width: 970px;
	margin: 0 auto;
}

/* ==================================================
以上、本文

以下、フッター
================================================== */

footer{
	width: 100%;
	margin-top: 60px;
	background-color: #dfe0e5;
	position: relative;
	border-top: solid 3px #002063;
}
footer>.wrap{	position: relative;}
footer .back{
	font-size: 1.4rem;
	background-color: #002063;
	padding: 8px 15px 7px;
	position: absolute;
	top:0px;
	right: 0;
	transform: translateY(-100%);
	margin-right: 20px;
}
footer a{
	color: white;
	text-decoration: none;
}
.footer_1>.wrap{
	padding: 30px 0 19px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.footer_1 a{
	width: 31%;
	background-color: white;
	color:  #002063;
	text-align: center;
	margin: 5px 5px 0;
	padding: 11px 0 8px;
}
.footer_2{
	background-color: #3f476e;
}
.footer_2>.wrap{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.footer_2>.wrap>a{
	padding: 10px 0 7px;
	margin: auto 10px;	
	display: flex;
	flex-direction: row;
}
.footer_3{
	background-color: #032061;
	text-align: center;
	color: white;
	padding: 12px 0px;
	font-size: 1.4rem;
}

@media screen and (max-width: 519px) {
	footer .back{ margin: 0;}
	.footer_1>.wrap{ flex-direction: column;}
	.footer_1 a{width: 100%; margin: 5px 0;}
}

/* ==================================================
以上、フッター

以下、カミングスーン
================================================== */

.coming-soon{pointer-events: none;}

span.triangle::before{
	content:  '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 0 3px 5px;
	display:  inline-block;
	vertical-align:  middle;
	position:  relative;
	top: -2px;
	margin-right: 10px;
}
span.triangle::before{border-color: transparent transparent transparent #4d4d4d;}
a>span.triangle::before{border-color: transparent transparent transparent #0b61a8;}