@charset "utf-8";

:where(#mainvisual *, #main *) {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	letter-spacing: 0;
	line-height: 1;
}
:where(#mainvisual :is(h1, h2, h3, h4, h5, h6, p, dl, dd), #main :is(h1, h2, h3, h4, h5, h6, p, dl, dd)) {
	margin: 0;
}
:where(#mainvisual :is(ul, ol), #main :is(ul, ol)) {
	list-style: none;
	padding: 0;
	margin: 0;
}
:where(#mainvisual img, #main img) {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
:where(#mainvisual button, #main button) {
    text-align: left;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
}

/* トップページ */
.tpl_top_index #mymainback {
	display: block;
	width: auto;
	padding: 0;
	margin: 0;
}

/* セクション */
.ly_section a {
	color: inherit;
}

/* 非表示 */
#footstep_wrap {
	display: none !important;
}

/* ----------------------------------------
メインビジュアル
---------------------------------------- */

/* ----------------------------------------
スライドショー
---------------------------------------- */
#top_photo {
	position: relative;
}
#top_photo_list .photo_box {
	display: block;
	width: auto;
	height: 580px;
}
#top_photo_list .photo_box img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
#top_photo_control {
	position: absolute;
	bottom: 15px;
	right: calc(50% - var(--content-width) / 2);
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
	max-width: var(--content-width);
}
#top_photo_control .slide_pagination {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 16px;
}
#top_photo_control .slide_pagination span.swiper-pagination-bullet {
	color: #fff;
	display: block;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 3px solid;
	border-radius: 100%;
	margin: 0;
	background: #fff;
	opacity: 1;
}
#top_photo_control .slide_pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #0079af;
}
#top_photo_control .slide_control {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
}
#top_photo_control button {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 34px;
	height: 34px;
	color: #fff;
	background: #0079af;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 100%;
}
#top_photo_control button.slide_control_prev {
	background-size: 8px auto;
	background-image: url(/img/top/arrow_prev.png);
}
#top_photo_control button.slide_control_next {
	background-size: 8px auto;
	background-image: url(/img/top/arrow_next.png);
}
#top_photo_control button.slide_control_stop::before {
	content: "";
	display: block;
	width: 8px;
	height: 12px;
	background: linear-gradient(to right, #fff 2px, transparent 2px, transparent 6px, #fff 6px);
}
#top_photo_control button.slide_control_play {
	border: 1px solid #0079af;
	background-color: #fff8e9;
}
#top_photo_control button.slide_control_play::before {
	content: "";
	display: block;
	width: 10px;
	height: 12px;
	background: #0079af;
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	        clip-path: polygon(0 0, 100% 50%, 0 100%);
	translate: 2px 0;
}
#top_photo_control button.slide_control_stop.is-active,
#top_photo_control button.slide_control_play.is-active {
	display: none;
}

/* ----------------------------------------
レイアウト
---------------------------------------- */
.ly_section > [class^="top_"] {
	max-width: var(--content-width);
	margin-inline: auto;
}
.ly_section > .top_ttl {
	margin-bottom: 80px;
}
.ly_section > .top_ttl.top_ttl__search {
	margin-bottom: 40px;
}

/* info */
.ly_section.ly_section__info {
	padding-top: 60px;
	padding-bottom: 160px;
	background: url(/img/top/kumo.png) no-repeat center bottom -34px / 2000px 124px #d1f0fc;
}
.ly_section.ly_section__info > [class^="top_"] + [class^="top_"] {
	margin-top: 10px;
}

/* news */
.ly_section.ly_section__news {
	padding-top: 30px;
	padding-bottom: 120px;
	background-color: #fff;
}

