/*
Theme Name: Twenty Twenty Four Child
Template: twentytwentyfour
*/

/* ----------------------------------------------------
   index setting:
------------------------------------------------------- */

main a {color: var(--black);text-decoration: underline;transition: all 300ms 0s ease;}

.has-global-padding {
    padding-right: 0!important;
    padding-left: 0!important;
}

/*---- h2 ----*/

h2 {
	font-size: 1.2rem;
	letter-spacing: 0;
	padding: 0!important;
	border-bottom: none;
	margin-bottom: 0 !important;
	line-height: 1.6rem;
}
h2:before {
	display: none;
}

/*---- h3 ----*/

main h3 {
	font-size: 1.2rem;
	font-weight: 400;
	padding-top: 0;
	line-height: 1.6rem;
}

/*---- 余白リセット ----*/
p {
	padding: 0!important;
}

.wp-container-core-group-is-layout-1 {
    margin-bottom: 1rem !important;
}

/* .emergency :
--------------------------------------------*/	
.emergency {
	max-width: 1280px;
    margin: 0 auto;
	align-items: center;
    margin-block-start: 0 !important;
}

.emergency h2{
	font-size: 1.2rem;
}


@media screen and (max-width: 1280px){
	.emergency {
		padding:0 4%;
	}
}

@media screen and (max-width: 767px){
	.emergency {
		grid-template-columns: 1fr;
		grid-row-gap: .3rem;
		padding:.5rem 4% 0;
	}
	.emergency h2{
		font-size: 1.1rem;
	}
}

/* .slide :
--------------------------------------------*/

.metaslider a {
	display: block;
}

.metaslider a:focus {
	outline: 2px var(--black) solid;
}

.metaslider .flexslider{
	margin-bottom: 70px;
}

.metaslider h2{
	color:#fff!important;
}

.flex-control-paging li a {
    width: 20px;
    height: 2px;
    background: #c5c5c5;
    border-radius: 0;
}

.flex-pauseplay a {
    right: 10px!important;
	left: auto!important;
	bottom: -1.8rem!important;
}

@media screen and (max-width: 959px){
	.metaslider .flexslider{
		margin-bottom: 40px;
	}
}
@media screen and (max-width: 767px){
	.metaslider .flexslider{
		margin-bottom: 30px;
		font-size: 0.9rem;
	}
	.metaslider .flexslider h2{
		font-size: 1.1rem;
	}
	.metaslider .caption-wrap {
		position: relative!important;
		opacity: 1;
		min-height: 7rem;
		display: grid;
		align-items: center;
	}
	
	.flex-pauseplay a {
		right: 10px!important;
		left: auto!important;
	}
	.metaslider .flex-control-nav li a {
    margin: 0 3px;
}
}


/* calendar :
--------------------------------------------*/	
#calendar {
	max-width:1280px;
	margin-left: auto;
	margin-right: auto;
	}

#calendar .calendar_top{
	display: grid;
	grid-template-columns: 5fr 1fr;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#calendar .calendar_top > p{
	border-bottom: 2px solid #c5c5c5;
	padding-bottom: 10px;
	align-self: flex-end;
	text-align: right;
	padding-bottom: 0.5rem!important;
	padding-right: 1rem!important;
}

#calendar h3 {
	margin-block-start: 0!important;
	padding: 0;
}

#calendar .calendar_top > p.calendar a{
    text-decoration: none!important;
	display: inline-block;
	width: 90%;
    padding: .8rem .8rem .8rem 1.9rem;
	text-align: center;
	border-radius: var(--maru);
	border: var(--border);
    background: url("https://common-space.online/design/wp-content/uploads/2024/09/icon_calendar.png") no-repeat left 10px center;
    background-size: 18px;
}


#calendar .calendar_top > p.calendar a:hover {
	background: var(--orange)  url("https://common-space.online/design/wp-content/uploads/2024/09/icon_calendar.png") no-repeat left 10px center;
	border: 1.5px solid var(--orange);
	background-size: 18px;
}


#calendar .tab_list {
	display: grid;
	grid-template-columns: repeat(5,1fr);
	align-self: flex-end;
}

@media screen and (max-width: 1280px){
	#calendar .tab_list {
		padding-left: 1rem;
	}
}

