//各店舗共通で呼ばれる
/** layout **/

#header{
}
	#headerContent{
	}
		#headerInfo{
		}
			#headerLogo{
			}
			#headerInfomation{
			}
		#headerMenu{
		}
				#headerWidgets{
					position: relative;
					.headAddInfo{
						position: absolute;
						top: -35px;
						right: 160px;
						.headTel{
							font-size: x-large;
							font-weight: bold;
							color: red;
							.innerTel{
								color: white;
								background: red;
								.BorderRadius(10px);
								padding: 5px 7px 0px 7px;
							}
						}
						.headAddr{
							font-size: large;
						}
						@media screen and (max-width: @tMWidth){
							position: absolute;
							top: -65px;
							right: 0;
							.headTel{
								font-size: large;
								display: inline;
								.innerTel{
									color: red;
									background: transparent;
									padding: 0;
									.BorderRadius(0px);
								}
							}
							.headAddr{
								display: inline;
							}
						}
						@media screen and (max-width: @sMWidth){
							position: relative;
							top: 0;
							right: 0;
							.headTel{
								.InlineBlock();
								.innerTel{
									color: red;
									background: white;
									padding: 0;
									.BorderRadius(0px);
								}
							}
							.headAddr{
								.InlineBlock();
							}
						}
					}
				}
/** widget **/
#header{
	.widget{
		.storeInsideLink{
			ul{
				.Clearfix();
				list-style: none;
				@media screen and (max-width: @tMWidth){
					text-align: center;
				}
				li{
					float: left;
					padding: 0 1px;
					vertical-align: middle;
					a{
						padding: 5px 6px;
						display: block;
						color: lighten(@headerBack, -30%);
					}
					a:hover,
					&.current-menu-item a{
						background: @headerBack;
						color: @headerLinkHover;
					}
					&.firstMenu{
					}
					&.lastMenu{
					}
					//drawer
					@media screen and (max-width: @tMWidth){
						float: none;
						.InlineBlock();
						
						margin: 3px 3px;
						text-align: center;
					}
					//@media screen and (max-width: @tMWidth){
					//	float: none;
					//	.InlineBlock();
					//	
					//	margin: 3px 3px;
					//	width: 30%;
					//	text-align: center;
					//	a{
					//		border-bottom: 1px dotted @headerBack;
					//	}
					//}
					//drawer-end
					
					
					//@media screen and (max-width: @sMWidth){
					//	margin: 3px 0px;
					//	width: 45%;
					//}
				}
			}
		}
	}
}


