/*******************************************************
BASE LAYOUT
*******************************************************/

/****SET UP****/
@colorL: #00C8D7;
@colorMG: rgba(23, 202, 171, 1);
@colorMP: rgba(0, 219, 181 ,1);
@colorS: #1F323F;
	
.mixBoxShadow (@x: 0, @y: 0, @z: 3px, @blur: 0, @color: rgba(0, 0, 0, 0.4)) {
	box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
}

.mixRoundCorner (@radius: 3px) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
}

.mixBoxSizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}


/****BASE FREAM****/
#wrap{
	width: 100%;
	background: #ececec;
/*	.mixBoxShadow(2px, 3px);*/
}

	header{
		width: 100%;
		background: rgba(255,255,255, 0.97);
		position: absolute;
		z-index:999;
		.mixBoxShadow;
			.innerHead{
				width:980px;
				margin: 0 auto;
					h1{float: left; margin: 0;}
					ul{
						float:left;
							li{
								display: inline;
								margin: 0 20px 0 0;
							}
					}
			}
	}
	.lt-ie8 header{border-bottom: 1px solid #EEE;}
	
	.mainVisual{
		width:100%;
		height:400px;
		background: #FFFFFF;
		position: relative;
			.imageSet{
				background:url(../img/slider/blank.jpg) no-repeat fixed 0 0 ;
				background-attachment: fixed;
				background-size:contain;
				width:auto;
				min-width: 100%;
				height: 400px;
				margin: 0;
			}
			section{
				width: 980px;
				margin: 0 auto;
					h1{
						position: absolute;
						top: 115px;
						padding-left: 10px;
						font-size: 18px;
						line-height: 2.1;
					}
			}

	}
		
	article{
		width: 980px;
		margin: 0 auto;
		padding: 75px 0 0;
		position: relative;
	}
	
			.slideFrame{
				width: 632px;
				height:148px;
				position: absolute;
				top: -75px;
				left: 0;			
			}
			
			.info{
				margin: 10px 0 10px;
				padding-bottom: 10px;
				background: @colorL;
				position: relative;
					.captionBlock{
						width: 200px;
						height: 200px;
						margin: 0;
						float: left;
						
							h1{
								padding: 55px 0;
								text-align: center;
								color: #FFF;
							}
				}
				#infoDetail{
					width: 780px;
					height: 200px;
					float: left;
					background:#FFF;
						dl{ 
							margin: 0 15px 5px;
							padding: 0 0 5px;
							border-bottom: 1px solid #AAA;
								&:first-child{ margin-top: 20px;}
								dt{
									width: 150px;
									margin: 0 0 0 20px;
									padding-top: 12px;
									float: left;
								}
								dd{
									width: 570px;
									margin: 0;
									float: right;
									a{
										color: #DC143C;
   										text-decoration: underline;
									}
								}
								
						}
				}
				p { padding: 8px; background: @colorS; color: @colorL; position: absolute; top: -35px; right: 0;
					a{ color: @colorL;}
				
				}
			}
					
				.bnContents{
					background: #FFF;
					padding: 7px;
						h1{ font-size: 16px; padding: 68px 10px 0;}
					section{
						float:left;
						width: 314px;
						height: 160px;
						margin: 3px;
						position: relative;
						/*background: url(../img/22.jpg) no-repeat;*/
						background-size: cover;
						border: 1px solid #00DBB5;
						.mixBoxShadow(0, 0, 1px, 0, rgba(170,170,170, 0.4));


							div{
								width: 250px;
								height: 50px;
								display: table;
								font-size: 12px;
								text-align: center;
								position: absolute;
								top: 0;
								/*background: fadeout(@colorMG, 8%);*/
								background: @colorMG;
									a{ display: inline-block; color: #FFF;}
									&:hover{
										background: rgba(146,146,146, 0.9);
									}
									h2{ 
										font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
										font-weight: bold;
										}
							}	
					}
					section.pta02{
					}
				}
				
	#userDetail{
		width: 980px;
		margin: 10px auto 0;
		background: #FFF;
			section{
				padding: 10px;
				table{
					caption{ 
						margin-bottom: 2px;
						text-align: left;
							strong{
								display: inline-block;
								background: #F5DEB3;
								padding: 2px 5px;
							}
					}
					td{ padding-left: 0;}
					p{
						margin: 0;
						padding: 2px 5px;
						display: inline;
						background: #40E0D0;
						border-left: 4px solid #BDBDBD;
					}
					p.secondly{
						background: none;
						border-left: none;
						border-bottom: 1px solid #40E0D0;
					}
				}
			}
	}
	
	aside{
		width: 980px;
		margin: 10px auto 0;
		padding-bottom: 10px;
			.contact{
				width: 280px;
				height: 280px;
				float: left;
				background: @colorS;
					.contactCaption{
						width: 280px;
						height: 280px;
						display: table-cell;
						text-align: center;
						vertical-align: middle;
							h1{
								font-size: 16px;
								color: @colorL;
							}
					}
					.ftContact{
						padding-left: 25px;
						font-size:15px;
						color: #E8E8E8;
							h2{font-size: 15px; }
							dl{margin:13px 0;}
								dd{ margin: 0 0 10px 10px; font-family: mplus-1mn-regular;}
					}
				
			}
			.itemAd{
				width: 690px;
				height: 250px;
				margin: 0px;
				float: right;
				background: #F59E2F;
			}
			h1{
				margin: 0;
			}
	}
	footer{
		background: #CCC;
		width: 690px;
		height: 20px;
		margin: 10px 0 0 10px;
		float: left;
			small{
				padding: 0 0 0 10px;
				display: block;
				line-height: 1.5;
			}
	}

	
.section(@width,@float,@bgc){
	width: @width;
	float: @float;
	background: @bgc;
	padding-bottom: 25px;
}
.sector980{
	.section(980px,none,#FF0);
}
.sector750{
	.section(750px,none,#F5629D);
}
.sector550{
	.section(550px,none,#3A263E);
}


/*******************************************************
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*******************************************************/

/*General Mosaic Styles*/
	
	.mosaic-overlay {
		display: none;
		z-index: 5;
		position: absolute;
		width: 280px;
		height: 280px;
		padding: 10px;
		background: #111;
		.mixBoxSizing;
	}
	
		/*** Custom Animation Styles (You can remove/add any styles below) ***/
		.circle .mosaic-overlay {
			background:url(../img/hover-magnify.png) no-repeat center center;
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			display:none;
		}
		
		.fade .mosaic-overlay {
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			background:url(../img/bg-black.png);
		}
	
		
		/*** End Animation Styles ***/