/* Variables */
// サイト横幅
@siteWidth: 1000px;
@thrWidth: 568px;
@thrWidth2: @siteWidth;

// メインの色
@mainColor: #016a6f;

@color1: #016a6f;
@color2: #009e96;
@color3: #00a0e9;
@color4: #0068b7;
@color5: #00479d;
@color6: #5f52a0;
@color7: #8957a1;
@color8: #eb6877;
@color9: #f39800;
@color10: #e9bb01;
@color11: #8fc31f;
@color12: #22ac38;

// 開発モード
// .devMode( true );
.devMode( false );

// 基本的な関数セットを読み込み
@import ( reference ) "basics.less";

/* common setting */
html, body{
	border-top: 3px solid @mainColor;
	min-width: @siteWidth;
	@media screen and (max-width: @thrWidth2) {
		width: 100%;
		min-width: 100%;
	}
}

.wrap{
	width: @siteWidth;
	position: relative;
	height: 100%;
	@media screen and (max-width: @thrWidth2) {
		width: 100%;
	}
	.centering;
}

.show {
	display: block;
}

.hidden {
	display: none;
}

.hiddenSp{
	@media screen and (max-width: @thrWidth2) {
		.hidden;
	}
}

.visibleSp{
	.hidden;
	@media screen and (max-width: @thrWidth2) {
		.show;
	}
}

.resImg{
	width: 100%;
}

header{
	.boxShadow;
	height: 132px;
	padding-top: 20px;
	position: relative;
	@media screen and (max-width: @thrWidth2) {
		height: auto;
		padding: 10px 0;
	}
	#spMenu{
		margin-left: 10px;
		float: left;
	}
	.logo{
		float: left;
		.hover;
		@media screen and (max-width: @thrWidth2) {
			margin-left: 10px;
		}
	}
	input.search{
		margin-right: 10px;
		font-size: 12px;
		width: 225px;
		height: 30px;
		border:none;
		padding: 5px;
		background-image: url(../img/common/search.png);
	}
	.snsBtn{
		.hover;
	}
	.login{
		margin-left: 10px;
		.hover;
		@media screen and (max-width: @thrWidth2) {
			margin-right: 10px;
		}
	}
	nav.pcNav{
		list-style: none;
		position: absolute;
		height: 65px;
		bottom: 0;
		li{
			float: left;
			margin-right: 2px;
			&:last-child{
				margin-right: 0;
			}
			&:nth-child( 1 ){
				background-color: @color1;
			}
			&:nth-child( 2 ){
				background-color: @color2;
			}
			&:nth-child( 3 ){
				background-color: @color3;
			}
			&:nth-child( 4 ){
				background-color: @color4;
			}
			&:nth-child( 5 ){
				background-color: @color5;
			}
			&:nth-child( 6 ){
				background-color: @color6;
			}
			&:nth-child( 7 ){
				background-color: @color7;
			}
			&:nth-child( 8 ){
				background-color: @color8;
			}
			&:nth-child( 9 ){
				background-color: @color9;
			}
			&:nth-child( 10 ){
				background-color: @color10;
				a{
					width: 82px;
				}
			}
			&:nth-child( 11 ){
				background-color: @color11;
				a{
					width: 83px;
				}
			}
			&:nth-child( 12 ){
				background-color: @color12;
				a{
					width: 83px;
				}
			}
			.hover;
			a{
				color: #fff;
				width: 81px;
				height: 65px;
				display: table-cell;
				font-size: 12px;
				text-align: center;
				vertical-align: middle;
				font-weight: bold;
				&:hover{
					text-decoration: none;
				}
			}
		}
	}
	nav.pcNavSub{
		position: absolute;
		width: 999px;
		background: rgba(255, 255, 255, 0.94);
		height: 150px;
		bottom: -150px;
		z-index: 1010;
		padding: 20px;
		display: none;
		border: 1px solid #ccc;
		.boxShadow();
		ul{
			width: 239px;
			height: 120px;
			padding: 0;
			float: left;
			border-left: 1px solid #999;
			list-style-type: none;
			&:first-child{
				border-left: none;
			}
			li{
				padding: 5px 20px 0 20px;
				a{
					color: #555;
					font-weight: bold;
				}
				ul{
					padding-left: 20px;
					float: none;
					border-left: none;
					height: auto;
					width: auto;
					li{
						font-size: 12px;
						padding: 0;
						a{
							font-weight: normal;
						}
					}
				}
			}
		}
	}
	nav.pcNavEvent{
		li{
			opacity: 0.3;
			a{
				&:hover{
					opacity: 1;
				}
			}
		}
		li.highlight{
			opacity: 1;
			a{
				&:hover{
					.hover;
				}
			}
		}
	}
	nav.mobileNav{
		width: 100%;
		margin-top: 10px;
		list-style: none;
		display: none;
		li{
			text-indent:20px;
			width: 100%;
			.lineHeights(50px);
			border-top: 1px solid #fff;
			&:nth-child( 1 ){
				background-color: @color1;
			}
			&:nth-child( 2 ){
				background-color: @color2;
			}
			&:nth-child( 3 ){
				background-color: @color3;
			}
			&:nth-child( 4 ){
				background-color: @color4;
			}
			&:nth-child( 5 ){
				background-color: @color5;
			}
			&:nth-child( 6 ){
				background-color: @color6;
			}
			&:nth-child( 7 ){
				background-color: @color7;
			}
			&:nth-child( 8 ){
				background-color: @color8;
			}
			&:nth-child( 9 ){
				background-color: @color9;
			}
			&:nth-child( 10 ){
				background-color: @color10;
			}
			&:nth-child( 11 ){
				background-color: @color11;
			}
			&:nth-child( 12 ){
				background-color: @color12;

			}
			a{
				width: 100%;
				.lineHeights(50px);
				display: block;
				color: #fff;
				.hover;
			}
		}
	}
}

