@charset "utf-8";

/*
 * home.css
 * create 2024-05-20
 *
 * 2024-07-11 「統計データ」「ニュースレター・資料」欄にあるテキストを削除 cssを調整
 *
 */



/* ------------------------------------------------------------- */
/* ------ layout ----------------------------------------------- */
/* ------------------------------------------------------------- */
body.home  {
	position: relative;
	background: #fff;
}


body.home > .upper{
    display: grid;
	grid-template:
	". upper_content upper_content" auto
	/ var(--site_padding_side) var(--site_width) var(--site_padding_side);
	justify-content: center;
	justify-items: space-between;
	align-items: center;
	color:  var(--site_color);
	width: 100vw;
}

body.home main{
    display: contents;
}

body.home main > div{
    display: grid;
	grid-template:
	". center_content ." auto
	/ var(--site_padding_side) var(--site_width) var(--site_padding_side);
	justify-content: center;
	justify-items: space-between;
	align-items: center;
	color:  var(--site_color);
	width: 100vw;
	padding: 2.5rem 0;
}

body.home main > div > ul,
body.home main > div > section{
	grid-area: center_content;
}


/* ------------------------------------------------------------- */
/* ------ 上部 ----------------------------------------------- */
/* ------------------------------------------------------------- */

body.home > .upper,
body.home > main h2,
body.home > main h3
{
	font-family: "ヒラギノ角ゴシック" , "Hiragino Kaku Gothic ProN" , "Hiragino Sans" , "Noto Sans JP", "Hiragino Kaku Gothic" , sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	color: #575757;
}

body.home > .upper section {
	grid-area: upper_content;
	/* height: 47.25rem; */

	height: 49.25rem;
	padding-top: 4rem;
}

/* ------ 左上文言 ------- */
body.home > .upper p {
	display: inline-block;
	padding: 2.125rem 3.25rem 2.125rem 0;
	/* margin-bottom: 3.5rem; ログインはこちらがない場合　*/
	margin-bottom: 1em;
	border-radius: 1.875rem;
	font-size: 1.125rem;
	z-index: 1;
	background-color: rgba(255, 255, 255, 1);
}

body.home > .upper  p span{
	display: block;
	line-height: 2em;
}

body.home > .upper  p span:first-of-type {
	font-size: 1em;
}

body.home > .upper  p span:nth-of-type(2) {
	font-size: 2.2em;
}

body.home > .upper  p span:last-of-type {
	font-size: 2.8em;
}

body.home > .upper  p span b {
	font-size: 1.6em;
}



/* ------ リンク ------- */
body.home > .upper > section > ul,
body.home > .upper > section > dl {
	max-width: 24.5rem;
	width: 24.5rem;;
	display: flex;
	/* margin-bottom: 2rem; */
	margin-bottom: 1rem;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0.5rem;

}

body.home > .upper > section > ul{
	margin-bottom: 1rem;
}

body.home > .upper > section > dl  dt {

	font-size: 1.125rem;
	text-align: center;
	width: 100%;
	margin-bottom: 0.5rem;
	font-weight: bold;
}

body.home > .upper > section > dl  dd {
	display: inline-block;
}

body.home > .upper > section > ul li a,
body.home > .upper > section > dl  dd a {
	display: block;
	width: 100%;
	line-height: 1.25;
	padding: 0.75rem 3.9rem;
	text-align: center;
	color:#fff;
	background-color: #539734;
	position: relative;
	border-radius: 0.25rem;
	box-sizing: border-box;
	transition: all 0.3s;

}

body.home > .upper > section > ul li a svg{
	position: absolute;
	right: 1rem;
	top: calc(50% - 0.75rem);
	width: 1.5rem;
}



/* body.home > .upper > section > ul li a {
	background-color: #345297;
} */

body.home > .upper > section > ul li,
body.home > .upper > section > dl:last-of-type dd {
	width: 100%;
	margin-bottom: 0.5rem;
}

