@charset "utf-8";

/* 足あとを非表示 */
#footstep_wrap {
	display: none !important;
}

/* 背景 */
#container {
	background: url("/img/top/bg-img-ume1.png") no-repeat left calc(50% - 580px) top 125px,
				url("/img/top/bg-img-ume2.png") no-repeat left calc(50% - 645px) top 780px,
				url("/img/top/bg-img-yama.png") no-repeat left 50% top 30px,
				url("/img/top/bg-gradation1.png") repeat-x left 0px top 0px #fee7d5;
}

/* 背景（PCのみ） */
@media screen and (min-width: 1079px) {
	#header2 {
		background: transparent;
	}
}
/* 背景（PCのみ）ここまで */

/* メイン */
#mymainback {
	width: auto;
	margin: 0px;
	padding: 0px;
}

/* 共通（見出し） */
h2.main_midashi {
	text-align: center;
	margin: 0px;
	padding: 40px 0px;
	font-size: 3rem;
	line-height: 4rem;
	font-weight: normal;
}

/* 共通（一覧ボタン） */
.link_box {
	text-align: right;
}
.link_box .link_ichiran a {
	display: inline-block;
	border: 1px solid #85afd8;
	background: url("/img/common/icon-arrow-black.png") no-repeat right 20px top 50% transparent;
	border-radius: 40px;
	color: #333333;
	font-size: var(--fontsize-main-small, 1.5rem);
	line-height: 1.8rem;
	text-decoration: none;
	padding: 10px 35px 10px 25px;
	text-align: center;
	min-width: 200px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.link_box .link_ichiran a:hover,
.link_box .link_ichiran a:focus {
	text-decoration: underline;
}

/* 共通（リスト） */
ul.list_news {
	margin: 0px;
	padding: 10px 0px;
	list-style: none;
}
ul.list_news li {
	width: 100%;
	display: table;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0px 0px 20px;
	padding: 0px 30px 20px;
	border-bottom: 1px solid #c9c8c8;
}
ul.list_news li span.article_date {
	display: table-cell;
	vertical-align: top;
	width: calc(11em + 55px);
	font-size: 1.6rem;
	padding-top: 0.1rem;
	color: #6f6f6f;
}
ul.list_news li span.article_title {
	display: table-cell;
	vertical-align: top;
}

ul.list_news li img.icon_new {
	vertical-align: middle;
	margin-left: 10px;
	width: 40px;
	height: auto;
}

.font_size_changed ul.list_news li,
.font_size_changed ul.list_news li > span {
	display: block;
}
.font_size_changed ul.list_news li > span.article_date {
	width: auto;
	padding-top: 0px;
}

p.no_data {
	margin: 0px;
	padding: 20px 30px;
	text-align: center;
}

/* MV */
#top_mv {
	width: 1080px;
	margin: 0px auto 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

/* スライドショー */
#top_photo {
	width: 700px;
}

#top_photo_list {
	position: relative;
}
#top_photo_list .photo {
	width: 700px;
	height: 450px;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}
#top_photo_list .photo img {
	width: 100%;
	height: auto;
	min-height: 100%;
	vertical-align: top;
}
#top_photo_list .photo a {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
#top_photo_list .photo_caption {
	position: absolute;
	top: 25px;
	left: 0px;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 0px 30px;
	font-size: 1.6rem;
	color: #000000;
	text-shadow: 0px 0px 2px #ffffff, 0px 0px 2px #ffffff, 0px 0px 2px #ffffff;
	-webkit-filter: invert(1);
	        filter: invert(1);
}
#top_photo_list .slide_control_box {
	position: absolute;
	right: 0px;
	bottom: 20px;
	z-index: 1;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 0px 30px;
}

/* バナー */
.top_mv_bnr {
	width: 330px;
}
.top_mv_bnr ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.top_mv_bnr ul li {
	width: 330px;
	height: 130px;
	border-radius: 20px;
	overflow: hidden;
	max-width: 100%;
	margin: 0px auto;
}
.top_mv_bnr ul li:nth-child(n+2) {
	margin-top: 30px;
}
.top_mv_bnr ul li img {
	width: 100%;
	height: auto;
	min-height: 100%;
	vertical-align: top;
}

/* 重要なお知らせ */
#top_important_wrap {
	width: 1080px;
	margin: 0px auto;
}
#top_important {
	margin-bottom: 40px;
}
#top_important .list_box {
	background: #ffffff;
	border-radius: 20px;
	color: #ba2714;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 20px 0px;
	padding: 40px;
}
#top_important .list_box a {
	color: #ba2714;
}

