/*-------------------------
釧路創生会
kushiro-souseikai.com
--
2026-10-13	JKAバナー調整分
2024-08-07	トップページ専用（style.css より分離）
-------------------------*/


/*----------------------
Simple Slider
--------------------- */
#slider,
#slider img { width: 100vw; height: 47vw; max-width: 1600px; max-height: 750px; }
#slider img { width: clamp(200px, 100vw, 1600px); height: clamp(94px, 47vw, 750px); }
#slider 	{ position: relative; margin: 0 auto; background: url(./loader.gif) no-repeat center; }
#slider img	{ position: absolute; top: 0; left: 0; object-fit: cover; }

/*----------------------
トップページ
コンテンツボックス
--------------------- */
#topContent	{
	font-size: .8em;
	text-align: center;
	background: url(bg_sep2.jpg) no-repeat center center;
	background-size: cover;
}
#topContent		{ margin-top: 10px; }
#topContent ul	{ margin: 0; padding: 0; }
#topContent ul	{ display: flex; flex-wrap: wrap; }
#topContent li	{ flex: 1 0 45%; border: 1px solid #fff; }
#topContent li	{ list-style-type: none; border-bottom: 2px solid #fff; }
#topContent li:nth-child(1)	{ background-color: rgba(128,255,128,.4); }
#topContent li:nth-child(2)	{ background-color: rgba(255,224,  0,.4); }
#topContent li:nth-child(3)	{ background-color: rgba(255,192, 64,.4); }
#topContent li:nth-child(4)	{ background-color: rgba(128,255,192,.4); }
#topContent h3	{ font-size: 1.3em; }
#topContent a {
	position: relative;
	display: block;
	padding: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border-top: 5px solid #999;
	transition: all .2s ease-out;
}
#topContent a:hover	{ color: #fff; background-color: #e93; border-color: #f00 !important; }

#topContent li:nth-child(1) a	{ border-color: rgba(128,180, 64,.8); }
#topContent li:nth-child(2) a	{ border-color: rgba(240,192, 64,.8); }
#topContent li:nth-child(3) a	{ border-color: rgba(255,128,  0,.8); }
#topContent li:nth-child(4) a	{ border-color: rgba( 64,192,128,.8); }


/*----------------------
トップページ
バナー
--------------------- */
#topBanner	{
	font-size: .9em;
	text-align: center;
	background: url(bg_gras.jpg) no-repeat center center;
	background-size: cover;
}
#topBanner ul	{ margin: 0; padding: 0; }
#topBanner li	{ list-style-type: none; }
#topBanner li	{ background-color: rgba(255,255,255,.5); border-bottom: 2px solid #fff; transition: .3s; }
/*#topBanner li+li	{ border-left: 2px solid #fff; }*/
#topBanner li:hover	{ color: #fff; background-color: rgba(172,64,0,.8); }
#topBanner h3	{ padding: 5px 0; font-size: 1.6em; }
#topBanner a {
	display: block;
	padding: 10px;
	color: inherit;
	text-decoration: none;
}
/* JKAバナー調整 */
#topBanner ul.jka	{
	padding: 20px 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
	border: none !important;
	li	{ flex: initial; background-color: transparent !important; border: none !important; }
	a { display: block; padding: 0; transition: .2s; }
}
/* Footer */
#footer	{ background: url(bg_gras.jpg) no-repeat center center / cover; }



/*----------------------
トップページ
トピックス	topTopics
--------------------- */
/*
#topTopics		{ text-align: center; }
#topTopics ul	{ margin: 1em auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around; }
#topTopics li	{ list-style-type: none; border-top: thin solid #7ae; transition: .3s; }
#topTopics li	{ width: 45%; padding: 1em 1%; }
#topTopics li:hover	{ background-color: #ffc; }
#topTopics li .thumbox	{ display: inline-block; width: 20%; margin-right: .5em; padding: 5px; box-shadow: 0px 0px 9px rgba(0, 0, 0, .2); }
#topTopics li a	{ display: block; color: inherit; text-decoration: none; }
#topTopics .date	{ display: inline-block; color: #999; }
#topTopics .more	{ margin: 0 1rem; font-size: .9em; text-align: right; }
#topTopics .ttle	{ display: block; margin-top: .2em; color:#222; font-weight: bolder; }
*/

/* MULTI-LINE レスポンシブ対応のテキスト省略 
#topTopics .text {
	overflow: hidden;
	max-height: 4.8em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
}
#topTopics .sns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0;
	padding: 0;
}
#topTopics .twitter,
#topTopics .facebook {
	margin: 1em;
	width: 460px;
	height: 600px;
	background-color: #fff;
	box-shadow: 0px 0px 9px rgba(000,000,000,0.2);
	overflow: scroll;
}
*/




/*----------------------
SmartPhone Landscape (横)
--------------------- */
@media screen and (min-width:480px) {

	#topContent		{ font-size:  .9em; }
	#topContent h3	{ font-size: 1.6em; }

	#topBanner		{}
	#topBanner ul	{ display: flex; flex-wrap: wrap; }
	#topBanner li	{ flex: 1 0 45%; border: 1px solid #fff; }

	#topTopics .ttle	{ font-size: 1.2em; }
}



/*----------------------
Tablet
--------------------- */
@media screen and (min-width:768px) {

	#topContent		{ border-bottom: 2px solid #fff; }
	#topContent ul	{ flex-wrap: nowrap; }
	#topContent li	{ flex: 1; border: none; }
	#topContent li+li	{ border-left: 2px solid #fff; }

	#topBanner	{ font-size: .8em; }
	#topBanner ul	{ flex-wrap: nowrap; border-bottom: 2px solid #fff; }
	#topBanner li	{ flex: 1 0 auto; border: none; }
	#topBanner li+li	{ border-left: 2px solid #fff; }
}

/*----------------------
PC
--------------------- */
/* @media screen and (min-width:1100px) { */
@media screen and (min-width:1010px) {

	#topContent h3	{ font-size: 1.8em; }

	#topBanner	{ font-size: .9em; }
	#topBanner li	{ flex: 1; }

	/* JKAバナー調整 */
	#topBanner ul.jka	{ padding: 40px 0; gap: 40px; }
	#topBanner ul.jka a:hover	{ transform: scale(1.05); }
}