@charset "utf-8";

/*
------ font-family ---------------------------------------------
*/

.mincho {
	font-family: "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.gothic {
	font-family: "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

body,
input,
textarea {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
}

/*
------ common ---------------------------------------------
*/

body {
	margin: 106px 0 0 0;
}

textarea,
input {
	outline: none;
}

/*
------ Column element float setting ---------------------------------------------
*/

footer .wrapper {
	display: flex;
}

/*
------ No list decoration ---------------------------------------------
*/

header ul,
footer .footer_navi,
#side_manu ul,
#news_area ul,
.navi_main ul,
#guidance_area ul,
/*.page_and_post_tree ul,*/
.menu-in-a-page,
#mobile_ui ul,
#clone_navi,
.mobile_navi_sub,
.sub_cat_list,
#mobile_navi_contents ul,
.ts_index {
	list-style: none;
	padding-left: 0;
}

/*
------ font weight 400 ---------------------------------------------
*/

.font_400,
#news_area ul li,
#news_area p,
footer,
#mobile_ui .text {
	font-weight: 400 !important;
}

/*
------ font weight 500 ---------------------------------------------
*/

.font_500,
header span,
header a,
#guidance_area .contents,
#towns_info_area table td,
#towns_info_area p,
.post_info,
.wp-pagenavi {
	font-weight: 500 !important;
}

/*
------ font weight 700 ---------------------------------------------
*/

.font_700,
.navi_main .navi_close,
.navi_main li a,
#news_area h2,
#news_area .more a,
#news_area .special h3,
#towns_info_area b,
#guidance_area h3,
#towns_info_area h3,
footer .inquiry a,
#side_manu_open,
#side_manu,
#side_manu a,
.tool_title,
.searchform input[type="submit"],
article.post .title,
article.archive .title,
/*.page_and_post_tree a,*/
.teshio_slide_info_box,
.slide_content_mark li,
.mn_title {
	font-weight: 700 !important;
}

/*
------letter spacing 2% ---------------------------------------------
*/

.font_2p,
#news_area {
	letter-spacing: 0.02em;
}

/*
------letter spacing 4% ---------------------------------------------
*/

.font_4p,
.page_header,
.post p,
#main_navi,
#user_tool,
.searchform input[type="submit"],
.navi_tool_contents,
#guidance_area li .text,
#towns_info_area h3,
#towns_info_area p,
footer {
	letter-spacing: 0.04em;
}

/*
------letter spacing 8% ---------------------------------------------
*/

.font_8p,
.teshio_slide_info_box,
#news_area h2,
#guidance_area .frequently_viewed h3 {
	letter-spacing: 0.08em;
}


/*
------ Responsive element ---------------------------------------------
*/


@media screen and (min-width: 1241px) {

	.wrapper {
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	#guidance_area .frequently_viewed,
	#guidance_area .banner_group,
	#banner_group_wrapper {
		width: 1100px;
	}

}

@media screen and (min-width: 801px) and (max-width: 1240px) {

	#side_manu_open{
		display: none;
	}

	.wrapper {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	#news_area ul {
		padding-left: 0.5em !important;
		padding-right: 0.5em;
	}

	#news_area ul a {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#guidance_area .frequently_viewed,
	#guidance_area .banner_group,
	#banner_group_wrapper {
		width: 100%;
	}

	#guidance_area .contents {
		display: initial;
		gap: initial;
		text-align: center;
	}

	#guidance_area .left {
		width: initial;
		column-count: initial;
		column-gap: initial;
	}

	#guidance_area .right {
		width: initial;
	}

	#guidance_area li {
		margin-left: 15px;
		margin-right: 15px;
	}

	footer .inquiry {
		margin-bottom: 25px;
	}

	footer .footer_navi {
		display: block;
	}

	footer .footer_navi li:not(:last-of-type) {
		padding-right: initial;
		margin-right: initial;
		border-right: initial;
		margin-bottom: 18px;
	}

}