@media only screen and (max-width: 420px) {
	body.home > .upper > section > dl:last-of-type dd {
		width: calc(100% - 2rem);
	}
}

body.home > .upper > section > dl:last-of-type dd a{

	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	padding: 0.75rem 2em 0.75rem 1rem;
}


body.home > .upper > section > dl:last-of-type dd b {
	display: inline-block;
	background-color: #fff;
	border-radius: 0.2rem;
	color:rgb(225, 0, 0);
	padding: 0.25rem 0.5rem;
	font-weight: bold;
	margin-right: 1rem;
	white-space: nowrap;
	text-align: center;
}


body.home > .upper > section > dl dd a::after {
	display: block;
	content: '';
	/*width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg) skew(2.5deg, 2.5deg); */
	width: 0.8rem;
	height: 0.8rem;
	clip-path: polygon(0 10%, 10% 0, 60% 50%, 10% 100%, 0 90%, 40% 50%, 0 10%);
	background-color: #fff;
	position: absolute;
	top: calc(50% - 0.4rem);
	right: 1rem;
}

body.home > .upper > section > ul li a:hover,
body.home > .upper > section > dl dd a:hover {
	text-decoration: none;
	background-color: #2c5c15;
}

@media only screen and (max-width: 800px) {
	body.home > .upper p{
		font-size: 0.65rem;
		padding-right: 1rem;
	}
	body.home > .upper  p span:first-of-type {
		font-size: 1rem;
	}

	body.home > .upper > section > ul {

		/* width: 24.5rem;; */

	}

}

@media only screen and (max-width: 460px) {
	body.home > .upper p{
		font-size: 0.45rem;
		padding-right: 0;
	}
	body.home > .upper  p span:first-of-type {
		font-size: 0.8rem;
	}

	body.home > .upper > section > dl {
		justify-content: center;
	}
}

/* ------ スライダ ------- */
body.home > .upper #main_element #main_images{
	--main_images_height: 56rem;
	/* 初期は52.5rem */
}

body.home > .upper #main_element #main_images img {
	object-fit: cover;
	border-radius: 0 0 0 2.4rem;
	width: calc( ( ( 100vw - var(--site_width) ) / 2 ) +  (var(--site_width) * 0.72) ) !important;
	height: var(--main_images_height);
}

body.home > .upper #main_element,
body.home > .upper #main_image_window {
	display: contents;
	position: absolute;
	top: 0;
	right: 0;
	overflow: visible;

}
body.home > .upper #main_element #main_images {
	position: absolute;
	top: 0;
	right: 0;
	height: var(--main_images_height);
	text-align: center;
	overflow: hidden;
	width: calc( ( ( 100vw - var(--site_width) ) / 2 ) + ( var(--site_width) * 0.72) ) !important;
	z-index: -1;
}

@media only screen and (max-width: 600px) {
	body.home > .upper #main_element #main_images img,
	body.home > .upper #main_element #main_images{
		width: calc( ( ( 100vw - var(--site_width) ) / 2 ) + ( var(--site_width) * 0.95) ) !important;
		max-height: 26rem;
	}
}

body.home > .upper #main_element #main_element_buttons {
	position: absolute;
	top: 6.5rem;
	bottom: unset;
	right: 0;
	left: unset;
	z-index: 11;
}

body.home > .upper #main_element #main_element_buttons{
	display: flex;
	justify-content: center;
	align-items: center;
}
body.home > .upper #main_element #main_element_buttons li,
body.home > .upper #main_element #main_element_buttons li a{
	display: block;
	height: 9px;
	width: 12px;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

body.home > .upper #main_element #main_element_buttons li a{

	color: rgba(255, 255, 255, 0);
	width: 0.5rem;
	height: 0.5rem;
	/* border-radius: 50%; */
	clip-path: circle(50%);
	background: none;
	background-color: #fff;
	box-shadow: 0 0 1px 0 rgba(85, 85, 85, 0.05);
}