#top_important .top_important_ttl {
	width: 18rem;
}
#top_important .top_important_ttl h2 {
	margin: 0px;
	font-size: 1.8rem;
}

#top_important .top_important_list {
	width: 80rem;
	max-width: 100%;
}
#top_important .top_important_list ul.list_news {
	padding: 0px;
}
#top_important .top_important_list ul.list_news li {
	padding: 0px;
	border-bottom: none;
}
#top_important .top_important_list ul.list_news li:last-child {
	margin-bottom: 0px;
}
#top_important .top_important_list ul.list_news li span.article_date {
	width: calc(11em + 15px);
	color: inherit;
}

#top_important .link_box {
	padding: 20px 40px 0px;
}
#top_important .link_box .link_ichiran a {
	border-color: #ba2714;
	background-image: url("/img/common/icon-arrow-red.png");
}

/* 重要リンク */
ul.top_important_link {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
}
ul.top_important_link li {
	width: 320px;
}
ul.top_important_link li a {
	display: block;
	border: 1px solid transparent;
	background: url("/img/common/icon-arrow-red.png") no-repeat right 20px top 50% #f0c1ae;
	border-radius: 20px;
	color: #333333;
	font-size: 1.5rem;
	line-height: 1.8rem;
	text-decoration: none;
	padding: 10px 35px 10px 25px;
	text-align: left;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
ul.top_important_link li a:hover,
ul.top_important_link li a:focus {
	text-decoration: underline;
}

/* 情報をさがす背景 */
#top_search_wrap {
	background: url("/img/top/bg-img-ume3.png") no-repeat left calc(50% + 585px) top 200px,
				url("/img/top/bg-nami1.png") no-repeat left 50% top 0px,
				url("/img/top/bg-img-zara2.png") no-repeat left calc(50% + 875px) bottom -188px,
				url("/img/top/bg-gradation2.png") repeat-x left 0px bottom 0px transparent;
	background-size: auto, auto, auto, 20px calc(100% - 230px);
	padding-top: 200px;
}

/* 検索 */
.header_search_wrap,
.pcm_search_open .header_search_wrap {
	position: static;
	opacity: 1;
	width: auto;
	height: auto;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
	overscroll-behavior: auto;
}
.header_search,
.pcm_search_open .header_search {
	display: block;
}

.header_search_ttl h2 {
	margin: 0px;
	font-size: 3rem;
	line-height: 4rem;
	font-weight: normal;
}

/* 検索（PCのみ） */
@media screen and (min-width: 1079px) {
	.header_search_wrap,
	.pcm_search_open .header_search_wrap {
		background: none;
	}
	.header_search,
	.pcm_search_open .header_search {
		background: none;
	}
	.header_search_ttl {
		padding: 40px 0px;
	}
	.header_search_box > div.search_menu_komarigoto {
		background: none;
	}
	.search_menu_komarigoto .ttl {
		padding-top: 20px;
	}
	.search_menu_komarigoto ul {
		padding-bottom: 0px;
	}
}
/* 検索（PCのみ）ここまで */

/* 新着情報背景 */
#top_news_wrap {
	margin-top: -2px; /* 境界線対策 */
	background: url("/img/top/bg-img-sakura1.png") no-repeat left calc(50% - 565px) top 200px,
				url("/img/top/bg-img-sakura2.png") no-repeat left calc(50% + 695px) bottom -73px,
				url("/img/top/bg-nami2.png") no-repeat left 50% top 0px,
				url("/img/top/bg-img-zara1.png") no-repeat left 50% top 0px #fdf9ef;
	padding-top: 200px;
	padding-bottom: 80px;
}

/* トピックス */
#top_topics {
	width: 1080px;
	margin: 0px auto;
}

#lettering {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 40px;
}
.lettering_box {
	width: 240px;
}

.lettering_box_img {
	width: 240px;
	height: 240px;
	border-radius: 20px;
	overflow: hidden;
}
.lettering_box_img div {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.lettering_box_img div:empty {
	background: url("/img/common/noimage.png") no-repeat center center #e7eff7;
	background-size: contain;
}
.lettering_box_img div a {
	display: block;
	width: 100%;
	height: 100%;
}
.lettering_box_img div img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
}