#calendar .tab_list button {
	font-size: .8rem;
	font-weight: bold;
	width: 100%;
	padding: 20px 10px;
	text-align: center;
/* 	border: 2px solid var(--white);
	border-top: 2px solid var(--white); */
	border-bottom: 2px solid #c5c5c5;
}
@media screen and (max-width: 1280px){
	#calendar .tab_list button {
		padding: 15px 5px;
	}
}

@media screen and (max-width: 959px){
	#calendar .tab_list button {
		padding: 15px 2px;
		font-size: .7rem;
	}
}

#calendar .tab_list button span{
	font-size: 1.4rem;
	font-family: var(--font-family_en);
	margin-right: .5rem;
}

#calendar .tab_list button.on {
	border: 2px solid #c5c5c5;
	border-bottom: 2px solid  var(--white);
}

#calendar .tab_list button span.st{
	font-weight: 400;
	display: block;
	font-size: .9rem;
}

#calendar .tab_list button:hover {
	border-bottom: 2px solid var(--orange);
}

#calendar .tabpanel {
	display: none;
}

#calendar .tabpanel.on {
	display: block;
}
#calendar .tabpanel > div:not([class]){
	display: grid;
	grid-template-columns: repeat(3,1fr);
	margin-bottom: 2rem;
}

#calendar .tabpanel > div:not([class]) > div {
	padding: 30px;

}

#calendar .tabpanel > div:not([class]) > div h3 span{
	color: var(--gray);
	font-size: 80%;
}

#calendar .tabpanel > div:not([class]) .film time{
	font-family: var(--font-family_en);
	margin-right: 10px;
}

#calendar .tabpanel > div:not([class]) .film span{
	font-size: 80%;
	line-height: 1.3rem;
}

#calendar .tabpanel > div:not([class]) .film ul li{
	display: grid;
	grid-template-columns: auto 1fr 30px;
	grid-column-gap: 10px;
}
#calendar .tabpanel > div:not([class]) .exhibition ul li{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 20px;
}

#calendar .tabpanel > div:not([class]) .exhibition ul li > span:nth-of-type(1){
	grid-row: 1/3;
}


#calendar .tabpanel > div:not([class]) .film ul li a{
	font-size: 1.1rem;
}

#calendar .tabpanel > div:not([class]) .film ul li span:lang(en){
	grid-column: 2/4;
	color: var(--gray);
	font-size: 110%;
	font-weight: 400;
}

#calendar .tabpanel > div:not([class]) .film ul li .sub{
	grid-column: 2/4;
	color: var(--gray);
	font-size: 80%;
}

#calendar .tabpanel > div:not([class]) .film ul li .event{
	grid-column: 2/4;
	font-size: 80%;
}

#calendar .tabpanel > div:not([class]) .film ul li .ticket img{
	width: 30px;
}

#calendar .tabpanel > div:not([class]) .film ul li span:nth-last-of-type(1){
	margin-bottom: 1.2rem;
}


#calendar .tabpanel > div:not([class])  p.open span:nth-of-type(1){
	font-family: var(--font-family_en);
	font-size: 1.2rem;
	margin-left: .5rem;
}
#calendar .tabpanel > div:not([class]) p.open span:nth-of-type(2){
	color: var(--gray);
	font-size: 80%;
	display: block;
}

#calendar .close {
	grid-column: 1/3;
}

#calendar .close_all {
	grid-column: 1/4;
	text-align: center;
	padding: 50px 0;
	color: var(--red);
	font-size: 110%;
}

@media screen and (min-width: 801px){
	
	#calendar .tabpanel > div:not([class]) .film{
		grid-row: 1 / 3;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-bottom: auto;
	}	
	
	#calendar .tabpanel > div:not([class]) > div:first-of-type{
		border-right: var(--border);
	}	
	#calendar .tabpanel > div:not([class]) .exhibition{
		border-left: var(--border);
	}	
	#calendar .tabpanel > div:not([class]) .library{
		border-top: none;
		grid-row: 2 / 3;
		border-top: var(--border);
		border-left: var(--border);
	}

}

p.close_day {
	text-align: center;
	padding: 3rem!important;
	font-size: 1.3rem;
}

