/* 

	RESET STYLES
	
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { height:100%; font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {margin: 0;}
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection { background: #dddddd; color: #000000; text-shadow: none; }
::selection { background: #dddddd; color: #000000; text-shadow: none; }

a { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover { color: #DAC9B1; }
a:active { color: #222222; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ul, ol { margin: 0; padding: 0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }



/*------------------------------------------*/

.b{font-weight:bold;}
.fs12{font-size:12px;}
.fs13{font-size:13px;}
.fs14{font-size:14px;}
.mr20{margin-right:20px;}
.mr50{margin-right:50px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb25{margin-bottom:25px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}


.mt10{margin-bottom:10px;}
.mt15{margin-bottom:15px;}
.mt20{margin-bottom:20px;}
.mt25{margin-bottom:25px;}
.mt30{margin-bottom:30px;}
.mt40{margin-bottom:40px;}
.mt50{margin-bottom:50px;}

/*------------------------------------------*/



/*

	MAIN STYLING

*/



html, body {
	background-color: #2A2625;
	height:100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#ffffff;
}





#top {
	width:660px;
	height:435px;
	margin: 0px auto;
	position:relative;
	text-align:center;
}

.logo{
	position:absolute;
	top:155px;
	left:220px;
}

.hd_nav{
	width:660px;
	height:50px;
	position:absolute;
	left:0px;
	bottom:0px;
	clear:both;
}

.hd_nav li{
	float:left;
}

#grid {
	width:920px;
	position:relative;
	margin: auto auto 200px auto;
}
	#thumb {
		width:215px;
		height:145px;
		overflow:hidden;
		float:left;
		margin-bottom:20px;
	}
		#thumb a {
			text-decoration:none;
			position: relative;
		}
			#thumb a:hover .thumbhover {
				opacity:1;
				margin-top:0px;
			}
		#thumb .box {
			width:254px;
			height:145px;
			overflow:hidden;
			outline: 1px solid transparent;
		}
		#thumb .in_box {
			width:361px;
			height:220px;
			outline: 1px solid transparent;
		}
		
		.thumbhover {
			width:215px;
			height:154px;
			background:url(../img/thumb-hover.png) no-repeat;
			position:absolute;
			top:-61px;
			z-index:100;
			text-align:center;
			color:#ffffff;
			text-shadow:0px 1px #057b69;
			padding-top:40px;
			margin:15px 0 0 0;
			opacity:0;
			-webkit-transition: all 0.2s ease-in-out;
   			-moz-transition: all 0.2s ease-in-out;
   			-o-transition: all 0.2s ease-in-out;
   			-ms-transition: all 0.2s ease-in-out;
   			transition: all 0.2s ease-in-out;
		}
			.thumbhover p {
				opacity:0.9;
				display:block;
				font-weight:nomal;
				line-height:70%;
			}
			
	#footermargin {
		clear:both;
	    width:960px;
	    height: 50px;
	}

#company{
	width:960px;
	text-align:center;
	margin: 150px auto 150px auto;
	
}
#company p{
	line-height:250%;
	font-size:14px;
	
}

#saros{
	width:960px;
	text-align:center;
	margin:0 auto 180px auto;
}
#saros p{font-size:12px;}
#saros .add{line-height:150%; margin-bottom:20px;}
#saros .tel{background:url(../img/tel_icon.jpg) no-repeat left; padding-left:25px; line-height:21px; padding-top:5px; width:100px; margin:0 auto;}
#saros .fax{background:url(../img/fax_icon.jpg) no-repeat left; padding-left:25px; line-height:21px; padding-top:5px; width:100px; margin:3px auto 15px auto;}

#contact{
	width:960px;
	text-align:center;
	margin:0 auto 180px auto;
}
#contact .come{font-size:11px; margin-bottom:20px;}
#contact .mail{font-size:14px;}
#gototop{
	width:960px;
	text-align:center;
	margin:0 auto 16px auto;
}

footer{
	width:100%;
	height:38px;
	background-color:#666;
	text-align:center;
}
footer p{
	padding-top:15px;
	font-size:12px;
	line-height:100%;
	color:#fff;
}

/*course*/

.index_img02{
	width:960px;
	height:300px;
	margin: 150px auto 100px auto;
	position:relative;
	
	
}
.index_img02 p{
	font-size:12px;
	line-height:180%;
	width:290px;
	letter-spacing:0em;
}
.index_img02_1{
	position:absolute;
	left:20px;
}
.index_img02_2{
	position:absolute;
	left:340px;
}
.index_img02_3{
	position:absolute;
	right:10px;
}

.index_img02 p2{
	font-size:18px;
	color:#B8A585;
}



/*wedding*/

.index_img03{
	width:960px;
	height:700px;
	margin: 150px auto 250px auto;
	position:relative;
	text-align: center;
	
	
}
.index_img03 p{
	font-size:12px;
	line-height:180%;
	width:290px;
	letter-spacing:0em;
}


.index_img03_1{
	position:absolute;
	left:20px;
}
.index_img03_2{
	position:absolute;
	left:340px;
}
.index_img03_3{
	position:absolute;
	right:10px;
}

.index_img03 p2{
	font-size:18px;
	color:#B8A585;
}

.index_img03 p3{
	font-size:14px;
	color:#B8A585;
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}