body.home > .upper #main_element #main_element_buttons li a.current{
	background-color: #555;
}

body.home > .upper #main_element #main_element_buttons li.prevbtn a,
body.home > .upper #main_element #main_element_buttons li.nextbtn a{
	background: none;
	overflow: visible;
	color: rgba(255, 255, 255, 0);
	font-weight: bold;

	width: 0.8em;
	height: 0.8em;
	clip-path: polygon(0 10%, 10% 0, 60% 50%, 10% 100%, 0 90%, 40% 50%, 0 10%);
	background-color: #555;
	border-radius: 0;
	box-shadow: none;
}

body.home > .upper #main_element #main_element_buttons li.prevbtn a:hover,
body.home > .upper #main_element #main_element_buttons li.nextbtn a:hover{

	/* border-color: #fff; */
	background-color: #fff;

}


body.home > .upper #main_element #main_element_buttons li.prevbtn a{
	transform: rotate(180deg);
}

body.home > .upper #main_element #main_element_buttons li a:hover{
	text-decoration: none;
}

@media only screen and (max-width: 1000px) {
	body.home > .upper #main_element #main_element_buttons{
		display: none;
	}
}


/* ------ レスポンシブ ----------------------------------------------- */

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

	body.home > .upper{
		display: grid;
		grid-template:
		"upper_slider upper_slider upper_slider" auto
		". upper_content ." auto
		/ var(--site_padding_side) var(--site_width) var(--site_padding_side);
		justify-content: center;
		justify-items: space-between;
		align-items: center;
		color:  var(--site_color);
		width: 100vw;
	}

	body.home > .upper #main_element{
		position: relative;
		grid-area: upper_slider;
		padding: 0;
	}

	body.home > .upper #main_element #main_images,
	body.home > .upper #main_element #main_images li,
	body.home > .upper #main_element #main_images li img,
	body.home > .upper #main_element #main_image_window{
		width: 100vw !important;
		max-height: 20rem;
	}

	body.home > .upper #main_element #main_images{
		position: relative;
		left: 0;
		padding: 0;
		margin: 0;
	}

	body.home > .upper section {

		height: auto;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: 0rem;
	}

	body.home > .upper #main_element #main_images img{
		border-radius: 0;
	}

}



/* ------------------------------------------------------------- */
/* ------ main 共通 ----------------------------------------------- */
/* ------------------------------------------------------------- */
body.home main h2{
	font-weight: bold;
	font-size: 2.5rem;
	text-align: center;
	padding: 0;
	line-height: 1.4;
}





/* ------------------------------------------------------------- */
/* ------ お知らせ ----------------------------------------------- */
/* ------------------------------------------------------------- */
body.home main #news{
	background-color: #f2f7f9;
}


body.home main #news section{

	display: grid;
	grid-template:
	"news_title news_title news_title" auto
	". news_cat news_list" auto
	/  1fr 10rem calc(var(--site_width) * 0.72 - 10rem);
	column-gap: 3.5rem;
	justify-content: center;
	justify-items: space-between;
	align-items: start;
}

body.home main #news section h2{

	grid-area: news_title;
}

body.home main #news section .cat_list{
	grid-area: news_cat;
	text-align: left;
	padding: 0;
	line-height: 1.4;
}


body.home main #news section .cat_list li{
	display: block;
	margin: 0 auto 1em;
	position: relative;
}


body.home main #news section .cat_list li a{
	position: relative;
	display: block;
	grid-area: news_cat;
	padding: 0;
	line-height: 2;
	text-align: left;
	padding-left: 2em;
	color: var(--site_color);
	border-radius: 2px;
	transition: all 0.3s;
}

body.home main #news section .cat_list li a.on{
	background: #fff;
	color: #000;
}

body.home main #news section .cat_list li a.off{
	background: none;
}

body.home main #news section .cat_list li a:hover{
	background: #fff;
	text-decoration: none;
	color: var(--site_link_color);
}