/* topics */
.ly_section.ly_section__topics {
	padding-top: 0;
	padding-bottom: 150px;
	background:
		url(/img/top/yama.png) center bottom / 1020px 84px,
		url(/img/top/kumo_blue.png) center top 87px / 2000px 124px,
		linear-gradient(to bottom, #fff, #fff calc(87px + 124px), transparent 124px);
	background-repeat: no-repeat;
	background-color: #d1f0fc;
	overflow-x: hidden;
}

/* discover */
.ly_section.ly_section__discover {
	padding-top: 110px;
	padding-bottom: 210px;
	background:
		url(/img/top/mountains.png) center top 82px / 350px 45px,
		url(/img/top/yama_green.png) center bottom / 1020px 84px,
		url(/img/top/img_himawari.jpg) center top 220px / 2000px 1334px;
	background-repeat: no-repeat;
	background-color: #fff;
}

/* about */
.ly_section.ly_section__about {
	padding-top: 110px;
	padding-bottom: 130px;
	background:
		url(/img/top/umi.png) center bottom -3px / 2000px 30px,
		url(/img/top/water_wheels.png) center top 45px / 350px 80px;
	background-repeat: no-repeat;
	background-color: #d3e8c0;
}

/* recommend */
.ly_section.ly_section__recommend {
	position: relative;
	padding-top: 65px;
	padding-bottom: 90px;
	background: url(/img/top/umi_blue.png) no-repeat center bottom -3px / 2000px 30px;
	background-color: #fff;
}
.ly_section.ly_section__recommend::before,
.ly_section.ly_section__recommend::after {
	content: "";
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.ly_section.ly_section__recommend::before {
	top: -70px;
	right: calc(50% + 209px / 2 - var(--content-width) / 2);
	width: 209px;
	height: 150px;
	background-image: url(/img/top/ukai01.png);
}
.ly_section.ly_section__recommend::after {
	bottom: -50px;
	left: calc(50% + 109px / 2 - var(--content-width) / 2);
	width: 109px;
	height: 80px;
	background-image: url(/img/top/ukai02.png);
}

/* search */
.ly_section.ly_section__search {
	padding-top: 80px;
	padding-bottom: 150px;
	background:
		url(/img/top/umi.png) center bottom / 2000px 30px,
		url(/img/top/img_suisha.png) left bottom / 665px 216px,
		url(/img/top/nami.png) center top 50px / 350px 45px;
	background-repeat: no-repeat;
	background-color: #a8def2;
}

/* add */
.ly_section.ly_section__add {
	padding-block: 30px;
	background-color: #fff;
}

@media (min-width: 2001px) {
	.ly_section.ly_section__info {
		background-size: 100% 124px;
	}
	.ly_section.ly_section__topics {
		background-size: 1020px 84px, 100% 124px, auto;
	}
	.ly_section.ly_section__discover {
		background-size: 350px 45px, 1020px 84px, 100% auto;
	}
	.ly_section.ly_section__about {
		background-size: 100% 30px, 350px 80px;
	}
	.ly_section.ly_section__recommend {
		background-size: 100% 30px;
	}
	.ly_section.ly_section__search {
		background-size: 100% 30px, 665px 216px, 350px 45px;
	}
}

/* ----------------------------------------
重要なお知らせ
---------------------------------------- */
.top_important_ttl {
	color: #fff;
	font-size: 2.1rem;
	line-height: 3rem;
	font-weight: bold;
	letter-spacing: .05em;
	text-align: center;
	padding: 10px;
	border-radius: 5px 5px 0 0;
	background: #c00;
}
.top_important_box {
	padding: 25px 40px;
	border-radius: 0 0 5px 5px;
	background: #fcf2f2;
}
.top_important_list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-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: 40px;
}
.top_important_list li + li {
	margin-top: 10px;
}
.top_important_list li span[class^="article_"] {
	display: block;
	font-size: 1.6rem;
	line-height: 2.6rem;
}
.top_important_list li span.article_date {
	width: 10.8125em;
	max-width: calc(40% - 40px);
}
.top_important_list li span.article_title {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}
.top_important_list li span.article_title a {
	display: inline-block;
	line-height: 2.6rem;
}
.top_important_link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 20px 40px;
	margin: 20px 0 0;
}
.top_important_link span[class^="link_"] a {
	font-size: 1.5rem;
	line-height: 2.5rem;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
}
.top_important_link span[class^="link_"] a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_red.png) no-repeat center / contain;
}
span.link_all, span.link_rss{
	border: none;
	padding: 0;
}
@media (hover: hover) {
	.top_important_link span[class^="link_"] a:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
もしものときは
---------------------------------------- */
.top_emergency_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-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;
	padding: 20px;
	border-radius: 5px;
	background: #f9e0e0;
}
.top_emergency_ttl {
	color: #c00;
	font-size: 2rem;
	font-weight: bold;
	line-height: 3rem;
	letter-spacing: .1em;
	max-width: 50%;
	padding: 10px 0 10px calc(31px + 12px);
	background: url(/img/top/icon_important.png) no-repeat left center / 31px auto;
}
.top_emergency_list {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 20px;
}
.top_emergency_item {
	width: calc(100% / 3 - 20px * 2 / 3);
	max-width: 100%;
}
.top_emergency_item a {
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: .05em;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
	height: 100%;
	min-height: 50px;
	padding: 5px;
	border-radius: 5px;
	background: #fff;
	-webkit-box-shadow: 0 0 10px .5px rgb(255 162 162 / .3);
	        box-shadow: 0 0 10px .5px rgb(255 162 162 / .3);
}
.top_emergency_item a::before {
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.top_emergency_item.top_emergency_item__bousai a::before {
	width: 25px;
	height: 24px;
	background-image: url(/img/top/icon_e_light.png);
}
.top_emergency_item.top_emergency_item__soudan a::before {
	width: 26px;
	height: 26px;
	background-image: url(/img/top/icon_e_call.png);
}
.top_emergency_item.top_emergency_item__kyukan a::before {
	width: 27px;
	height: 24px;
	background-image: url(/img/top/icon_e_stethoscope.png);
}
@media (hover: hover) {
	.top_emergency_item a:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
タイトル
---------------------------------------- */
.top_ttl_sub {
	display: block;
	text-align: center;
}
.top_ttl_txt {
	display: block;
	text-align: center;
	margin: 17px 0 0;
}

/* ----------------------------------------
タブ
---------------------------------------- */
#top_tab_title {
	border-bottom: 2px solid #0079af;
}
#top_tab_title ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	gap: 45px;
}
#top_tab_title ul li {
	width: calc(100% / 3 - 45px * 2 / 3);
}
#top_tab_title ul li button {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2.4rem;
	letter-spacing: .1em;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	min-height: 50px;
	padding: 5px;
	border-radius: 5px 5px 0 0;
	background: #def2fa;
}
#top_tab_title ul li.tab_on button {
	color: #fff;
	font-size: 2rem;
	min-height: 60px;
	background-color: #0079af;
}
#top_tab_detail {
	margin: 42px 0 0;
}
.top_tab_detail_list ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-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: 20px;
	padding: 18px 27px;
}
.top_tab_detail_list ul li:nth-child(2n - 1) {
	background-color: #fffff1;
}
.top_tab_detail_list ul li span.article_date {
	font-size: 1.6rem;
	line-height: 2.4rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
	width: 15em;
	max-width: calc(40% - 20px);
}
.top_tab_detail_list ul li span.article_title {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	display: block;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.top_tab_detail_link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 20px;
	margin: 40px 0 0;
}
.top_tab_detail_link span[class^="link_"] {
	width: 20rem;
	max-width: calc(50% - 10px);
}
.top_tab_detail_link span[class^="link_"] a {
	font-size: 1.5rem;
	line-height: 2rem;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 24px;
	height: auto;
	min-height: 40px;
	padding: 4px 24px 4px 24px;
	border: 1px solid #0079af;
	border-radius: 20px;
	background: #fff;
}
.top_tab_detail_link span[class^="link_"] a::after {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_blue.png) no-repeat center / contain;
}
@media (hover: hover) {
	.top_tab_detail_link span[class^="link_"] a:hover {
		text-decoration: underline;
	}
	#top_tab_title ul li button:hover {
		color: #fff;
		background-color: #0079af;
	}
}