@media screen and (max-width: 800px) {

	body {
		margin: 0;
	}

	header,
	header .site_name,
	header .wrapper {
		height: 78px;
	}

	header .site_name {
		line-height: 78px;
	}

	header .site_name img {
		height: 58px;
		width: auto;
		line-height: 58px;
	}

	#side_manu_open {
		display: none !important;
	}

	/* ts sub slider */

	.ts_box_sub {
		display: none;
	}

	/* sub page */

	article.post,
	article.archive {
		margin-top: 0;
	}

	article .wrapper {
		/*padding-top: 78px !important;*/
	}

	article.post .title,
	article.archive .title {
		margin-top: 78px !important;
		margin-bottom: 15px !important;
		border-radius: initial !important;
		width: 100%;
		font-size: 1.8em;
		line-height: 135%;
		padding: 0.3em 0.5em;
		box-sizing: border-box;
	}

	/* post page heade */

	.page_header {
		margin: 0 0 2.0em 0;
	}

	.post_info .post_date {
		margin-left: 0;
	}

	.post p,
	.post h3,
	.post h4,
	.post h5,
	.post h6,
	.editor-area p,
	.editor-area h3,
	.editor-area h4,
	.editor-area h5,
	.editor-area h6,
	.post .wp-gallery-set {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* comon */

	.wrapper {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	/* 新着情報 */

	#news_area {
		background-image: initial;
	}

	#news_area ul {
		padding: 0 !important;
	}

	#news_area ul a {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#news_area .more {
		margin-right: 0;
	}

	#news_area .wrapper {
		display: block;
		gap: initial;
		justify-content: initial;
	}

	#news_area .news h2 {
		background-color: initial !important;
		padding: 0;
	}

	#news_area a span {
		display: block;
	}

	#news_area ul .date {
		background-image: initial;
	}

	#news_area ul .news_title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-left: 1.6em;
		font-weight: 500;
		background-image: url(../image/news_arrow.png);
		background-repeat: no-repeat;
		background-size: 18px 18px;
		background-position: left 0px top 0.3em;
	}

	/* 広報てしお */

	#news_area .special {
		display: none;
	}

	#guidance_area {
		padding-bottom: 4.0em;
	}

	/* よく見られるページ */

	#guidance_area .contents {
		display: initial;
		gap: initial;
		text-align: center;
	}

	#guidance_area .left {
		width: initial;
		column-count: initial;
		column-gap: initial;
	}

	#guidance_area .right {
		width: initial;
	}

	#guidance_area li {
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 15px !important;
	}

	/* 天塩町の位置・人口・防災 */

	#towns_info_area .wrapper {
		padding: 0;
		display: initial;
		gap: initial;
		justify-content: initial;
		margin: 0;
	}

	#towns_info_area .wrapper div {
		width: initial;
	}

	#towns_info_area h3 {
		background: #E0E8EB;
		border-top: 4px solid #32454D;
		border-bottom: 0;
		padding: 16px;
		margin: 0 0 25px 0;
	}

	#towns_info_area .contents {
		max-width: 680px;
		min-width: 340px;
		margin: 0 auto;
		padding: 0 5% 35px 5% !important;
	}

	#towns_info_area .location img {
		max-width: 340px;
		height: auto;
	}

	/* footer */

	footer .wrapper {
		display: initial;
		flex-wrap: nowrap;
	}

	footer .wrapper p {
		margin-top: 0;
	}

	footer .footer_navi {
		display: block;
		justify-content: initial;
		text-align: center;
		margin-bottom: 0;
	}

	footer .footer_navi li {
		padding-left: initial !important;
		padding-right: initial !important;
		margin-right: initial !important;
		margin-bottom: 15px;
		border-right: 0 !important;
		box-sizing: border-box;
		width: 48%;
		display: inline-block;
	}

	footer .footer_navi a {
		display: inline-block;
		padding: 8px;
	}

	footer .left {
		width: initial;
		text-align: center;
	}

	footer .right {
		display: none;
	}

}

/*
	ヘッダー内コンテンツ 1280px ～ 1160px
	少しヘッダーを狭く細くする
*/

@media screen and (min-width: 801px) and (max-width: 1280px) {

	header,
	header .site_name,
	header .wrapper {
		height: 98px;
	}

	header .site_name {/* ロゴ少し小さくする？ */
		width: 240px;
		min-width: 240px;
		line-height: 98px;
	}

	header .site_name img {
		width: 200px;
		height: auto;
	}

	header #user_tool {
		width: 200px;
		min-width: 200px;
	}

	#main_navi li:not(#main_navi li li) {
		width: 114px;
	}

	#main_navi .icon_set {
		margin-top: -12px;
	}

	#main_navi .icon_set .icon {
		width: 58px;
		height: 58px;
	}

	#main_navi svg {
		margin: 10px;
	}

	#main_navi li .text {
		/*font-size: 90%;*/
	}

	.navi_main {
		top: 90px;
	}

	header #user_tool {
		border-left: 0;
	}

	#user_tool {
		height: 50px;
		margin-top: 12px;
		padding-left: 12px;
	}

}

/* バナースライダー */

@media screen and (min-width: 441px) and (max-width: 800px) {

	#guidance_area .frequently_viewed,
	#guidance_area .banner_group,
	#banner_group_wrapper {
		width: 380px;
		margin-left: auto;
		margin-right: auto;
	}

	#banner_group_inside {
		margin-bottom: 15px;
	}

}

@media screen and (max-width: 440px) {

	#guidance_area .frequently_viewed,
	#guidance_area .banner_group,
	#banner_group_wrapper {
		width: calc(100% - 10px);
		margin-left: 5px;
		margin-right: 5px;
	}

	#banner_group_inside {
		margin-bottom: 15px;
	}

	#banner_group_wrapper img {
		width: 100%;
		height: auto;
	}

}

/* teshio slider - miage size */

@media screen and (min-width: 1241px) {

	#teshio_slide_display,
	#teshio_slide_loading,
	.ts_contents, .ts_ui_box {
		width: 100%;
		height: 580px;
	}

}

