@charset "utf-8";
/*
************************************************************************
 公演情報のタイル
************************************************************************
*/
.event-result-tile
{
    display: flex;
    flex-wrap: wrap;

    margin:-1.0em;
}
.event-result-tile > .event-result-tile-item
{
    margin:1.0em;
    width:calc(33.33333% - 2.0em);
    flex:0 0 calc(33.33333% - 2.0em);
    box-shadow: 0px 0px 10px -3px #00000023;
    overflow: hidden;

    padding:1.0em;

	transition-duration:0.1s;
	transition-property:all;
	transition-timing-function:ease;
}
.event-result-tile > .event-result-tile-item:hover
{
    z-index:999;
    transform: scale(1.05);
}

.event-result-tile > .event-result-tile-item::before
{
    /*
    content:"";

    position:absolute;
    bottom:0;

    width:100%;
    padding-top:100%;
    background:var(--brand-color-grd);

    border-radius: 100%;
    transform: translate(20%, 70%);

    opacity: 0.3;
    */
}
.event-result-tile > .event-result-tile-item > .thumbnail
{
    display:block;
    margin:0.0em;
    padding-top:calc(100% - 0.0em);
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.event-result-tile > .event-result-tile-item > .title
{
    display:block;
    font-size:1.2em;
    font-weight:bold;
    line-height:1.4;
}
.event-result-tile > .event-result-tile-item > .sub-title
{
    display:block;
    font-size:0.8em;
    font-weight:bold;
    line-height:1.4;
    color:var(--body-font-color-light);
}
.event-result-tile > .event-result-tile-item > .date
{
    position:absolute;
    top:0;
    left:0;
    
    /*
    display: inline-flex;
    align-items: center;
    align-content: center;
    */
	display: grid;
	grid-template:
	" from_y ..... to_y " auto
	" from   space to " auto
	/ 1fr    auto  1fr;

    background:var(--brand-color-grd);
    color:var(--accent-font-color);
    font-weight: bold;
    padding:0.2em 0.5em;

    border-bottom-right-radius: 1em;
}
.event-result-tile > .event-result-tile-item > .date.end_flg
{
    background:var(--color-gray-light);
}
.event-result-tile > .event-result-tile-item > .date > .from-y
{
	grid-area: from_y;
    line-height:1;
}
.event-result-tile > .event-result-tile-item > .date > .from
{
	grid-area: from;
}
.event-result-tile > .event-result-tile-item > .date > .space
{
	grid-area: space;
}
.event-result-tile > .event-result-tile-item > .date > .to-y
{
	grid-area: to_y;
    line-height:1;
}
.event-result-tile > .event-result-tile-item > .date > .to
{
	grid-area: to;
}

.event-result-tile > .event-result-tile-item > .place
{
    display:block;
    margin-top:0.5em;
}
.event-result-tile > .event-result-tile-item > .organizer
{
    display:block;
    margin-top:0.5em;
}

.event-result-pagination
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.event-result-pagination > a
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	line-height: 1px;
	margin:0.5em;
	font-size: 1.2em;
}
.event-result-pagination > a.active
{
	font-weight:bold;
	color:var(--body-icon-color);
}


/* ################################################################################################ */
/* ## TAB						 ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1040px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    .event-result-tile > .event-result-tile-item
    {
        margin:1.0em;
        width:calc(100.00000% - 2.0em);
        flex:0 0 calc(100.00000% - 2.0em);
    }
}