@charset "utf-8";

/* ==================================================
PC
================================================== */

/* ========== トップページ ========== */

/* 非表示 */
#footstep_wrap {
	display: none !important;
}

/* スライドショー1件目 */
.swiper-container {
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
#slide_promo1 .swiper-container {
	width: calc(1080px * 3) !important;
}
#slide_promo1 .swiper-caption,
#slide_promo1 button.swiper-button-prev, 
#slide_promo1 button.swiper-button-next {
	display: none;
}
.pg_class_slide_a_center {
	line-height: 0;
}

/* スライドコントロールボタン */
#slide_promo1 button.swiper-button-start, 
#slide_promo2 button.swiper-button-start,
#slide_promo1 button.swiper-button-stop, 
#slide_promo2 button.swiper-button-stop {
	width: 30px;
    height: 30px;
    bottom: 20px;
    right: calc(50% - 515px);
    top: inherit;
    -webkit-transform: unset;
    -ms-transform: unset;
            transform: unset;
    -webkit-box-shadow: inherit;
            box-shadow: inherit;
    z-index: 2;
    background-color: #38d4d6 !important;
    color: #333 !important;
}
#slide_promo1 :where(button.swiper-button-start,button.swiper-button-stop)::after,
#slide_promo2 :where(button.swiper-button-start,button.swiper-button-stop)::after {
    width: 11px;
    height: 11px;
    background-color: #222222;
    color: #fff;
}

/* スライドナビゲーションボタン */
#slide_promo1 .swiper-pagination {
	width: calc(1080px - 80px);
    margin: 0;
    position: absolute;
    bottom: 31px;
    left: calc(50% - 531px);
    z-index: 1;
    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;
}
#slide_promo1 .swiper-pagination-bullet,
#slide_promo2 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff !important;
    margin: 0 15px;
    border: 1px solid #818181 !important;
    color: #333 !important;
    opacity: inherit;
    -webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
#slide_promo1 .swiper-pagination-bullet-active,
#slide_promo2 .swiper-pagination-bullet-active {
	background: #e0e200 !important;
}

/* バナー広告 */
#footer_banner {
	clear: both;
	width: var(--content-width, 1080px);
	margin: 0px auto 60px;
}
#footer_banner ul.banner_list {
	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: 20px;
}
#footer_banner ul.banner_list li {
	width: 200px;
}
#footer_banner ul.banner_list li img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.banner_text {
	display: block;
	padding: 10px;
	text-align: left;
}
.banner_text span {
	display: block;
}
.banner_text span:nth-child(2n) {
	font-size: var(--fontsize-main-small, 1.5rem);
}

#mymainback {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* 新着情報 */
.section_information {
	width: 1080px;
    margin: 0 auto;
    padding: 108px 0 60px;
    position: relative;
}
.section_information::before, .section_information::after,
#introduction::before, #introduction::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 80px;
	top: 0px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	background: #82d3e0;
}

.section_information::after, #introduction::after {
	width: 12px;
	height: 12px;
	top: 80px;
}
.section_information h2 {
    text-align: center;
    margin: 0;
    line-height: 0;
}
.section_information h2 span {
	display: block;
    font-size: 2.6rem;
    color: #222222;
    line-height: 1;
    letter-spacing: 0.25em;
    margin: 20px 0 0 10px;
    font-family: 'A1明朝 B JIS2004 AP', 'A1 Mincho B JIS2004 AP', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', serif;
}
.section_information p.no_data {
	margin: 0px;
	padding: 20px 0px;
}

.section_information_list ul {
	margin: 53px 0 0;
    padding: 0;
    list-style: none;
    gap: 25px;
 	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;
}
.section_information_list ul li {
	width: 250px;
}
.list_pack .article_img {
	width: 100%;
}
.list_pack .article_img span {
	aspect-ratio: 250 / 200;
}
.list_pack .article_txt span {
	display: block;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
}
.list_pack .article_txt span.article_date {
	padding: 20px 0 10px;
	font-size: 1.6rem;
	letter-spacing: 0.025em;
}
/*
.list_pack .article_txt span.article_title  a {
	color: #0070CA;
}
*/
.section_information_list img.icon_new {
	vertical-align: middle;
	margin-left: 0.5em;
}

