@headerBack: hsl(298, 100%,  78%);
@color1: lighten(@headerBack, 5%);
@headerLink: lighten(@headerBack, 10%);
@headerLinkHover: white;

@import "../style-base.less";
@import "./style-store.less";

#header{
}
	#headerInfo{
		height: 50px;
		@media screen and (max-width: @tMWidth){
			height: auto;
			text-align: left;
			a{
				text-align: center;
			}
		}
		@media screen and (max-width: @sMWidth){
			height: auto;
			padding: 0 5px;
		}
	}
		
		#headerLogo{
			@media screen and (max-width: @tMWidth){
				padding-bottom: 5px;
				line-height: 0;
			}
			img{
				vertical-align: text-top;
			}
			.logo1{
				width: 300px;
				@media screen and (max-width: @tMWidth){
					width: auto;
				}
				@media screen and (max-width: @sMWidth){
					width: 100%;
				}
			}
			.logo2{
				.ImgMoverOpacity(#FA71FF);
				vertical-align: text-top;
				@media screen and (max-width: @sMWidth){
					margin: 0 0 10px 0px;
				}
				img{
					width: 260px;
					//padding: 0 10px;
					@media screen and (max-width: @tMWidth){
						width: auto;
					}
					@media screen and (max-width: @sMWidth){
						width: 100%;
					}
				}
			}
			.logo3{
				.ImgMoverOpacity(#FF0070);
				vertical-align: text-top;
				@media screen and ( max-width: @sMWidth){
					margin: 0 0 10px 0px;
				}
				
				img{
					width: 230px;
					@media screen and (max-width: @tMWidth){
						width: 300px;
					}
					@media screen and (max-width: @sMWidth){
						width: 250px;
					}
				}
			}
		}
		#headerInfomation{
			@media screen and (max-width: @tMWidth){
				position: absolute;
				top: auto;
				right: 0;
				bottom: 5px;
				width: 50%;
			}
			@media screen and (max-width: @sMWidth){
				position: relative;
				width: auto;
			}
		}