main{
	padding-top: 20px;
	@media screen and (max-width: @thrWidth2) {
		padding: 10px;
		width: 100%;
	}
	.prText{
		color: #707070;
		background-color: #eaeaea;
		font-size: 12px;
		padding: 5px;
	}
	.prImg{
		margin: 20px 0;
	}

	#mainCol{
		width: 660px;
		margin-right: 30px;
		float: left;
		position: relative;
		@media screen and (max-width: @thrWidth2) {
			width: 100%;
		}
		.prText{
			color: #707070;
			background-color: #eaeaea;
			font-size: 12px;
			padding: 5px;
		}
		.prImg{
			margin: 20px 0;
		}
		h1{
			font-size: 18px;
			.lineHeights( 40px );
			background-image: url(../img/common/underbar.png);
			background-repeat: no-repeat;
			background-position: bottom left;
			padding: 0;
			span{
				position: absolute;
				right: 0;
			}
		}
		.articleBox{
			float: left;
			margin: 5px 0;
			.category{
				width: 71px;
				float: left;
				@media screen and (max-width: @thrWidth2) {
					float: none;
					width: 100%;
				}
				.name{
					background: @color1;
					width: 71px;
					.lineHeights( 16px );
					.borderRadius( 3px );
					font-size: 10px;
					color: #fff;
					text-align: center;
					margin-top: 8px;
				}
			}
			.cat1{ .name{ background: @color1; } }
			.cat2{ .name{ background: @color2; } }
			.cat3{ .name{ background: @color3; } }
			.cat4{ .name{ background: @color4; } }
			.cat5{ .name{ background: @color5; } }
			.cat6{ .name{ background: @color6; } }
			.cat7{ .name{ background: @color7; } }
			.cat8{ .name{ background: @color8; } }
			.cat9{ .name{ background: @color9; } }
			.cat10{ .name{ background: @color10; } }
			.cat11{ .name{ background: @color11; } }
			.cat12{ .name{ background: @color12; } }
			.article{
				width: 576px;
				margin-left: 84px;
				@media screen and (max-width: @thrWidth2) {
					margin-left: 0;
					width: 100%;
				}
				.title{
					font-size: 18px;
					line-height: 30px;
					color: #0044cc;
					font-weight: bold;
					span{
						margin-left: 10px;
						line-height: 30px;
						font-size: 10px;
						color: #7d7d7d;
						font-weight: 400;
					}
				}
				.summary{
					line-height: 20px;
					margin: 5px 0;
					font-size: 14px;
					color: #313131;
				}
			}
		}
		hr{
			margin: 10px 0;
		}
	}
	#searchCol{
		width: 660px;
		margin-right: 30px;
		float: left;
		position: relative;
		@media screen and (max-width: @thrWidth2) {
			width: 100%;
		}
		h1{
			font-size: 16px;
			line-height: 30px;
			min-height: 30px;
			font-weight: bold;
			padding: 0;
			a{
				color: #555;
			}
		}
		// .cat1{
		// 	h1{
		// 		a{
		// 			color: @color1;
		// 		}
		// 	}
		// }
		// .cat2{
		// 	h1{
		// 		a{
		// 			color: @color2;
		// 		}
		// 	}
		// }
		// .cat3{
		// 	h1{
		// 		a{
		// 			color: @color3;
		// 		}
		// 	}
		// }
		// .cat4{
		// 	h1{
		// 		a{
		// 			color: @color4;
		// 		}
		// 	}
		// }
		// .cat5{
		// 	h1{
		// 		a{
		// 			color: @color5;
		// 		}
		// 	}
		// }
		// .cat6{
		// 	h1{
		// 		a{
		// 			color: @color6;
		// 		}
		// 	}
		// }
		// .cat7{
		// 	h1{
		// 		a{
		// 			color: @color7;
		// 		}
		// 	}
		// }
		// .cat8{
		// 	h1{
		// 		a{
		// 			color: @color8;
		// 		}
		// 	}
		// }
		// .cat9{
		// 	h1{
		// 		a{
		// 			color: @color9;
		// 		}
		// 	}
		// }
		// .cat10{
		// 	h1{
		// 		a{
		// 			color: @color10;
		// 		}
		// 	}
		// }
		// .cat11{
		// 	h1{
		// 		a{
		// 			color: @color11;
		// 		}
		// 	}
		// }
		// .cat12{
		// 	h1{
		// 		a{
		// 			color: @color12;
		// 		}
		// 	}
		// }
	}
	#subCol{
		width: 660px;
		margin-right: 30px;
		float: left;
		position: relative;
		@media screen and (max-width: @thrWidth2) {
			width: 100%;
		}
		.breadcrumb{
			margin-bottom: 0;
			background-color:#fff;
			padding:0;
			font-size: 10px;
			.lineHeights( 20px );
			font-size: 10px;
			color: #656565;
			margin-top: 10px;
		}
		h1{
			font-size: 24px;
			line-height: 50px;
			min-height: 50px;
			border-bottom: solid 3px;
			border-left: solid 10px;
			font-weight: bold;
			padding: 0;
			padding-left: 10px;
			border-color: @color1;
			span{
				font-size: 18px;
				font-weight: bold;
			}
		}
		.cat1{
			h1{
				border-color: @color1;
			}
			span.summary{
				color: @color1;
			}
		}
		.cat2{
			h1{
				border-color: @color2;
			}
			span.summary{
				color: @color2;
			}
		}
		.cat3{
			h1{
				border-color: @color3;
			}
			span.summary{
				color: @color3;
			}
		}
		.cat4{
			h1{
				border-color: @color4;
			}
			span.summary{
				color: @color4;
			}
		}
		.cat5{
			h1{
				border-color: @color5;
			}
			span.summary{
				color: @color5;
			}
		}
		.cat6{
			h1{
				border-color: @color6;
			}
			span.summary{
				color: @color6;
			}
		}
		.cat7{
			h1{
				border-color: @color7;
			}
			span.summary{
				color: @color7;
			}
		}
		.cat8{
			h1{
				border-color: @color8;
			}
			span.summary{
				color: @color8;
			}
		}
		.cat9{
			h1{
				border-color: @color9;
			}
			span.summary{
				color: @color9;
			}
		}
		.cat10{
			h1{
				border-color: @color10;
			}
			span.summary{
				color: @color10;
			}
		}
		.cat11{
			h1{
				border-color: @color11;
			}
			span.summary{
				color: @color11;
			}
		}
		.cat12{
			h1{
				border-color: @color12;
			}
			span.summary{
				color: @color12;
			}
		}
		.h1bottom{
			margin-bottom: 20px;
			font-size: 12px;
			line-height: 20px;
			color:#555;
			#twitter-widget-0{
				width: 120px !important;
			}
		}
		.entry-content{
			h2{
				// color: @color1;
				border-left: 3px solid #555;
				padding-left: 10px;
				font-size: 20px;
			}
			h3{
				// color: @color1;
				font-size: 18px;
				border-left: 3px solid #555;
				padding-left: 10px;
			}
			h4{
				// color: @color1;
				font-size: 16px;
				border-left: 3px solid #555;
				padding-left: 10px;
			}
			h5{
				// color: @color1;
				font-size: 14px;
				border-left: 3px solid #555;
				padding-left: 10px;
			}
			p{
				font-size: 14px;
				color:#555;
				line-height: 1.8;
			}
			ul, ol{
				li{
					line-height: 1.8;
				}
			}
			dl{
				dd, dt{
					line-height: 1.8;
				}
			}
		}
		.related{
			margin-top: 30px;
			.relatedTitle{
				.lineHeights( 30px );
				padding-left: 10px;
				background: #323232;
				color:#fff;
				@media screen and (max-width: @thrWidth2) {
					width: 100%;
				}
			}
			.article{
				font-size: 12px;
				padding: 5px 5px;
				border-bottom: dotted 1px #999;
				.date{
					line-height: 20px;
					font-size: 10px;
					color: #7d7d7d;
					@media screen and (max-width: @thrWidth2) {
						line-height: 30px;
						float: left;
					}
				}
				.title{
					line-height: 20px;
					font-size: 12px;
					color: #0044cc;
					@media screen and (max-width: @thrWidth2) {
						line-height: 30px;
						float: left;
						margin-left: 5px;
					}
				}
				.summary{
					font-size: 10px;
					color: #313131;
					@media screen and (max-width: @thrWidth2) {
						line-height: 30px;
						float: left;
						margin-left: 5px;
					}
				}
			}
		}
	}
	#sidebar{
		float: left;
		width: 310px;
		position: relative;
		@media screen and (max-width: @thrWidth2) {
			width: 100%;
		}
		.banners{
			margin-bottom: 10px;
			position: relative;
			.banner{
				display: block;
				margin-bottom: 10px;
				.hover;
				@media screen and (min-width: @thrWidth) and (max-width: @thrWidth2) {
					width: 48%;
					float: left;
					margin-left: 1%;
					img{
						width: 100%;
					}
				}
				@media screen and (max-width: @thrWidth) {
					width: 98%;
					float: left;
					margin-left: 1%;
					img{
						width: 100%;
					}
				}
			}
		}
		.sideBox{
			margin-top: 20px;
			.subTitle{
				.lineHeights( 30px );
				padding-left: 10px;
				background: #323232;
				color:#fff;
				font-size: 12px;
				border-left: 5px solid;
				@media screen and (max-width: @thrWidth2) {
					width: 100%;
				}
			}
			.subTitleNotice{
				border-left-color: #CC0000;
			}
			.subTitleEvent{
				border-left-color: #026B70;
			}
			.subTitleNews{
				border-left-color: #eb6877;
			}
			.subTitleRank{
				border-left-color: #0068b7;
			}
			.article{
				padding: 5px 5px;
				border-bottom: dotted 1px #999;
				.rank{
					color: #fff;
					font-size: 12px;
					.circle( 20px );
					line-height: 20px;
					background: #222;
					margin-top: 10px;
					margin-right: 10px;
					float: left;
					text-align: center;
				}
				.date{
					line-height: 20px;
					/*					font-size: 10px;*/
					font-size: 12px;
					color: #7d7d7d;
					@media screen and (max-width: @thrWidth2) {
						// line-height: 30px;
						// float: left;
					}
				}
				.title{
					line-height: 20px;
					font-size: 12px;
					color: #0044cc;
					@media screen and (max-width: @thrWidth2) {
						// line-height: 30px;
						// float: left;
						// margin-left: 5px;
					}
				}
				.title-rank{
					margin-left: 30px;
				}
				.summary{
					/*					font-size: 10px;*/
					font-size: 12px;
					color: #313131;
					@media screen and (max-width: @thrWidth2) {
						// line-height: 30px;
						// float: left;
						// margin-left: 5px;
					}
				}
			}
		}
	}
}