/* 新着情報（文字拡大時） */
.font_size_changed .section_information_list ul li,
.font_size_changed .section_information_list ul li > span {
	display: block;
}
.font_size_changed .section_information_list ul li > span.article_date {
	width: auto;
	padding-top: 0px;
}

/* 新着情報（一覧 / RSS） */
div.link_box {
	margin: 37px 0 0;
	gap: 30px;
	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;
}
div.link_box span a {
	display: block;
	width: 24rem;
	max-width: 350px;
	font-size: 1.8rem;
	color: #222222;
    line-height: 1.167;
    letter-spacing: 0.1em;
	text-decoration: none;
	padding: 20px 40px 19px 44px;
    border-radius: 30px;
	background: url(/img/sites/promotion/pc/arrow.png) no-repeat center right 23px #ebed7a;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
div.link_box span a:hover, div.link_box span a:focus {
	text-decoration: underline;
}

/* 楽しむ  住む・働く  子育て */
#main_body {
	width: min(100%, 2000px);
	margin: 0 auto;
    overflow: hidden;
}
*[id*="_wrap"] {
	display: -webkit-box;
	position: relative;
    width: 1080px;
    margin: 0 auto;
    line-height: 0;
    font-family: ‘A1明朝’, ’A1 Mincho’, 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho’,serif;';
}

#main_body div:nth-child(odd) div .photo {
	-webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
			order: 2;
}

/* 見出し　*/
#main_body *[id*="_wrap"] .text_box h2 {
    padding: 0;
	line-height: 1;
    background: 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;
    font-family: 'A1明朝 B JIS2004 AP', 'A1 Mincho B JIS2004 AP', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', serif;
}
#main_body .text_box h2 > span {
	display: block;
	font-size: 2.6rem;
	color: #222222;
	letter-spacing: 0.25em;
	line-height: 1;
}
/* トピックス */
.topics_info div {
    position: relative;
    margin: 0 0 30px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.4);
}
/* トピックスの見出し */
#main_body .topics_info div h3 {
	margin: 0 0 12px;
    padding: 0;
    border: none;
    background: none;
    font-size: 2.6rem;
    color: #222222;
    line-height: 1;
    letter-spacing: 0.1em;
    font-family: 'A1明朝 B JIS2004 AP', 'A1 Mincho B JIS2004 AP', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', serif;
}
.topics_info div h3::first-letter {
	font-size: 3.5rem;
}
.topics_info div p {
	margin: 0;
    font-size: 1.8rem;
    color: #222222;
    line-height: 1.556;
    text-indent: 16px;
    letter-spacing: 0.05em;
}
#main_body h2::after, #main_body h3::before, #main_body h3::after {
	content: none;
}
span.more_info {
	display: block;
    margin: 40px 0 0;
    text-align: center;
}
span.more_info a {
	display: inline-block;
	text-align: left;
	font-weight: bold;
    font-size: 2.2rem;
    color: #222222;
    text-decoration: none;
    line-height: 1;
    border-radius: 30px;
    letter-spacing: 0.1em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: url(/img/sites/promotion/pc/arrow.png) no-repeat right 40px center #fff;
    font-family: 'A1明朝 B JIS2004 AP', 'A1 Mincho B JIS2004 AP', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', serif;
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
span.more_info a:hover {
	opacity: 0.5;
}

/* 楽しむ */
#enjoy {
	background-color: #ebed7a;
}
#enjoy_wrap .text_box {
	width: 710px;
    padding: 50px 48px 80px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#enjoy_wrap .text_box::before,
