@charset "utf-8";

/* ========================================================
	index.css
======================================================== */

/* bnr_campaign
============================================================================================================ */
.bnr_campaign {
	margin-top: -50px;
	margin-bottom: 100px;
	text-align: center;
}
.bnr_campaign a {
	display: inline-block;
	border: 2px solid #c8c8c8;
}
@media screen and (max-width: 768px) {
	.bnr_campaign {
		margin-top: -30px;
		margin-bottom: 50px;
		text-align: center;
		padding: 0 40px;
	}
}

/* index_main
============================================================================================================ */
.index_main {
	position: relative;
	overflow: hidden;
	/*height: calc(100vh - 200px);*/
	margin-bottom: 50px;
	padding-bottom: 100px;
}
.index_main p {
    position: absolute;
    font-size: 10.6rem;
    font-size: 5.7vw;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    z-index: 5;
}
.index_main p span {
	display: inline-block;
	margin-left: -1.2em;
	font-size: 1.8rem;
	vertical-align: 2px;
}
.index_main p .mv_title {
	width: 67.7vw;
}
.index_main .bg_wrap {
	/*position: absolute;
	top: 0;
	left: 0;
	bottom: 0;*/
	width: 100%;
}
.index_main .bg_wrap div {
	height: 100%;
}
.index_main .bg_wrap .bg {
	background-position: 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
.index_main .slick-dots {
	position: absolute;
	right: 0;
	bottom: -50px;
}
.index_main .slick-dots li {
	display: inline-block !important;
	margin-left: 10px;
}
.index_main .slick-dots li button {
	position: relative;
	overflow: hidden;
	width: 60px;
	height: 0;
	margin: 0;
	padding: 40px 0 0;
	border: 0;
	background: none;
}
.index_main .slick-dots li button::after {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 18px;
	right: 0;
	left: 0;
	background-color: #c8c8c8;
	-webkit-transition: background .2s;
	-o-transition: background .2s;
	transition: background .2s;
}
.index_main .slick-dots li.slick-active button::after {
	background-color: #0098b8;
}
.top_b {width: 90%;height: auto; margin: 0 auto 5rem;}
.top_b a {display: block;}
.top_b a img {width: 100%;height: auto; border: solid 1px #d1d1d1;}

#mainMovie {
	position: relative;
	/* height: calc(100vh - 20px); */
	/* min-height: 600px; */
	background-color: #000;
	/* padding-top: 160px; */
	z-index: 1;
}
#mainMovie .movie {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#mainMovie .movie {
	overflow: hidden;
	position: relative;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	z-index: -1;
}
#mainMovie .movie::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	opacity: 0.3;
}
#mainMovie .movie iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	max-width: none;
	/*height: 56.25vw;  16:9 の高さなので 56.25% (= 9 ÷ 16)
	width: 177.77777778vh;  16:9 の幅なので 177.77% (= 16 ÷ 9)
	width: 230.77777778vh;  16:9 の幅なので 177.77% (= 16 ÷ 9) */
	height: 100%;
	/* height: /56.25vw; */
    width: 100%;
	transform: translate(-50%, -50%);
	opacity: 0;
}
#mainMovie .movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	max-width: none;
	/*height: 56.25vw;  16:9 の高さなので 56.25% (= 9 ÷ 16)
	width: 177.77777778vh;  16:9 の幅なので 177.77% (= 16 ÷ 9)
	width: 230.77777778vh;  16:9 の幅なので 177.77% (= 16 ÷ 9) */
	height: 100%;
	/* height: /56.25vw; */
    width: 100%;
	transform: translate(-50%, -50%);
}

/*
#mainMovie.play .movie::after {
	content: "";
}
#mainMovie.play .movie iframe {
	opacity: 1;
}
*/
#mainMovie .movie::after {
	content: "";
	opacity: 0;
}
#mainMovie .movie iframe {
	opacity: 1;
}