footer{
	margin-top: 20px;
	position: relative;
	background-color: #d5d5d5;
	padding-top: 10px;
	padding-bottom: 10px;
	@media screen and (max-width: @thrWidth2) {
		display: none;
		.ulBtn2:after{
			content: ' ∨';
		}
	}
	ul{
		width: 250px;
		list-style: none;
		padding: 0;
		margin-top: 10px;
		float: left;
		@media screen and (max-width: @thrWidth2) {
			margin: 0;
			width: 100%;
			float: none;
		}
		li{
			line-height: 24px;
			font-size: 12px;
			font-weight: bold;
			@media screen and (max-width: @thrWidth2) {
				line-height: 30px;
				width: 100%;
				text-indent: 10px;
			}
			a{
				color:#545454;
				@media screen and (max-width: @thrWidth2) {
					.lineHeights( 40px );
					width: 100%;
					display: block;
					background: #ccc;
					border-top: 1px solid #fff;
				}
			}
			ul{
				margin-top: 0;
				float: none;
				@media screen and (max-width: @thrWidth2) {
					border-top: 1px solid #ccc;
					display: none;
				}
				li{
					font-weight: 400;
					a{
						@media screen and (max-width: @thrWidth2) {
							background: #eee;
						}
					}
					ul{
						padding-left: 10px;
						@media screen and (max-width: @thrWidth2) {
							padding-left: 0;
						}
						li{
							font-size: 10px;
							line-height: 18px;
							a{
								@media screen and (max-width: @thrWidth2) {
									border-top: 1px solid #ccc;
									background: #fff;
									// .lineHeights( 30px );
								}
							}
						}
					}
				}
			}
		}
	}
}

#copyright{
	background-color: @mainColor;
	.copy{
		text-align: center;
		.lineHeights( 30px );
		color: #fff;
		font-size: 10px;
		letter-spacing: 1px;
	}
}