@charset "UTF-8";
/* CSS Document */
.clb_col1 { color:#4055C0; } /* nav-now */
.clb_col2 { color:#F562A8; } /* nav-normal */
.clb_col3 { color:#e40077; } /* h color */
.br_s { margin-top:10px; }
.br_m { margin-top:20px; }
.br_l { margin-top:30px; }
.br_ll { margin-top: 50px; }
.txt_marker { background:linear-gradient(rgba(0, 0, 0, 0) 30%, #ffea45 30%); padding-right:3px; padding-left:3px; }

/* Official Clb Layout and Commons */
.ofcclb_whole { max-width: 820px; margin: 0 auto 30px; background: #fff; font-size: 1.2em; }
.ofcclb_whole hr { border-top: 1px solid #ccc; border-bottom: 0; margin: 20px 0; }
.ofcclb_sect { padding: 40px; }
/* margin-top */
.ofcclb_whole .br_s { margin-top: 10px; }
.ofcclb_whole .br_m { margin-top: 20px; }
.ofcclb_whole .br_l { }
.ofcclb_whole .br_ll { }
.ofcclb_whole ul { padding-left: 0; margin-left: 0; }
.ofcclb_mainvisual { position:relative; }
.ofcclb_navi { font-size: 0px; background: #F562A8; }
.ofcclb_navi li { display: inline-block; text-align: center; width: 20%; font-size: 14px; box-sizing: border-box; border-right: 1px solid #fff; }
.ofcclb_navi li:last-child { border-right: none; }
.ofcclb_navi a { display: block; height: 2.6em; line-height: 2.6em; box-sizing: border-box; text-decoration: none; color: #fff; }
.ofcclb_navi a:hover, .ofcclb_navi .now a { background: #4055C0; color: #fff; position: relative; }
.ofcclb_navi .now a:before { content: ""; display: block; position: absolute; left: 50%; margin-left: -20px; bottom: -10px; border-top: 20px solid #4055C0; border-right: 20px solid transparent; border-left: 20px solid transparent; }
.ofcclb_navi a { display: block; height: 2.6em; line-height: 2.6em; box-sizing: border-box; text-decoration: none; color: #fff; }
.ofcclb_navi .dum { display: block; height: 2.6em; line-height: 2.6em; box-sizing: border-box; text-decoration: none; color:#666;}
.ofcclb_title { margin-bottom: 20px; font-size: 18px; }/* h2 size */
.ofcclb_title span { background: #1FCE89; color:#FFFFFF; padding: 5px 20px; margin-left: -50px; position: relative; }
.ofcclb_title span:before { display: block; position: absolute; left: 0; bottom: -10px; content: ""; border-top: 10px solid #4a665b; border-left: 10px solid transparent; border-right: none; }
.ofcclb_cts h3 { color: #e40077; margin-bottom: 10px; font-weight:bold; }
.ofcclb_label { background: #FA5E62; color: #fff; display: inline-block; padding: 0px 8px; margin-right: 5px; font-size: 0.9em; }
.ofcclb_cts .btn_link { margin-top: 30px; }
.ofcclb_cts .btn_link a { padding: 10px 30px; background:#F55CD0; color: #fff; white-space: nowrap; border-radius: 3px; box-shadow: 0 2px 1px rgba(0,0,0,0.3); display: inline-block; margin-bottom: 10px; }
.ofcclb_cts .btn_link a:hover { text-decoration: none; opacity: 0.8; }
.ofcclb_classicon { float:left; width:100px; color:#e40077; font-size:80px;}
.ofcclb_classinfo { margin-left:100px;}
.ofcclb_company { font-size:0.8em; }
.ofcclb_status_end {position:absolute; background:url(../images/clb_end.png) no-repeat left top; width:112px; height:112px; top:150px; right:40px; }
.ofcclb_status_result {position:absolute; background:url(../images/clb_result.png) no-repeat left top; width:112px; height:112px; top:150px; right:40px; }

/* Prize List */
.prizeplan { overflow:hidden; }
.prizeplan .ofcclb_label { float:left; display:block; }
.prizects { margin-left:110px; }

.deadline { font-weight: bold; margin-top: 10px; }
.deadline p { display: inline-block; }
.ofcclb_cts .clb_limit { background: #F55CD0; color: #fff; padding: 3px 10px; position: relative; margin-right: 20px; display: inline-block; margin-bottom: 5px; }
.ofcclb_cts .clb_limit:before { border-left: 10px solid #F55CD0; display: block; content: ""; position: absolute; right: -8px; top: 8px; border-bottom: 10px solid transparent; }
.ofcclb_sect:nth-child(even) { background-color: #f5f5f5; }
.post_note { margin-top:20px; }
.clmbox .clm2 { width: 48%; box-sizing: border-box; float: left; }
.clmbox .clm2:last-child { float: right; }
.clmbox .clm3 { width: 30%; margin-right: 5%; box-sizing: border-box; float: left; margin-bottom:30px; }
.clmbox .clm3:last-child { margin-right: 0; }
.clmbox .clm3_1 { width: 32%; box-sizing: border-box; float: left; }
.clmbox .clm3_2 { width: 64%; margin-right: 4%; box-sizing: border-box; float: left; }
.blog_list { margin-top: 15px; }
.blog_list li { list-style-type: none; box-sizing: border-box; border-bottom:1px solid #ddd; padding:10px 0; overflow:hidden; }
.blog_list .blogimg img { float: left; width: 55%; }
.blog_list .topnewsspace { min-height: 60px; padding: 10px 10px 0 58%; line-height: 1.2em; box-sizing: border-box; }
.blog_list .noattach { padding-right:0;}
.blog_list h3 { margin-bottom:0; }
.blog_list h3 a { line-height: 1.4em; word-break: break-all; word-wrap: break-word; color: #333; font-size: 14px; }
.blog_list .date { font-size: 0.8em; margin-bottom: 8px; color: #999; }
.kiyaku { font-size: 12px; }
.kiyaku h3 { margin-top: 30px; margin-bottom: 10px; font-weight: bold; }
.kiyaku li { list-style-type: disc; margin-left: 20px; }
.ofc_clb_list li:before { content: ""; display: inline-block; margin-right: 10px; border-left: 7px solid #e40077; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ofc_clb_list li { text-indent: -15px; margin-left: 15px; margin-top: 5px; list-style-type: none; }
.clb_tag { display: inline-block; margin-bottom: 20px; }
.clb_tag p { display: inline-block; position: relative; color: #fff; line-height: 35px; font-size: 12pt; }
.clb_tag p:before { content: ""; border-right: 18px solid #FA5E62; border-bottom: 18px solid transparent; border-top: 18px solid transparent; display: inline-block; vertical-align: bottom; }
.clb_tag span { height: 35px; padding: 0 20px; display: inline-block; position: relative; z-index: 2; background: #FA5E62; color: #fff; }
.clb_tag span:after { content: "●"; color: #fff; display: block; position: absolute; left: -10px; top: -1px; z-index: 1; }
.clb_tag i:after { content: ""; width: 70%; height: 55%; z-index: 1; position: absolute; right: 10px; bottom: 9px; -webkit-transform: skew(20deg) rotate(6deg); -moz-transform: skew(20deg) rotate(6deg); transform: skew(20deg) rotate(6deg); -webkit-box-shadow: 0 10px 8px rgba(0,0,0,0.2); box-shadow: 0 10px 8px rgba(0,0,0,0.2); }
.clb_tag+.fa-play { margin-left:10px; margin-right:10px; }

/* for Results ========================== */
ul.menu_result { background:#aaa; padding:16px 20px 0 30px; }
.menu_result li { background:#000; color: #fff; display:inline-block; border-radius:6px 6px 0 0; margin:0 4px; }
.menu_result a { display:block; color:#fff; padding:10px 50px; font-size:1.2em; }
.menu_result .now { background: #fff; }
.menu_result .now a { color:#939393; }

.dampager { margin-bottom: 30px; text-align: center;}
.dampager li { display:inline-block; width: 25px; height: 25px; font-size: 1.2em; }
.dampager li a { width: 25px; height: 25px; display: block; color: #e40077; line-height: 25px; }
.dampager li a:hover { background: #ddd; color:#fff; border-radius: 13px; text-decoration: none; }
.dampager li span { width: 25px; height: 25px; display: block; background: #e40077; color: #fff; border-radius: 13px; line-height: 25px; }

.music_result { text-align: center; }

.illust_result { list-style-type: none; text-align: center; }
.illust_result li { display: inline-block; width: 220px; margin-right: 35px; height: 180px; }
.illust_result img { width: 220px; }
.illust_result a { font-size: 0.9em; text-align: left; }

.ofcclb_sect.result { padding: 40px 0 0; }
.chara{
	text-align: center;
	padding-bottom: 60px;
}
.chara_title{
	text-align: center;
	padding: 5px 0;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 30px;
}
.chara:nth-of-type(1) > .chara_title{ background-color: #00a4d0; }
.chara:nth-of-type(2) > .chara_title{ background-color: #00bd94; }
.chara:nth-of-type(3) > .chara_title{ background-color: #1d4ebf; }
.chara:nth-of-type(4) > .chara_title{ background-color: #f19522; }
.chara:nth-of-type(5) > .chara_title{ background-color: #ad9200; }
.chara:nth-of-type(6) > .chara_title{ background-color: #e058d2; }
.chara:nth-of-type(7) > .chara_title{ background-color: #d53344; }

.chara img{
	display: block;
	width: 100%;
	height: auto;
}
.name,
.word_name{
	font-size: 16px;
}
.name span,
.word_name span{
	font-weight: bold;
}
.name{
	margin-top: 2px;
}
.word_name{
	margin: 30px 0 5px;
}
.magicalword_tb{
	margin: auto;
	width: 700px;
	border-spacing: 0;
	border-collapse: collapse;
}
.magicalword_tb th{
	background: #e7e7e7;
	text-align: center;
	padding: 3px;
	width: 50%;
	font-size: 11px;
	font-weight: normal;
}
.magicalword_tb td{
	background: #fff;
	padding: 3px;
}
.magicalword_tb td p:first-child{
	font-weight: bold;
}
.magicalword_tb td .sml{
	font-size: 12px;
}
.chara_title_type {
	font-weight: bold;
	text-decoration: underline;
}

.works_prize { font-weight:bold; font-size: 24pt; margin-bottom: 15px; color:#fff; text-align: center; }
.label_small { background:#ff3399; color:#fff; padding:2px 5px; font-size:11px; }
.img_centering { width:100%; height:200px; background-position:center center; background-size:contain; background-repeat:no-repeat; }
.works_title { margin-top:10px; margin-bottom:5px; font-weight:bold; font-size: 14pt; }
.works_auther { margin-bottom:10px;}

@media screen and (min-width: 641px) {
	.blog_list li { width: 100%; }
	.blog_list .topnewsspace { padding: 0; width: 64%; float: left; margin-top: 8px; }
	.blog_list .blogimg { float:right; }
	.blog_list .blogimg img { max-width: 250px; width: 100%; }
	.works_play { width:360px; float:left; }
	.works_info_music { padding-left:360px; }
	.illust_result li:nth-of-type(3n) { margin-right: 0; }
	.chara:last-of-type{
		padding-bottom: 90px;
	}
	.chara > div.illust{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		justify-content: center;
		-webkit-justify-content: center;
		width: 90%;
		margin: 30px auto 60px;
	}
	.chara > div.illust > div{
		width: 44%;
		margin: auto;
	}
	.chara_title_type{
		font-size: 16px;
	}
	.magicalword_tb th:first-child{
		border-right: 2px #fff solid;
	}
	.result .ofcclb_title span { margin-left: -10px; }
	.banner_img {
		width: 400px;
		height: auto;
	}
}

@media screen and (max-width: 640px) {
	.img100 { width: 100%; height: auto;}
	.ofcclb_sect { padding: 20px 20px 30px; }
	.clm_half { width: 100%; float: none; }
	.nav-main { font-size: 0px; background: #F562A8; }
	.nav-main a { color: #fff; }
	.nav-main .now{ background: #4055C0; }
	.ofcclb_title span { margin-left: 0; }
	.ofcclb_title span:before { content: none; }
	.ofcclb_classicon { width:50px; font-size:40px; }
	.ofcclb_classinfo { margin-left:50px; }
	.prizeplan .ofcclb_label { display:inline-block; float:none; }
	.prizects { margin-left:0; margin-top:5px; }
	.ofcclb_cts .clb_limit:before { content: none; }
	.clmbox .clm3 { float: none; width: 100%; margin-right: 0; margin-top: 20px; border-top:1px solid #ccc; padding-top:20px; }
	.clmbox .clm2 { float: none; width: 100%; margin-right: 0; margin-top: 20px; }
	.works_music { margin-top: 20px; border-top:1px solid #ccc; padding-top:20px; }
	.blog_list { margin-right: 0; }
	.blog_list li { float: none; width: 100%; background: #fff; margin-bottom: 15px;  padding:0; height:auto; box-shadow:1px 1px 3px rgba(0,0,0,0.2);  }
	.blog_list a { float: none; }
	.blog_list .blogimg img { width: 100%; height: auto; float: none; }
	.blog_list .topnewsspace { padding: 10px; }
	.clb_tag span:after { font-size: 0.5em; }
	.clb_tag+.fa-chevron-right { display:none; }
	ul.menu_result { padding: 10px 10px 0 10px; }
	.menu_result li { margin: 0; }
	.menu_result a{ padding: 10px 20px; font-size: 1em; }
	.result_btn_play { width: 200px; height: 60px; background-color:#e40077; color: #fff; border-bottom: 2px solid #072079; box-shadow: 0 1px 3px #ccc; }
	.dampager li { display:inline-block; width: 30px; height: 30px; padding: 2px; }
	.dampager li a { width: 20px; height: 20px; display: block; color: #e40077; line-height: 20px; }
	.illust_result li { width:calc(50% - 35px); margin-right: 35px; height: auto; margin-bottom: 30px; }
	.illust_result img { width: 100%; }
	.illust_result li:nth-of-type(2n) { margin-right: 0; }
	.illust_result a { font-size: 0.9em; }
	.works_prize img { width: auto; max-width: 280px;}

	.chara_title{ font-size: 15px; margin-bottom: 15px }
	.chara > div.illust{ padding: 15px 0; }
	.chara > div.illust > div{
		width: auto;
		max-width: 240px;
		margin: 0 auto 25px;
	}
	.chara_title_type {
		font-size: 16px;
	}
	.magicalword_tb{
		width: 85%;
	}
	.name, .word_name{
		font-size: 15px;
	}
	.magicalword_tb td{
		text-align: left;
	}
	.magicalword_tb td p:first-child{
		font-size: 13px;
	}
	.banner_img {
		width: 100%;
		height: auto;
	}

	/*renew*/
	.ofc_clb_list img{ width: 100% !important; display: block; }
	}
}

.br_ss { font-size: 10px; }
.btn_clb_entry {
    width:280px;
    display:block;
    background-color: #ff8b27;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d2bd94 0), to(#d2bd94 50%));
    background-image: -webkit-linear-gradient(top, #ffa557 0, #ffa557 50%, #ff8318 50%, #ff8318 100%);
    background-image: -moz-linear-gradient(top, #ffa557 0, #ffa557 50%, #ff8318 50%, #ff8318 100%);
    background-image: -ms-linear-gradient(top, #ffa557 0, #ffa557 50%, #ff8318 50%, #ff8318 100%);
    background-image: -o-linear-gradient(top, #ffa557 0, #ffa557 50%, #ff8318 50%, #ff8318 100%);
    background-image: linear-gradient(top, #ffa557 0, #ffa557 50%, #ff8318 50%, #ff8318 100%);
    border: 0;
    border-radius: 3px;
    color: #ffffff !important;
    font-weight:bold;
    line-height:34px;
    height:34px;
    text-align: center;
    text-shadow: 0px -1px 1px #db7621; border-bottom:3px solid #db7621;
}
.btn_clb_entry:hover {
    background-color: #ff8b27;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff8b27 0), to(#ff8b27 50%));
    background-image: -webkit-linear-gradient(top, #ff8b27 0, #ff8b27 50%, #ea7815 50%, #ea7815 100%);
    background-image: -moz-linear-gradient(top, #ff8b27 0, #ff8b27 50%, #ea7815 50%, #ea7815 100%);
    background-image: -ms-linear-gradient(top, #ff8b27 0, #ff8b27 50%, #ea7815 50%, #ea7815 100%);
    background-image: -o-linear-gradient(top, #ff8b27 0, #ff8b27 50%, #ea7815 50%, #ea7815 100%);
    background-image: linear-gradient(top, #ff8b27 0, #ff8b27 50%, #ea7815 50%, #ea7815 100%);
    cursor: pointer;
    text-decoration:none;
}