@media screen and (max-width: 768px), print {
	#mainMovie .movie {
		aspect-ratio: 16 / 	9;
		height: auto;
	}
	#mainMovie .movie iframe {
		width: 100%;
	}
}
@media screen and (min-width: 769px), print {
	.index_main {
		/*height: calc(100vh - 100px);
		min-height: 550px;
		max-height: 1000px;*/
		width: 100%;
	}
	.index_main p {
		top: 3%;
		left: 3%;
		/*-webkit-transform: translateY(-50%) translateY(-50px) translateX(50%);
		-moz-transform: translateY(-50%) translateY(-50px) translateX(50%);
		-ms-transform: translateY(-50%) translateY(-50px) translateX(50%);
		-o-transform: translateY(-50%) translateY(-50px) translateX(50%);
		transform: translateY(-50%) translateY(-50px) translateX(50%);*/
	}
	.index_main .bg_wrap {
		/*right: 100px;
		bottom: 100px;
		width: 100%;height: calc(100% - 100px);
		position: absolute;*/
		overflow: hidden;
	}
	#yt_player {
		/*position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 230.77777778vh;
		height: 56.25vw;
		min-width: 100%;
		min-height: 100%;
		max-width: none;
		z-index: -2;*/
		width: 100%;height: auto;aspect-ratio: 16 / 9;
	}

	.index_main .bg_wrap .bg01 {
		background-image: url(../images/index/main04.jpg);
	}
	.index_main .bg_wrap .bg02 {
		background-image: url(../images/index/main02.jpg);
	}
	.index_main .bg_wrap .bg03 {
		background-image: url(../images/index/main03.jpg);
	}
	.index_main .slick-dots li button:hover::after {
		background-color: #0098b8;
	}
	.top_b {width: 460px;height: auto; margin: 0 auto 5rem;}
	#mainMovie .btn_main_video {width: 320px;height: auto;position: absolute;right: 0;bottom: 0;z-index: 10;}
}
@media screen and (min-width: 1300px) {
	.index_main p {
		/* right: calc(20px + (100% - 1300px) * 0.25); */
		right: 65%;
	}
	.index_main .bg_wrap {
		/*right: auto;
		width: calc(50vw + 550px);*/
	}
	#mainMovie .btn_main_video {width: 320px;height: auto;position: absolute;right: auto;left: calc(50% + 360px);bottom: 0;}
}
@media screen and (max-width: 1280px) {
	.index_main p {
		font-size: 7.2rem;
	}
	.index_main p .mv_title {
		width: 84.2rem;
	}
}
@media screen and (max-width: 768px) {
	.index_main {
		/*height: 100vh;;
		max-height: 100vh;
		margin-bottom: 100px;
		overflow: visible;
		margin: -60px 0 20px 0;*/
		padding-bottom: 104px;
	}
	#yt_player_sp {
		/*position: relative;
		width: 100%;
		height: auto;
		max-width: none;
		vertical-align: middle;
		margin-top: calc(50% - 120px);
		transform: translateY(-60px);*/
		pointer-events: none;
		width: 100%;height: auto;aspect-ratio: 9 / 16;
	}
	#player {
		width: 100%;
		height: 100%;
		z-index: -1;
		position: relative;

	}
	.index_main p {
		top: 10%;
		right: 20%;
		font-size: 4rem;
		text-align: center;
		width: 60%;
	}
	.index_main p .mv_title {
		width: auto;
	}
	.index_main .bg_wrap {
		/*top:0;
		right: 0;
		bottom: 0;
		position: relative;
		background-color: #2190ad;
		height: calc(100vh - 60px);*/
		/* max-height: calc(100vh - 60px); */
		overflow: hidden;
	}
	.index_main .slick-dots {
		bottom: -30px;
	}
	.index_main .slick-dots li {
		margin-left: 5px;
	}
	.index_main .slick-dots li button {
		width: 30px;
		padding: 20px 0 0;
	}
	.index_main .slick-dots li button::after {
		top: 9px;
		bottom: 9px;
	}
	.index_main .bg_wrap .bg01 {
		background-image: url(../images/index/main04.jpg);
	}
	.index_main .bg_wrap .bg02 {
		background-image: url(../images/index/main02_sp.jpg);
	}
	.index_main .bg_wrap .bg03 {
		background-image: url(../images/index/main03_sp.jpg);
	}
	#mainMovie .btn_main_video {width:50%;height: 40px;position: absolute;right: 0;bottom: -40px;display: flex;justify-content: flex-end;align-items: flex-start;}
	#mainMovie .btn_main_video a {width: auto;max-width: 100%; height: 100%;display: block;}
	#mainMovie .btn_main_video a img {width: 100%;height: auto;aspect-ratio: 366 / 71;}
}
.index_main .scroll {
	position: absolute;
	right: 50%;
	bottom: 18px;
	transform: translateX(50%);
	/* width: 25px; */
	padding-bottom: 40px;
	font-size: 1.2rem;
	letter-spacing: .05em;
	color: #050514;
	text-decoration: none;
}
.index_main .scroll .arrow {
	overflow: hidden;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	height: 40px;
}
.index_main .scroll .arrow > span {
	position: relative;
	display: block;
	height: 40px;
/*
	-webkit-animation: scroll 2.2s ease 0s infinite;
	animation: scroll 2.2s ease 0s infinite;
*/
}
.index_main .scroll .arrow > span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 46%;
	height: 30px;
	border-left: 1px solid #050514;
}
.index_main .scroll .arrow > span::after {
	content: "";
	position: absolute;
	top: 30px;
	left: 46%;
	border-style: solid;
	border-width: 10px 10px 0 0;
	border-color: #050514 transparent transparent transparent;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleX(.5);
	-ms-transform: scaleX(.5);
	-o-transform: scaleX(.5);
	transform: scaleX(.5);
}
@-webkit-keyframes scroll {
	0% { -webkit-transform: translateY(-100%); }
	20%, 75% { -webkit-transform: translateY(0); }
	100% { -webkit-transform: translateY(120%); }
}
@keyframes scroll {
	0% { transform: translateY(-100%); }
	20%, 75% { transform: translateY(0); }
	100% { transform: translateY(120%); }
}
@media screen and (min-width: 769px), print {
	.index_main .scroll:hover {
		color: #007E99;
	}
	.index_main .scroll:hover .arrow > span::before {
		border-left-color: #007E99;
	}
	.index_main .scroll:hover .arrow > span::after {
		border-top-color: #007E99;
	}
}
@media screen and (max-width: 768px) {
	.index_main .scroll {
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
		-webkit-transform: scale(.8) translateX(50%);
		-ms-transform: scale(.8) translateX(50%);
		-o-transform: scale(.8) translateX(50%);
		transform: scale(.8) translateX(50%);
		padding-bottom: 40px;
		bottom: 0;
	}
}