#parenting_wrap .text_box::before {
	content: "";
	position: absolute;
	width: 500px;
	height: 2px;
	top: 85px;
	left: calc(50% - 999px);
	background: #82d3e0;
	z-index: 1;
}
#enjoy_wrap .text_box::after,
#living_wrap .text_box::after,
#parenting_wrap .text_box::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	top: 80px;
	left: 40px;
	background: #82d3e0;
}
#main_body *[id*="enjoy_wrap"] .text_box h2 {
	margin: 0 0 50px 71px;
    gap: 0 29px;
}
#main_body *[id*="enjoy_wrap"] .text_box h2 span {
    margin: -24px 0 0;
}
#enjoy_wrap .text_box .topics_info {
    margin-right: 12px;
}
#enjoy_wrap .topics_info div:nth-child(1) {
	padding: 30px 239px 29px 39px;
}
#enjoy_wrap .topics_info div:nth-child(1) h3 {
	margin-left: 3px;
}
#enjoy_wrap .topics_info div:nth-child(1) img {
	position: absolute;
    top: -20px;
    right: 10px;
}
#enjoy_wrap .topics_info div:nth-child(2) {
	padding: 29px 40px 28px 242px;
}
#enjoy_wrap .topics_info div:nth-child(2) h3 {
	margin-left: 10px;
}
#enjoy_wrap .topics_info div:nth-child(2) img {
    position: absolute;
    top: -20px;
    left: 11px;
}
#enjoy_wrap .topics_info div:nth-child(3) {
	padding: 29px 254px 54px 35px;
}
#enjoy_wrap .topics_info div:nth-child(3) h3 {
	margin-left: 6px;
}
#enjoy_wrap .topics_info div:nth-child(3) img {
    position: absolute;
    top: 10px;
    right: 10px;
}
#enjoy_wrap span.more_info a {
	letter-spacing: 0.15em;
	padding: 19px 70px 19px 40px;
}

/* 住む・働く */
#living {
	background-color: #aee8f5;
}
*[id*="living_wrap"] {
	-webkit-box-pack: end;
		-ms-flex-pack: end;
	justify-content: flex-end;
}
#living_wrap .text_box {
	width: 710px;
	padding: 40px 0 80px 61px;
    position: relative;
	-webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#living_wrap .text_box::before {
	content: "";
	position: absolute;
	width: 40px;
	height: 2px;
	top: 85px;
	left: 0;
	background: #82d3e0;
	z-index: 1;
}
#main_body *[id*="living_wrap"] .text_box h2 {
	gap: 15px 41px;
    margin: 0 0 54px 10px;
}
#living_wrap .text_box h2 img:first-child {
	margin: 12px 0 0;
}
#living_wrap .topics_info div:nth-child(1) {
	padding: 30px 30px 30px 240px;
}
#living_wrap .topics_info div:nth-child(1) h3 {
	margin-left: 12px;
}
#living_wrap .topics_info div:nth-child(1) img {
	position: absolute;
    top: -5px;
    left: 10px;
}
#living_wrap .topics_info div:nth-child(2) {
	padding: 30px 230px 30px 30px;
}
#living_wrap .topics_info div:nth-child(2) h3 {
	margin-left: 5px;
}
#living_wrap .topics_info div:nth-child(2) img{
    position: absolute;
    top: -20px;
    right: 10px;
}
#living_wrap .topics_info div:nth-child(3) {
	padding: 30px 30px 30px 230px;
}
#living_wrap .topics_info div:nth-child(3) h3 {
	letter-spacing: 0;
    margin-left: 13px;
}
#living_wrap .topics_info div:nth-child(3) img {
	position: absolute;
    top: -10px;
    left: 10px;
}
#living_wrap span.more_info a {
	letter-spacing: 0.173em;
    padding: 19px 75px 19px 45px;
}

/* 子育て */
#parenting {
	background-color: #ffd0d9;
}
#parenting_wrap .text_box {
	width: 700px;
	padding: 35px 49px 80px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#main_body *[id*="parenting_wrap"] .text_box h2 {
	gap: 0 56px;
    margin: 0 0 51px 71px;
}
#parenting_wrap .text_box h2 img:first-child {
	margin-top: 18px;
}
#main_body *[id*="parenting_wrap"] .text_box h2 > span {
	margin-top: -8px;
}
#parenting_wrap .topics_info div:nth-child(1) {
	padding: 29px 240px 30px 37px;
}
#parenting_wrap .topics_info div:nth-child(1) h3 {
	margin-left: 5px;
}
.topics_info div:nth-child(1) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.topics_info div:nth-child(1) ul li {
	font-size: 1.8rem;
    line-height: 1;
    color: #222222;
    line-height: 1.556;
    padding: 0 0 0 13px;
    letter-spacing: 0.05em;
    position: relative;
}
.topics_info div:nth-child(1) ul li:before {
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	background-color: #222222;
}
#parenting_wrap .topics_info div:nth-child(1) img {
	position: absolute;
    top: -20px;
    right: 10px;
}
#parenting_wrap .topics_info div:nth-child(2) {
	padding: 30px 58px 27px 241px;
}
#parenting_wrap .topics_info div:nth-child(2) h3 {
	margin-left: 9px;
}
#parenting_wrap .topics_info div:nth-child(2) img{
    position: absolute;
    top: -20px;
    left: 10px;
}
#parenting_wrap span.more_info a {
	letter-spacing: 0.1em;
    padding: 19px 75px 19px 43px;
}

