/* ----------------------------------------------------
   index setting
------------------------------------------------------- */
main a {text-decoration: none;}

:root :where(.is-layout-constrained) > * ,
:where(.wp-site-blocks) > * ,
:root :where(.is-layout-flow) > *{
    margin-block-start: 0!important;
    margin-block-end: 0;
}

.main_v,
#news,
#about > div,
#note > div,
.top_banner > div {
margin: 0 auto;
    max-width: 1366px!important;
	width: 100%;
}

@media screen and (max-width: 1366px){
		.main_v,
		#news,
		#about > div,
		#note > div,
		.top_banner > div {
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);
	}
}


main h2 {
	font-family: var(--font-family_ac);
	font-size: 1.4rem;
    font-weight: 700;
	line-height: 1.2;
}

main h2 span{
	font-family: var(--font-family_en);
	font-size: 3.3rem;
    display: block;
    font-weight: 500;
}

@media screen and (max-width: 1366px){
	main h2 span{
		font-size: 2.9rem;
	}
}

main h3 {
	font-family: var(--font-family_ac);
	font-size: 1.1rem;
    font-weight: 700;
	line-height: 1.2;
}



/* main_v:
--------------------------------------------*/
.main_v{
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 35px;
	margin-bottom: 1rem;
}

@media screen and (min-width: 960px){
	.main_v_nav {
		order: 1;
	}
	.xslider {
		order: 2;
	}
}

.xslider .slideImg li a {
	display: grid;
	grid-template-columns: 4.5rem auto 1fr;
	grid-column-gap: 15px;
	grid-row-gap: 5px;
}

.xslider .slideImg li a figure {
	border-radius: var(--maru2);
	border: var(--border2);
	grid-column: 1/4 ;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
	aspect-ratio: 16 / 9;
	margin: 0 auto 10px;
	overflow:hidden;
	width: 100%;
}

.xslider .slideImg li a figure img {
	max-height: 100%;
    max-width: 100%;
}

.xslider .slideImg li a > span.cate{
	grid-row: 2/4;
	align-self: center;
}
.xslider .slideImg li a > span.cate img{
	width: 4.5rem;
}
.xslider .slideImg li a > span.status{
	grid-column: 2/3 ;
	border-radius: var(--maru);
	color: var(--white);
	background: var(--black);
	font-size: .9rem;
	padding: .1rem 1rem;
}
.xslider .slideImg li a > span.txt{
	grid-column: 2/4 ;
	font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.5;
}

.main_v_nav {
	align-self: center;
	font-family: var(--font-family_ac);
    font-weight: 700;
	margin: 0;
	padding: 0!important;
}
.main_v_nav ul{
	margin-bottom: 3.5rem;
	display: grid;
	grid-gap: 20px;
	padding-left: 0!important;
}

.main_v_nav ul li a{
	display: block;
	padding: 2.2rem 15px 2.2rem 5.8rem;
	border: var(--border1);
	border-radius: var(--maru);
}
.main_v_nav ul li:nth-child(1) a{
	background: var(--py) url("/common/img/common/icon_grants.gif") no-repeat center left 10px;
	background-size: 4.5rem;
}
.main_v_nav ul li:nth-child(2) a{
	background: var(--pb) url("/common/img/common/icon_support.gif") no-repeat center left 10px;
	background-size: 4.5rem;
}

.main_v_nav ul li:nth-child(1) a:hover{
	background: var(--py) url("/common/img/common/icon_grants_hover.gif") no-repeat center left 10px;
	background-size: 4.5rem;
}
.main_v_nav ul li:nth-child(2) a:hover{
	background: var(--pb) url("/common/img/common/icon_support_hover.gif") no-repeat center left 10px;
	background-size: 4.5rem;
}

.main_v_nav p a{
	display: block;
	padding: .5rem .5rem .5rem 2.5rem;
	background: url("/common/img/common/icon_question.svg") no-repeat center left;
	background-size: 2rem;
}
.main_v_nav p a:hover{
	text-decoration: underline;
}