/* ----------------------------------------
トピックス
---------------------------------------- */
.top_topics {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 270px 50px 1fr;
	grid-template-columns: 270px 1fr;
	-ms-grid-rows: 1fr 50px auto 50px auto;
	grid-template-rows: 1fr auto auto;
	gap: 50px;
}
.top_topics > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
.top_topics > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}
.top_topics > *:nth-child(3) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}
.top_topics > *:nth-child(4) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}
.top_topics > *:nth-child(5) {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
}
.top_topics > *:nth-child(6) {
	-ms-grid-row: 5;
	-ms-grid-column: 3;
}
.top_topics_sub {
	display: block;
}
.top_topics_txt {
	display: block;
	margin: 13px 0 0;
}
.top_topics_container {
	position: relative;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-column: 2/3;
	-ms-grid-row: 1;
	-ms-grid-row-span: 3;
	grid-row: 1/4;
}
.top_topics_box {
    width: calc(320px * 3 + 80px * 3);
}
.top_topics_control button {
	position: absolute;
	top: calc(50% - 20px);
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: #0079af;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 100%;
}
.top_topics_control button.slide_control_prev {
	right: calc(100% + 20px);
	translate: 0 calc(-50% - 10px);
	background-size: 11px auto;
	background-image: url(/img/top/arrow_prev.png);
}
.top_topics_control button.slide_control_next {
	left: calc(320px + 20px);
	background-size: 11px auto;
	background-image: url(/img/top/arrow_next.png);
}
.top_topics_control button.slide_control_play,
.top_topics_control button.slide_control_stop {
	right: calc(100% + 20px);
	translate: 0 calc(50% + 10px);
}
.top_topics_control button.slide_control_stop::before {
	content: "";
	display: block;
	width: 12px;
	height: 18px;
	background: linear-gradient(to right, #fff 3px, transparent 3px, transparent 9px, #fff 9px);
}
.top_topics_control button.slide_control_play {
	border: 1px solid #0079af;
	background-color: #fff8e9;
}
.top_topics_control button.slide_control_play::before {
	content: "";
	display: block;
	width: 14px;
	height: 16px;
	background: #0079af;
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	        clip-path: polygon(0 0, 100% 50%, 0 100%);
	translate: 2px 0;
}
.top_topics_control button.slide_control_stop.is-active,
.top_topics_control button.slide_control_play.is-active {
	display: none;
}
.top_topics_pagination {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
}
.top_topics_pagination .slide_pagination {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 20px;
	width: auto;
	padding: 0 10px;
}
.top_topics_pagination .slide_pagination span.swiper-pagination-bullet {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 100%;
	margin: 0;
	background: #fff;
	opacity: 1;	
}
.top_topics_pagination .slide_pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	color: #fff;
	background-color: #0079af;
}
.top_topics_linkUnit {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;
	grid-column: 1 / 2;
}
.top_topics_link {
	display: block;
	width: 22rem;
	max-width: 100%;
}
.top_topics_link + .top_topics_link {
	margin-top: 20px;
}
.top_topics_link a {
	font-size: 1.5rem;
	line-height: 2rem;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 24px;
	height: 100%;
	min-height: 40px;
	padding: 4px 24px 4px 40px;
	border-radius: 20px;
	background: #fff;
}
.top_topics_link a::after {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_blue.png) no-repeat center / contain;
}

/* レタリング */
#lettering.swiper-wrapper {
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}
.lettering_item.swiper-slide {
	height: auto;
}
.lettering_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	width: 320px;
	height: 100%;
	min-height: 380px;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}
.lettering_box_img,
.lettering_box_img a {
	aspect-ratio: 320 / 220;
}
.lettering_box_img a {
	display: block;
	background: #dbe7eb;
	overflow: hidden;
}
.lettering_box_img a img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
}
.lettering_box_txt {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 28px;
	padding: calc(30px - 8px) 30px 30px;
}
.lettering_box_date {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	font-size: 1.6rem;
	margin-top: auto;
}
.lettering_box_detail {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.lettering_box_detail:empty {
	display: none;
}
.lettering_box_title a {
	font-size: 1.6rem;
	line-height: 3.2rem;
	letter-spacing: .02em;
}
#letterring .no_data {
	text-align: center;
}

/* 情報がないとき */
#top_topics:has(.no_data) .top_topics_control,
#top_topics:has(.no_data) .top_topics_pagination {
	display: none;
}

@media (hover: hover) {
	.top_topics_link a:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
朝倉市の魅力
---------------------------------------- */
.top_media_unit {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 45px;
}
.top_media_banner {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	translate: 0 calc(-100% - 80px);
}
.top_media_banner img {
	display: block;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 10px 1px rgb(0 0 0 / .1);
	        box-shadow: 0 0 10px 1px rgb(0 0 0 / .1);
}
.top_media_item {
	width: calc(100% / 3 - 45px * 2 / 3);
}
a.top_media_box {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	color: #fff;
	text-decoration: none;
	height: 100%;
	min-height: 613px;
	padding: 38px 30px;
	border-radius: 20px;
	background: #333;
	-webkit-box-shadow: 0 0 20px 8px #fff;
	        box-shadow: 0 0 20px 8px #fff;
	overflow: hidden;
}
a.top_media_box::before {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.top_media_item.top_media_item__01 a::before {
	background-image: url(/img/top/img_asakura01.jpg)
}
.top_media_item.top_media_item__02 a::before {
	background-image: url(/img/top/img_asakura02.jpg)
}
.top_media_item.top_media_item__03 a::before {
	background-image: url(/img/top/img_asakura03.jpg)
}
a.top_media_box::after {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	background:
		-webkit-gradient(linear, left top, left bottom, color-stop(56%, rgb(51 84 30 / .8)),to(transparent)) no-repeat center top / 100% 160px,
		-webkit-gradient(linear, left bottom, left top, color-stop(56%, rgb(0 0 0 / .7)),to(transparent)) no-repeat center bottom / 100% 370px;
	background:
		linear-gradient(to bottom, rgb(51 84 30 / .8) 56%,transparent) no-repeat center top / 100% 160px,
		linear-gradient(to top, rgb(0 0 0 / .7) 56%,transparent) no-repeat center bottom / 100% 370px;
}
.top_media_ttl {
	position: relative;
	left: -30px;
	z-index: 1;
	width: calc(100% + 60px);
	font-family: "Yu Gothic", sans-serif;
	font-weight: bold;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 6px 12px;
}
.top_media_sub {
	font-size: 2.6rem;
}
.top_media_em {
	font-size: 4.4rem;
}
.top_media_txt {
	position: relative;
	z-index: 1;
	font-size: 1.6rem;
	line-height: 2.8rem;
	margin: auto 0 0;
}
.top_media_link {
	position: relative;
	z-index: 1;
	font-size: 1.5rem;
	line-height: 2rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
	min-height: 40px;
	padding: 0 20px 0 30px;
	border-radius: 20px;
	background: #5a7c44;
	margin: 14px 0 0;
}
.top_media_link::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_white.png) no-repeat center / contain;
}