#calendar h2{
	margin: 0 0 2rem!important;
}

#calendar .taxonomy-post_tag.wp-block-post-terms {
   margin-bottom: .2rem !important;
}

#calendar .taxonomy-post_tag.wp-block-post-terms:nth-of-type(1) {
    margin-top: 0!important;
}
#calendar .exhibition > span{
	display: block;
	margin: 1.5rem 0 .2rem;
}


@media screen and (max-width: 959px){
	#calendar .tabpanel > div:not([class]) > div {
		padding: 20px;
		grid-gap: 20px;
	}
	#calendar .tab_list {
		padding-left: .5rem;
	}
	#calendar .calendar_top > p{
		padding-right: .5rem!important;
	}
	#calendar .calendar_top > p.calendar a{
		width: 95%;
		padding: .5rem .5rem .5rem 1.5rem;
		background: url("https://common-space.online/design/wp-content/uploads/2024/09/icon_calendar.png") no-repeat left 7px center;
    	background-size: 15px;
	}
	#calendar .calendar_top > p.calendar a:hover {
		background: var(--orange)  url("https://common-space.online/design/wp-content/uploads/2024/09/icon_calendar.png") no-repeat left 7px center;
		background-size: 15px;
	}
	#calendar .tab_list button span {
		font-size: 1.2rem;
	}
}
@media screen and (max-width: 767px){
	#calendar .tabpanel > div:not([class]) > div {
		padding: 15px 10px;
		grid-gap: 10px;
	}
	
	#calendar .tabpanel > div:not([class]){
		grid-template-columns: 1fr;
	}
	
	#calendar .tab_list {
		grid-template-columns: repeat(3, 1fr);
	}
	#calendar .tab_list button:is(#tab4,#tab5) {
		display: none;
	}
	#calendar .tab_list button span {
		font-size: 1.1rem;
	}
	
	#calendar .calendar_top > p {
		position: relative;
		overflow: hidden;
		text-indent: -10000px;
	}
	
	#calendar .exhibition h3 {
		padding: 0 1rem;
	}
	
	#calendar p.open {
		padding-left: 1rem!important;
	}
	
	#calendar .calendar_top > p.calendar a,
	#calendar .calendar_top > p.calendar a:hover {
		display: inline-block;
		width: 90%;
		padding: .5rem;
		border: none;
		background: url("https://common-space.online/design/wp-content/uploads/2024/09/icon_calendar.png") no-repeat right 0 center;
		background-size: 1.6rem;
	}
	
	#calendar div.film,
	#calendar div.exhibition,
	#calendar div.library {
		border-bottom: var(--border);
		margin: 0 1%;
	}
}

/* @media screen and (max-width: 800px){
	
	#calendar .calendar_top {
		grid-template-columns: 3fr 1fr;
	}
	
	#calendar .tab_list {
		grid-template-columns: repeat(3, 1fr);
	}
	
	#calendar > div:not([class]) > div {
		padding: 20px 10px;
		margin: 0 10px;
	}
	
	#calendar > div:not([class]) > div.library {
		padding: 20px;
		margin: 0;
	}
	
	#calendar > div:not([class]) {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	
	#calendar > div:not([class]) div:is(.film,.exhibition,.library){
		border-bottom: var(--border);
}
	
	#calendar .tab_list button:is(#tab4,#tab5) {
		display: none;
	}
	
	#calendar .tab_list button {
		font-size: .7rem;
		padding: 23px 5px;
	}
	
	#calendar .tab_list button span {
		font-size: 1.1rem;
		margin-right: .2rem;
	}
	
	#calendar .calendar_top > p.calendar a {
		display: inline-block;
		padding: 25px 5px 3px 5px;
		text-align: center;
		background: url(../img/common/icon_calendar.svg) no-repeat top 8px center;
		background-size:15px;
		font-size: 85%;
		margin-right: 10%;
	}
} */

/* img-grid :
--------------------------------------------*/	

.img-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	max-width: 1280px;
    margin: 0 auto;
	border-top: var(--border);
	border-left: var(--border);
	align-items: flex-start;
}

.img-grid article {
	border-right: var(--border);
	border-bottom: var(--border);
	height: 100%;
	position: relative;
}