.lettering_box_text {
	margin-top: 25px;
}
.lettering_box_text .article_date {
	font-size: 1.6rem;
	color: #6f6f6f;
	margin-bottom: 5px;
}
.lettering_box_text .article_title {
	font-weight: bold;
}

#top_topics .link_box {
	margin-top: 30px;
}

/* 新着情報 */
#top_news {
	width: 1080px;
	margin: 20px auto 0px;
}

/* 市の情報背景 */
#top_info_wrap {
	margin-top: -2px; /* 境界線対策 */
	background: url("/img/top/bg-img-sakura2.png") no-repeat left calc(50% + 695px) top -150px,
				url("/img/top/bg-nami3.png") no-repeat left 50% top 0px,
				url("/img/top/bg-nami4.png") no-repeat left 50% top 690px,
				url("/img/top/bg-img-photo.jpg") no-repeat left 50% top 80px,
				url("/img/top/bg-img-kusa2.png") no-repeat left calc(50% - 590px) bottom 0px,
				url("/img/top/bg-img-kawa.png") no-repeat left 50% bottom 0px,
				url("/img/top/bg-img-yoru.jpg") no-repeat left 50% bottom 0px,
				url("/img/top/bg-gradation3.png") repeat-x left 0px bottom 0px #fdf9ef;
	background-size: auto, auto, auto, auto 820px, auto, auto, auto, 20px calc(100% - 800px);
	padding-bottom: 60px;
}

/* 時計 */
.top_tokei {
	width: 1080px;
	margin: 0px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

.top_tokei_img {
	width: 540px;
	height: 324px;
	padding: 10px;
	background: #ffffff;
	border-radius: 20px;
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
	position: relative;
	left: 20px;
	margin-left: -20px;
}
#tokei_photo {
	width: 540px;
	height: 324px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
#tokei_photo .clock-image {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: 50% 50%;
	   object-position: 50% 50%;
	opacity: 0;
	-webkit-transition: opacity 1.0s ease-in-out;
	-o-transition: opacity 1.0s ease-in-out;
	transition: opacity 1.0s ease-in-out;
}
#tokei_photo .clock-image.active {
	opacity: 1;
}

#tokei_time {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 1;
	font-size: 3rem;
	line-height: 1;
	color: #000000;
	text-shadow: 0px 0px 2px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
	-webkit-filter: invert(1);
	        filter: invert(1);
	font-family: serif;
	letter-spacing: 0.1em;
}

.top_tokei_txt {
	width: 540px;
	background: #ffffff;
	border-radius: 20px;
	margin: 100px 0px 0px;
	padding: 40px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.top_tokei_txt h2 {
	margin: 0px;
	font-size: 2rem;
	font-weight: normal;
}
.top_tokei_txt p {
	margin: 15px 0px 0px;
	font-size: 1.6rem;
	line-height: 1.75;
}
.top_tokei_txt .link_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 10px 20px;
	margin-top: 30px;
}
.top_tokei_txt .link_box br.pc_none {
	display: none;
}

/* SNS */
.top_sns {
	width: 1080px;
	margin: 60px auto 0px;
	padding: 35px 40px;
	background: #ffffff;
	border-radius: 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 40px 60px;
}
.top_sns h2 {
	margin: 0px;
	font-size: 2rem;
	font-weight: normal;
}
.top_sns ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 40px;
}
.top_sns ul li {
	width: 40px;
}
.top_sns ul li img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* カウントダウン */
.top_countdown {
	width: 1080px;
	margin: 60px auto 0px;
	min-height: 80px;
}
.top_countdown h2 {
	margin: 0px 0px 20px;
	font-size: 2rem;
	font-weight: normal;
	color: #000000;
	text-shadow: 0px 0px 2px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
	-webkit-filter: invert(1);
	        filter: invert(1);
	text-align: center;
}

.count_down_box_wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 20px;
}
.count_down_box {
	width: calc(50% - 10px);
}

.count_down_box .count_img {
	display: block;
	background: #ffffff;
	border-radius: 20px;
	padding: 10px;
	margin-bottom: 10px;
}
.count_down_box .count_img img {
	width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: 10px;
}