/* pc image ratio */

@media screen and (min-width: 651px) and (max-width: 1240px) {

	#teshio_slide_display,
	#teshio_slide_loading,
	.ts_contents, .ts_ui_box {
		width: 100%;
		min-height: 298px;
		height: calc(100vw * 0.42);
	}

}

/* mobile image ratio (375 x 298 > 1.2584:1) */

@media screen and (min-width: 461px) and (max-width: 650px) {

	#teshio_slide_display,
	#teshio_slide_loading,
	.ts_contents, .ts_ui_box {
		width: 100%;
		height: calc(100vw * 0.79);
	}

}

@media screen and (max-width: 460px) {

	#teshio_slide_display,
	#teshio_slide_loading,
	.ts_contents, .ts_ui_box {
		width: 100%;
		height: 298px;
	}

}

/* スライダー画像の切り替え境界は 650px */
/* mobile 向けイメージの場合はスライダーとヘッダーを重ねる */

@media screen and (min-width: 651px) and (max-width: 800px) {

	.ts_box {
		margin-top: 78px;
	}

}

@media screen and (max-width: 800px) {

	.ts_box {
		padding: 0px;
		margin-bottom: 25px;
	}

	.ts_contents {
		background-position: center center;
	}

	.teshio_slide_info_box {
		padding: 3px 16px 5px 16px;
		bottom: 8px;
		right: 8px;
		width: initial;
	}

	.ts_index {
		display: none;
	}

}

/*
------ Responsive header ---------------------------------------------
*/

.display_middle header #main_navi,
.display_middle header #user_tool,
.display_narrow header #main_navi,
.display_narrow header #user_tool {
	display: none;
}

.display_middle header .header_wrapper,
.display_narrow header .header_wrapper {
	text-align: center;
}

.display_wide header .header_wrapper,
.display_wide header #main_navi:not(#main_navi ul) {
	display: flex;
	justify-content: center;
}

.display_middle header .site_name,
.display_narrow header .site_name {
	margin-left: auto;
	margin-right: auto;
}

.display_middle #side_manu_open,
.display_narrow #side_manu_open {
	display: none;
}

.display_wide #side_manu_open {
	display: inline-block;
}

/*
------ Responsive mobile UI ---------------------------------------------
*/

.display_wide #mobile_ui {
	display: none;
}

/*
------ page_up_home ---------------------------------------------
*/

.display_middle #up_the_page,
.display_narrow #up_the_page {
	display: none;
}

.display_wide #up_the_page {
	display: block;
}

/*
------ reCAPTCHA v3 ---------------------------------------------
*/

.display_middle .grecaptcha-badge,
.display_narrow .grecaptcha-badge {
	bottom: 96px !important;
}

/*
------ webcam ---------------------------------------------
*/

.display_wide #towns_info_area .wrapper .livecam,
.display_middle #towns_info_area .wrapper .livecam {
	position: fixed;
	bottom: 16px;
	left: 16px;
	box-sizing: border-box;
	width: 280px;
	background-color: rgba(70,70,70,0.55);
	border-radius: 3px;
	padding: 10px 18px 7px 18px;
	backdrop-filter: blur(12px);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.25);
	z-index: 999;
}

.display_wide #towns_info_area .wrapper div .contents,
.display_middle #towns_info_area .wrapper div .contents {
	padding-left: 0;
	padding-right: 0;
}

.display_wide #towns_info_area .wrapper .livecam h3,
.display_middle #towns_info_area .wrapper .livecam h3,
.display_wide #towns_info_area .wrapper .livecam p,
.display_middle #towns_info_area .wrapper .livecam p {
	padding: 0;
	margin: 0;
	border: 0;
}

.display_wide #towns_info_area .wrapper .livecam h3,
.display_middle #towns_info_area .wrapper .livecam h3 {
	text-align: center;
	color: #fff;
	font-size: 110%;
	font-weight: 500 !important;
}

.display_wide #towns_info_area .wrapper .livecam img,
.display_middle #towns_info_area .wrapper .livecam img {
	margin-top: 8px;
	margin-bottom: 3px;
	vertical-align: middle;
}

.display_wide #towns_info_area .wrapper .livecam span,
.display_middle #towns_info_area .wrapper .livecam span {
	font-size: 72%;
	color: #fff;
}

.display_wide #livecam_close,
.display_middle #livecam_close {
	display: inline-block;
	width: 32px !important;
	height: 32px;
	cursor: pointer;
	position: absolute;
	top: 6px;
	right: 6px;
}

.display_wide #livecam_close svg,
.display_middle #livecam_close svg {
	width: 14px;
	height: 14px;
	margin: 9px;
	fill: #eee;
}

.display_wide #livecam_close:hover,
.display_middle #livecam_close:hover {
	background-color: rgba(255, 255, 255, 0.17);
}

.display_narrow #towns_info_area .wrapper .livecam {
}

.display_narrow #livecam_close {
	display: none;
}