.img-grid article a{
	text-decoration: none;
	height: 100%;
	text-decoration: none;
}

/* 	マス制御 */

.img-grid article.c1_2 {grid-column: 1 / 3;}
.img-grid article.c2_1 {grid-column: 2 / 4}
.img-grid article.all {grid-column: 1 / 4}
	
.img-grid.clm4 {
	grid-template-columns: repeat(4,1fr);
	border-top: none;
}
.img-grid.clm4 article.c1_2 {grid-column: 1 / 3;}
.img-grid.clm4 article.c2_1 {grid-column: 3 / 5}
.img-grid.clm4 article.all {grid-column: 1 / 5}


/* 	比率制御 */

.img-grid article img{
	grid-column: 1 / 3;
	margin-bottom: 10px;
	object-fit: cover;
	width: 100%;
}
.img-grid article:is(.c1_2,.c2_1) img{
	aspect-ratio: 2 / 1;
}
.img-grid article.square img{
	aspect-ratio: 1 / 1;
}
.img-grid article.all img{
	aspect-ratio: 2.35 / 1;
}


/* 	中身制御 */

.img-grid article .days{
	grid-column: 2 / 3;
	font-size: 90%;
	padding-bottom: 15px;
}

.img-grid article .status{
	position: absolute;
	top: 0;
	left: 0;
	padding: .3rem .8rem;
}

.img-grid article .status.current{
	background: var(--black);
	color: var(--white);
}

.img-grid article .status.upcoming,.img-grid article .status.ended{
	background: var(--white);
}

.img-grid h2 {
	font-size: 1.1rem;
    letter-spacing: 0.05rem;

}

.img-grid article {
	border-right: var(--border);
	border-bottom: var(--border);
	height: 100%;
	position: relative;
}

.img-grid article a{
	text-decoration: none;
}


@media screen and (max-width: 1280px){
	.img-grid article a {
		grid-row-gap: 5px;
	}
}

.img-grid article .status{
	position: absolute;
	top: 0;
	left: 0;
	padding: .3rem .8rem;
}

.img-grid article .status.current{
	background: var(--black);
	color: var(--white);
}

.img-grid article .status.upcoming,.img-grid article .ended{
	background: var(--white);
}

.img-grid article :is(.cate,h2,.days){
	padding: 0 20px!important;
}

.img-grid article :is(.cate,h2){
	margin-bottom: 3px!important;
	display: block;
}

.img-grid article .cate{
	font-size: .9rem;
}

.img-grid article .days{
	font-size: .9rem;
	margin-bottom: 15px!important;
	display: block;
	color: var(--gray);
}


.img-grid article .status {
	font-style: normal;
}

/* 	
.img-grid article:not(.pickup) h2 {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 */

article.pickup a{
	display: block;
	text-decoration: none;
	height: 100%;
	padding: 20px 0!important;
}
	
article {
	margin-block-start: 0!important;
    margin-block-end: 0!important;
}

.img-grid {
	margin-block-start: 0!important;
     margin-block-end: 0!important;
}

@media screen and (max-width:767px) {
	.img-grid {
		grid-template-columns: 1fr;
	}
	
	.img-grid article img{
	aspect-ratio: 16 / 9!important;
}	
	.img-grid > article{
		grid-column: auto!important;
	}
	
	.img-grid.clm4 {
		grid-template-columns: 1fr;
		    border-top: none);
	}
		
}

/* news :
--------------------------------------------*/	
.news {
	max-width: 1280px;
    margin: 0 auto;
}

@media screen and (max-width: 1280px){
	.news {
		padding:0 4%!important;
	}
}

.news h2 {
	font-size: 1.8rem;
    line-height: 2.1rem;
	position: relative;
	padding: 3rem 0 1rem!important;
    display: block;
    border-bottom: 2px solid var(--gray-boder);
    position: relative;
	margin-bottom: 2rem!important;
}


.news h2:before {
    content: '';
    background-color: var(--orange);/*下線左側の色*/
    width: 3rem;/*下線左側の幅*/
    height: 2px;/*下線左側の太さ（高さ）*/
    position: absolute;
    bottom: -2px;
    left: 0;
	display: block!important;
}