body.home #news section li span.news_cat::before,
body.home #news section li span.news_member::before,
body.home #news section li a::before{
	position: absolute;
	top: calc(50% - 0.3rem);
	left: 0.5rem;
	content: '';
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	/* border-radius: 50%; */

	clip-path: circle(50%);
}

body.home #news section li .news_cat_all::before{ background-color: #88cc44; }
body.home #news section li .news_cat1::before{ background-color: #3eba2b; }
body.home #news section li .news_cat2::before{ background-color: #208dc3; }
body.home #news section li .news_cat3::before{ background-color: #8858aa; }
body.home #news section li .news_cat4::before{ background-color: #c23685; }
body.home #news section li .news_cat5::before{ background-color: #e06a3b; }
body.home #news section li .news_cat6::before{ background-color: #edad0b; }

body.home #news section li span.news_member::before{ background-color: #333;}

body.home main #news section .cat_list li.news_cat+li.link,
body.home main #news section .cat_list li.link+li.link_to_list
{
	margin-top: 3em;
}

body.home main #news section .cat_list li.link+li.link_to_list
{
	font-weight: bold;
}

body.home main #news section .news_list{
	grid-area: news_list;
}

body.home main #news section .news_list li{
	/* display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: #dddddd; */
}

body.home main #news section .news_list li{
	display: grid;
	grid-template:
	"news_list_date news_list_cat news_list_member ." auto
	"news_list_title news_list_title news_list_title news_list_title" auto
	/  auto auto 1fr;
	column-gap: 0;
	row-gap: 0.25em;
	justify-content: start;
	justify-items: start;
	align-items: center;
	margin: 0 auto 1em;
	padding: 0 0 1em;
	border-bottom: 1px solid #dddddd;
	position: relative;
}

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


	body.home main #news section .news_list li{
		grid-template:
		"news_list_date news_list_date" auto
		"news_list_cat news_list_member" auto
		"news_list_title news_list_title" auto
		/  auto 1fr;

	}
}

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


	body.home main #news section .news_list li{
		grid-template:
		"news_list_date" auto
		"news_list_cat" auto
		"news_list_member" auto
		"news_list_title" auto
		/  auto 1fr;

	}
}




body.home main #news section .news_list li > span:first-of-type{
	grid-area: news_list_date;
	font-weight: bold;
	padding-right: 1em;
}

body.home main #news section .news_list li > span.news_cat{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	grid-area: news_list_cat;
	padding: 0.1em 1em;
	width: 9em;
	font-size: 0.8em;
	text-align: center;
	border: 1px solid #dddddd;
	border-radius: 0.2em;
	background-color: #fff;
	position: relative;
}

body.home main #news section .news_list li > span.news_cat.news_cat0{
	display: none;
}

body.home main #news section .news_list li > span.news_member{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	grid-area: news_list_member;
	padding: 0.1em 1em;
	width: 9em;
	font-size: 0.8em;
	text-align: center;
	border: 1px solid #dddddd;
	border-radius: 0.2em;
	background-color: #fff;
	position: relative;
}


body.home main #news section .news_list li a{

	grid-area: news_list_title;
	transition: all 0.3s;
}

body.home main #news section .news_list li b{
	display: inline-block;
	padding: 0 0.5em;
	line-height: 1.6em;
	color: #fff;
	font-size: 0.8em;
	border-radius: 0.8em;
	background-color: #c1272d;
	margin-left: 0.5em;
	white-space: nowrap;
}
body.home main #news section .news_list li a:hover{
	text-decoration: none;
	color: var(--site_color);
}
body.home main #news section .news_list li a b:hover,
body.home main #news section .news_list li a:hover b{
	text-decoration: none;
}

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


	body.home main #news section .news_list li a{

		display: block;
	}

}

