@charset "utf-8";

/* ==================================================
PC
================================================== */

/* ========== トップページ ========== */

/* ヘッダ */
#header {
	background: #e5632e;
	color: #222;
}
#header2::before {
	content: none;
}
#he_right {
	background: url("/img/site/artful/pc/wave_bg.png") no-repeat bottom right -5px rgba(255, 255, 255, 0.3);
}

/* グローバルナビ */
#top_search ul li:nth-child(1) a::before {
	content: url("/img/site/artful/pc/top_navi_icon01.png");
}
#top_search ul li:nth-child(2) a::before {
	content: url("/img/site/artful/pc/top_navi_icon02.png");
}
#top_search ul li:nth-child(3) a::before {
	content: url("/img/site/artful/pc/top_navi_icon03.png");
}
#top_search ul li:nth-child(4) a::before {
	content: url("/img/site/artful/pc/top_navi_icon04.png");
}

/* 非表示 */
#footstep_wrap {
	display: none !important;
}
#footstep_wrap a,
#footstep_wrap span {
	color: #fff !important;
}

/* 外部リンク */
.external_link_text {
	color: #fff;
}

/* メイン */
#mymainback {
	width: 100%;
	padding: 0px;
	display: block;
	background: url("/img/site/artful/pc/top_bg01.png") no-repeat top 20px left calc(50% + 487px),
				url("/img/site/artful/pc/top_bg02.png") no-repeat top 170px left calc(50% - 400px) #b63131;
}
p#skip {
	color: #fff;
}

/* 自由編集上 スライドショー */
#jiyuu_head_wrap {
	padding: 0 0 100px;
	background: #e5632e;
	position: relative;
	z-index: 1;
}
#jiyuu_head_wrap::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 260px;
	background: linear-gradient(0deg, rgb(182, 49, 49) 3%, rgb(229, 99, 46) 100%);
	bottom: 0px;
	z-index: -1;
}
#jiyuu_head_wrap > * {
	width: 1080px;
	margin: 0px auto;
}
#jiyuu_head .free_box img {
	width: 100% !important;
	height: 520px !important;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* スライドコントロールボタン */
#mp_control_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	-webkit-box-pack: end;
		-ms-flex-pack: end;
			justify-content: flex-end;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
}
#mp_control_box button[id*="_control_"] {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 0px 0px 3px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	color: #fff !important;
	border: none;
	background: none;
	line-height: 0;
}
#mp_control_box button#mp_control_prev {
	margin: 0px;
}
#mp_control_box button#mp_control_play {
	display: none;
}

/* スライドナビゲーションボタン */
ul.slick-dots {
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	list-style: none;
	-webkit-box-ordinal-group: 0;
		-ms-flex-order: -1;
			order: -1;
}
ul.slick-dots li {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 30px 0px 0px;
	padding: 0px;
}
ul.slick-dots li button {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 14px;
	height: 14px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100%;
	text-indent: -9999em;
	text-align: left;
	overflow: hidden;
	border: 1px solid #fff !important;
	background: #fff !important;
	color: #333333 !important;
}
ul.slick-dots li.slick-active button {
	background: #333333 !important;
	color: #ffffff !important;
	border-width: 3px !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;
}
#footer_banner ul.banner_list li {
	display: inline-block;
	vertical-align: top;
	width: 200px;
	margin: 0px 20px 0px 0px;
}
#footer_banner ul.banner_list li:nth-child(5n) {
	margin-right: 0px;
}
#footer_banner ul.banner_list li:nth-child(n+6) {
	margin-top: 20px;
}
#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);
}

/* 新着情報 */
.section_information {
	width: 1080px;
	margin: 0px auto;
}
.section_information_ttl {
	display: inline-block;
	margin: 0px 0px 50px;
	font-size: 3.2rem;
	line-height: 1;
	color: #fff;
	position: relative;
	letter-spacing: 0.1em;
}
.section_information_ttl::after {
	content: "";
	position: absolute;
	background: url("/img/site/artful/pc/red_squares.png");
	width: 460px;
	height: 26px;
	margin-left: 30px;
	bottom: 0px;
}
.section_information_ttl span {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 0 3px 25px;
	line-height: 0;
}
.section_information_list ul li a {
	color: #fff;
}
.section_information p.no_data {
	margin: 0px;
	padding: 20px 0px;
}
.section_information_list img.icon_new {
	vertical-align: middle;
	margin-left: 12px;
}
.section_information_list ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.section_information_list ul li {
	width: 100%;
	display: table;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding: 0px 0px 26px;
	margin: 0px 0px 26px;
	font-size: 1.6rem;
	color: #fff;
}
.section_information_list ul li:last-child {
	margin-bottom: 0px;
}
.section_information_list ul li > span {
	display: table-cell;
	vertical-align: top;
}
.section_information_list ul li > span.article_date {
	width: 15em;
}