@media (hover: hover) {
	a.top_media_box::before {
		-webkit-transition: 1s scale, 1s opacity;
		transition: 1s scale, 1s opacity;
	}
	a.top_media_box:hover::before {
		scale: 1.2;
		opacity: .5;
	}
}

/* ----------------------------------------
朝倉市について
---------------------------------------- */
.top_about_boxUnit + .top_about_boxUnit {
	margin-top: 45px;
}
.top_about_boxUnit.top_about_boxUnit__grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 45px 1fr 45px 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 45px;
}
.top_about_box.top_about_box__link {
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1/3;
}
.top_about_box.top_about_box__txtLink {
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1/3;
}
.top_about_box.top_about_box__jinkou {
	-ms-grid-column: 3;
	-ms-grid-column-span: 1;
	grid-column: 3/4;
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	grid-row: 1/3;
	padding: 20px;
	border-radius: 5px;
	background-color: #fff;
}
.top_about_boxUnit.top_about_boxUnit__flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 45px 40px;
}
.top_about_box.top_about_box__tokei,
.top_about_box.top_about_box__koho,
.top_about_box.top_about_box__sns {
	border-radius: 5px;
	background-color: #fff;
}
.top_about_box.top_about_box__tokei {
	width: 600px;
	padding: 20px 30px 20px 20px;
}
.top_about_box.top_about_box__koho {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	max-width: 440px;
	padding: 20px 30px 20px 20px;
}
.top_about_box.top_about_box__sns {
	width: 100%;
	padding: 10px;
}

/* ----------------------------------------
リンク
---------------------------------------- */
ul.top_link_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 10px 45px;
}
li.top_link_item {
	width: calc(100% / 2 - 45px / 2);
}
.top_link_box {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	aspect-ratio: 330 / 200;
	border-radius: 5px;
	background: #333;
	overflow: hidden;
}
a.top_link_box {
	text-decoration: none;
}
.top_link_img {
	position: absolute;
	inset: 0;
}
.top_link_img img {
	display: block;
	width: 100%;
	height: 100%;
}
.top_link_txt {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 1.8rem;
	line-height: 2rem;
	letter-spacing: .05em;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	min-height: 40px;
	background: rgb(0 133 54 / .95);
}