#contents{
	padding-top: 80px;
	@media screen and (max-width: @tMWidth){
		padding-top: 0;
	}
	@media screen and (max-width: @sMWidth){
	}
}
	#contentHead{
	}
	#mainContent{
	}
		#contentMenu{
		}
		#content{
			.page{
				#postContent{
					table{
						width: 90%;
					}
				}
			}
			.post{
			}
			@media screen and (max-width: @sMWidth){
				img.alignright,
				img.alignleft{
					display: block;
					margin: auto;
					float: none;
				}
				.alignleft,
				.alignright{
					float: none;
					img{
						display: block;
						margin: auto;
					}
				}
				
				.headlineImg{
					img{
						//width: @sWidth;
						width: 100%;
					}
				}
			}
		}
				#postHead{
				}
				#postContent{
					/*
					h2{
						background-image: url("http://kaifuku.co.jp/img/com/css/h2-3-1.gif");
					}
					h3{
						padding-top: 3px;
						background:  hsl( hue(@headerBack), saturation( @headerBack) , lightness(@headerBack)+10% );
						//background-image: url("http://kaifuku.co.jp/img/com/css/h-pat1.png");
						//background-image: url("http://kaifuku.co.jp/img/com/css/h-pat3.png");
						border-right: 2px solid hsl( hue(@headerBack), 30%, lightness(@headerBack)-30% );
						border-bottom: none;
						span{
							color: white;
						}
					}
					*/
					.voiceLink{
						padding-left: 5px;
						margin-top: 0px;
						li{
							.InlineBlock();
							margin: 2px 5px;
							width: 130px;
							text-align: center;
							a{
								text-decoration: none;
								display: block;
								padding: 5px 0 0 5px;
								border: 1px dotted lighten(@headerBack, 10%);
								&:hover{
									color: black;
									background: @headerBack;
								}
							}
						}
					}
					.detailMenu{
						padding-top: 0px;
						.firstMenu{
						}
						.lastMenu{
						}
					}
					.toggle{
						//border: 1px solid @headerBack;
					}
					
					
					/** リタライフ **/
					@c-litalife: #009adf;
					@c-ans: hsl(hue(@headerBack), saturation(@headerBack), 30%);
					.tolitaLife{
						@media screen and (max-width: @sMWidth){
							img{
								width: 100%;
							}
						}
					}
					.litalife{
						font-size: medium;
						h3{
							font-size: x-large;
							padding-left: 25px;
							padding-top: 10px;
							background: url("http://kaifuku.co.jp/img/com/litalife/h-h34.png");
							background-repeat: no-repeat;
							background-position: center left;
						}
						.eachContent{
							margin: 10px 0 30px 0;
							//border-left: 2px solid @c-litalife;
							 h4{
							 	margin-left: 20px;
							 	font-weight: bold;
							 }
							@media screen and (max-width: @sMWidth){
								img{
									width: 100%;
								}
							}
							.headline{
								.BorderRadius( 20px 0px 20px 0);
							 	width: 200px;
							 	line-height: 2.2em;
							 	padding-left: 20px;
							 	font-size: large;
							 	font-weight: bold;
							 	background: @c-litalife;
							 	color: white;
							 }
							 .texts{
							 	padding-top: 10px;
							 	padding-left: 30px;
							 }
							 .chemicalFormula{
							 	background: #D5E5FD; //#74cebc;
							 	.BorderRadius( 20px );
							 	
							 	width: 680px;							 	
							 	margin: 15px auto;
							 	padding-top: 15px;
							 	div{
							 		font-size: larger;
							 		font-weight: bold;
							 		margin: auto;
							 		width: 600px;
							 	}
								@media screen and (max-width: @sMWidth){
									width: 100%;
									div{
										width: 90%;
									}
								}
							 }
						}
						.litalife-mail{
							border-collapse: separate;
							border-spacing: 0 2px;
							td, th{
								border: none;
								border-bottom: 1px dotted black;
								@media screen and (max-width: @sMWidth){
									display: inline-block;
									text-align: left;
									border: none;
								}
							}
							th{
								width: 150px;
								@media screen and (max-width: @sMWidth){
									width: 100%;
								}
							}
							tr{
								//border-collapse: collapse時のみ有効
								//border-bottom: 1px solid black;
							}
							textarea,
							input[type="text"],
							input[type="selectarea"],
							input[type="select"],
							input[type="email"]{
								width: 100%;
							}
							input[type="submit"],
							input[type="button"]{
								text-align: center;
							}
							.your-tell input{
								width: 130px;
								@media screen and (max-width: @sMWidth){
									width: 100%;
								}
							}
							.your-zip input{
								width: 80px;
								@media screen and (max-width: @sMWidth){
									width: 100%;
								}
							}
							.send{
								text-align: center;
								td, th{
									border: none;
									background: transparent;
								}
							}
							.reauire{
								padding: 0 5px;
								.FontSizeIe6(large);
								font-weight: bold;
								color: lighten( spin( @headerBack, 120), 30%);
							}
						}
					}
						#litalifeQA{
							.qa{
								.Clearfix();
								.ques{
									float: left;
									margin: 5px 0px 5px 14px;
									
									position: relative;
									border: 3px solid @c-ans;
									text-indent: -1.5em;
									padding: 10px 10px 10px 30px;
									.BorderRadius(10px);
									&::before{
										content: "";
										border: 12px solid transparent;
										position: absolute;
									}
									&::before{
										border-right: 12px solid @c-ans;
										left: -27px;
									}
									//&::after{
									//	border-left: 12px solid #FFF;
									//	left: -7px;
									//}
									span{
										font-weight: bold;
										.FontSizeIe6(x-large);
										color: red;
									}
									@media screen and (max-width: @sMWidth){
										width: auto;
										margin: 5px 5px 5px 14px;
									}
								}
								.ans{
									float: right;
									margin: 5px 14px 25px 0px;
									
									width: 550px;
									position: relative;
									border: 3px solid @c-litalife;
									text-indent: -1.5em;
									padding: 10px 10px 10px 30px;
									.BorderRadius(10px);
									
									background: url("http://kaifuku.co.jp/img/com/litalife/h-h34.png");
									background-repeat: no-repeat;
									background-position: right bottom;
									&::before{
										content: "";
										border: 12px solid transparent;
										position: absolute;
										border-left: 12px solid @c-litalife;
										right: -27px;
									}
									span{
										font-weight: bold;
										font-size: x-large;
										color: red;
									}
									@media screen and (max-width: @sMWidth){
										width: auto;
										margin: 5px 14px 25px 5px;
									}
								}
							}
						}
						
					
					/** リタライフ v2 **/
					.litalifeV2{
						.FontSizeIe6(medium);
						.headlineImg{
							img{
								width: 100%;
							}
						}
						h3{
							.FontSizeIe6(x-large);
							padding-left: 25px;
							padding-top: 10px;
							margin-left: 1em;
							background: url("http://kaifuku.co.jp/img/com/litalife/h-h34.png");
							background-repeat: no-repeat;
							background-position: center left;
							&.headText{
								margin-left: 0;
							}
						}
						
						strong{
							&.to2{
								color: #FF5E5E;
							}
							&.antio2{
								color: #DE40FC;
							}
							&.th2{
								color: #2C7ED8;
								font-size: larger;
							}
							&.tlitalife{
								font-size: larger;
							}
						}
						
						.eachContent{
							margin: 10px 0 30px 0;
							 h4{
							 	margin-left: 20px;
							 	font-weight: bold;
							 }
							@media screen and (max-width: @sMWidth){
								img{
									width: 100%;
								}
							}
							.headline{
								h2{
									.BorderRadius( 20px 0px 20px 0);
								 	.InlineBlock();
								 	padding-left: 20px;
								 	padding-right: 20px;
								 	line-height: 2.2em;
								 	.FontSizeIe6(large);
								 	font-weight: bold;
								 	background: @c-litalife;
								 	color: white;
								 	border: none;
									strong{
										color: #FFB800;
									}
								}
							 }
							 .texts{
							 	padding-top: 10px;
							 	padding-left: 30px;
								@media screen and (max-width: @sMWidth){
									padding-left: 15px;
									padding-right: 10px;
									
								}
							 }
							 .chemicalFormula{
							 	background: #D5E5FD; //#74cebc;
							 	.BorderRadius( 20px );
							 	
							 	width: 680px;							 	
							 	margin: 15px auto;
							 	padding-top: 15px;
							 	div{
							 		font-size: larger;
							 		font-weight: bold;
							 		margin: auto;
							 		width: 600px;
							 	}
								@media screen and (max-width: @sMWidth){
									width: 100%;
									div{
										width: 90%;
									}
								}
							 }
						}
						.litalife-mail{
							border-collapse: separate;
							border-spacing: 0 2px;
							td, th{
								border: none;
								border-bottom: 1px dotted black;
								@media screen and (max-width: @sMWidth){
									display: inline-block;
									text-align: left;
									border: none;
								}
							}
							th{
								width: 150px;
								@media screen and (max-width: @sMWidth){
									width: 100%;
								}
							}
							tr{
								//border-collapse: collapse時のみ有効
								//border-bottom: 1px solid black;
							}
							textarea,
							input[type="text"],
							input[type="selectarea"],
							input[type="select"],
							input[type="email"]{
								width: 100%;
							}
							input[type="submit"],
							input[type="button"]{
								text-align: center;
							}
							.your-tell input{
								width: 130px;
								@media screen and (max-width: @sMWidth){
									width: 100%;
								}
							}
							.your-zip input{
								width: 80px;
								@media screen and (max-width: @sMWidth){
									width: 100%;
								}
							}
							.send{
								text-align: center;
								td, th{
									border: none;
									background: transparent;
								}
							}
							.reauire{
								padding: 0 5px;
								.FontSizeIe6(large);
								font-weight: bold;
								color: lighten( spin( @headerBack, 120), 30%);
							}
						}
					}
						#experiences{
							a{
								.InlineBlock();
								text-align: center;
								text-decoration: none;
								margin: 10px 5px;
								padding: 10px;
								background: #F5F5F5;
								
								width: 40%;
								
								
								.BorderRadius(10px);
								.BoxShadow(#C5C5C5);
								
								strong{
									color: #E01F4E;
								}
								img{
									display: block;
									margin: auto;
									padding-bottom: 5px;
								}
								&:hover{
								background: #ECF9FF;
									//border: 1px solid #009ADF;
									img{
										.Opacity(0.6);
									}
								}
								@media screen and (max-width: @sMWidth){
									margin: 5px 0px;
									padding: 10px 5px;
								}
								
							}
						}
						#generation{
							.generationList{
								line-height: 2.5em;
								@media screen and (max-width: @sMWidth){
									padding-left: 0px;
									line-height: 1.5em;
									list-style-type: none;
								}
							}
							.ChemicalFormula{
								padding: 2px 15px;
								margin: 0 5px;
								color: #F19826;
								border: 1px solid @c-litalife;
								font-weight: bold;
								
								.BorderRadius(5px);
								.FontSizeIe6(large);
								
								.subscript{
									.FontSizeIe6(small);
								}
								@media screen and (max-width: @sMWidth){
									display: block;
									padding: 4px 5px;
									margin: 0 0 10px 0px;
								}
							}
						}
						#health{
							.symptomList{
								padding: 0px 20px;
								li{
									.InlineBlock();
									background: @c-litalife;
									color: white;
									padding: 2px 10px;
									margin: 0 2px 7px 0px;
									.BorderRadius(5px);
									.BoxShadow(#C5C5C5, 3px, 3px);
								}
							}
						}
						@c-img: #0010C5;
						#convenient{
							.campaign{
								img{
									width: 100%;
								}
								color: @c-img;
								h2{
									.FontSizeIe6(xx-large);
									font-weight: bold;
									background-color: transparent;
									border: none;
									text-align: center;
									color: red;
									@media screen and (max-width: @sMWidth){
										.FontSizeIe6(x-large);
									}
									span{
										color: @c-img;
										.FontSizeIe6(large);
										font-weight: bold;
										vertical-align: middle;
										@media screen and (max-width: @sMWidth){
											display: block;
										}
									}
								}
							}
							.pricePattern{
								text-align: center;
								.agreementMonth{
									.InlineBlock();
									.BorderRadius(10px);
									background: #C3E2FF;
									.priceItem{
										margin: 0px 5px 1em 5px;
										padding: 25px 0px;
										@media screen and (max-width: @tMWidth){
											margin: 10px 5px;
										}
										@media screen and (max-width: @sMWidth){
											padding: 0;
											margin: 10px 1px;
										}
									}
								}
								.priceItem{
									padding: 10px;
									//レンタル下の場合 margin: 20px 10px 0px 10px;
									margin: 1.5em 5px 1em 5px;
									
									width: 120px;
									.InlineBlock();
									.BorderRadius(40px);
									.FontSizeIe6(large);
									color: white;
									background: @c-img;
									vertical-align: top;
									
									@media screen and (max-width: @tMWidth){
										margin: 2em 5px 1em 5px;
									}
									@media screen and (max-width: @sMWidth){
										margin: 10px 1px;
									}
								}
								.first{
									border: 1px solid @c-img;
									color: @c-img;
									background: white;
									font-weight: bold;
									.month{
										border-bottom: 1px solid @c-img;
									}
								}
								.month{
									border-bottom: 1px solid white;
									padding: 5px 10px 0px 10px;
								}
								.price{
									padding: 0px 10px 5px 10px;
								}
								.detail{
									font-weight: bold;
									.FontSizeIe6(large);
								}
							}
							.imgDetail{
								.Clearfix();
								.newlitalife{
									padding: 5px;
									img{
										display: block;
										margin: auto;
									}
								}
								.salesDetail{
									text-align: center;
									background: #C3E2FF;
									.BorderRadius(20px);
									margin: 20px 10px;
									padding-top: 10px;
									
									@media screen and (max-width: @tMWidth){
										margin: 1px;
										padding: 10px 0 0 0;
										width: auto;
									}
									@media screen and (max-width: @sMWidth){
										margin: 1px;
									}
									
									ul{
										margin: 0px;
										padding: 0px;
									}
										li{
											.InlineBlock();
											.BorderRadius(10px);
											
											padding: 10px;
											margin: 5px;
											width: 250px;
											
											background: @c-img;
											color: white;
										}
									.detail{
										color: @c-img;
										.FontSizeIe6(large);
										font-weight: bold;
										@media screen and (max-width: @sMWidth){
											padding: 0px 10px 10px 10px;
										}
										
										span{
											vertical-align: middle;
											.FontSizeIe6(x-large);
											color: black;
											.daily{
												.FontSizeIe6(xx-large);
											}
										}
									}
								}
							}
						}
						
				}
					#difference{
						h3 span{
							color: red;
							.FontSizeIe6(medium);
							font-weight: bold;
							padding-left: 0px;
						}
						.details{
							margin-bottom: 20px;
							padding-bottom: 5px;
							padding-left: 20px;
							.privilege{
								padding-left: 15px;
							}
						}
						.lastItem{
							border-bottom: none;
						}
					}
					#media,
					#notice,
					#notice2,
					#notice3,
					#notice4{
						.eachNotice{
							border-bottom: 1px dotted black;
							padding-bottom:10px;
							.Clearfix();
						}
						.lastItem{
							border-bottom: none;
						}
						@media screen and (max-width: @sMWidth){
							.kogao-worry{
								.compare{
									.firstItem{
										padding: 0;
										margin: 5px 0;
									}
								}
							}
						}
						.toKogao{
							text-align: center;
							@media screen and (max-width: @sMWidth){
								img{
									width: 100%;
								}
							}
						}
					}
					#working{
						.price,
						.item,
						.lastItem{
							.priceCat{
								background: lighten(@headerBack, 10%);
								color: black;
							}
							td{
								font-weight: bold;
							}
						}
						.item,
						.lastItem{
							th.priceCat,
							td{
								border-top: none;
							}
						}
						.item{
							th.priceCat,
							td{
								border-bottom: 1px dotted black;
							}
						}
						.lastItem{
							th.priceCat,
							td{
								border-bottom: 1px solid black !important;
							}
						}
						@media screen and (max-width: @sMWidth){
							table{
								th, td{
									.InlineBlock();
									width: 290px;
								}
								tr.price{
									td,
									.priceCat{
										.InlineBlock();
									}
									.priceCat{
										width: 80px;
									}
									td{
										width: 180px;
									}
								}
								
							}
						}
					}
					#blog{
					}
						#toStaffBlog{
							.storeInfo{
								
								.addr{
								}
								.tell{
									font-size: x-large;
									font-weight: bold;
									color: red;
									.innerTel{
										color: white;
										background: red;
										.BorderRadius(10px);
										padding: 5px 7px 0px 7px;
									}
								}
							}
							.toLink{
							}
						}
					#access{
						iframe{
							width: 100%;
						}
						#map-canvas{
							width: 100%;
							height: 300px;
						}
					}
					
					//jump用
					@scrollHeight: 75px;
					#home,
                    #notice,
					#working,
                    #staff{
						margin-top: -@scrollHeight;
						padding-top: @scrollHeight;
						@media screen and (max-width: @sMWidth){
							margin-top:0;
							padding-top:0;
						}
                    }