/* 日田市の紹介 */
#introduction {
    width: 1080px;
    margin: 0 auto;
    padding: 109px 0 70px;
    position: relative;
}
#introduction::before {
	top: 1px;
}
#main_body #introduction h2 {
	margin: 0;
    padding: 0;
    background: none;
    text-align: center;
    line-height: 0;
    font-family: 'A1明朝 B JIS2004 AP', 'A1 Mincho B JIS2004 AP', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', serif;
}
#main_body #introduction h2::after {
	content: none;
}
#main_body #introduction h2 span {
	display: block;
    font-size: 2.6rem;
    color: #222222;
    line-height: 0.9;
    margin: 20px 0 0;
    letter-spacing: 0.25em;
}
#map_area {
	margin: 59px 0 0 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
            align-items: flex-start;
}

#map_area ul {
	width: 469px;
    list-style: none;
    margin: 0 0 0 96px;
    padding: 20px 20px 30px 40px;
    background: #fcfce1;
    border-radius: 10px;
 	-webkit-box-sizing: border-box;
    		box-sizing: border-box;
}
#map_area ul li {
    margin: 0 0 30px;
    padding: 14px 0 14px 80px;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    line-height: 1.223;
}
#map_area ul li:nth-child(1) {
	background: url(/img/sites/promotion/pc/a_icon.png)no-repeat center left;
}
#map_area ul li:nth-child(2) {
	background: url(/img/sites/promotion/pc/b_icon.png)no-repeat center left;
}
#map_area ul li:nth-child(3) {
	background: url(/img/sites/promotion/pc/c_icon.png)no-repeat center left;
}
#map_area ul li:nth-child(4) {
	background: url(/img/sites/promotion/pc/d_icon.png)no-repeat center left;
}
#map_area ul li:nth-child(5) {
	background: url(/img/sites/promotion/pc/e_icon.png)no-repeat center left;
}
#map_area ul li:nth-child(6) {
	margin: 0;
	background: url(/img/sites/promotion/pc/f_icon.png)no-repeat center left;
}
#map_area ul li a {
	color: #222222;
}

/* スライドショー機能（2枠目） */
#slide_promo2 {
	padding: 80px 0px 45px;
	background-color: rgb(248, 249, 177);
	background-image: -o-repeating-linear-gradient(40deg, rgba(250, 250, 195, 0.8) 0 7px, rgba(250, 250, 195, 0) 7px 14px);
	background-image: repeating-linear-gradient(50deg, rgba(250, 250, 195, 0.8) 0 7px, rgba(250, 250, 195, 0) 7px 14px);
	overflow: hidden;
}
#slide_promo2_box {
	width: calc(370px * 4);
	margin: 0px auto;
	overflow: hidden;
}
@media screen and (max-width: 1480px) {
	#slide_promo2_box {
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		        transform: translateX(-50%);
	}
}

#slide_promo2 .swiper-container {
	width: calc(370px * 4) !important;
	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;
	text-align: center;
	left: 0;
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}
#slide_promo2 .swiper-wrapper {
	width: calc(370px * 4) !important;
	margin-left: 370px;
}
#slide_promo2 .swiper-slide {
	width: 370px !important;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 0px 10px;
}

/* スライドコントロールボタン */
#slide_promo2 button.swiper-button-prev, 
#slide_promo2 button.swiper-button-next {
	width: 30px;
	height: 30px;
	border: none;
	top: 42%;
	-webkit-transform: translateY(-58%);
	-ms-transform: translateY(-58%);
	transform: translateY(-58%);
	-webkit-box-shadow: inherit;
			box-shadow: inherit;
	color: #333 !important;
}
#slide_promo2 button.swiper-button-prev {
	left: calc(50% - 375px);
	background: url(/img/sites/promotion/pc/prev.png)no-repeat center center !important;
}
#slide_promo2 button.swiper-button-next {
	right: calc(50% - 375px);
	background: url(/img/sites/promotion/pc/next.png)no-repeat center center  !important;
}
#slide_promo2 button.swiper-button-prev::after, 
#slide_promo2 button.swiper-button-next::after {
	content: none;
}
#slide_promo2 button.swiper-button-start, 
#slide_promo2 button.swiper-button-stop {
	margin: 10px 0px 0px;
	display: none;
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
#slide_promo2 button.swiper-button-start.is-active, 
#slide_promo2 button.swiper-button-stop.is-active {
	display: inline-block;
}