/* ----------------------------------------
テキストリンク
---------------------------------------- */
ul.top_txtLink_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 10px 45px;
}
li.top_txtLink_item {
	width: calc(100% / 2 - 45px / 2);
}
.top_txtLink_box {
	font-size: 1.8rem;
	line-height: 2rem;
	letter-spacing: .05em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 15px;
	height: 100%;
	min-height: 50px;
	padding: 5px 20px;
	border-radius: 5px;
	background: #fff;
}
.top_txtLink_box::after {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_green.png) no-repeat center / contain;
}
a.top_txtLink_box {
	text-decoration: none;
}
@media (hover: hover) {
	a.top_txtLink_box:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
人口・世帯数
---------------------------------------- */
.top_jinkou_ttl {
	font-size: 2rem;
	font-weight: bold;
	line-height: 3rem;
	text-align: center;
}
.top_jinkou_date {
	font-size: 1.4rem;
	line-height: 2.4rem;
	text-align: center;
	margin: 0 0 15px;
}
.top_jinkou_sec {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 10px 20px;
	padding: 0 10px;
}
.top_jinkou_sec + .top_jinkou_sec {
	padding-top: 12px;
	border-top: 1px solid;
	margin-top: 12px;
}
.top_jinkou_dlUnit {
	min-height: 40px;
	padding: 0 0 0 calc(40px + 20px);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px 40px;
}
.top_jinkou_dlUnit.top_jinkou_dlUnit__all {
	background-image: url(/img/top/icon_jinkou_all.png);
}
.top_jinkou_dlUnit.top_jinkou_dlUnit__home {
	background-image: url(/img/top/icon_jinkou_home.png);
}
.top_jinkou_dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.top_jinkou_dl[class*="top_jinkou_dl__"] {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	min-height: 43px;
	padding: 0 0 0 calc(21px + 12px);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 21px 43px;
}
.top_jinkou_dl.top_jinkou_dl__male {
	background-image: url(/img/top/icon_jinkou_male.png);
}
.top_jinkou_dl.top_jinkou_dl__female {
	background-image: url(/img/top/icon_jinkou_female.png);
}
.top_jinkou_dl dt {
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.top_jinkou_dl dd {
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.top_jinkou_txt {
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.top_jinkou_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 0 10px;
}
.top_jinkou_item {
	width: calc(100% / 2 - 10px / 2);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}
.top_jinkou_item dt {
	font-size: 1.4rem;
	line-height: 2.3rem;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}
.top_jinkou_item dd {
	font-size: 1.4rem;
	line-height: 2.3rem;
}
.top_jinkou_link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 24px 0 0;
}
.top_jinkou_link a {
	font-size: 1.5rem;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 12px;
}
.top_jinkou_link a::after {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_green.png) no-repeat center / contain;
}

/* ----------------------------------------
時計
---------------------------------------- */
.top_tokei {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 30px;
}
.top_tokei_img {
	width: 310px;
}
#tokei_photo {
	position: relative;
	color: #fff;
	aspect-ratio: 310 / 247;
	background: #333;
	border-radius: 3px;
	overflow: hidden;
}
#tokei_time {
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 1;
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: .05em;
	text-shadow: 0 0 8px rgb(0 0 0 / .6),  0 0 8px rgb(0 0 0 / .6),  0 0 8px rgb(0 0 0 / .6),  0 0 8px rgb(0 0 0 / .6);
}
#tokei_photo img.clock-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	opacity: 0;
	-webkit-transition: opacity 1.0s ease-in-out;
	transition: opacity 1.0s ease-in-out;
}
#tokei_photo img.clock-image.active {
	opacity: 1;
}
.top_tokei_detail {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 14px;
	padding: 14px 0;
}
.top_tokei_ttl {
	font-size: 2.2rem;
	font-weight: bold;
	letter-spacing: .2em;
	line-height: 1;
	text-align: center;
	padding: 0 0 calc(15px + 30px);
	background: url(/img/top/deco_musubi.png) no-repeat center bottom / auto 30px;
	margin: 0 10px;
}
.top_tokei_txt {
	font-size: 1.6rem;
	line-height: 2.8rem;
	padding: 0 10px;
}
.top_tokei_link {
	margin: auto 0 0;
}
.top_tokei_link a {
	color: #fff;
	font-size: 1.5rem;
	line-height: 2rem;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 15px;
	height: 100%;
	min-height: 40px;
	padding: 10px 20px 10px 25px;
	border-radius: 20px;
	background: #008536;
}
.top_tokei_link a::after {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_white.png) no-repeat center / contain;
}
@media (hover: hover) {
	.top_tokei_link a:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
広報
---------------------------------------- */
.top_koho {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 25px;
}
.top_koho_book {
	width: 174px;
}
.top_koho_cover {
	aspect-ratio: 174 / 247;
}
.top_koho_cover a {
	display: block;
	height: 100%;
}
.top_koho_cover img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: center top;
	   object-position: center top;
}
.top_koho_detail {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 20px;
}
.top_koho_ttl {
	text-align: center;
}
.top_koho_link + .top_koho_link {
	margin-top: 10px;
}
.top_koho_link a {
	font-size: 1.5rem;
	line-height: 2rem;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 15px;
	height: 100%;
	min-height: 60px;
	padding: 5px 15px 5px 30px;
	border: 1px solid #008536;
	border-radius: 5px;
	background: #fff;
}
.top_koho_link.top_koho_link__main a {
	color: #fff;
	background-color: #008536;
}
.top_koho_link a::after {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/top/icon_arrow_green.png) no-repeat center / contain;
}
.top_koho_link.top_koho_link__main a::after {
	background-image: url(/img/top/icon_arrow_white.png);
}
@media (hover: hover) {
	.top_koho_link a:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
公式SNS
---------------------------------------- */
.top_sns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
}
.top_sns_ttl {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: .07em;
	text-align: center;
}
.top_sns_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 10px;
	width: calc(210px * 4 + 10px * 3);
}
.top_sns_item {
	width: calc(100% / 4 - 10px * 3 / 4);
}
.top_sns_item a {
	font-size: 1.4rem;
	line-height: 1.7rem;
	letter-spacing: .07em;
	text-decoration: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 100%;
	min-height: 60px;
	gap: 20px;
	padding: 10px;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	background: #fff;
}
.top_sns_item a::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.top_sns_item.top_sns_item__ln a::before {
	background-image: url(/img/top/icon_sns_ln.png);
}
.top_sns_item.top_sns_item__ig a::before {
	background-image: url(/img/top/icon_sns_ig.png);
}
.top_sns_item.top_sns_item__fb a::before {
	background-image: url(/img/top/icon_sns_fb.png);
}
.top_sns_item.top_sns_item__yt a::before {
	background-image: url(/img/top/icon_sns_yt.png);
}
@media (hover: hover) {
	.top_sns_item a:hover {
		text-decoration: underline;
	}
}

/* ----------------------------------------
おすすめ情報
---------------------------------------- */
.top_recommend_ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	gap: 32px;
	margin: 0 0 30px;
}
.top_recommend_box {
	display: block;
	width: 155px;
	aspect-ratio: 1 / 1;
	border-radius: 5px;
	overflow: hidden;
}
.top_recommend_box img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
}

#top_recommend_control {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 20px;
	margin: 30px 0 0;
}
#top_recommend_control .slide_pagination {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 20px;
	width: auto;
}
#top_recommend_control .slide_pagination span.swiper-pagination-bullet {
	display: block;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 1px solid #0079af;
	border-radius: 100%;
	margin: 0;
	background: #fff;
	opacity: 1;	
}
#top_recommend_control .slide_pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	color: #fff;
	background-color: #0079af;
}

#top_recommend_control .slide_control {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
}
#top_recommend_control button {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 34px;
	height: 34px;
	color: #fff;
	background: #0079af;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 100%;
}
#top_recommend_control button.slide_control_prev {
	background-size: 8px auto;
	background-image: url(/img/top/arrow_prev.png);
}
#top_recommend_control button.slide_control_next {
	background-size: 8px auto;
	background-image: url(/img/top/arrow_next.png);
}
#top_recommend_control button.slide_control_stop::before {
	content: "";
	display: block;
	width: 8px;
	height: 12px;
	background: linear-gradient(to right, #fff 2px, transparent 2px, transparent 6px, #fff 6px);
}
#top_recommend_control button.slide_control_play {
	border: 1px solid #0079af;
	background-color: #fff8e9;
}
#top_recommend_control button.slide_control_play::before {
	content: "";
	display: block;
	width: 10px;
	height: 12px;
	background: #0079af;
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	        clip-path: polygon(0 0, 100% 50%, 0 100%);
	translate: 2px 0;
}
#top_recommend_control button.slide_control_stop.is-active,
#top_recommend_control button.slide_control_play.is-active {
	display: none;
}

