@charset "UTF-8";



/*----------------------------------------------*/
/*----------------------------------------------*/
/*FM COCOLO  [TOPICS]*/
/*----------------------------------------------*/
/*Created: 2015.10.01*/
/*Last Update:	2016.02.16*/
/*----------------------------------------------*/




/*INDEX*/

/*[TOPICS]*/
/*[Main Frame Customize]*/

/*-- [Topics List Page] --*/
/*-- [Topics Detail Page] --*/

/*
[Decolation]
*/
/*1.Catch in Bar*/











/*----------------------------------------------*/
/*[TOPICS]*/
/*----------------------------------------------*/

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


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


}


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


}


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


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





/*[Page Title with Icon Customize]*/
/*[Pages Title]*/
#pages-header.pages-header .ph-ttl {
padding:12px 0 0 48px;
background:url(../images/icn_page_topics.png) no-repeat left top;
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_topics.png) no-repeat left top;
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_topics.png) no-repeat left top;
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;
}


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





/*
[Topics]
*/

/*[Topics List]*/
/*(List Box)*/
.topics-list,
.topics-list .pl-box {
width:auto;
height:auto;
margin:0;
padding:0;
list-style:none;
}
.topics-list .pl-box {
float:left;
padding:0;
margin:0;
width:20%;
}
/*(Detail Box /Inner Box)*/
.topics-list .pl-box .detail-box {
width:auto;
height:auto;
margin:0 1px 3px;
padding:0;
background:#FFF;
border:1px solid #E6E6E6;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
position:relative;
}
.topics-list .pl-box:hover {
text-decoration:none;
}


/*(In Box)*/
.topics-list .pl-box .detail-box .in-box {
width:auto;
height:auto;
padding:0;
margin:0;
}

/*(Thumbnail)*/
.pl-thumbnail {
text-align:center;
margin:0 auto .8em;
padding:1em .7em;
background:#e0f0f4;
}
.pl-thumbnail img {
width:100%;
max-width:150px;
}


/*(List Header)*/
.pl-category {
width:auto;
height:auto;
padding:.1em .3em;
margin:0 .7em 1em;
font-size:.75em;
font-weight:400;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
text-transform:uppercase;
float:left;
}
/*(Back Ground)*/
.pl-category.bg-topics {
background:#0080a7;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
}


/*[Date]*/
.pl-date {
clear:both;
font-size:.75em;
padding:0 .7em;
margin-bottom:.4em;
color:#333;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:0;
word-break:break-all;
text-transform:capitalize;
}


/*(List Detail)*/
.topics-list .pl-box .detail-box .in-box dl {
width:auto;
height:auto;
margin:0;
padding:0 .7em 1em;
}
.pl-title {
font-size:.9em;
color:#0080a7;
letter-spacing:0;
min-height:5em;
word-break:break-all;
}

.pl-copy {
	border-top:1px dotted #CCC;
	padding-top:.8em;
font-size:.8em;
line-height:1.5em;
color:#666666;
letter-spacing:0;
word-break:break-all;
}


.pl-box a:hover {
text-decoration:none;
}
.topics-list .pl-box:hover .pl-title {
color:#603813;
}
.topics-list .pl-box:hover .pl-thumbnail {
background:#f3f5db;
}


/*[New Icon]*/
.icn-new {
width:65px;
height:auto;
margin:0;
padding:0;
position:absolute;
top:0;
right:0;
z-index:2222;
}
.icn-new img {
width:100%;
}



@media screen and (min-width:481px) and (max-width:640px) {
/*(List Detail)*/
.pl-title {
font-size:.8em;
background:#FFF;
margin:0 0 1.2em;
padding:0;
min-height:0;
}

}

@media screen and (min-width:320px) and (max-width:480px) {
/*(List Detail)*/
.pl-title {
font-size:.9em;
background:#FFF;
margin:0 0 1em;
padding:0;
min-height:0;
}

}


@media screen and (min-width:320px) and (max-width:480px) {
.topics-list .pl-box {width:50%;}
}

@media screen and (min-width:481px) and (max-width:567px) {
.topics-list .pl-box {width:33.33333%;}
}


@media screen and (min-width:568px) and (max-width:640px) {
.topics-list .pl-box {width:33.33333%;}
}


@media screen and (min-width:641px) and (max-width:768px) {
.topics-list .pl-box {width:33.33333%;}
}


@media screen and (min-width:769px) and (max-width:960px) {
.topics-list .pl-box {width:33.33333%;}
}


@media screen and (min-width:961px) and (max-width:1024px) {
.topics-list .pl-box {width:25%;}
}


@media screen and (min-width:1025px) {
.topics-list .pl-box {width:25%;}
}










/*
[Topics Detail Page]
*/

/*(Alert)*/
.pl-alert {
text-align:center;
padding:1.2em;
margin:0 0 2em;
border:1px solid #FF0000;
}

/*(Frame)*/
.p-topics-detail .dtl-box {
width:auto;
height:auto;
margin:0;
padding:0;
}

