* {
    box-sizing: border-box;	
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--body-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background:var(--white-color);
}

html,
body {
    min-width:320px;
    min-height: 100%;
    margin: 0;
}

a {
    text-decoration: none;
    color: #004a98;
}

a:hover {
	text-decoration: underline;
}

header {
	z-index: 1;
	position: fixed;
	width: 100%;
	background: #ffffff;
	padding: 0.8em 0em 0.5em 0em;
	box-shadow: 0 1px 5px #000000;
}

header .logo-center {
	display: flex;
	justify-content: center;
}

.text-center {
    text-align: center;
}

.box-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rounded-box {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
}

.rounded-box2 {
    border-radius: 5px;
    border-style: dotted;
    border-width: 1px;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

main {
    padding-top: 5em;
    height: 100%;
    flex-direction: column;
}

@media(min-width: 900px){
    main {
         padding-top: 4em;
    }
}

main section {
    width: 100%;
    padding: 1em;
    max-width: calc( ( 12em + 1em) * 4 + 0.5em * 3);
}


@media (min-width: 789px) {
	main .container {
		margin-top: 1.0rem;
		display: flex;
		gap: 3.0rem;
	}
	
	main .container img {
		width: 180px;
	}
	
	main .facbox {
		width: 300px;
		height: 300px;

		flex: 1;
		padding: 0.5rem;
		border: 4px solid #003087;
		border-radius: 1.5rem;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		text-align: center;
		box-sizing: border-box;

		font-size: 160%;
		background-color: #fff;
	}

	main .stubox {
		width: 300px;
		height: 300px;

		flex: 1;
		padding: 0.5rem;
		border: 4px solid #E7929F;
		border-radius: 1.5rem;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		text-align: center;
		box-sizing: border-box;

		font-size: 160%;
		background-color: #fff;
	}
}

@media (max-width: 768px) {

	main .container {
		margin-top: 2.0rem;
		display: flex;
		flex-direction: column;
		gap: 1.0rem;
		
	}

	main .container img {
		width: 80px;
	}
	
	main .facbox {
		width: 350px;
		height: 110px;

		flex: 1;
		padding: 0.5rem;
		border: 4px solid #003087;
		border-radius: 1.5rem;

		text-align: center;
		box-sizing: border-box;

		font-size: 150%;
		background-color: #fff;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}

	main .stubox {
		width: 350px;
		height: 110px;

		flex: 1;
		padding: 0.5rem;
		border: 4px solid #E7929F;
		border-radius: 1.5rem;

		text-align: center;
		box-sizing: border-box;

		font-size: 150%;
		background-color: #fff;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}
	
}



nav {
	width: 100%;
	background: #004a98;
	--padding: 3em;
	padding: var(--padding);
	background-image: url("../img/index_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

main h1 {
    margin: 2em 0 0 0;
    color: #004a98;
    font-weight: bold;
    font-size: xx-large;
}

main h2 {
    padding: 5px;
    padding-left: 0.8em;
    background-color: #eef;
    border-radius: 2px;
    box-shadow: 1px 1px 3px;
    font-size: x-large;
}

main .title-text {
	font-size: 22px;
	position: relative;
	padding-left: 10px;
	list-style: none;
	font-weight: bold;
}

main hr {
	border-bottom: 1px solid #003087;
	width: 50%;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}

main section p {
    margin-left: 1.5em;
}

main section a:hover {
    font-weight: bold;
}

.box-center h3 {
	margin: 1.5em 0em 0.2em 0em;
	border-bottom: 4px solid #003087;
	width: 100%;
	max-width: 900px;
	min-width: 300px;
}

.box-center h4 {
	border-bottom: 2px solid #003087;
	width: 100%;
}

.box-center .info-box {
	margin: 0em 0em 0em 2.0em;
}

.wrapper {
	width: 900px;
	margin-top: 1.0em;
	margin-left: 1.0em;
}

.qlinks {
	text-align: left;
}

.wrapper-top {
	margin: auto;
	display: flex;
	justify-content: right;
	align-items: center;
	width: 100%;
	max-width: 900px;
	min-width: 300px;
}

.qlinksbox {
	width: 120px;
	height: 35px;

	border: 3px solid gray;
	border-radius: 1.5rem;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	text-align: center;
	box-sizing: border-box;

	font-size:90%;
	background-color: #fff;
	
	margin-left:0.5em;
}

.news-item:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

.news-item .category {
	width: 15%;
	flex-shrink: 0;
	text-align: center;
	padding: 2px 5px;
	color: white;
	font-weight: bold;
	font-size:90%;
	border-radius: 3px;
	margin: 0px 10px 0px 10px;
}

.news-item .category a {
	text-decoration:none;
}

.news-item .info-category-E {
  background-color: #FF5050;
}
.news-item .info-category-C {
  background-color: #FFBE3B;
}
.news-item .info-category-S {
  background-color: #8EC16B;
}
.news-item .info-category-I {
  background-color: #004A98;
}
.news-item .info-category-O {
  background-color: #969696;
}

.news-item .topic {
	flex-grow: 1;
	margin-left: 0.5em;
}

/* ▼ 画面幅が768px以下のときは縦並びに変更 ▼ */
@media (max-width: 768px) {
	.info {
		
	}
	
	.box-center .info-box {
		margin: 0em 0em 0em 1.0em;
	}

	.wrapper {
		width: 90%;
	}
	
	.wrapper-top {
		margin-top: calc(-1 * var(--padding) / 2);
		margin-right: calc(-1 * var(--padding));
		width: calc(95% + var(--padding));
	}
	
	.info-box {
		flex-direction: column;
		align-items: flex-start;
		margin: 0em 0em 0em 1.0em;
	}
	
	.info-column {
		width: 100%;
	}
	
	.news-item {
		background-color: #fff;
		padding: 0.6em 0 0.6em 0;
		font-size:90%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		max-height: 100px;
	}
	.news-item {
		width: 90%;
		margin-left: 0em;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.news-item:not(:last-child) {
		width: 95%;
	}

	.news-item .category {
		margin: 0 0 0 0;
		width: 20%;
	}

	.news-item .topic {
		padding-top: 0.5em;
		padding-left: 0.5em;
		padding-right: 1.0em;
	}
}

@media (min-width: 789px) {

	.info-box {
		width: 880px;
		display: flex;
		gap: 40px;
	}
	
	.info-column {
		width: 50%;
	}

	.news-item {
		background-color: #fff;
		padding: 0.6em 0 0.6em 0;
		font-size:90%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.quicklink {
		margin: 1.5em;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.5em;
		row-gap: 1.5em; 
	}
	
	.quicklink div {
	  display: grid;
	  grid-template-rows: auto auto;
	}

	.quicklink dt {
		font-size: 120%;
		border-left: 0.5em solid #003087;
		padding-left: 0.4em;
		font-weight: bold;
	}

	.quicklink dd {
		font-size: 90%;
		margin-top: 1.0em;
		margin-left: 1.5em;
		line-height: 1.6;
	}

	.quicklink em {
	    font-style: normal;
	    font-size: 80%;
	    padding: 2px 0.5em 2px 0.5em;
	    margin: 0.1em 0.5em 0.1em 0.5em;
	    background: #eef;
	    border-radius: 3px;
	    box-shadow: 1px 1px 2px #000;
	    color: #666;
	}

}

@media (max-width: 788px) {
	.quicklink {
		margin: 1.5em;
	}
	
	.quicklink div {
	
	}

	.quicklink dt {
		font-size: 120%;
		border-left: 0.5em solid #003087;
		padding-left: 0.4em;
		font-weight: bold;
	}

	.quicklink dd {
		margin-top: 1.0em;
		margin-bottom: 1.0em;
		margin-left: 1.5em;
		line-height: 2.0;
	}

	.quicklink em {
	    font-style: normal;
	    font-size: 80%;
	    padding: 2px 0.5em 2px 0.5em;
	    margin: 0.1em 0.5em 0.1em 0.5em;
	    background: #eef;
	    border-radius: 3px;
	    box-shadow: 1px 1px 2px #000;
	    color: #666;
	}
}

.quicklink a {
	color: #004A98;
}

.quicklink a:hover {
	text-decoration: underline;
}

@media (max-width: 788px) {
	.box-footer {
		font-size: 14px;
	}

	.box-footer p {
	    margin: 1.0rem 0;
	}

	.quicklink-sc {
		margin-bottom: 1.5rem;
	}
	
	.quicklink-sc ul {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.quicklink-sc li {
		width: calc(35%);
		position: relative;
		list-style: none;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		margin-left: 1.0rem;
		margin-right: 1.0rem;
		text-align: center;
	}
}

@media (min-width: 789px) {
	.box-footer {
		font-size: 13px;
		margin-top: 4.0em;
	}

	.box-footer p {
	    margin: 1.0rem 0;
	}
	
	.quicklink-sc {
		margin-bottom: 1.5rem;
	}

	.quicklink-sc ul {
		margin-top: 1.2rem;
		display: flex;
		justify-content: center;

	}

	.quicklink-sc li {
		position: relative;
		list-style: none;
		margin-left: 1.0rem;
		margin-right: 1.0rem;
		text-align: center;
	}
}

.quicklink-sc a {
	display: block;
	color: gray;
}

.quicklink-sc a:hover {
	text-decoration: underline;
}

hr {
	margin: 0.5rem 0;
	border: none;
	border-top: 1px solid #003087;
	height: 0;
}

.copyright {
	text-align: center;
	margin: 1.0rem;
}