/* ----------------------------------------
情報をさがす
---------------------------------------- */

/* ----------------------------------------
広告
---------------------------------------- */
.top_banner_ttl {
	position: relative;
	z-index: 1;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: .15em;
	line-height: 1;
	text-align: center;
}
.top_banner_link {
	text-align: right;
	translate: 0 -100%;
	position: relative;
	z-index: 2;
}
.top_banner_link a {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 2rem;
	display: inline-block;
	padding: 0 calc(12px + 6px) 0 0;
	background: url(/img/common/arrow_black.png) no-repeat right center / 6px 10px;
}
.top_banner_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 40px;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	max-width: calc(177px * 5 + 40px * 4);
	margin: 30px auto 0;
}
.top_banner_list li {
	width: 177px
}
.top_banner_list li a {
	display: block;
}
.top_banner_list li img {
	display: block;
	width: 100%;
}

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

	/* ----------------------------------------
	メインビジュアル
	---------------------------------------- */
	#mainvisual {
		background-color: #d1f0fc;
	}

	/* ----------------------------------------
	スライドショー
	---------------------------------------- */
	#top_photo {
		position: static;
	}
	#top_photo_list .photo_box {
		aspect-ratio: 375 / 272;
		height: auto;
	}
	#top_photo_control {
		position: static;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		margin-top: 20px;
	}
	#top_photo_control .slide_pagination {
		width: auto;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	/* ----------------------------------------
	レイアウト
	---------------------------------------- */
	.ly_section > [class^="top_"] {
		max-width: none;
		margin-inline: 20px;
	}
	.ly_section > .top_ttl {
		margin-bottom: 40px;
	}
	.ly_section > .top_ttl.top_ttl__discover {
		margin-bottom: 30px;		
	}
	.ly_section > .top_ttl.top_ttl__search {
		display: none !important;
	}

	/* info */
	.ly_section.ly_section__info {
		padding-top: 30px;
		padding-bottom: 72px;
		background-position: center bottom -8px;
		background-size: 800px 50px;
	}
	.ly_section.ly_section__info > [class^="top_"] + [class^="top_"] {
		margin-top: 20px;
	}

	/* news */
	.ly_section.ly_section__news {
		padding-top: 50px;
		padding-bottom: 80px;
	}

	/* topics */
	.ly_section.ly_section__topics {
		padding-bottom: 70px;
		background-image:
			url(/img/top/yama.png),
			url(/img/top/kumo_blue.png),
			linear-gradient(to bottom, #fff, #fff calc(77px + 50px), transparent 50px);
		background-position: center bottom, center top 77px, left top;
		background-size: 335px 28px, 800px 50px, auto;
	}

	/* discover */
	.ly_section.ly_section__discover {
		padding-top: 70px;
		padding-bottom: 145px;
		background-position: center top 50px, center bottom, center bottom;
		background-size: 240px 31px, 335px 27px, 100% auto;
	}

	/* about */
	.ly_section.ly_section__about {
		padding-top: 75px;
		padding-bottom: 70px;
		background-position: center bottom, center top 20px;
		background-size: 800px 12px, 272px 64px;
	}

	/* recommend */
	.ly_section.ly_section__recommend {
		padding-top: 40px;
		padding-bottom: 80px;
		background-position: center bottom -1px;
		background-size: 800px 12px;
	}
	.ly_section.ly_section__recommend::before {
		top: -20px;
		right: 20px;
		width: 110px;
		height: 79px;
	}
	.ly_section.ly_section__recommend::after {
		bottom: -20px;
		left: 60px;
		width: 82px;
		height: 60px;
	}

	/* search */
	.ly_section.ly_section__search {
		position: fixed;
		top: 100%;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 0;
		background: #a8def2;
		overflow: auto;
		-ms-scroll-chaining: none;
		    overscroll-behavior: none;
		-webkit-transition: .5s translate;
		transition: .5s translate;
	}
	.spm_search_open .ly_section.ly_section__search {
		translate: 0 -100%;
	}
	.ly_section.ly_section__search > .top_search {
		margin-inline: 0;
		height: calc(100% + 1px);
	}
	.ly_section.ly_section__search #search {
        padding: 50px 20px calc(50px + 60px);
	}

	/* add */
	.ly_section.ly_section__add {
		padding-block: 40px;
		background-color: #a8def2;
	}

	/* ----------------------------------------
	重要なお知らせ
	---------------------------------------- */
	.top_important_box {
		padding: 20px 20px 30px;
	}
	.top_important_list li {
		display: block;
	}
	.top_important_list li + li {
		margin-top: 24px;
	}
	.top_important_list li span.article_date {
		line-height: 1;
		width: auto;
		max-width: none;
	}
	.top_important_list li span.article_title {
		margin-top: 6px;
	}
	.top_important_list li span.article_title a {
		line-height: 2.8rem;
	}
	.top_important_link {
		gap: 10px 20px;
		margin-top: 30px;
	}

	/* ----------------------------------------
	もしものときは
	---------------------------------------- */
	.top_emergency_container {
		display: block;
		padding: 30px 20px;
	}
	.top_emergency_ttl {
		line-height: 2.8rem;
		width: -webkit-max-content;
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
		padding-block: 0;
		margin-inline: auto;
	}
	.top_emergency_list {
		display: block;
		margin-top: 20px;
	}
	.top_emergency_item {
		width: auto;
		max-width: none;
	}
	.top_emergency_item + .top_emergency_item {
		margin-top: 10px;
	}

	/* ----------------------------------------
	タイトル
	---------------------------------------- */
	.top_ttl_txt {
		margin-top: 15px;
	}
	.top_ttl.top_ttl__news img {
		max-width: 291px;
	}
	.top_ttl.top_ttl__discover img {
		max-width: 324px;
	}
	.top_ttl.top_ttl__about img {
		max-width: 302px;
	}

	/* ----------------------------------------
	タブ
	---------------------------------------- */
	#top_tab_title ul {
		gap: 8px;
	}
	#top_tab_title ul li {
		width: calc(100% / 3 - 8px * 2 / 3);
	}
	#top_tab_detail {
		margin-top: 33px;
	}
	.top_tab_detail_list ul li {
		display: block;
		padding: 15px 20px;
	}
	.top_tab_detail_list ul li span.article_date {
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		width: auto;
		max-width: none;
	}
	.top_tab_detail_list ul li span.article_title {
		line-height: 2.8rem;
		margin-top: 6px;
	}
	.top_tab_detail_link {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		gap: 16px;
		margin-top: 30px;
	}
	.top_tab_detail_link span[class^="link_"] {
		max-width: 100%;
	}

	/* ----------------------------------------
	トピックス
	---------------------------------------- */
	.top_topics {
		display: block;
	}
	.top_topics_ttl {
		text-align: center;
		margin-bottom: 60px;
	}
	.top_topics_sub img {
		max-width: 131px;
	}
	.top_topics_txt {
		margin-top: 11px;
	}
	.top_topics_box {
		width: 100%;
	}
	.top_topics_control button {
		top: auto;
		bottom: calc(155px / 2 - 20px);
	}
	.top_topics_control button.slide_control_prev {
		right: auto;
		left: -10px;
		translate: 0 calc(-50% - 10px);
	}
	.top_topics_control button.slide_control_next {
		left: auto;
		right: -10px;
		translate: 0 calc(-50% - 10px);
	}
	.top_topics_control button.slide_control_play,
	.top_topics_control button.slide_control_stop {
		right: auto;
		left: -10px;
		translate: 0 calc(50% + 10px);
	}
	.top_topics_pagination {
		margin-top: 30px;
	}
	.top_topics_pagination .slide_pagination {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 30px;
		padding-inline: calc(25px / 2);
	}
	.top_topics_linkUnit {
		display: none !important;
		margin-top: 30px;
	}
	.top_topics_link {
		margin-inline: auto;
	}

	/* レタリング */
	.lettering_box {
		width: auto;
		min-height: 368px;
		margin-inline: calc(25px / 2);
	}
	.lettering_box_img,
	.lettering_box_img a {
		aspect-ratio: 310 / 213;
	}
	.lettering_box_txt {
		gap: 22px;
		min-height: 155px;
		padding-inline: 40px;
	}
	#letterring .no_data {
		text-align: center;
	}

	/* ----------------------------------------
	朝倉市の魅力
	---------------------------------------- */
	.top_media_unit {
		display: block;
	}
	.top_media_banner {
		width: -webkit-max-content;
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
		position: static;
		translate: none;
		margin-inline: auto;
		margin-bottom: 30px;
	}
	.top_media_item {
		width: auto;
	}
	.top_media_item + .top_media_item {
		margin-top: 30px;
	}

	/* ----------------------------------------
	朝倉市について
	---------------------------------------- */
	.top_about_boxUnit + .top_about_boxUnit {
		margin-top: 30px;
	}
	.top_about_boxUnit.top_about_boxUnit__grid {
		display: block;
	}
	.top_about_boxUnit.top_about_boxUnit__grid > * + * {
		margin-top: 30px;
	}
	.top_about_boxUnit.top_about_boxUnit__flex {
		display: block;
	}
	.top_about_boxUnit.top_about_boxUnit__flex > * + * {
		margin-top: 30px;
	}
	.top_about_box.top_about_box__tokei {
		width: auto;
		padding: 20px;
	}
	.top_about_box.top_about_box__koho {
		max-width: none;
		padding: 20px;
	}
	.top_about_box.top_about_box__sns {
		width: auto;
		padding: 20px;
	}

	/* ----------------------------------------
	リンク
	---------------------------------------- */
	ul.top_link_list {
		display: block;
	}
	li.top_link_item {
		width: auto;
	}
	li.top_link_item + li.top_link_item {
		margin-top: 20px;
	}
	.top_link_box {
		aspect-ratio: 335 / 200;
	}

	/* ----------------------------------------
	テキストリンク
	---------------------------------------- */
	ul.top_txtLink_list {
		display: block;
	}
	li.top_txtLink_item {
		width: auto;
	}
	li.top_txtLink_item + li.top_txtLink_item {
		margin-top: 10px;
	}

	/* ----------------------------------------
	人口・世帯数
	---------------------------------------- */

	/* ----------------------------------------
	時計
	---------------------------------------- */
	.top_tokei {
		display: block;
	}
	.top_tokei_img {
		width: auto;
	}
	#tokei_photo {
		aspect-ratio: 295 / 235;
	}
	.top_tokei_detail {
		display: block;
		padding-block: 0;
		margin-top: 20px;
	}
	.top_tokei_ttl {
		padding-bottom: calc(12px + 30px);
		margin-inline: 20px;
	}
	.top_tokei_txt {
		padding-inline: 16px;
		margin-top: 14px;
	}
	.top_tokei_link {
		margin-top: 16px;
	}
	.top_tokei_link a {
		width: 22rem;
		max-width: 100%;
		margin-inline: auto;
	}

	/* ----------------------------------------
	広報
	---------------------------------------- */
	.top_koho {
		gap: 20px;
	}
	.top_koho_book {
		width: 127px;
	}
	.top_koho_cover {
		aspect-ratio: 127 / 181;
	}
	.top_koho_detail {
		gap: 10px;
	}
	.top_koho_ttl img {
		max-width: 110px;
	}
	.top_koho_link a {
		gap: 4px;
		min-height: 50px;
		padding-inline: 14px;
	}
	.top_koho_link.top_koho_link__main a {
		color: #fff;
		background-color: #008536;
	}

	/* ----------------------------------------
	公式SNS
	---------------------------------------- */
	.top_sns {
		display: block;
	}
	.top_sns_list {
		gap: 15px;
		width: auto;
		margin-top: 20px;
	}
	.top_sns_item {
		width: calc(100% / 2 - 15px / 2);
	}
	.top_sns_item a {
		line-height: 1;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		min-height: 100px;
		gap: 18px;
	}

	/* ----------------------------------------
	おすすめ情報
	---------------------------------------- */
	.top_recommend_ttl {
		display: block;
	}
	.top_recommend_sub {
		display: block;
	}
	.top_recommend_sub img {
		display: block;
		max-width: 196px;
	}
	.top_recommend_txt {
		display: block;
		margin-top: 17px;
	}
	.top_recommend_txt img {
		display: block;
	}
	#top_recommend_list {
		position: relative;
		left: calc(-25px / 2);
		width: calc(100% + 25px);
	}
	#top_recommend_list ul li {
		padding-inline: calc(25px / 2);
	}
	.top_recommend_box {
		width: 100%;
	}

	/* ----------------------------------------
	情報をさがす
	---------------------------------------- */

	/* ----------------------------------------
	広告
	---------------------------------------- */
	.top_banner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		gap: 20px;
	}
	.top_banner_ttl {
		text-align: left;
	}
	.top_banner_link {
		translate: none;
	}
	.top_banner_list {
		gap: 15px;
		width: 100%;
		max-width: calc(177px * 2 + 15px);
		margin-top: 0;
	}
	.top_banner_list li {
		width: calc(50% - 15px / 2);
	}

}
/* ==================================================
背景色変更
================================================== */
.color_change {
	.ly_section,
	.top_jinkou_dlUnit,
	.top_jinkou_dl,
	.top_banner_link a {
		background-image: none !important;
	}
	.top_ttl,
	.top_topics_ttl,
	.top_media_ttl,
	.top_jinkou_ttl,
	.top_tokei_ttl,
	.top_koho_ttl,
	.top_sns_ttl,
	.top_recommend_ttl,
	.top_emergency_ttl,
	.top_banner_ttl,
	.top_important_ttl {
		background-color: transparent !important;
	}
	#top_photo_control .slide_pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active,
	.top_topics_pagination .slide_pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active,
	#top_recommend_control .slide_pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active,
	#top_photo_control button.slide_control_play::before,
	.top_topics_control button.slide_control_play::before,
	#top_recommend_control button.slide_control_play::before {
		background-color: #fff !important;
	}
	.top_ttl,
	.top_topics_ttl,
	.top_koho_ttl,
	.top_recommend_ttl {
		-webkit-filter: brightness(0) invert(1);
		        filter: brightness(0) invert(1);
	}
	.ly_section::before,
	.ly_section::after,
	.top_important_link span[class^="link_"] a::after,
	.top_emergency_item a::before,
	.top_tab_detail_link span[class^="link_"] a::after,
	.top_topics_link a::after,
	a.top_media_box::before,
	a.top_media_box::after,
	.top_media_link::after,
	.top_txtLink_box::after,
	.top_jinkou_link a::after,
	.top_tokei_link a::after,
	.top_koho_link a::after {
		display: none !important;
	}
	.top_emergency_item a,
	.lettering_box,
	.top_topics_link a,
	a.top_media_box,
	.top_media_link,
	.top_txtLink_box,
	.top_link_box,
	.top_jinkou,
	.top_tokei,
	.top_koho,
	.top_tokei_link a,
	.top_topics_pagination .slide_pagination span.swiper-pagination-bullet {
		border: 1px solid;
	}
}