/* 新着情報（一覧 / RSS） */
.section_information_list div.link_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: end;
		-ms-flex-pack: end;
			justify-content: flex-end;
	gap: 20px;
	margin: 40px 0 0;
}
.section_information_list div.link_box span {
	width: 180px;
}
.section_information_list div.link_box span a {
	display: block;
	border-radius: 20px;
	color: #333333;
	font-size: 1.4rem;
	line-height: 1;
	text-decoration: none;
	margin: 0px;
	padding: 14px 26px 12px;
	background: url("/img/site/artful/pc/arrow_icon.png")no-repeat right 18px center #fff;
}
.section_information_list div.link_box span a:hover {
	text-decoration: underline;
}
/* 八頭町名誉町民 */
#honorary_citizen h2 {
	width: 1080px;
	margin: 0px auto;
	padding: 0px 0 25px;
	font-size: 2.6rem;
	line-height: 1;
	color: #fff;
	position: relative;
}
#honorary_citizen h2::before {
	content: "";
	display: inline-block !important;
	vertical-align: middle;
	background: url("/img/site/artful/pc/green_square_icon.png");
	width: 26px;
	height: 26px;
	margin: 0 20px 5px 0;
}
#citizen_info_wrap {
	background: url("/img/site/artful/pc/comet_bg.png")no-repeat left calc(50% - 275px) top 0px,
				url("/img/site/artful/pc/comet_img.png")no-repeat left calc(50% - 300px) bottom -1px,
				url("/img/site/artful/pc/temple_bg.png")no-repeat right calc(50% - 448px) top 0px,
				url("/img/site/artful/pc/temple_img.png")no-repeat right calc(50% - 299px) bottom -21px #f8ebeb;
}
#citizen_info {
	width: 1080px;
	margin: 0px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: start;
		-ms-flex-align: start;
			align-items: flex-start;
	position: relative;
}
#citizen_info > * {
	width: 515px;
	text-shadow: 0px 0px 8px #f7eaeb,
				 0px 0px 8px #f7eaeb,
				 0px 0px 8px #f7eaeb, 
				 0px 0px 8px #f7eaeb, 
				 0px 0px 8px #f7eaeb, 
				 0px 0px 8px #f7eaeb,
				 0px 0px 8px #f7eaeb,
				 0px 0px 8px #f7eaeb;
}
#citizen_info::before {
	content: "";
	position: absolute;
	width: 4px;
	height: 100%;
	background: #b63131;
	left: 50%;
	translate: -50% 0;
}
#citizen_info h3 {
	margin: 0px;
	padding: 40px 0 0;
	font-size: 3rem;
	font-weight: normal;
	line-height: 1.2;
	color: #333333;
	letter-spacing: 0.15em;
}
#citizen_info h3 span {
	font-size: 1.2rem;
	margin-left: 19px;
	letter-spacing: 0.1em;
}
#citizen_box02 h3 span {
	margin-left: 27px;
}
span.biography_note {
	display: block;
	font-size: 1.2rem;
	line-height: 1;
	padding: 12px 0 35px;
}
#citizen_info p {
	font-size: 1.6rem;
	line-height: 3rem;
	letter-spacing: -0.6px;
	margin: 0;
}
#citizen_box02 p {
	letter-spacing: -0.7px;
}
a.detail_link {
	display: inline-block;
	width: 22rem;
	padding: 14px 26px 12px;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	text-decoration: none;
	font-size: 1.4rem;
	line-height: 1;
	color: #333333;
	background: url("/img/site/artful/pc/arrow_icon.png")no-repeat right 18px center #fff;
	border-radius: 20px;
	-webkit-box-shadow: 0px 0px 8.5px 1.5px rgba(51, 51, 51, 0.6);
			box-shadow: 0px 0px 8.5px 1.5px rgba(51, 51, 51, 0.6);
	margin: 135px 0px 30px;
	text-shadow: none;
	transition: all 0.3s;
	border: 1px solid transparent;
}

