@charset "UTF-8";

/* ローディングマーク */
.timeline-loading {
    width             : 200px;
    letter-spacing    : 2px;
    font-size         : 24px;
    margin            : 100px auto;
    line-height       : 30px;
}

.timeline-loadingMark {
    position          : relative;
    float             : left;
    width             : 30px;
    height            : 30px;
    background        : rgba(255,255,255,0.0) url(/patio/img/commons/indicator.gif) no-repeat center center;
    color             : #666;
    background-size   : contain;
    margin-right      : 10px;
}

/* ブログページ */
#jscs-blog-page {
	position             : relative;
	width                : 90%;
	margin               : 0 auto;
    padding              : 0px 0px;
}

#jscs-blog-page .section-lv2 h2 {
   letter-spacing        : 8px;
}

#blogMessageArea {
	position             : relative;
	width                : 100%;
	margin-top           : 50px;
}
#blogMessage {
	position             : relative;
	width                : 100%;
	max-width            : 1000px;
	margin               : 10px auto;
}

#timeline-max-count {
    position             : relative;
    width                : calc( 100% - 40px );
    max-width            : 600px;
    margin               : 10px auto;
	font-size            : 16px;
	text-align           : right;
    color                : #fff;
}

#mosaTimelineWidgetBox {
	background-color     : #fff;
}

.mosaTimelineEntry-item.text {
/*    width                : calc(-5px + 100%)!important;*/
}

@media all and (min-width:321px) and (max-width: 414px) {
	#infomation-list #timeline-max-count {
	    font-size            : 16px;
	    /*top                  : 84px;*/
	}
}

/* カテゴリ検索結果 */
.entry-counter {
	margin             : 10px 20px;
	font-size          : 16px;
}

#mtl_mosaTimelineSelectEntryList {
	position           : relative;
	width              : 100%;
	background         : #f4f4f2;
	margin-top         : 10px;
	padding-bottom     : 10px;
}

#siteBlogEntryList-content .entry-head {
    position           : relative;
    display            : block;
    margin-left        : 10px;
    margin-bottom      : 5px;
    border-top         : none;
    border-bottom      : 3px solid #00acc3;
    padding            : 10px 0px 5px 0px;
    color              : #777;
    white-space        : nowrap;
    margin: 0 auto;
    width: 100%;
}


#siteBlogEntryList-content .entry-head  .entry-title,
#siteBlogEntryList-content .entry-head  .entry-catrgoryName {
	margin-right       : 0px;
	margin-left        : 5px;
	font-size          : 18px;
	line-height        : 1.1em;
	text-decoration    : none;
	white-space        : nowrap;
	display            : inline;
	vertical-align     : bottom;
}

.mosaTimelineEntryList li ul {
	padding-bottom     : 10px
}

.mosaTimelineEntry-item .entry-date {
    padding-left       : 10px;
	font-size          : 14px;
}
.mosaTimelineEntry-item .entry-subject {
    padding            : 5px 6px;
	font-size          : 16px;
    line-height        : 1.4;
    color              : #000;
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-line-clamp : 2;
    overflow           : hidden;
    text-overflow      : ellipsis;
    white-space        : pre-line;
    height             : 3em;
}
.mosaTimelineEntry-item .entry-content {
	display            : none;
}
.mosaTimelineEntry-item .entry-category {
    padding            : 0px 10px;
	font-size          : 14px;
}

/*　お知らせ一覧  */

#blogMessage ._mtl_articleMessage {
    width                : calc( 100% - 20px );
    margin               : 20px 10px;
    padding-bottom       : 10px;
    border-radius        : 6px;
    background-color     : #fff;
}

#blogMessage ._mtl_articleMessage ._mtl_articleHead .date,
#infomationMessageViewer-content ._mtl_articleMessage ._mtl_articleHead .date {
	position             : relative;
	clear                : both;
	float                : left;
    margin               : 10px 20px;
    font-size            : 16px;
    line-height          : 1.2;
}

#blogMessage ._mtl_articleMessage ._mtl_articleHead,
#infomationMessageViewer-content ._mtl_articleMessage ._mtl_articleHead {
	position             : relative;
	width                : 100%;
	float                : left;
	margin               : 5px 0px 5px 0px;
}

#blogMessage ._mtl_articleMessage ._mtl_articleHead .title,
#infomationMessageViewer-content ._mtl_articleMessage ._mtl_articleHead .title {
	position             : relative;
	clear                : both;
    padding              : 20px;
    background-color     : #b5abdf38;
 	color                : #000;
    font-size            : 20px;
 	font-weight          : bold;
 	line-height          : 1.6;
    text-align           : center;
    font-family          : "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}

#infomationMessageViewer-content ._mtl_articleMessage ._mtl_articleHead .userName {
	background-color     : #b5abdf38;
}

#blogMessage ._mtl_articleMessage ._mtl_articleContent,
#blogMessage ._mbp_article ._mtl_articleContent {
	position             : relative;
	clear                : both;
	width                : 100%;
	margin               : 5px 0px 5px 0px;
}