@media only screen and (max-width: 800px) {
	body.home main #news section{

		grid-template:
		"news_title news_title" auto
		"news_cat news_list" auto
		/  10rem calc(var(--site_width) - 10rem);
		column-gap: 2rem;
		justify-content: center;
		justify-items: space-between;
		align-items: start;
	}

}

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

	body.home main #news section{
		column-gap: 1rem;
	}
	body.home main #news section .news_list li span:first-of-type{
		display: block;
	}

}


/* ------------------------------------------------------------- */
/* ------ 協賛企業 ----------------------------------------------- */
/* ------------------------------------------------------------- */
#sponsors section ul{

	width: 100%;
	/* display: grid;
	justify-content: center;
	justify-items: start;
	align-items: start;
	row-gap: 0.5rem;
	grid-template-columns: repeat( auto-fill, minmax(9rem , 20rem)); */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	column-gap: 0.5rem;
	row-gap: 0.5rem;

}

/* #sponsors section ul li,
#sponsors section ul li a, */
#sponsors section ul li a img
{
	max-height: 2.5rem;
	max-width: 22rem;
	margin: 1rem 2rem;
}

#sponsors section ul a,
#sponsors section ul a img
{

	height: 100%;

}


/* ------------------------------------------------------------- */
/* ------ 会員リンク ----------------------------------------------- */
/* ------------------------------------------------------------- */

#members_link > ul{
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: space-between;
	align-items: stretch;
	column-gap: 1px;
	row-gap: 1px;
}



#members_link > ul > li{
	width: calc(50% - 0.5px - 1.875rem - 1.875rem);
	padding: 1.2rem 1.875rem;
	color:  #fff;
	background: repeating-linear-gradient(45deg, #529738, #529738 3px, #569c3a 6px, #569c3a 12px , #529738 15px);

    display: grid;
	grid-template:
	"mem_links_img mem_links_title" 3.125rem
	"mem_links_img mem_links_link" 3.125rem
	/ 30% 70%;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}




#members_link > ul > li > *{
	text-align: left;
	width: 100%;
}

#members_link > ul > li p:has(img){
	grid-area: mem_links_img;
	width: 80%;
	margin-top: 1.2rem;
	margin-bottom: 1.2rem;
}

#members_link > ul > li:last-of-type img{
	width: 60%;
}

#members_link > ul > li h3{
	grid-area: mem_links_title;
	color:  #fff;
	font-size: 1.5625em;
}

/* #members_link > ul > li p:first-of-type{
	grid-area: mem_links_strings;
	text-align: left;
	width: 100%;
	padding-bottom: 0.75em;
	border-bottom: 1px dashed #fff;

} */

#members_link > ul > li p:last-of-type{
	grid-area: mem_links_link;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 0.75em;
	border-top: 1px dashed #fff;
}

#members_link > ul > li p:last-of-type span{
	font-size: 0.875em;
}

#members_link > ul > li p:last-of-type a{
	display: inline-block;
	padding-right: 1.5em;
	font-weight: bold;
	color: #fff;
	position: relative;
}

#members_link > ul > li p:last-of-type a::after{
	display: block;
	content: '';
	position: absolute;
	top: calc(50% - 0.4em);
	right: 0;
	width: 0.8em;
	height: 0.8em;
	clip-path: polygon(0 10%, 10% 0, 60% 50%, 10% 100%, 0 90%, 40% 50%, 0 10%);
	background-color: #fff;
}

@media only screen and (max-width: 968px) {
	#members_link > ul{
		flex-wrap: wrap;
		justify-content: center;
	}

	#members_link > ul > li{

		width: 100%;

	}

}

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

	#members_link > ul > li{



		grid-template:
		"mem_links_img" auto
		"mem_links_title" 3.125rem
		"mem_links_strings" 1fr
		"mem_links_link" 3.125rem
		/ 100%;
		justify-content: center;
		justify-items: center;
	}

	#members_link > ul > li img{
		max-width: 8rem;
		margin: 2rem;
	}

}