@media (hover: hover) {
	a.detail_link:hover {
		box-shadow: none;
		border-color: #b63131;
	}
}

/* Facebook・Calendar */
#sns_calendar_wrap {
	width: 1080px;
	margin: 0px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	padding: 90px 0px 60px;
}
#sns_calendar_wrap > div {
	width: 500px;
}
#sns_calendar_wrap h2 {
	color: #fff;
	margin: 0px 0px 30px;
	font-size: 2rem;
	line-height: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	position: relative;
}
.fb_tl a {
	color: #fff;
}
#facebook h2::before,
#calendar h2::before {
	content: "";
	display: inline-block !important;
	vertical-align: bottom;
	width: 26px;
	height: 26px;
	margin-right: 20px;
}
#facebook h2::before {
	background: url("/img/site/artful/pc/blue_square_icon.png");
}
#calendar h2::before {
	background: url("/img/site/artful/pc/yellow_square_icon.png");
}
.gg_cal iframe {
	width: 500px;
	max-width: 100%;
	height: 375px;
}
.gg_cal img {
	max-width: 100%;
	height: auto;
}


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

/* 共通 */
.color_change #jiyuu_head_wrap::after,
.color_change .section_information_ttl,
.color_change #sns_calendar_wrap h2,
.color_change #citizen_info_wrap,
.color_change #honorary_citizen h2,
.color_change #citizen_info h3 {
	background: transparent !important;
}
.color_change #citizen_info::before {
	background-color: rgba(255, 255, 255, 0.5) !important;
}
.color_change .section_information {
	outline: none !important;
}
.color_change .section_information_ttl span {
	-webkit-filter: inherit;
	filter: inherit;
}

/* 黒 */
.color_black a.detail_link {
	background-color: #333 !important;
}
.color_black .section_information_list div.link_box span {
	border-radius: 20px;
}
/* 青 */
.color_blue a.detail_link {
	background-color: #0000aa !important;
}

/* ==================================================
PC ここまで
================================================== */