@media screen and (max-width: 959px) {
	.main_v {
		grid-template-columns: 1fr;
		grid-gap: 35px;
	}
	.main_v_nav ul.wp-block-list {
		grid-template-columns:1fr 1fr;
		margin-bottom: 1.5rem;
	}
}

@media screen and (max-width: 767px) {
	.main_v_nav ul.wp-block-list {
		grid-template-columns:1fr;
	}
	.xslider .slideImg li a figure {
		aspect-ratio: 5 / 4;
	}
}

/* news
--------------------------------------------*/

#news .outline{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: var(--gap);
}

ul.news_thumb li a{
	border: var(--border1);
}

.tab_panel {display: none;}
.tab_panel#tab_panel1 {display: block;}

div[role="tablist"] {
	align-self: flex-end;
	justify-self: end;
}

.tab_list li{
	display: inline-block;
	margin-left: 10px;
}

#news p.lnk1 {
	text-align: right;
}

.tab_list button {
	padding: .3rem .5rem;
	border: var(--border1);
	font-size: .9rem;
	border-radius: var(--maru);
	min-width: 5rem;
	margin: 0 3px 3px 0;
}

.tab_list button:is(.on,:hover) {
	background: var(--black);
	color: var(--white);
}

@media screen and (min-width: 768px){
	.tab_panel {
		grid-column: 1 /3 ;
	}
	
	#news p.lnk1 {
		grid-column: 1 /3 ;
		margin-bottom: 2.5rem;
	}	
}

@media screen and (max-width: 767px){	
	#news .outline {
		grid-template-columns: 1fr;
	}
	
	#news div > *{
		grid-column: 1 /3 ;
	}
	
	#news p.lnk1 {
		margin-bottom: 2.5rem;
	}
	
	ul.news_thumb {
		grid-template-columns: 1fr;
	}
}


/* about
--------------------------------------------*/

#about {
	margin-top: 3rem;
	background-color: var(--gray-back);
	border-bottom: var(--border1);
	border-top: var(--border1);
	padding: 1.5rem 0 2.5rem;
}

#about > div{
	display: grid;
	grid-template-columns: 45% 1fr;
	grid-gap: var(--gap);
}

#about div.left {
	display: grid;
	grid-row-gap: 2rem;
	align-self: center;
}

#about div.left h2 {
	margin-bottom: 2rem;
}

#about p.copy {
	font-family: var(--font-family_ac);
	font-size: 1.6rem;
    font-weight: 700;
	line-height: 1.6;
}

#about .right a{
	border: var(--border1);
	 width: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: flex-start;
	 text-align:center;
	padding: 2rem;
}


#about .right a div{
	position: relative;
	padding-top: 80px;
}

#about .right a div:before{
	content: '';
	display: block;
	position: absolute;
	top: -.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	background-size: cover;
}

#about .right a.grants div:before{background-image: url('/common/img/common/icon_grants.gif');}
#about .right a.grants:hover div:before{background-image: url('/common/img/common/icon_grants_hover.gif');}
#about .right a.support div:before{background-image: url('/common/img/common/icon_support.gif');}
#about .right a.support:hover div:before{background-image: url('/common/img/common/icon_support_hover.gif');}
#about .right a.festivals div:before{background-image: url('/common/img/common/icon_festivals.gif');}
#about .right a.festivals:hover div:before{background-image: url('../img/common/icon_festivals_hover.gif');}

#about .right a.grants{background: var(--py);}
#about .right a.support{background: var(--pb);}
#about .right a.festivals{background: var(--pp);}


#about .right a h3{
	font-size: 1.3rem;
	margin: 1rem;
}
#about .right a p{
	font-size: 1rem;
	line-height: 1.7;
}


@media screen and (max-width: 1366px){
	#about > div{
		grid-template-columns: 30% 1fr;
	}
}
@media screen and (max-width: 1100px) {
	#about .right a h3{
		margin: .5rem 1rem;
	}
	#about .right a p{
		font-size: .9rem;
		line-height: 1.6;
	}
}