/* index_title
============================================================================================================ */
.index_title {
	margin-bottom: 60px;
	text-align: center;
	color: #000;
	font-size: 1.8rem;
}
.index_title .ff_roboto {
	margin-bottom: 8px;
	font-size: 6rem;
	line-height: 1;
}
.link li {width: 260px;height: 50px;border-radius: 25px;margin-top: 2rem;}
.link li a {line-height: 50px;width: 100%;display: block; position: relative;font-size:1.6rem;color: #FFF;text-align: center;text-decoration: none; }
.link li.press a {background-color:#0098b8; }
.link li.news a {background-color:#323c46; }
@media screen and (max-width: 768px) {
	.index_title {
		margin-bottom: 30px;
		font-size: 1.5rem;
	}
	.index_title .ff_roboto {
		margin-bottom: 5px;
		font-size: 4rem;
	}
}



/* index_news
============================================================================================================ */
.index_news {
	position: relative;
	margin-bottom: 120px;
	max-width: calc(1180px + 40px);
	padding-right: 0;
}
.index_news .index_title {
	text-align: left;
}
.index_news .list li.linkno,
.index_news .list a {
	display: block;
	text-decoration: none;
	color: #050514;
}
.index_news .list li.linkno .cat,
.index_news .list a .cat {
	width: 112px;
	padding: 1px;
	border-radius: 2px;
	text-align: center;
	font-size: 1.4rem;
	color: #fff;
	word-break: normal;
}
.index_news .list li.linkno .cat.news,
.index_news .list li.linkno .cat.news_en,
.index_news .list a .cat.news,
.index_news .list a .cat.news_en {
		background-color: #323c46;
}
.index_news .list li.linkno .cat.pressrelease,
.index_news .list li.linkno .cat.pressrelease_en,
.index_news .list a .cat.pressrelease,
.index_news .list a .cat.pressrelease_en {
		background-color: #0098b8;
}
.index_news .btn li + li {
	margin-top: 20px;
}
.index_news .list li.linkno{padding: 0;}
@media screen and (min-width: 769px), print {
	.index_news > div {
		position: relative;
		min-height: 310px;
		padding-left: 350px;
	}
	.index_news .index_title {
		position: absolute;
		top: 0;
		left: 0;
	}
	.index_news .list li + li {
		margin-top: 38px;
	}
	.index_news .list li.linkno,
	.index_news .list a {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: space-between;
		-ms-align-items: flex-start;
		align-items: flex-start;
		position: relative;
	}
	.index_news .list li.linkno .date,
	.index_news .list a .date {
		font-size: 1.6rem;
	}
	.index_news .list li.linkno .title,
	.index_news .list a .title {
		width: calc(100% - 235px);
		font-size: 1.8rem;
		line-height: 1.6;
		position: relative;
	}
	.index_news .list a[href]:hover .title {
		text-decoration: underline;
	}
	.index_news .btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.index_news .list a .title span {position: relative;}
	.index_news .list a[href]:hover .title span {position: relative;}
	a[href$=".xls"], a[href$=".xlsx"] {}
	.index_news .list a[href$=".pdf"] .title span:after {
		content: '';
		display: block;
		position: absolute;
		right: -3rem;
		bottom: 0;
		width: 2rem;
		height: 2rem;
		background-image: url(../images/ico_pdf.png);
		background-position: center center;
		background-size: auto 100%;
		background-repeat: no-repeat;
	}
	.index_news .list a[href$=".zip"] .title span:after {
		content: '';
		display: block;
		position: absolute;
		right: -2rem;
		bottom: 0;
		width: 2rem;
		height: 2rem;
		background-image: url(../images/ico_zip.png);
		background-position: center center;
		background-size: auto 100%;
		background-repeat: no-repeat;
	}
}
@media screen and (max-width: 768px) {
	.index_news {
		margin-bottom: 60px;
	}
	.index_news .list a {
		margin-bottom: 20px;
		line-height: 1.8;
	}
	.index_news .list a .date {
		display: inline-block;
		font-size: 1.2rem;
	}
	.index_news .list a .cat {
		display: inline-block;
		width: 90px;
		margin-left: 5px;
		padding: 0;
		font-size: 1.2rem;
	}
	.index_news .list a .title {
		display: block;
		margin-top: 5px;
		font-size: 1.5rem;
		line-height: 1.7;
	}
	.index_news .btn li {
		margin-top: 30px;
	}
}


/* index_vision
============================================================================================================ */
.index_vision {
	position: relative;
	overflow: hidden;
	margin-bottom: 120px;
	padding: 500px 40px 0;
	text-align: center;
}
.index_vision .bg_img {
	height: 600px;
}
.index_vision .wrap {
	position: relative;
	max-width: 1300px;
	margin: auto;
	padding: 70px 40px 0;
	background-color: #fff;
	z-index: 2;
}
.index_vision .lead {
	margin-bottom: 60px;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.9;
}
@media screen and (min-width: 769px), print {
	.index_vision::after {
		content: "";
		position: absolute;
		top: -70px;
		left: -40px;
		width: 520px;
		height: 520px;
		background: url(../common/images/parts/logo_mark.svg) no-repeat 50%;
		-webkit-background-size: 100%;
		background-size: 100%;
		opacity: .1;
	}
}
@media screen and (max-width: 768px) {
	.index_vision {
		margin-bottom: 60px;
		padding-top: 200px;
	}
	.index_vision .bg_img {
		height: 250px;
	}
	.index_vision .wrap {
		padding: 35px 0 0;
	}
	.index_vision .lead {
		margin-bottom: 30px;
		font-size: 1.7rem;
		line-height: 1.8;
	}
}

/* index_airport
============================================================================================================ */
.index_airport {
	position: relative;
	overflow: hidden;
	padding: 110px 0 120px;
}
@media screen and (min-width: 769px), print {
	.index_airport .index_title {
		text-align: left;
	}
}
@media screen and (max-width: 768px) {
	.index_airport {
		padding: 45px 0 60px;
	}
}
.index_airports_nav {
	position: relative;
	height: 620px;
	background: no-repeat 50%;
}
.index_airports_nav ul {
	position: absolute;
	left: 50%;
}
.index_airports_nav a {
	position: absolute;
	color: #000;
	font-size: 1.6rem;
	line-height: 1.4;
	white-space: nowrap;
}
@media screen and (min-width: 769px), print {
	.index_airports_nav {
		margin: -80px -40px 20px;
		background-image: url(../images/index/airport_img.png);
	}
	html[lang=en] .index_airports_nav {
		margin-top: -30px;
	}
	.index_airports_nav .chitose a {
		top: 290px;
		right: 236px;
	}
	.index_airports_nav .wakkanai a {
		top: 5px;
		right: -4px;
	}
	.index_airports_nav .kushiro a {
		top: 436px;
		left: 176px;
	}
	.index_airports_nav .hakodate a {
		top: 428px;
		right: 340px;
	}
	.index_airports_nav .asahikawa a {
		top: 174px;
		right: 180px;
	}
	.index_airports_nav .obihiro a {
		top: 470px;
		left: 80px;
	}
	.index_airports_nav .memanbetsu a {
		top: 200px;
		left: 140px;
	}
}
@media screen and (max-width: 768px) {
	.index_airports_nav {
		margin: -10px 0 30px;
		height: 310px;
		background-image: url(../images/index/airport_img_sp.png);
		-webkit-background-size: 610px;
		background-size: 610px;
	}
	.index_airports_nav a {
		padding: 5px;
		font-size: 1.2rem;
	}
	.index_airports_nav .chitose a {
		top: 140px;
		right: 56px;
	}
	.index_airports_nav .wakkanai a {
		top: -3px;
		left: -3px;
	}
	.index_airports_nav .kushiro a {
		top: 222px;
		left: 110px;
	}
	.index_airports_nav .hakodate a {
		top: 204px;
		right: 100px;
	}
	.index_airports_nav .asahikawa a {
		top: 80px;
		right: 30px;
	}
	.index_airports_nav .obihiro a {
		top: 238px;
		left: 60px;
	}
	.index_airports_nav .memanbetsu a {
		top: 92px;
		left: 82px;
	}
}






/* index_company
============================================================================================================ */
.index_company {
	position: relative;
	overflow: hidden;
	padding: 110px 0 100px;
	background-color: #2a4175;
}
.index_company::after {
	content: "";
	position: absolute;
	top: -20px;
	right: -80px;
	width: 520px;
	height: 520px;
	background: url(../common/images/parts/logo_mark.svg) no-repeat 50%;
	-webkit-background-size: 100%;
	background-size: 100%;
	opacity: .1;
}
.index_company .index_title {
	color: #fff;
}
.index_company ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.index_company ul a {
	display: block;
	padding-bottom: 10px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.4rem;
}
.index_company ul a span {
	display: block;
}
.index_company ul a .img {
	position: relative;
	overflow: hidden;
	padding-top: 70.5%;
	background-color: #fff;
}
.index_company ul a .img::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border: 5px solid #fff;
	opacity: .2;
}
.index_company ul a .img > * {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-position: 50%;
	-webkit-background-size: cover;
	background-size: cover;
}
.index_company ul a .title {
	position: relative;
	padding-top: 30px;
	font-size: 2.2rem;
	line-height: 1.5;
}
.index_company ul a .title::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 50%;
	height: 40px;
	border-left: 1px solid #c8c8c8;
}
@media screen and (min-width: 769px), print {
	.index_company ul li {
		width: 340px;
	}
	.index_company ul li:nth-child(3) ~ * {
		margin-top: 60px;
	}
}
@media screen and (max-width: 768px) {
	.index_company {
		padding: 45px 0 50px;
	}
	.index_company::after {
		top: -2px;
		right: -115px;
		width: 260px;
		height: 260px;
	}
	.index_company ul {
		margin-top: 40px;
	}
	.index_company ul li {
		width: calc(50% - 10px);
	}
	.index_company ul li:nth-child(2) ~ * {
		margin-top: 30px;
	}
	.index_company ul a {
		font-size: 1.2rem;
	}
	.index_company ul a .img::after {
		border-width: 2px;
		opacity: .2;
	}
	.index_company ul a .title {
		padding-top: 15px;
		font-size: 1.5rem;
	}
	.index_company ul a .title::before {
		top: -10px;
		height: 20px;
	}
}

#covid {position: relative;padding-bottom: 24px;}
#covid .covid_banner {width: 700px;margin: 0 auto;background-color: #0098b8;border-radius: 4px;}
#covid .covid_banner a {width: 700px;padding: 8px 0; display: flex;flex-wrap: wrap; align-items: center;justify-content: center; color: #FFF;text-align: center;font-size: 21.5px;line-height: 1.6; text-decoration: none;}
#covid .covid_banner a span {display: block;width: 100%; font-size: 18px;text-decoration: underline;}
#covid .covid_banner a:hover{text-decoration: underline;}
.top_banner {width: 700px;margin: 0 auto 80px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.top_banner .col {width: 49%;box-sizing: border-box; height: auto;}
.top_banner .col:first-child {border: solid 1px #7F7F7F;}
.top_banner .col a {display: block;}
.top_banner .col a img {width: 100%;height: auto;}
#announcement {width: 700px;margin: 0 auto 24px;}
#announcement a {width: 700px;padding: 8px 0; display: flex;flex-wrap: wrap; align-items: center;justify-content: center; color: #050514;text-align: center;font-size: 21.5px;line-height: 1.6; text-decoration: none;border-radius: 4px;border:solid 1px #CCC;}
#announcement a:hover{text-decoration: underline;}
#announcement a span {display: block;width: 100%; font-size: 18px;text-decoration: underline;}
#announcement.col {width: 49%;margin: inherit;}
#announcement.col a {width: 100%;aspect-ratio: 670 / 200;padding: 8px 0; display: flex;flex-wrap: wrap; align-items: center;justify-content: center; color: #050514;text-align: center;font-size: 21.5px;line-height: 1.6; text-decoration: none;border-radius: 0;border:none;}
.top_banner.en {justify-content: center;}

@media screen and (max-width: 768px) {
#covid .covid_banner {width: 90%;margin: 0 auto;}
#covid .covid_banner a {width: 100%;box-sizing: border-box;padding: 8px; display: flex;align-items: center;justify-content: center; color: #FFF;text-align: center;font-size: 1.5rem;line-height: 1.6; text-decoration: none;}
.top_banner {width: 90%;display:block;}
.top_banner .col {width: 100%;box-sizing: border-box; height: auto;}
.top_banner .col:first-child {margin-bottom: 2rem;}
#announcement {width: 90%;margin: 0 auto 24px;}
#announcement a {width: 100%;padding: 8px;font-size: 1.5rem;}
#announcement.col {width: 100%;margin: 0 auto 24px;}
}