/* オープニングアニメーション */
body:not(:has(.errrange)) .anim_frame{
	--animationDurationTime: 4s;
}
body:not(:has(.errrange)) .anim_frame:not(.no_anim) {
	position: fixed;
	z-index: 10000;
	top: 0px;
	left: 0px;
	background: #fff;
	color: #000;
	width: 100%;
	height: 100%;
	-webkit-animation-name: opAnim;
	        animation-name: opAnim;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-duration: var(--animationDurationTime);
	        animation-duration: var(--animationDurationTime);
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
	-webkit-animation-direction: normal;
	        animation-direction: normal;
}
body:not(:has(.errrange)) .anim_frame:not(.no_anim)::before{
	content: '';
	display: grid;
	place-content: center center;
	width: 100%;
	height: 100%;
	background: url(/img/top/op/oplogo.png) no-repeat center center transparent;
	background-size: auto auto;
	-webkit-animation-name: opAnimInside;
	        animation-name: opAnimInside;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-duration: var(--animationDurationTime);
	        animation-duration: var(--animationDurationTime);
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
	-webkit-animation-direction: normal;
	        animation-direction: normal;
}
@media screen and (orientation: portrait){
	body:not(:has(.errrange)) .anim_frame:not(.no_anim)::before{
		background-size: min(60%,1000px) auto;
	}
}
@media screen and (orientation: landscape){
	body:not(:has(.errrange)) .anim_frame:not(.no_anim)::before{
		background-size: auto auto;
	}
}


@-webkit-keyframes opAnim {
	0% { opacity: 1; }
	50% { opacity: 1; }
	99% { opacity: 0;}
	100%{
		opacity: 0;
		display: none;
	}
}

@keyframes opAnim {
	0% { opacity: 1; }
	50% { opacity: 1; }
	99% { opacity: 0;}
	100%{
		opacity: 0;
		display: none;
	}
}
@-webkit-keyframes opAnimInside {
	0% {opacity: 0;}
	25%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes opAnimInside {
	0% {opacity: 0;}
	25%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
/* オープニングアニメーションここまで */