#slide{
}
#contents{	
	padding-top: 115px;
	@media screen and (max-width: @tMWidth){
		padding-top: 0;
	}
	@media screen and (max-width: @sMWidth){
	}
}
	#contentHead{
	}
	#contentMenu{
	}
	#mainContent{
	}
		#content{
		}
			#postContent{
				.FontSizeIe6(medium);
				strong{
					//color: lighten( spin(@headerBack, 180), -45%);
					color: lighten( spin(@headerBack, 60), -35%);
				}
			}
				#home{
					.blogPosts{
						ul{
							margin: 5px 0;
							padding: 0;
							li{
								padding: 1px 5px;
								margin: 2px;
								background: #FFF2FF;
								border: 2px solid #FDC3FF;
								min-width: 45%;
								.BorderRadius(10px);
								.date{
									font-size: small;
									.InlineBlock();
								}
								.info{
									.InlineBlock();
								}
								.InlineBlock();
							}
						}
						.older{
							text-align: center;
							a{
								.InlineBlock();
								padding: 5px 10px;
							}
						}
					}
					
					.contentDetail{
						padding: 0 15px;
					}
					
					.trouble{
						margin-bottom: 20px;
						.toNext{
							padding-top: 20px;
							margin-bottom: 20px;
							.beforeAfter{
								margin: 5px auto;
								padding: 10px 10px;
								border: 2px solid hsl( hue(@headerBack), 80%, lightness(@headerBack)-30% );
								//text-align: center;
								.Clearfix();
								.bAPict{
									float: left;
									@media screen and (max-width: @sMWidth){
										float: none;
										img{
											width: 100%;
										}
									}
								}
								.bAContent{
									padding: 0 10px;
									float: left;
								}
							}
						}
					}
						.pains{
							padding-left: 5px;
							margin-top: 0px;
							li{
								.InlineBlock();
								padding: 5px 0 0 5px;
								border-bottom: 1px dotted lighten(@headerBack, 5%);
								margin: 0px 5px;
								width: 120px;
							}
						}
						.checkList,
						.textList{
							margin: 0 0 3px 0 ;
						}
						.checkList{
							padding-left: 25px;
							list-style: none;
							li{
								text-indent: 15px;
								background: url('http://kaifuku.co.jp/img/com/css/check.gif');
								background-repeat: no-repeat;
								background-position: left center;
							}
							@media screen and (max-width: @sMWidth){
								padding-left: 5px;
								li{
									text-indent: 0px;
									padding: 5px 0px 5px 15px;
									line-height: 1.3em;
								}
							}
						}
						.neverGiveUp2{
							//padding: 5px 20px;
							margin: 1em 0;
							.FontSizeIe6(large);
							strong{
								background: lighten( spin(@headerBack, 120), -15%);
							}
						}
						.neverGiveUp{
							padding: 10px 5px;
							margin: 10px 0;
							border: 2px dashed lighten( spin(@headerBack, 180), -50%);
						}
					.readme{
						margin: 10px;
						//a{
						//	display: block;
						//	text-decoration: none;
						//	padding: 10px;
						//	border: 2px dashed red;
						//	&:hover{
						//		background: #FEEAFF;
						//	}
						//}
						img{
							vertical-align: middle;
						}
						.FontSizeIe6(large);
					}
				}
				//.CellGra( lighten(@headerBack, -60%), 5, 110);
				#special{
					padding-top: 20px;
					.contentDetail{
						padding: 0 10px;
					}
					h2{
						//.FontSizeIe6(x-large);
						//padding: 3px 0 1px 0;
						//margin: 10px 0;
						//background: lighten(@headerBack, 15%);
						//border: none;
						//border-bottom: 2px solid lighten(@headerBack, -10%);
						background: none;
						border: none;
					}
					//.surugaGra{
					//	float: left;
					//	table{
					//		width: auto !important; 
					//		border-collapse: separate;
					//		border-spacing: 1px;
					//		margin: 4px 5px 0 5px;
					//		td,th{
					//			width: 4px;
					//			height: 4px;
					//			padding: 0;
					//			border: none;
					//		}
					//	}
					//}
					.diff{
						margin: 10px 0;
						border: 2px solid lighten( spin(@headerBack, 180), -60%);
						h4{
							.FontSizeIe6(large);
							padding-top: 10px;
							margin-bottom: 10px;
							font-weight: bold;
							span{
								.FontSizeIe6(medium);
								color: lighten(@headerBack, -40%);
								padding: 12px 20px;
								background: url('http://kaifuku.co.jp/img/com/css/diff.gif');
								background-repeat: no-repeat;
								background-position: top center;
							}
						}
						div{
							padding: 0 0 20px 20px;
						}
					}
				}
				#access{
					.station,
					.kuno{
						.num3,
						.num4,
						.num5{
							color: #FF0000;
						}
						.num6{
							color: #fb8fff;
						}
						.num1, .num2,
						.num3, .num4, .num5, .num6{
							font-weight: bold;
						}
						span{
							color: black;
							font-weight: normal;
						}
					}
					.station{
						.num1, .num2{
							color: #0000FF;
						}
					}
					.kuno{
						.num1, .num2{
							color: #00FF00;
						}
					}
					.parking{
						padding: 10px 0;
						.parkingPict{
							float: left;
							@media screen and (max-width: @sMWidth){
								float: none;
								img{
									width: 100%;
								}
							}
						}
						.parkingDetail{
							float: left;
							padding: 0 0 0 10px;
							@media screen and (max-width: @sMWidth){
								float: none;
								img{
									width: 100%;
								}
							}
						}
					}
				}
				#first{
					ul{
						padding-left: 30px;
						margin-left: 10px;
						border-left: 3px dotted @headerBack;
						li{
							margin-bottom: 10px;
						}
					}
					.reserved{
					}
					.sorry{
					}
					.carefully{
					}
					.recipient{
					}
					
				}
				#kogao{
					.worry,
					.property,
					.carefully{
						div{
							padding: 0 15px;
						}
					}
					.worry{
						.compare{
							text-align: center;
							padding: 10px 0px;
						}
					}
					.property{
					}
					.carefully{
					}
				}

				//jump用
				@scrollHeight: 100px;
				#home,
                #notice,
				#working,
                #staff{
					margin-top: -@scrollHeight;
					padding-top: @scrollHeight;
					@media screen and (max-width: @sMWidth){
						margin-top:0;
						padding-top:0;
					}
                }