/*(Category Bar)*/
.p-topics-detail .pl-category {
width:auto;
height:auto;
padding:.3em .6em;
margin:0;
font-size:.9em;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
white-space:nowrap;
text-transform:uppercase;
}
/*(Back Ground)*/
.p-topics-detail .pl-category.bg-topics {
background:#0080a7;
}


/*(Inner Box)*/
.p-topics-detail .dtl-box .inner-box {
/*width:87.35632%; */
width:93.75%;
height:auto;
margin:0 auto;
padding:1.2em 0;
clear:both;
}

/*[Date]*/
.p-topics-detail .pl-date {
font-size:1em;
margin-bottom:.5em;
}
.p-topics-detail .pl-date.in-frame {
color:#FFF;
margin-bottom:0;
margin-left:1em;
border-left:1px solid #FFF;
padding-left:1em;
}
.p-topics-detail .pl-date.out-frame {
color:#333;
}
/*[Title]*/
.p-topics-detail .pl-title {
font-size:1.3em;
line-height:1.5em;
margin:0 0 1.2em;
padding:0;
min-height:inherit;
color:#0080a7;
}

/*[Main Image]*/
.p-topics-detail .pl-image {
width:auto;
max-width:480px;
margin:0 auto 2em;
padding:0;
text-align:center;
}
.p-topics-detail .pl-image img {
max-width:100%;
height:auto;
}

/*[Catch]*/
.p-topics-detail .pl-catch {
font-size:1.1em;
margin:0 0 1.2em;
color:#ed1e79;
word-break:break-all;
}

/*[Text]*/
.p-topics-detail .pl-txt {
font-size:.9em;
line-height:1.7em;
margin:0 0 2em;
word-break:break-all;
}


/*(Entry Box)*/
.p-topics-detail .pl-entry {
width:auto;
height:auto;
margin:0 0 1em;
padding:0;
}
/*(Entry Title)*/
.pl-entry .pl-entry-ttl {
font-size:1em;
line-height:1.5em;
margin:0 0 .5em;
}
/*(Entry Button)*/
.pl-entry .btn-box {
margin:0 0 .5em;
}
/*(Entry End)*/
.pl-entry .pl-end {
font-size:.9em;
text-align:center;
}


@media screen and (max-width:640px) {
/*(Inner Box)*/
.p-topics-detail .dtl-box .inner-box {
width:93.75%;
padding:1em 0;
}

/*[Title]*/
.p-topics-detail .pl-title {
font-size:1.2em;
line-height:1.5em;
margin:0 0 1em;
}

}










/*
[Decolation]
*/

/*1.Catch in Bar*/
.pu-ob-ev,
.pu-ob-pg,
.pu-ob-pr,
.pu-ob-wb,
.pu-ob-mb {
width:auto;
height:auto;
padding:1em;
font-size:1em;
font-weight:bold;
}
/*[Event]*/ .pu-ob-ev {background-color:#dff3e2;}
/*[Program]*/ .pu-ob-pg {background-color:#dff3e2;}
/*[PR]*/ .pu-ob-pr {background-color:#fae3e0;}
/*[WEB]*/ .pu-ob-wb {background-color:#d4e9eb;}
/*[Mobile]*/ .pu-ob-mb {background-color:#f5f5dc;}



/*2.Text Size*/
/*[Large]*/.pu-txt-lg {font-size:1.2em;}
/*[Middle]*/.pu-txt-md {font-size:1.1em;}
/*[Small]*/.pu-txt-sm {font-size:1em;}
/*[X Small]*/.pu-txt-xs {font-size:.9em;}



/*3.Text Style*/
/*[Normal]*/.pu-st-rm { font-weight:normal}
/*[Bold]*/.pu-st-bd { font-weight:bold;}
/*[Italic]*/.pu-st-it { font-style:italic;}



/*4.Text Color*/
/*[Red]*/.pu-cl-red { color:#FF0000;}
/*[Pink]*/.pu-cl-pink { color:#e01278}
/*[Blue*/.pu-cl-blue { color:#0080a7;}
/*[Gray]*/.pu-cl-gray { color:#666;}


/*5.Margin*/
/*Bottom*/
/*[50px]*/.pu-mgb-50 {margin-bottom:50px !important;}
/*[42px]*/.pu-mgb-42 {margin-bottom:42px !important;}
/*[34px]*/.pu-mgb-34 {margin-bottom:34px !important;}
/*[28px]*/.pu-mgb-28 {margin-bottom:28px !important;}
/*[24px]*/.pu-mgb-24 {margin-bottom:24px !important;}
/*[20px]*/.pu-mgb-20 {margin-bottom:20px !important;}
/*[16px]*/.pu-mgb-16 {margin-bottom:16px !important;}
/*[12px]*/.pu-mgb-12 {margin-bottom:12px !important;}
/*[10px]*/.pu-mgb-10 {margin-bottom:10px !important;}