@charset "UTF-8";



/*----------------------------------------------*/
/*----------------------------------------------*/
/*FM COCOLO  [EVENT CALENDAR]*/
/*----------------------------------------------*/
/*Created: 2016.12.12*/
/*Last Update:	2016.12.12*/
/*----------------------------------------------*/




/*INDEX*/

/*EVENT CALENDAR]*/
/*[ Main Frame Customize ]*/
/*[ Page Title with Icon Customize ]*/

/*-- [ Event Calendar ] --*/











/*----------------------------------------------*/
/*[ EVENT CALENDAR ]*/
/*----------------------------------------------*/

/*[ Main Frame Customize ]*/
.main-container.one-column .main-frame > .p-event-calendar.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}


@media screen and (min-width:641px) and (max-width:960px)  {
.main-container.one-column .main-frame > .p-event-calendar.inner-frame {
width:90%;
margin:0 auto;
padding:0;
}


}


@media screen and (min-width:961px) and (max-width:1199px)  {
.main-container.one-column .main-frame > .p-event-calendar.inner-frame {
width:90%;
margin:0 auto;
padding:0;
}


}


@media screen and (min-width:1200px)  {
.main-container.one-column .main-frame > .p-event-calendar.inner-frame {
width:auto;
margin:0 auto;
padding:0;
}


}
/*----------------------------------------------*/





/*[ Page Title with Icon Customize ]*/
/*[ Pages Title ]*/
#pages-header.pages-header .ph-ttl {
padding:12px 0 0 48px;
background:url(../images/icn_page_calendar.png) no-repeat left 5px;
background-size:auto 56px;
-webkit-background-size:auto 56px;
-moz-background-size:auto 56px;
-ms-background-size:auto 56px;
-o-background-size:auto 56px;
}


@media screen and (max-width:899px) {
#pages-header.pages-header .ph-ttl  small {
margin-left:-48px;
}


}


@media screen and (max-width:640px) {
#pages-header.pages-header .ph-ttl {
padding:8px 0 0 38px;
background:url(../images/icn_page_calendar.png) no-repeat left 3px;
background-size:auto 42px;
-webkit-background-size:auto 42px;
-moz-background-size:auto 42px;
-ms-background-size:auto 42px;
-o-background-size:auto 42px;
}

#pages-header.pages-header .ph-ttl  small {
margin-left:-38px;
}


}


@media screen and (max-width:480px) {
#pages-header.pages-header .ph-ttl {
padding:8px 0 0 28px;
background:url(../images/icn_page_calendar.png) no-repeat left 3px;
background-size:auto 34px;
-webkit-background-size:auto 34px;
-moz-background-size:auto 34px;
-ms-background-size:auto 34px;
-o-background-size:auto 34px;
}

#pages-header.pages-header .ph-ttl  small {
margin-left:-28px;
}


}
/*----------------------------------------------*/





/*
[ Event Calendar ]
*/

/*----[ Legend ]----*/
.ec-legend {
width:auto;
height:auto;
margin:0 0 .5rem;
padding:0;
}

.ec-legend .ec-legend-list {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.ec-legend .ec-legend-list li {
width:auto;
height:auto;
margin:0;
padding:3px;
display:inline-block;
font-size:.9em;
line-height:1;
}
.ec-legend .ec-legend-list [class*=ec-block] {
width:16px;
height:16px;
margin:0;
padding:0;
display:inline-block;
border:1px solid #FFF;
vertical-align:middle;
}
.ec-legend .ec-legend-list .ec-block-red {
background-color: #FCCFD1;
border-color: #D28EA6;
}
.ec-legend .ec-legend-list .ec-block-blue {
background-color: #CFE4FC;
border-color: #8E9BD2;
}
.ec-legend .ec-legend-list .ec-block-green {
background-color: #E5FCCF;
border-color: #99C170;
}
.ec-legend .ec-legend-list .ec-block-orange {
background-color: #FEF5E8;
border-color: #FDDFB1;
}

.ec-legend .ec-legend-list .ec-txt {
margin-left:5px;
}









/*----[ Calendar ]----*/
#event-calendar table {
width: 100%;
border-spacing: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-bottom: 3rem;
line-height: 1.5;
border-collapse: separate;
table-layout:fixed;
}
#event-calendar table thead th {
text-align:center;
font-size:1rem;
}


#event-calendar th,
#event-calendar td {
background: #fff;
padding: 3px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#event-calendar th {
color: #fff;
background: #4F616B;
vertical-align: top;
padding-top: 7px;
padding-bottom: 7px;
}
/*
#event-calendar th.ec-sun {
color: #DF0D2D;
background: #F8E4E4;
}
#event-calendar th.ec-sat {
color: #2574D3;
background: #E2F3FC;
}
*/
#event-calendar td {
width: 14.3%;
height: 100px;
vertical-align: top;
}
#event-calendar td.ec-day-off {
background: #F4F3F2;
color: #555;
}
#event-calendar td.ec-holiday,
#event-calendar td.ec-sun {
color: #CE2727;
background: #FCF3F3;
}
#event-calendar td.ec-sat {
color: #54AFC8;
background: #F5FBFE;
}