/* ==================================================
タブレット
================================================== */
@media screen and (max-width : 1099px) {

}
/* ==================================================
タブレット ここまで
================================================== */


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


	/* ========== トップページ ========== */

	/* スライドショー */
	#top_photo {
		width: auto;
		margin: 15px 15px 0px;
	}

	/* スライドショー（3枚表示） */
	#top_photo.triple #top_photo_list {
		width: auto;
		left: auto;
		-webkit-transform: none;
			-ms-transform: none;
				transform: none;
	}

	/* スライドコントロールボタン */
	*[id*="_control_box"] {
		text-align: center;
	}

	/* スライドナビゲーションボタン */
	*[id*="_control_navigation"] {
		margin: 5px 20px;
	}

	/* メイン */
	#mymainback {
		width: auto;
		margin: 0px;
		z-index: 2;
		position: relative;
		background-image: none;
	}

	/* バナー広告 */
	#footer_banner {
		width: auto;
		max-width: 420px;
		margin: 0px auto 40px;
	}
	#footer_banner ul.banner_list {
		padding: 0px calc(var(--mymainback-margin-side, 15px) - 5px);
	}
	#footer_banner ul.banner_list li,
	#footer_banner ul.banner_list li:nth-child(5n),
	#footer_banner ul.banner_list li:nth-child(n+6) {
		width: calc(50% - 10px);
		margin: 5px;
	}

	.banner_text span:nth-child(2n) {
		font-size: var(--fontsize-main-small, 1.3rem);
	}

	/* 自由編集上 スライドショー */
	#jiyuu_head_wrap {
		padding: 0 0 80px;
	}
	#jiyuu_head_wrap::after {
		height: 140px;
		bottom: -1px;
	}
	#jiyuu_head_wrap > * {
		width: auto;
		margin: 0px 10px;
	}
	#jiyuu_head .free_box img {
		height: 100% !important;
		aspect-ratio: 355 / 171;
	}
	#mp_control_box button[id*="_control_"] img {
		width: 30px;
		height: 30px;
	}
	ul.slick-dots li button {
		width: 12px;
		height: 12px;
	}

	/* 新着情報 */
	.section_information {		
		width: auto;
		background: url("/img/site/artful/pc/top_bg01.png") no-repeat top 60px right -49px,
					url("/img/site/artful/pc/top_bg02.png") no-repeat bottom 10px left -70px;
		background-size: 274px auto, 361px auto;
		padding: 0px 20px 70px;
	}
	.section_information h2 {
		margin: 0px 0px 27px;
		padding-bottom: 39px;
		display: block;
	}
	.section_information_ttl span {
		margin: 0 0 5px 25px;
	}
	.section_information_ttl::after {
		left: 0px;
		width: 100%;
		max-width: 335px;
		height: 19px;
		margin: 0;
		background-size: auto 100%;
	}
	.section_information_list ul li {
		display: block;
		width: auto;
		margin: 0px;
		padding: 25px 0px;
		position: relative;
	}	
	.section_information_list ul li > span {
		display: block;
	}
	.section_information_list ul li > span.article_date {
		width: auto;
		margin-bottom: 8px;
	}	

	.section_information p.no_data {
		padding: 0px 20px 20px;
	}

	.section_information_list img.icon_new {
		vertical-align: top;
	}
	/* サムネイルあり */
	/*
	.section_information_list img.icon_new {
		top: 15px;
		left: 0px;
	}
	*/

	/* 新着情報（一覧 / RSS） */
	.section_information_list div.link_box {
		gap: 16px;
		max-width: 335px;
		margin-left: auto;
	}

	/* Facebook・Calendar */
	#sns_calendar_wrap {
		flex-direction: column;
		width: auto;
		padding: 0px 20px 40px;
	}
	#sns_calendar_wrap > div {
		max-width: 100%;
		margin: 0 auto 60px;
	}
	#facebook {
		margin: 0 0 60px;
	}
	#sns_calendar_wrap h2 {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
		letter-spacing: 0.2em;
	}
	@media screen and (max-width: 330px) {

		#sns_calendar_wrap h2 {
			letter-spacing: 0;
		}

	}

	/* 八頭町名誉町民 */
	#honorary_citizen h2 {
		width: auto;
		margin: 0px 20px;
	}
	#citizen_info_wrap {
		background: none;
	}
	#citizen_info {
		display: block;
		width: auto;
	}
	#citizen_info > * {
		width: auto;
		padding: 0px 20px;
	}
	#citizen_info::before {
		content: none;
	}
	#citizen_box01 {
		background: url("/img/site/artful/pc/comet_bg.png")no-repeat right top,
					url("/img/site/artful/pc/comet_img.png")no-repeat left -45px bottom #f8ebeb;
		background-size: 328px auto, 112% auto;
		border-bottom: 2px solid #b63131;
	}
	#citizen_box02 {
		background: url("/img/site/artful/pc/temple_bg.png")no-repeat right -37px top,
					url("/img/site/artful/pc/temple_img.png")no-repeat right -45px bottom #f8ebeb;
		background-size: auto 190px,112% auto;
	}
	#citizen_info h3 span {
		display: block;
		margin: 3px 0 0;
	}
	span.biography_note {
		padding: 18px 0px 40px;
	}
	#citizen_box01 p {
		letter-spacing: -0.04em;
	}
	#citizen_box02 p {
		letter-spacing: -0.8px;
	}
	#citizen_box01 p br:last-child {
		display: none;
	}
	#citizen_box02 p br {
		display: none;
	}
	a.detail_link {
		width: 220px;
		margin: 92px 0px 20px;
	}
	@media screen and (max-width: 320px) {
		#citizen_box01 {
			background-size: 328px auto, 115% auto;
		}
		#citizen_box02 {
			background-size: auto 190px,115% auto;
		}
	}


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

	/* 共通 */
	.color_change .section_information,
	.color_change #citizen_box01,
	.color_change #citizen_box02 {
		background: transparent !important;
	}
	/* 黒 */
	.color_black * {

	}
	/* 青 */
	.color_blue * {

	}

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