#blogMessage ._mtl_category {
	position             : relative;
	clear                : both;
	width                : calc( 100% - 10px );
	margin               : 0px 10px 25px 10px!important;
}
.infomation .clickMessageCategory {
	font-size            : 120%;
	float                : left;
	margin               : 0px 0px 0px 10px;
	cursor               : pointer;
	line-height          : 1.5;
}

#blogMessage ._mtl_category .clickMessageCategory {
    border               : 1px solid #105ce6;
    padding              : 3px;
    float                : left;
}

@media all and (min-width: 680px) {

	#blogMessage ._mtl_articleMessage ._mtl_articleContent,
	#blogMessage ._mbp_article ._mtl_articleContent {
		width: calc( 100% - 20px )!important;
		margin: 5px 10px 5px 10px;
	}
}


@media all and (min-width: 800px) {
	#blogMessageArea {
	    /*display              : none;*/
	    width                : 100%;
	    /*float                : left;*/
	}
	/*#blogWidgetArea {
	    display              : none;
	    width                : 30%;
	    float                : left;
        padding-top          : 106px
	}
	#mosaTimelineWidgetBox {
	    display              : none;
	    width                : 100%;
	    max-width            : 300px;
	    border-radius        : 6px;
	    box-sizing           : border-box;
	}*/
}

/* ブログ */
.siteBlogEntryList.entry {
	margin              : 3px 3px 5px 3px;
	padding             : 4px 4px;
}

.siteBlogEntryList.entry {
	list-style          : none;
    position            : relative;
}

.siteBlogEntryList.entry li:first-child {
	/*border              : none;*/
	/*padding-top         : 0px;*/
}

.siteBlogEntryList.entry li {
    position            : relative;
    display             : block;
    float               : left;
    width               : calc( 100% / 2 - 24px );
    height              : 180px;
	margin              : 10px 6px;
    padding             : 10px 6px;
	font-size           : 16px;
    border-bottom-color : #ccc;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    cursor              : pointer;
    background-color    : #fff;
}

.recient .siteBlogEntryList.entry li {
    float               : none;
	width               : 100%;
    max-width           : 500px;
    margin              : 10px auto;
}

.siteBlogEntryList.entry > li {
    position            : relative;
	/*color               : #999999;*/
}

.siteBlogEntryList.entry li.hideByUser .entry-category:before {
	content             : '再表示';
    color               : #fff;
    background-color    : rgba(234, 85, 58, 1);
    margin-left         : 10px;
    padding             : 3px 5px 2px 6px;
    cursor              : pointer;
    letter-spacing      : 1px;
    border-radius       : 4px;
}

.siteBlogEntry-item {
	position            : relative;
	/*height              : 60px;*/
	float               : left;
}

.siteBlogEntry-item.text {
	position            : relative;
	width               : calc(-94px + 100%);
    padding             : 0px 3px 2px 10px;
    line-height         : 1.6em;
}

.entry-photoIcon {
	width               : 80px;
	height              : 80px;/*53px;*/
}

.entry-photoIcon-img {
	position            : relative;
	width               : 100%;
	height              : 100%;
	overflow            : hidden;
    border              : 1px solid #999;
    box-sizing          : border-box;
}

.entry-photoIcon-img img {
	position            : absolute;
}

.siteBlogEntry-item .entry-mosa-name {
	color               : #666;
	font-weight         : bold;
    display             : -webkit-box;
    -webkit-box-orient  : vertical;
    -webkit-line-clamp  : 1;
    overflow            : hidden;
    line-height         : 1.2em;
}

.siteBlogEntry-item .entry-date {
	float               : left;
}

.siteBlogEntry-item .entry-category {
    float               : right;
    margin-top          : -5px;
	border-radius       : 4px;
    border              : 1px solid #aaa;
    padding             : 0px 10px;
    background-color    : #aaa;
    color               : #fff;
}

.siteBlogEntry-item .entry-blogSubject {
	clear               : both;
    padding-top         : 3px;
	color               : #000;
	font-weight         : bold;
    line-height         : 1.2em;
    /*overflow            : hidden;
    text-overflow       : ellipsis;
    white-space         : nowrap;*/
	font-size           : 18px;
}

.siteBlogEntryList .entry-content {
	clear               : both;
    display             : -webkit-box;
    -webkit-box-orient  : vertical;
    -webkit-line-clamp  : 3;
    overflow            : hidden;
    line-height         : 1.6em;
    height              : 4.8em;
    padding             : 3px 8px;
}

@media all and (max-width: 480px) {
	.siteBlogEntryList.entry li {
		height          : 204px;
	}
	.siteBlogEntry-item .entry-blogSubject {
		font-size       : 16px;
	}
	.siteBlogEntry-item .entry-category {
		border-radius   : 3px;
	    padding         : 0px 4px;
		font-size       : 14px
	}
}

@media all and (max-width: 800px) {
	#jscs-blog-page {
		width               : 98%;
	}
	.siteBlogEntryList.entry li {
	    float               : none;
	    width               : 100%;
	    max-width           : 500px;
	    margin              : 10px auto;
	}
}