#event-calendar .ec-day-number {
font-style: normal;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
font-size: 1em;
display: block;
padding: .2em .2em;
line-height: 1.2;
}
#event-calendar td.ec-holiday .day,
#event-calendar td.ec-sun .day {
color: #DF0D2D;
}
#event-calendar td.ec-sat .day {
color: #2574D3;
}

#event-calendar td .ec-box span {
/*font-size: 11px;*/
line-height: 1.3;
font-weight:bold;
display: block;
letter-spacing:0;
word-break:break-all;
}
#event-calendar td a {
display:block;
}
#event-calendar td a:hover {
opacity:.7;
text-decoration:none;
}

#event-calendar [class*=ec-label] {
font-size: 0.75em;
line-height: 1.3;
color: #000;
background: #FCEBCF;
border: solid 1px #D2AC8E;
display: block;
padding: 5px;
margin-top: 3px;
}
#event-calendar td .ec-label-red {
background-color: #FCCFD1;
border-color: #D28EA6;
}
#event-calendar td .ec-label-blue {
background-color: #CFE4FC;
border-color: #8E9BD2;
}
#event-calendar td .ec-label-green {
background-color: #E5FCCF;
border-color: #99C170;
}
#event-calendar td .ec-label-orange {
background-color: #FEF5E8;
border-color: #FDDFB1;
}

#event-calendar td .ec-box .ec-box-pics {
width:auto;
height:auto;
margin:-5px;
margin-bottom:.3rem;
}
#event-calendar td .ec-box .ec-box-prg {
font-size: .75em;
font-weight:normal;
margin-top:3px;
padding-top:3px;
color:#333;
border-top:1px dotted #999;
}

/* 何もない日 */
#event-calendar td.ec-none {
background: #FBFAF7;
}
#event-calendar td.ec-today {
background: #FEFBDA;
}



/* モバイル用縦型カレンダー */
#event-ec-vertical table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 4px solid #B89970;
margin-bottom: 0;
line-height: 1.5;
}
#event-ec-vertical table th {
width: 10%;
padding: 7px 5px 7px 10px;
/*width: 50px;*/
font-size: 129%;
white-space: nowrap;
font-weight: normal;
}
#event-ec-vertical table td {
width: auto;
height: auto;
vertical-align: middle;
}
#event-ec-vertical table th span {
font-size: 77%;
margin-left: 4px;
}





/*[ Top & Under Navigation ]*/

/*(Heading Navi)*/
.ec-nav {
width:auto;
height:auto;
margin:0;
padding:0 0 2em;
position:relative;
}

/*[Year & Month]*/
.ec-nav .ec-date-ym {
text-align:center;
font-size:1.8em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:.1em 0 0;
} 

.ec-nav .ec-nav-list .ec-nav-past {
position:absolute;
top:0;
left:0;
font-family:Arial, Helvetica, sans-serif;
}
.ec-nav .ec-nav-list .ec-nav-future {
position:absolute;
top:0;
right:0;
font-family:Arial, Helvetica, sans-serif;
}













@media screen and (max-width:680px) {
.ec-legend .ec-legend-list li {
font-size:.8em;
}


/*Header | Weeks */
#event-calendar table thead th {
display:none;
}

#event-calendar td {
width: 100%;
height: auto;
vertical-align: top;
display:block;
}

#event-calendar .ec-day-number {
font-size: 1.2em;
padding:.3em .3em;
}

#event-calendar [class*=ec-label] {
font-size: 0.85em;
padding:0;
}

#event-calendar td .ec-box {
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-flex-box;
display:flex;
-webkit-box-pack:start;
-webkit-justify-content:flex-start;
justify-content:flex-start;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
}
#event-calendar td .ec-box .ec-box-pics {
width:70px;
margin:0;
-webkit-flex-shrink:0;
flex-shrink:0;
}
#event-calendar td .ec-box .ec-box-inner {
padding:5px;
-webkit-box-flex:1;
-webkit-flex:1;
flex:1;
}
#event-calendar td .ec-box .ec-box-prg {
font-size: .75em;
border-top:1px dotted #999;
}

#event-calendar td.ec-none {
display:none;
}

/*[ Top & Under Navigation ]*/

/*[Year & Month]*/
.ec-nav .ec-date-ym {
font-size:1.6em;
padding:.3em 0 0;
} 


}


@media screen and (max-width:320px) {
/*[Year & Month]*/
.ec-nav .ec-date-ym {
font-size:1.4em;
padding:.3em 0 0;
} 
.ec-nav .ec-nav-list,
.pages-footer .ec-nav-list {
font-size:.8em;
}

}