.count_down_box .count_txt {
	display: block;
	padding: 20px 40px;
	border: 1px solid #ffffff;
	background: rgba(255,255,255,0.25);
	border-radius: 20px;
}
.count_down_box .count_txt .count_title {
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
}
.count_down_box .count_txt .count_comment {
	margin-top: 10px;
	display: block;
	font-size: 1.4rem;
}
.count_down_box .count_txt .count_day {
	margin-top: 10px;
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: right;
}
.count_down_box .count_txt .count_day span {
	display: inline-block;
	vertical-align: baseline;
	font-size: 3.6rem;
	line-height: 4rem;
	color: #cc0000;
	margin-left: 20px;
	margin-right: 10px;
}

/* 市の情報 */
#top_info {
	width: 1080px;
	margin: 0px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}
#top_info h2.main_midashi {
	width: 100%;
	text-shadow: 0px 0px 2px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
}

/* バナー */
#top_info_bnr {
	width: 100%;
	margin-bottom: 40px;
}
#top_info_bnr_box {
	background: rgba(255,255,255,0.7);
	border-radius: 20px;
	padding: 20px 30px;
}

ul#top_info_bnr_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
	line-height: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}
ul#top_info_bnr_list li {
	width: 300px;
	max-width: 300px;
	min-width: 300px;
	border-radius: 5px;
	overflow: hidden;
	margin: 20px;
}
ul#top_info_bnr_list li img {
	width: 100%;
	height: auto;
	min-height: 100%;
	vertical-align: top;
}

/* バナー（スライドショー） */
#top_info_bnr:not(:has(.slick-slider)) .slide_control_box {
	display: none;
}
#top_info_bnr .slide_control_box {
	padding: 10px 40px 0px;
}
#top_info_bnr .slide_control_box button.slide_control_play {
	display: none;
}

ul#top_info_bnr_list .slick-slide {
	width: 1020px;
}

ul.slick-dots {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
}
ul.slick-dots li button {
	display: block;
	margin: 0px 4px;
	padding: 0px;
	width: 10px;
	height: 10px;
	opacity: 1;
	border: 1px solid #364864;
	border-radius: 100%;
	background: #dcdcdc;
	color: #000000;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
}
ul.slick-dots li.slick-active button {
	background: #f4ae3f;
}

/* リンク */
.top_info_link {
	width: calc(50% - 20px);
	background: rgba(255,255,255,0.7);
	border-radius: 20px;
	padding: 30px 40px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.top_info_link ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 10px 15px;
}
.top_info_link ul li::after {
	content: '/';
	margin-left: 15px;
}
.top_info_link ul li:last-child::after {
	display: none;
}

/* 人口と世帯数 */
.top_jinkou {
	width: calc(50% - 20px);
	background: rgba(255,255,255,0.7);
	border-radius: 20px;
	padding: 30px 40px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.top_jinkou_ttl {
	margin-bottom: 5px;
}
.top_jinkou_ttl h2 {
	margin: 0px;
	display: inline-block;
	vertical-align: baseline;
	font-size: 2rem;
}
.top_jinkou_date {
	display: inline-block;
	vertical-align: baseline;
	font-size: 1.4rem;
}

.top_jinkou_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 10px 20px;
}
.top_jinkou_list dl {
	min-width: calc(50% - 10px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	margin: 0px;
	padding: 0px;
}
.top_jinkou_list dl dt {
	display: inline-block;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}
.top_jinkou_list dl dd {
	display: inline-block;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}

/* 広告 */
#top_kokoku_wrap {
	background: #f5f6f8;
}
#top_kokoku {
	width: 1080px;
	margin: 0px auto;
	padding: 80px 0px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}
#top_kokoku .top_kokoku_ttl {
	width: 140px;
}
#top_kokoku .top_kokoku_ttl h2 {
	margin: 0px;
	font-size: 2rem;
	font-weight: normal;
}
#top_kokoku .top_kokoku_ttl p {
	margin: 5px 0px 0px;
	font-size: 1.2rem;
}
#top_kokoku ul.top_kokoku_list {
	width: 920px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 30px;
}
#top_kokoku ul.top_kokoku_list li {
	width: 160px;
}
#top_kokoku ul.top_kokoku_list li img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* フッタ */
#author_info {
	background: url("/img/common/bg-footer-map.png") no-repeat left calc(50% + 270px) top 0px,
				url("/img/top/bg-img-kusa1.png") no-repeat left 50% bottom 0px,
				url("/img/common/bg-footer.png") no-repeat left 50% top 0px #405577;
	padding-bottom: 260px;
}

