@charset "utf-8";
/*
************************************************************************
 マイページ
************************************************************************
*/
.title-lv1
{
	display: flex;
	align-items: center;
	align-content: center;
	
	padding-bottom:0.5em;
	margin-bottom:1.0em;
	
	border-bottom:1px solid #CCCCCC;
}
.title-lv1 > i
{
	font-size:2.0em !important;
	color:var(--body-icon-color);
	margin-right:0.25em;
}
.title-lv1 > .main
{
	font-size:1.5em;
	font-weight:bold;
}

.ticket-list
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    
    margin:-1.0em;
}
.ticket-list-item
{
    margin:1.0em;
    width:calc(50% - 2.0em);
    flex:0 0 calc(50% - 2.0em);

    border:1px solid var(--body-frame-color);
    border-radius: 0.5em;
    overflow: hidden;

    display: flex;
    flex-wrap: wrap;

}
.ticket-list-item .ticket-list-item-ope
{
    flex:1 1 100%;
} 
.ticket-list-item .ticket-list-item-ope > a
{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

    background: var(--brand-color-grd);
    padding:0.5em;

    border-top: 1px solid var(--body-icon-color);
} 
.ticket-list-item .ticket-list-item-ope > a > i
{
    font-size: 1.5em !important;
    color: var(--accent-icon-color);
    margin-right:0.25em;
}
.ticket-list-item .ticket-list-item-ope > a > .label
{
    color: var(--accent-icon-color);
}
.ticket-list-item .ticket-list-item-ope > a:hover
{
    background: none;
    background-color:#EFEFEF;
}
.ticket-list-item .ticket-list-item-ope > a:hover > i
{
    color: var(--body-icon-color);
}
.ticket-list-item .ticket-list-item-ope > a:hover > .label
{
    color: var(--body-font-color);
}

.ticket-list-item .ticket-list-item-info
{
    padding:1.0em;
    flex:1 1 100%;
} 
.ticket-list-item-info .title
{
    line-height:1;
    margin-bottom:1.0em;
}
.ticket-list-item-info .title > .main
{
    display:block;
    font-size:1.2em;
    font-weight:bold;
}
.ticket-list-item-info .title > .sub
{
    display:block;
    font-size:1.0em;

    margin-top:0.5em;
}
.ticket-list-item-info .schedule
{
    line-height:1;
    margin-bottom:0.8em;

    display: flex;
    align-items: flex-start;
    align-content: flex-start;
}
.ticket-list-item-info .schedule > i
{
    font-size:1.5em !important;
    color:var(--body-icon-color);
    margin-right: 0.25em;
}
.ticket-list-item-info .schedule > span
{
    flex:1 1 auto;
}
.ticket-list-item-info .schedule .date
{
    display: inline-block;
    margin-right: 0.5em;
}
.ticket-list-item-info .schedule .date > .date-md
{
    line-height:1;
    font-size: 1.2em;
    font-weight: bold;
}
.ticket-list-item-info .schedule .time
{
    display: inline-block;
    margin-right: 0.5em;
}
.ticket-list-item-info .schedule .time > .start
{
    line-height:1;
    font-size: 1.2em;
    font-weight: bold;
}
.ticket-list-item-info .schedule .stage
{
    display: inline-block;
    margin-right: 0.5em;
}
.ticket-list-item-info .schedule .stage > .stage-name
{
    font-size: 1.2em;
    font-weight: bold;
}

.ticket-list-item-info .place
{
    line-height:1;
    margin-bottom:0.8em;

    display: flex;
    align-items: flex-start;
    align-content: flex-start;
}
.ticket-list-item-info .place > i
{
    font-size:1.5em !important;
    color:var(--body-icon-color);
    margin-right: 0.25em;
}
.ticket-list-item-info .place > span
{
    flex:1 1 auto;
}
.ticket-list-item-info .place .name
{
    display: inline-block;
    margin-right: 0.5em;
    line-height:1.5;
}
.ticket-list-item-info .place .address
{
    display: inline-block;
    line-height:1.5;
}

.ticket-list-item-info .ticket
{
    line-height:1;

    display: flex;
    align-items: flex-start;
    align-content: flex-start;
}
.ticket-list-item-info .ticket > i
{
    font-size:1.5em !important;
    color:var(--body-icon-color);
    margin-right: 0.25em;
}
.ticket-list-item-info .ticket > span
{
    flex:1 1 auto;
}
.ticket-list-item-info .ticket .name
{
    display: inline-block;
    font-weight: bold;
    font-size: 1.0em;
    line-height:1.5;
    margin-right: 0.5em;
}
.ticket-list-item-info .ticket .amount
{
    display: inline-block;
    font-weight: bold;
    font-size: 1.0em;
    line-height:1.5;
    margin-right: 0.5em;
}

.e-ticket
{
    margin-top: -2.5em;
}
.e-ticket-box
{
    padding:1.5em;
    border-radius: 0.5em;
    background-color: var(--body-background-color);
	box-shadow: 0px -5px 5px 0px #0000000f;
	
	display: flex;
}
.e-ticket-box > .e-ticket-qr
{
	width:200px;
	flex: 0 0 200px;
}
.e-ticket-box > .e-ticket-qr .e-ticket-no
{
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
}
.e-ticket-box > .e-ticket-info
{
	width:calc(100% - 200px);
	flex: 0 0 calc(100% - 200px);
}
.e-ticket-box .title
{
	margin-bottom:1.0em;
}
.e-ticket-box .title .main
{
	display:block;
	font-size:1.2em;
	font-weight:bold;
}
.e-ticket-box .title .sub
{
	display:block;
}


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

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.ticket-list-item
	{
	    margin:1.0em;
	    width:calc(100% - 2.0em);
	    flex:0 0 calc(100% - 2.0em);
	}
    .ticket-list-item-info .schedule .stage
    {
        width:100%;
        margin-top:0.5em;
    }
    .ticket-list-item-info .place .address
    {
        width:100%;
        margin-top:0.25em;
    }
    
	.e-ticket-box
	{
	    padding:1.5em;
		display: flex;
		flex-wrap:wrap;
	}
	.e-ticket-box > .e-ticket-qr
	{
		width:100%;
		flex: 0 0 100%;
		
		margin-bottom:1em;
		text-align:center;
	}
	.e-ticket-box > .e-ticket-qr img
	{
		width:80%;
	}
	.e-ticket-box > .e-ticket-info
	{
		width:calc(100%);
		flex: 0 0 calc(100%);
	}
}