@charset "UTF-8";
/* CSS Document */

#pageTitle.eventTitle{
background-image: url(../images/pagetop_event.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#pageTitle.eventTitle::before{
content: none;
}
#pageTitle.eventTitle::after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.50);
z-index: 1;
}
#pageTitle.eventTitle h1{
color: #ffffff;
}
#pageTitle.eventTitle #bread{
color: #ffffff;
}
#pageTitle.eventTitle #bread ol li+li::before{
background-color: #ffffff;
}
#pageTitle.eventTitle #bread ol li a{
color: #ffffff;
}
#pageTitle.eventTitle #bread ol li a:hover{
color: #6fd1e3;
}

#eventWrap{
display: flex;
justify-content: space-between;
}





@media screen and (max-width: 999px){
#eventWrap{
display: block;
}
}/*999*/





#eventList{
width: calc(100% - 300px);
}
#eventList ul{
display: flex;
flex-wrap: wrap;
}
#eventList ul li{
width: 50%;
padding-left: 2px;
margin-top: 40px;
}
#eventList ul li a{
display: block;
height: 100%;
background-color: #ffffff;
color: #111111;
text-decoration: none;
position: relative;
}
#eventList ul li a::before{
display: block;
position: absolute;
top: 0;
left: 0;
font-size: 11px;
padding: 2px 10px;
color: #ffffff;
background-color: #777777;
text-align: center;
z-index: 1;
}
#eventList ul li.accepting a::before{
content: '受付中';
background-color: #1d2086;
}
#eventList ul li.end a::before{
content: '満員御礼';
}
#eventList ul li figure{
overflow: hidden;
padding-top: 60%;
position: relative;
}
#eventList ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
#eventList ul li.link a:hover figure img{
transform: scale(1.1);
}
#eventList ul li .eventBox{
padding: 50px;
position: relative;
}
#eventList ul li.link a::after{
content: '詳細を見る';
display: block;
position: absolute;
right: 0;
bottom: 0;
background-color: #1d2086;
color: #ffffff;
font-size: 12px;
line-height: 20px;
padding: 5px 30px;
transition: background-color 100ms ease;
}
#eventList ul li a:hover::after{
background-color: #6fd1e3;
}
#eventList ul li p.title{
font-size: 125%;
line-height: 1.5;
transition: color 100ms ease;
}
#eventList ul li.link a:hover p.title{
color: #6fd1e3;
}
#eventList ul li dl{
font-size: 87.5%;
margin-top: 1.5em;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
#eventList ul li dl dt{
width: 5em;
background-color: #CFDAE3;
/*color: #ffffff;*/
text-align: center;
margin-top: 5px;
margin-right: 10px;
}
#eventList ul li dl dd{
width: calc(100% - 5em - 10px);
font-weight: 400;
margin-top: 5px;
}
#eventList ul li p.excerpt{
font-size: 87.5%;
margin-top: 1.5em;
font-weight: 400;
}
#eventList p.nonePosts{
margin-top: 40px;
}





@media screen and (max-width: 999px){
#eventList{
width: auto;
}
#eventList ul{
display: block;
}
#eventList ul li{
width: auto;
padding-left: 0;
margin-top: 30px;
}
#eventList ul li .eventBox{
padding: 20px;
}
#eventList ul li.link .eventBox{
padding-bottom: 50px;
}
}/*999*/





#eventSide{
width: 200px;
}
#eventSide .sticky{
position: sticky;
top: 100px;
}
#eventSide h2{
border-bottom: 1px solid #111111;
position: relative;
padding-bottom: 10px;
}
#eventSide h2::before{
content: '';
display: block;
width: 20px;
height: 10px;
position: absolute;
top: 0.9em;
transform: translate(-30px, -50%);
background-color: #1d2086;
}
#eventSide ul{
margin-top: 10px;
}
#eventSide ul li a{
display: block;
text-decoration: none;
color: #111111;
padding: 5px 0;
}
#eventSide ul li a:hover{
color: #6fd1e3;
}





@media screen and (max-width: 999px){
#eventSide{
width: auto;
margin-top: 50px;
}
#eventSide h2{
border-bottom: 1px solid #111111;
padding-bottom: 10px;
}
#eventSide ul{
margin-top: 10px;
}
#eventSide ul li a{
display: block;
text-decoration: none;
color: #111111;
padding: 5px 0;
}
#eventSide ul li a:hover{
color: #6fd1e3;
}
}/*999*/