/* スライドナビゲーションボタン */
#slide_promo2 .swiper-pagination {
	position: static;
	width: auto;
	display: inline-block;
	margin: 10px 0px 0px;
	padding: 10px;
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}

/* ========== 背景色変更 ========== */

/* 共通 */
.color_change *[id*="_wrap"] .text_box h2 img:nth-child(2) {
	-webkit-filter: invert(1);
			filter: invert(1);
}
.color_change #slide_promo1 .swiper-pagination,
.color_change .section_information h2,
.color_change #main_body *[id*="_wrap"] .text_box h2,
.color_change #main_body .topics_info div h3,
.color_change .topics_info div img,
.color_change #slide_promo2,
.color_change #main_body #introduction h2 {
	background: transparent !important;
}
.color_change .section_information::before, .color_change .section_information::after, 
.color_change #introduction::before, .color_change #introduction::after,
.color_change #enjoy_wrap .text_box::before, .color_change #enjoy_wrap .text_box::after, 
.color_change #living_wrap .text_box::before, .color_change #living_wrap .text_box::after, 
.color_change #parenting_wrap .text_box::before, .color_change #parenting_wrap .text_box::after {
	content: none;
}
.color_change div.link_box span a,
.color_change span.more_info a,
.color_change #map_area ul {
	border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 黒 */
.color_black * {

}
/* 青 */
.color_blue * {

}

/* ==================================================
PC ここまで
================================================== */