#about .other {
	display: grid;
	grid-template-columns: var(--auto-fill2);
	grid-gap: var(--gap);
}

#about .other > div{
	border: var(--border1);
	border-radius: var(--maru);
	padding: 1.5rem 1rem;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: subgrid;
	grid-row: span 3;
	align-items: flex-start;
	background: var(--white);
	grid-row-gap: 10px;
	grid-column-gap: 20px;
	width: 100%;
	height: 100%;
}

#about .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#about .other h3{
	grid-column: 1 / 3;
	text-align: left;
}
#about .other p:not([class]){
	grid-column: 1 / 3;
	font-size: .9rem;
}

#about > div > p.lnk1 {
	text-align: right;
			grid-column: 2 / 3 ;
}

@media screen and (min-width: 960px){
	#about .other {
		grid-column: 1 /3 ;
	}
	
	#about .right {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 20px;
	}

	#about .right a{
		 border-radius: 100%;
	}

	#about .right a:before{
	 content: '';
	 display: block;
	 padding-top: 100%;
	}

	#about .right a.grants{
		grid-column: 1 /3 ;
		 width: calc(50% - 20px);
		justify-self: center;
		position: relative;
		bottom: -1.5rem;
	}
}

@media screen and (max-width: 1280px) and (min-width: 960px){
	#about .outline{
		grid-template-columns: 40% 1fr;
	}
}

@media screen and (max-width: 1200px) and (min-width: 960px){
	#about .outline{
		grid-template-columns: 30% 1fr;
	}
	
	#about .left p:not([class]) br{
		display: none;
	}
	
	#about .right {
        grid-column-gap: 10px;
    }
	
	#about .right a.grants{
		 width: calc(50% - 10px);
	}
}

#about .right a #svg1 {
  display: block;
}
#about .right a #svg2 {
  display: none;
}

#about .right a:hover #svg1 {
  display: none;
}
#about .right a:hover #svg2 {
  display: block;
}

@media screen and (max-width: 959px) {
	#about > div {
		grid-template-columns:1fr;
	}
	#about div.left {
		grid-column: 1/3;
	}
	#about .other {
		grid-column: 1/3;
	}
	#about .right {
		display: grid;
		grid-column: 1/3;
		grid-gap: var(--gap);
	}
	#about .right a {
		border-radius: var(--maru2);
		padding: 1rem 1rem 2rem 1rem;
	}
	#about div.left .lnk1{
        text-align: right;
    }
}

@media screen and (max-width: 959px) and (min-width: 768px){
	#about .right {
		grid-template-columns: repeat(3, 1fr);
	}
	 #about p.copy br {
        display: none;
    }
	
}

@media screen and (max-width: 767px) {
	#about div.left {
		grid-column: 1/3;
	}
	#about div.left h2 {
		margin-bottom: 0;
		margin-block-start:2rem!important;
	}
}


/* note :
--------------------------------------------*/	

#note {
	margin: 3rem auto;
}

#note > div {
	padding-top: 3.5rem;
}

main #note h2 {
	font-family: var(--font-family_ac);
	font-size: 2.2rem;
    font-weight: 700;
	background: url("../img/index/note.svg") no-repeat top 10px right;
	background-size: 2rem;
	padding-right: 3rem;
	display: inline-block;
	margin-bottom: 1.5rem;
}

ul.note{
	margin: 2rem 0;
}


/* top_banner :
--------------------------------------------*/	

.top_banner {
	border-top: var(--border1);
	padding: 3rem 0 2rem;
}

.top_banner .wp-block-image {
  width: 100%;
}

.top_banner .wp-block-image img{
	aspect-ratio: 16 / 9;
	border: var(--border2);
}

.top_banner figcaption{
	color: var(--black);
	font-size: 1rem;
	line-height: 1.4;
}

.fadein {
    opacity: 0;
    transition: all 1.5s;
    transform: translate(0,30px);
}
.fadein.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}