/* フッタ（アニメーション） */
#footer_animation {
	width: 1080px;
	margin: 0px auto;
	position: relative;
}
#footer_animation .anm_control {
	position: absolute;
	left: 0px;
	bottom: 20px;
	z-index: 2;
}
#footer_animation button.btn_anm_control {
	display: block;
	border: 1px solid #ffffff;
	border-radius: 20px;
	background: #364864;
	color: #ffffff;
	font-size: 1.2rem;
	line-height: 1.8rem;
	text-decoration: none;
	text-align: center;
	padding: 10px 20px;
}
#footer_animation button.btn_anm_control:hover {
	text-decoration: underline;
}
#footer_animation button.btn_anm_control span.stop {
	display: block;
}
#footer_animation button.btn_anm_control span.play {
	display: none;
}

#footer_animation.js-animation-toggle__pause button.btn_anm_control {
	border-color: #364864;
	background: #ffffff;
	color: #364864;
}
#footer_animation.js-animation-toggle__pause button.btn_anm_control span.stop {
	display: none;
}
#footer_animation.js-animation-toggle__pause button.btn_anm_control span.play {
	display: block;
}

#footer_animation div[class*="anm_img"] {
	display: block;
	width: 61px;
	height: 61px;
	background: url("/img/top/img-hikari2.png") no-repeat center center transparent;
	color: inherit;
	position: absolute;
	z-index: 1;
}
#footer_animation.js-animation-toggle__pause div[class*="anm_img"] {
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;
}

#footer_animation div.anm_img1 {
	background-image: url("/img/top/img-hikari3.png");
	width: 35px;
	height: 35px;
	left: 20px;
	bottom: 170px;
	-webkit-animation: updown1 2s 0s infinite alternate-reverse, tenmetsu1 2s ease infinite alternate;
	        animation: updown1 2s 0s infinite alternate-reverse, tenmetsu1 2s ease infinite alternate;
}
#footer_animation div.anm_img2 {
	left: 140px;
	bottom: 100px;
	animation: updown2 3s 0s infinite alternate-reverse ease;
}
#footer_animation div.anm_img3 {
	left: 300px;
	bottom: 230px;
	-webkit-animation-name: tenmetsu2;
	        animation-name: tenmetsu2;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-direction: alternate;
	        animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-transition-timing-function: ease-in-out;
	     -o-transition-timing-function: ease-in-out;
	        transition-timing-function: ease-in-out;
}
#footer_animation div.anm_img4 {
	left: 540px;
	bottom: 60px;
	animation: updown1 3.5s 0s infinite alternate-reverse ease;
}
#footer_animation div.anm_img5 {
	left: 830px;
	bottom: 140px;
	-webkit-animation-name: tenmetsu1;
	        animation-name: tenmetsu1;
	-webkit-animation-duration: 4s;
	        animation-duration: 4s;
	-webkit-animation-direction: alternate;
	        animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-transition-timing-function: easeease-in-out;
	     -o-transition-timing-function: easeease-in-out;
	        transition-timing-function: easeease-in-out;
}

/* 点滅 */
@-webkit-keyframes tenmetsu1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}
@keyframes tenmetsu1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}

@-webkit-keyframes tenmetsu2 {
	0% {
		opacity: 0.8;
	}
	100% {
		opacity: 0;
	}
}
@keyframes tenmetsu2 {
	0% {
		opacity: 0.8;
	}
	100% {
		opacity: 0;
	}
}

/* 上下 */
@-webkit-keyframes updown1 {
	0% {
		-webkit-transform: translate(0,0);
		        transform: translate(0,0);
	}
	100% {
		-webkit-transform: translate(0,-15px);
		        transform: translate(0,-15px);
	}
}
@keyframes updown1 {
	0% {
		-webkit-transform: translate(0,0);
		        transform: translate(0,0);
	}
	100% {
		-webkit-transform: translate(0,-15px);
		        transform: translate(0,-15px);
	}
}

@-webkit-keyframes updown2 {
	0% {
		-webkit-transform: translate(0,0);
		        transform: translate(0,0);
	}
	100% {
		-webkit-transform: translate(0,-10px);
		        transform: translate(0,-10px);
	}
}
@keyframes updown2 {
	0% {
		-webkit-transform: translate(0,0);
		        transform: translate(0,0);
	}
	100% {
		-webkit-transform: translate(0,-10px);
		        transform: translate(0,-10px);
	}
}

/* ==================================================
背景色変更
================================================== */