/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 1080px) {

	/* ========== トップページ ========== */

	/* スライドショー1件目 */
	#top_photo {
		width: auto;
		margin: 15px 15px 0px;
	}

	/* スライドショー（3枚表示） */
	#slide_promo1 .swiper-container {
		width: calc(100% * 3) !important;
	}

	/* スライドコントロールボタン */
	#slide_promo1 button.swiper-button-start,
	#slide_promo1 button.swiper-button-stop {
	    width: 22.5px;
	    height: 22.5px;
	    bottom: 16px;
        right: calc(50% - 90px);
	}
	#slide_promo1 :where(button.swiper-button-start,button.swiper-button-stop)::after, 
	#slide_promo2 :where(button.swiper-button-start,button.swiper-button-stop)::after {
	    width: 9px;
    	height: 9px;
	}

	/* スライドナビゲーションボタン */
	#slide_promo1 .swiper-pagination {
	    width: 375px;
	    position: relative;
	    margin: 16px auto;
	    padding: 7.5px 10px;
	    left: 0;
	    bottom: 0;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	            justify-content: center;
        -webkit-box-sizing: border-box;
	            box-sizing: border-box;
	}
	#slide_promo1 .swiper-pagination-bullet, 
	#slide_promo2 .swiper-pagination-bullet {
		width: 8px;
    	height: 8px;
    	margin: 0 10px;
	}

	/* バナー広告 */
	#footer_banner {
		width: auto;
		margin: 0px var(--mymainback-margin-side, 15px) 40px;
	}
	#footer_banner ul.banner_list {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 10px;
	}
	#footer_banner ul.banner_list li {
		width: calc(50% - 5px);
		max-width: 200px;
	}

	.banner_text span:nth-child(2n) {
		font-size: var(--fontsize-main-small, 1.3rem);
	}

	/* 新着情報 */
	.section_information {
	    width: auto;
	    padding: 57px 0 20px;
	    border-top: 1px solid #a7a7a7;
	}
	.section_information::before, .section_information::after, 
	#introduction::before, #introduction::after {
		width: 1px;
    	height: 40px;
	}
	.section_information::after, #introduction::after {
	    width: 7px;
	    height: 7px;
	    top: 40px;
	}
	.section_information h2 {
        margin: 0 22.5px;
	}
	.section_information h2 img {
		width: 129px;
	}
	.section_information h2 span {
        font-size: 1.6rem;
        margin: 12px 0 0;
        letter-spacing: 0.12em;
	}
	.section_information p.no_data {
		padding: 20px;
	}
	.section_information_list ul {
	    margin: 20px 22.5px 0;
	    gap: 20px 10px;
	}
	.section_information_list ul li {
		width: calc(50% - 5px);
	}
	.list_pack .article_txt span.article_date {
        font-size: 1.1rem;
        padding: 10px 0 5px;
        letter-spacing: 0.05em;
	}
	.list_pack .article_txt span.article_title {
		font-size: 1.2rem;
		line-height: 1.3;
		letter-spacing: 0.05em;
	}
	.section_information_list img.icon_new {
		width: 20px;
    	height: 20px;
	}

	/* 新着情報（一覧 / RSS） */
	div.link_box {
		display: block;
        margin: 20px 10px 0;
	}
	div.link_box span {
		display: block;
		margin: 0 auto 15px;
        text-align: center;
	}
	div.link_box span a {
	    display: inline-block;
        width: auto;
    	max-width: 100%;
	    font-size: 1.2rem;
		letter-spacing: 0.05em;
		padding: 8px 59px 8px 33px;
		border-radius: 15px;
	    background-size: 8px 13px;
    	background-position: center right 20px;
	}

	/* 楽しむ  住む・働く  子育て */
	#main_body *[id*="_wrap"] {
	    width: auto;
	    display: block;
	    padding: 20px 0 40px;
	}
	.photo img {
		max-width: 100%;
    	height: auto;
	}
	#enjoy_wrap .text_box::before,
	#living_wrap .text_box::before,
	#parenting_wrap .text_box::before {
		width: 20px;
		height: 1px;
		top: 38px;
		left: 0;
	}
	#enjoy_wrap .text_box::after,
	#living_wrap .text_box::after,
	#parenting_wrap .text_box::after {
		width: 7px;
		height: 7px;
		top: 35px;
		left: 20px;
	}
	#main_body .text_box h2 > span {
	    font-size: 1.5rem;
	}
	.topics_info div {
	    margin: 0 0 15px;
    	border-radius: 5px;
	}
	#main_body .topics_info div h3 {
		margin: 0 0 6px !important;
		font-size: 1.4rem;
	}

	.topics_info div h3::first-letter {
		font-size: 1.7rem;
	}
	.topics_info div p {
	    font-size: 1.2rem;
		line-height: 1.25;
	}
	span.more_info {
		margin: 15px 0 0;
	}
	span.more_info a {
		padding: 10px 39px 8px 27px !important;
        letter-spacing: 0.1em !important;
	    font-size: 1.2rem;
	    border-radius: 15px;
	    background-size: 8px auto;
	    background-position: center right 15px;
	}


	/* 楽しむ */
	#enjoy_wrap .text_box {
		width: auto;
    	padding: 30px 10px 0px 25px;
    	position: relative;
	}
	#main_body *[id*="enjoy_wrap"] .text_box h2 {
		gap: 0 15px;
    	margin: 0 0 20px 15px;
	}
	*[id*="enjoy_wrap"] .text_box h2 img:first-child {
		width: calc(50% - 19px);
	}
	*[id*="enjoy_wrap"] .text_box h2 img:nth-child(2) {
		width: calc(50% + 2px);
	}
	#main_body *[id*="enjoy_wrap"] .text_box h2 span {
		margin: -13px 0 0;
		font-size: 1.5rem;
	}
	#enjoy_wrap .text_box .topics_info {
		margin-right: 15px;
	}
	#enjoy_wrap .topics_info div:nth-child(1) {
	    padding: 15px 121px 15px 19px;
	}
	#enjoy_wrap .topics_info div:nth-child(1) img {
		width: 100px;
		top: 6.5px;
	    right: 5px;
	}
	#enjoy_wrap .topics_info div:nth-child(2) {
		padding: 15px 17px 16px 122px;
	}
	#enjoy_wrap .topics_info div:nth-child(2) img {
	    width: 100px;
	    top: 0;
	    left: 10px;
	}
	#enjoy_wrap .topics_info div:nth-child(3) {
		padding: 15px 121px 14px 18px;
	}
	#enjoy_wrap .topics_info div:nth-child(3) img {
		width: 100px;
		top: 10px;
   		right: 10px;
	}

	/* 住む・働く */
	#living_wrap .text_box {
	    width: auto;
    	padding: 23px 12px 0 33px;
	}
	#main_body *[id*="living_wrap"] .text_box h2 {
		gap: 10px 23px;
    	margin: 0 0 25px 4px;
	}
	*[id*="living_wrap"] .text_box h2 img:first-child {
		width: calc(50% - 3px);
		margin: 7px 0 0 !important;
	}
	*[id*="living_wrap"] .text_box h2 img:nth-child(2) {
		width: calc(50% - 22px);
	}
	#living_wrap .text_box .topics_info {
	    margin-right: 5px;
	}
	#living_wrap .topics_info div:nth-child(1) {
		padding: 14px 17px 14px 119px;
	}
	#living_wrap .topics_info div:nth-child(1) img {
		width: 100px;
		top: 6px;
	    left: 5px;
	}
	#living_wrap .topics_info div:nth-child(2) {
	    padding: 15px 121px 15px 18px;
	}
	#living_wrap .topics_info div:nth-child(2) img {
		width: 100px;
		top: 0;
	    right: 5px;
	}
	#living_wrap .topics_info div:nth-child(3) {
		padding: 16px 15px 16px 121px;
	}
	#living_wrap .topics_info div:nth-child(3) h3 {
		letter-spacing: 0;
	}
	#living_wrap .topics_info div:nth-child(3) img {
		width: 100px;
	    top: -5px;
	    left: 5px;
	}

	/* 子育て */
	#parenting_wrap .text_box {
		width: auto;
    	padding: 10px 25px 0;
    	position: relative;
	}
	#main_body *[id*="parenting_wrap"] .text_box h2 {
		gap: 0 30px;
    	margin: 0 0 28px 14px;
	}
	*[id*="parenting_wrap"] .text_box h2 img:first-child {
		width: calc(50% - 20px);
        margin-top: 10px !important;
	}
	*[id*="parenting_wrap"] .text_box h2 img:nth-child(2) {
	    width: calc(50% - 11px);
	}
	#parenting_wrap .topics_info div:nth-child(1) {
	    padding: 16px 120px 16px 16px;
	}
	.topics_info div:nth-child(1) ul li {
	    font-size: 1.2rem;
	    line-height: 1.25;
	    padding: 0 0 0 8px;
	    letter-spacing: 0.03em;
	}
	.topics_info div:nth-child(1) ul li:before {
		width: 2.5px;
    	height: 2.5px;
	}
	#parenting_wrap .topics_info div:nth-child(1) img {
		width: 100px;
	    top: 0;
	    right: 5px;
	}
	#parenting_wrap .topics_info div:nth-child(2) {
		padding: 15px 5px 15px 120px;
	}
	#parenting_wrap .topics_info div p {
        font-size: 1rem;
	}
	#parenting_wrap .topics_info div:nth-child(2) img {
		width: 100px;
	    top: -10px;
	    left: 10px;
	}
	@media screen and (max-width: 369px) {
		
		#enjoy_wrap .text_box::before, 
		#living_wrap .text_box::before, 
		#parenting_wrap .text_box::before {
	        width: 10px;
		}
		#enjoy_wrap .text_box::after,
		#living_wrap .text_box::after,
		#parenting_wrap .text_box::after {
			left: 10px;
		}
		.topics_info div h3::first-letter {
			font-size: 1.5rem;
		}

		/* 楽しむ */
		#enjoy_wrap .text_box {
	        padding: 30px 10px 0px 10px;
		}
		#enjoy_wrap .text_box .topics_info {
			margin-right: 0;
		}
		/* 住む・働く */
		#living_wrap .text_box {
	        padding: 30px 10px 0 18px;
		}
		#living_wrap .text_box .topics_info {
	        margin-right: 0px;
		}
		#living_wrap .topics_info div:nth-child(2) {
			padding: 15px 107px 13px 11px;
		}
		#living_wrap .topics_info div:nth-child(3) {
			padding: 16px 10px 16px 107px;
		}

		/* 子育て */
		#parenting_wrap .text_box {
			padding: 10px 10px 0;
		}
		#parenting_wrap .topics_info div:nth-child(1) {
			padding: 16px 101px 16px 10px;
		}

	}
	@media screen and (orientation: landscape) {
		/* 楽しむ */
		#enjoy_wrap .topics_info div:nth-child(1) {
		    padding-top: 30px;
    		padding-bottom: 30px;
		}
		#enjoy_wrap .topics_info div:nth-child(2) {
		    padding-top: 31px;
    		padding-bottom: 30px;
		}
		#enjoy_wrap .topics_info div:nth-child(3) {
			padding-top: 37px;
    		padding-bottom: 38px;
		}
		/* 住む・働く */
		#living_wrap .topics_info div:nth-child(1) {
		    padding-top: 29px;
    		padding-bottom: 29px;
		}
		#living_wrap .topics_info div:nth-child(2) {
			padding-top: 31px;
    		padding-bottom: 30px;
		}
		#living_wrap .topics_info div:nth-child(3) {
			padding-bottom: 23px;
    		padding-top: 24px;
		}
		/* 子育て */
		#parenting_wrap .topics_info div:nth-child(2) {
			padding-top: 22px;
			padding-bottom: 22px;
		}
	}

	/* 日田市の紹介 */
	#introduction {
	    width: auto;
	    padding: 54px 0 40px;
	    margin: 0 10px;
	}
	#main_body #introduction h2 img {
		width: calc(100% - 46px);
	    max-width: 309px;
	}
	#main_body #introduction h2 span {
		margin: 12px 0 0;
    	font-size: 1.6rem;
	}
	#map_area {
	    display: block;
	    margin: 35px auto 0;
	    line-height: 0;
	    text-align: center;
	}
	#introduction img {
		width: calc(100% - 39px);
	    max-width: 316px;
    	margin: 0 auto;
	}
	#map_area ul {
	    width: calc(100% - 30px);
	    max-width: 400px;
	    margin: 35px auto 0;
	    text-align: left;
	    border-radius: 5px;
	    padding: 20px 20px 20px 42px;
	}
	@media screen and (max-width: 340px) {
		#map_area ul {
			width: auto;
			padding: 20px 10px 20px 30px;
		}
	}
	#map_area ul li {
	    margin: 0 0 19px;
	    padding: 8px 0 7px 51px;
	    font-size: 1.3rem;
	    letter-spacing: 0.05em;
	    background-size: 31px auto !important;
	}

	/* スライドショー機能（2枠目） */
	#slide_promo2_box {
		width: 740px;
		left: 0px;
		-webkit-transform: none;
		    -ms-transform: none;
		        transform: none;
	}

	#slide_promo2 button.swiper-button-prev {
		left: 0px;
	}
	#slide_promo2 button.swiper-button-next {
		right: auto;
		left: 710px;
	}

	#slide_promo2 .swiper-pagination {
		margin-left: -740px;
	}

	@media screen and (max-width: 760px) {
		#slide_promo2 {
		padding: 30px 0px;
		background-image: repeating-linear-gradient(50deg, rgba(250, 250, 195, 0.8) 0 5px, rgba(250, 250, 195, 0) 5px 10px);
		background-image: repeating-linear-gradient(50deg, rgba(250, 250, 195, 0.8) 0 5px, rgba(250, 250, 195, 0) 5px 10px);
		}
		#slide_promo2_box {
			width: calc(100vw - 20px);
		}
		#slide_promo2 .swiper-container,
		#slide_promo2 .swiper-wrapper {
			width: calc(200vw - 40px) !important;
		}
		#slide_promo2 .swiper-wrapper {
			margin-left: calc(50vw - 10px);
		}
		#slide_promo2 .swiper-slide {
			width: calc(50vw - 10px) !important;
			padding: 0px 5px;
		}

		#slide_promo2 button.swiper-button-prev {
			top: calc(50% - 20px);
			width: 24px;
			height: 24px;
			background-size: contain !important;
		}
		#slide_promo2 button.swiper-button-next {
			top: calc(50% - 20px);
			left: calc(100vw - 44px);
			width: 24px;
			height: 24px;
			background-size: contain !important;
		}
		#slide_promo2 button.swiper-button-start,
		#slide_promo2 button.swiper-button-stop {
			width: 24px;
			height: 24px;
			background-size: contain !important;
		}

		#slide_promo2 .swiper-pagination {
			margin-left: calc(-100vw - 10px);
			max-width: calc(100vw - 80px);
		}
	}
	/* スライドショー機能（2枠目） ここまで */

	/* ========== 背景色変更 ========== */

	/* 共通 */
	.color_change * {

	}
	/* 黒 */
	.color_black * {

	}
	/* 青 */
	.color_blue * {

	}

}
/* ==================================================
スマートフォン ここまで
================================================== */