.color_change #top_photo_list .photo_caption,
.color_change #tokei_time,
.color_change .top_countdown h2 {
	-webkit-filter: invert(0);
	        filter: invert(0);
}
.color_change #footer_animation {
	display: none;
}
.color_change #top_search_wrap,
.color_change #top_news_wrap,
.color_change #top_info_wrap {
	background-image: none !important;
}
.color_change #top_photo_list .slide_control_box,
.color_change #top_photo_list .slide_control_box .slide_pagination,
.color_change #top_photo_list .slide_control_box .btn,
.color_change .slide_control_box button[class*="slide_control_"] {
	background-color: transparent !important;
}
.color_change #top_photo_list .swiper-pagination-bullet-active,
.color_change ul.slick-dots li.slick-active button {
	background: #ffffff !important;
}
.color_change .link_box .link_ichiran a,
.color_change ul.top_important_link li a,
.color_change #top_important .link_box .link_ichiran a {
	background-image: url("/img/common/icon-arrow-white.png");
}
.color_change #top_photo_list .photo_caption,
.color_change #top_photo_list a .photo_caption {
	text-shadow: 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000 !important;
	background-color: transparent !important;
}

/* ==================================================
背景色変更 ここまで
================================================== */

/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 1080px) {

	/* 共通（見出し） */
	h2.main_midashi {
		padding: 20px 0px;
		font-size: 2.4rem;
		line-height: 3rem;
	}

	/* 共通（一覧ボタン） */
	.link_box {
		text-align: center;
	}
	.link_box .link_ichiran a {
		font-size: 1.3rem;
	}

	/* 共通（リスト） */
	ul.list_news {
		padding: 0px;
	}
	ul.list_news li {
		width: auto;
		display: block;
		margin: 0px;
		padding: 15px 0px;
	}
	ul.list_news li span.article_date {
		display: block;
		width: auto;
		font-size: 1.4rem;
		padding-top: 0px;
	}
	ul.list_news li span.article_title {
		display: block;
	}
	ul.list_news li:has(img.icon_new) {
		position: relative;
	}
	ul.list_news li:has(img.icon_new) span.article_date {
		padding-left: 45px;
	}
	ul.list_news li img.icon_new {
		margin: 0px;
		position: absolute;
		top: 17px;
		left: 0px;
	}

	p.no_data {
		padding: 20px;
	}

	/* 背景 */
	#container {
		background-size: 130px auto, 130px auto, 0px 0px, auto;
		background-position: left 0px top 86vw, right 0px top calc(86vw + 480px), left 0px top 0px, left 0px top 0px;
	}

	/* MV */
	#top_mv {
		display: block;
		width: auto;
		margin: 0px 15px;
	}

	/* スライドショー */
	#top_photo {
		width: 100%;
		max-width: 700px;
		margin: 0px auto;
	}

	#top_photo_list .photo {
		width: 100%;
		height: auto;
		aspect-ratio: 700 / 450;
		border-radius: 15px;
	}
	#top_photo_list .photo_caption {
		top: 10px;
		padding: 0px 15px;
		font-size: 1.2rem;
	}
	#top_photo_list .slide_control_box {
		position: static;
		width: auto;
		padding: 10px 0px 0px;
	}

	.slide_control_box .slide_pagination {
		display: none !important;
	}

	/* バナー */
	.top_mv_bnr {
		width: 100%;
		max-width: 330px;
		margin: 20px auto 30px;
	}
	.top_mv_bnr ul li {
		width: 100%;
		height: auto;
		aspect-ratio: 330 / 130;
		border-radius: 10px;
	}
	.top_mv_bnr ul li:nth-child(n+2) {
		margin-top: 20px;
	}

	/* 重要なお知らせ */
	#top_important_wrap {
		width: auto;
		margin: 0px 15px;
	}
	#top_important {
		margin-bottom: 30px;
	}
	#top_important .list_box {
		border-radius: 15px;
		display: block;
		padding: 20px;
	}

	#top_important .top_important_ttl {
		width: auto;
	}
	#top_important .top_important_ttl h2 {
		text-align: center;
		margin-bottom: 10px;
	}

	#top_important .top_important_list {
		width: auto;
		max-width: none;
	}
	#top_important .top_important_list ul.list_news li {
		padding: 0px;
		margin: 0px 0px 10px;
	}
	#top_important .top_important_list ul.list_news li:last-child {
		margin-bottom: 0px;
	}
	#top_important .top_important_list ul.list_news li span.article_date {
		width: auto;
	}

	#top_important .link_box {
		padding: 20px 0px 0px;
	}

	/* 重要リンク */
	ul.top_important_link {
		gap: 15px;
	}
	ul.top_important_link li {
		width: 100%;
	}
	ul.top_important_link li a {
		font-size: 1.4rem;
	}

	/* 情報をさがす背景 */
	#top_search_wrap {
		background-size: 0px 0px, 150% 100px, 0px 0px, 20px calc(100% - 90px);
		background-position: left 0px top 0px, left 50% top 0px, right 0px bottom 0px, left 0px bottom 0px;
		padding-top: 80px;
	}

	/* 検索 */
	.header_search,
	.pcm_search_open .header_search {
		background-color: transparent;
	}
	.spm_search_open .header_search,
	.spm_search_open.pcm_search_open .header_search {
		background-color: #e7eff7;
	}

	.header_search_ttl h2 {
		font-size: 2.4rem;
	}
	.spm_search_open .header_search_ttl h2 {
		font-size: 2rem;
	}

	.header_search_box > div.search_menu_komarigoto {
		background: none;
	}
	.spm_search_open .header_search_box > div.search_menu_komarigoto {
		background: #ffffff;
	}

	.search_menu_komarigoto .ttl {
		padding-top: 10px;
	}
	.spm_search_open .search_menu_komarigoto .ttl {
		padding-top: 30px;
	}

	#spm_search_close {
		display: none;
	}
	.spm_search_open #spm_search_close {
		display: inline-block;
	}

	/* 新着情報背景 */
	#top_news_wrap {
		background-size: 200px auto, 180px auto, 150% 90px, 150% 300px;
		background-position: left -85px top 70px, right -85px bottom 0px, left 50% top 0px, left 50% top 0px;
		padding-top: 80px;
		padding-bottom: 40px;
	}

	/* トピックス */
	#top_topics {
		width: auto;
		margin: 0px 15px;
	}

	#lettering {
		gap: 20px;
		max-width: 500px;
		margin: 0px auto;
	}
	.lettering_box_img {
		border-radius: 10px;
	}

	.lettering_box_text {
		margin-top: 10px;
	}
	.lettering_box_text .article_date {
		font-size: 1.4rem;
		margin-bottom: 0px;
	}

	/* 新着情報 */
	#top_news {
		width: auto;
		margin: 30px 15px 0px;
	}
	#top_news .link_box {
		margin-top: 30px;
	}

	/* 市の情報背景 */
	#top_info_wrap {
		background-size:
			0px 0px,
			150% 100px,
			150% 100px,
			auto 740px,
			150px auto,
			0px 0px,
			auto 200px,
			20px calc(100% - 700px)
		;
		background-position:
			right 0 top 0px,
			left 50% top 0px,
			left 50% top 700px,
			left 50% top 30px,
			left 20px bottom 0px,
			left 0px bottom 0px,
			left 50% bottom 0px,
			left 0px bottom 0px
		;
		padding-bottom: 60px;
	}

	/* 時計 */
	.top_tokei {
		display: block;
		width: auto;
		margin: 0px 15px;
	}

	.top_tokei_img {
		width: 100%;
		height: auto;
		aspect-ratio: 540 / 324;
		border-radius: 15px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		position: relative;
		left: auto;
		margin-left: 0px;
	}
	#tokei_photo {
		width: 100%;
		height: auto;
		aspect-ratio: 540 / 324;
		border-radius: 8px;
	}

	#tokei_time {
		top: 20px;
		left: 20px;
		font-size: 2.4rem;
	}

	.top_tokei_txt {
		width: auto;
		border-radius: 0px 0px 0px 15px;
		margin: -60px -15px 0px 15px;
		padding: 70px 35px 25px 20px;
	}
	.top_tokei_txt h2 {
		text-align: center;
	}
	.top_tokei_txt p {
		font-size: 1.4rem;
	}
	.top_tokei_txt .link_box {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		margin-top: 20px;
	}
	.top_tokei_txt .link_box br.pc_none {
		display: block;
	}
	.top_tokei_txt .link_box .link_ichiran a {
		min-width: 235px;
	}

	/* SNS */
	.top_sns {
		display: block;
		width: auto;
		border-radius: 15px;
		margin: 30px 15px 0px;
		padding: 20px;
	}
	.top_sns h2 {
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 20px;
	}
	@media screen and (max-width: 370px) {
		.top_sns ul {
			gap: 20px;
		}
	}

	/* カウントダウン */
	.top_countdown {
		width: auto;
		margin: 0px 15px;
		min-height: 20px;
	}
	.top_countdown h2 {
		margin-top: 40px;
	}
	.count_down_box_wrap {
		margin-bottom: 20px;
	}
	.count_down_box {
		width: 100%;
	}

	.count_down_box .count_img {
		border-radius: 15px;
		margin-bottom: 5px;
	}
	.count_down_box .count_img img {
		border-radius: 8px;
	}

	.count_down_box .count_txt {
		padding: 20px;
		border-radius: 15px;
	}
	.count_down_box .count_txt .count_title {
		font-size: 1.6rem;
	}
	.count_down_box .count_txt .count_day {
		font-size: 1.6rem;
	}
	.count_down_box .count_txt .count_day span {
		font-size: 3.2rem;
	}

	/* 市の情報 */
	#top_info {
		width: auto;
		margin: 0px 15px;
	}

	/* バナー */
	#top_info_bnr {
		margin-bottom: 30px;
	}
	#top_info_bnr_box {
		border-radius: 15px;
		padding: 20px 15px;
	}

	ul#top_info_bnr_list {
		max-width: 620px;
		margin: 0px auto;
	}
	ul#top_info_bnr_list li {
		width: calc(50% - 10px);
		max-width: calc(50% - 10px);
		min-width: calc(50% - 10px);
		margin: 5px;
	}

	/* バナー（スライドショー） */
	#top_info_bnr .slide_control_box {
		padding: 10px 0px 0px;
	}

	ul#top_info_bnr_list .slick-slide {
		width: calc(100vw - 60px);
		max-width: 620px;
	}

	/* リンク */
	.top_info_link {
		width: 100%;
		border-radius: 15px;
		padding: 20px;
	}

	/* 人口と世帯数 */
	.top_jinkou {
		width: 100%;
		border-radius: 15px;
		padding: 20px;
		margin-top: 20px;
	}
	.top_jinkou_ttl {
		text-align: center;
	}
	.top_jinkou_ttl h2 {
		font-size: 1.6rem;
	}
	.top_jinkou_date {
		font-size: 1.3rem;
	}
	.top_jinkou_list dl {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	/* 広告 */
	#top_kokoku {
		display: block;
		width: auto;
		margin: 0px 15px;
		padding: 30px 5px;
	}
	#top_kokoku .top_kokoku_ttl {
		width: auto;
		text-align: center;
		margin-bottom: 20px;
	}
	#top_kokoku .top_kokoku_ttl h2 {
		display: inline-block;
		vertical-align: baseline;
		margin: 0px 10px;
	}
	#top_kokoku .top_kokoku_ttl p {
		display: inline-block;
		vertical-align: baseline;
		margin: 10px 10px 0px;
	}
	#top_kokoku ul.top_kokoku_list {
		width: auto;
		max-width: 840px;
		margin: 0px auto;
		gap: 20px;
	}
	#top_kokoku ul.top_kokoku_list li {
		width: calc(50% - 10px);
		max-width: 160px;
	}

	/* フッタ */
	#footer {
		overflow: hidden;
		position: relative;
	}
	#author_info {
		background-position: left calc(50% - 120px) bottom 192px, center bottom, center top;
		background-size: auto 370px, auto 232px, 200% auto;
		padding-bottom: 160px;
	}

	/* フッタ（アニメーション） */
	#footer_animation {
		width: 100%;
		margin: 0px;
	}

	#footer_animation .anm_control {
		left: 15px;
		bottom: 15px;
	}
	#footer_animation button.btn_anm_control {
		font-size: 1.1rem;
		padding: 5px 10px;
	}

	#footer_animation div[class*="anm_img"] {
		width: 40px;
		height: 40px;
		background-size: contain;
	}

	#footer_animation div.anm_img1 {
		width: 25px;
		height: 25px;
		left: 15px;
		bottom: 160px;
	}
	#footer_animation div.anm_img2 {
		left: 25%;
		bottom: 100px;
	}
	#footer_animation div.anm_img3 {
		left: auto;
		right: 15px;
		bottom: 220px;
	}
	#footer_animation div.anm_img4 {
		width: 30px;
		height: 30px;
		left: 60%;
		bottom: 60px;
	}
	#footer_animation div.anm_img5 {
		width: 50px;
		height: 50px;
		left: 90%;
		bottom: 140px;
	}

}
/* ==================================================
スマートフォン ここまで
================================================== */