@charset "utf-8";

/**** reset ****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed {vertical-align:top;}
hr,legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
li{list-style-type:none;}

body{
font:13px/1.5 verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#969696;
}







html{}

a{color:#5aaa00;text-decoration: underline;}
a:hover {color:#828282;}
a:active, a:focus {outline:0;}
a img{border:none;}

/************************************************
/* レイアウト
*************************************************/

/****** 共通 ******/
/* ヘッダー */
#header{
position:relative;
height:30px;
}



/* フッター */
#footer{
clear: both;
padding:20px 60px 20px 60px;
color:#c8c8c8;
text-align:center;
background:#ffffff;
height:100px;
}




/****** トップページ ******/
/* ヘッダー */
#toppage #header{width:100%;}

/* グリッド全体 */
#container{margin:10px auto 30px;}






/****** サブページ ******/
#header{
width:1010px;
margin:0 auto;
padding:0 50px;
}

#wrapper{
width:1010px;
margin:20px auto;
padding:0 50px;
}

#sidebar{
float:right;
width:180px;
padding-bottom:30px;
}


#main{
float:left;
width:800px;
margin-bottom:30px;
}

#main_menu{
float:left;
width:1000px;
margin:0px 0px 20px 0px;
}

#box{
float:left;
width:700px;
padding:40px 42px 50px 42px;
margin:0px 0px 50px 0px;
border:8px solid #B4B4B4;
}

#box_in{
float:left;
width:638px;
padding:30px 30px 35px 30px;
margin:0px 0px 0px 0px;
border:1px solid #B4B4B4;
}

#box_in_right{
float:right;
width:348px;
margin:0px 0px 20px 0px;
}

#box_in_in{
float:left;
width:638px;
}

#box_left{
float:left;
width:278px;
padding:30px 30px 35px 30px;
margin:0px 0px 0px 0px;
border:1px solid #B4B4B4;
}

#box_right{
float:right;
width:278px;
padding:30px 30px 35px 30px;
margin:0px 0px 0px 20px;
border:1px solid #B4B4B4;
}

#box_slide{
float:left;
width:800px;
height:540px;
padding:0px 0px 0px 0px;
margin-bottom:10px;
}

#image_right{
float:right;
width:260px;
margin:0px 0px 20px 50px;
}

#image_left{
float:left;
width:260px;
margin:0px 30px 20px 0px;
}





/************************************************
/* 共通 ヘッダー
*************************************************/
/****** スローガン ******/
h1#slogan{
	position:absolute;
	top:10px;
	left:50px;
	font-weight:normal;
	font-size:10px;
	color:#999999;
	width: 600px;
}
/* トップページ */
#toppage h1#slogan{left:45px;}


/****** ロゴ ******/
p#logo{
	position:absolute;
	top:25px;
	right:87px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:110px;
	height:16px;
	background:url(../images/index/logo_ajisaiisland_b.gif) no-repeat;
}

/* トップページ */
#toppage p#logo{
	position:absolute;
	top:40px;
	left:50%;
	margin-left:-105px;
	width:210px;
	height:30px;
	background:url(../images/index/logo_ajisaiisland.gif) no-repeat;
	}



p#logo a{
display:block;
width:280px;
height:37px;
}



p#logo a:hover{cursor: pointer;}





/****** 電話番号 ******/
p#tel{
	position:absolute;
	top:60px;
	right:0;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:212px;
	height:32px;

}



/************************************************
/* 共通 メインナビゲーション
*************************************************/
#mainnav{
	position:absolute;
	top:5px;
	right:0;
	height: 20px;
	width: 300px;
}

/* トップページ */
#toppage #mainnav,#toppage p#tel{
	right:44px;
}

#mainnav li{
float:right;
padding-left:20px;
}

#mainnav li a{
padding:5px 0 5px 14px;
color:#999999;
font-size:13px;
background:url(images/bullet.png) no-repeat 0 50%;
}

#mainnav li a:hover{
color:#999;
}



/************************************************
/* 共通 ページ上部に戻る
*************************************************/
p#toTop{
clear:both;
float:right;
width:10em;
padding:5px;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
text-align:center;
background:#e6e6e6 url(images/bg.png);
}
/* トップページ */
#toppage p#toTop{margin-right:15px;}

*:first-child+html p#toTop{float:none;} /*IE 7*/

p#toTop a{color:#ffffff;}



/************************************************
/* 共通 サイドバー
*************************************************/
.submenu{
margin:0px;
}

.submenu ul{
margin-bottom:20px;
background: #fff;
}

.sidebar p{margin-bottom:5px;}

.submenu li{
padding:0 10px;
border-bottom:1px dotted #ccc;
}

.submenu li:last-child{border:0;}

.submenu li a{
padding:5px 0;
display:block;
}

.submenu li:hover{background:#f6f6f6;}



/************************************************
/* 共通 フッター
*************************************************/
#footer ul{text-align:center;}

#footer ul li{
display:inline;
padding:0 10px 0 11px;
border-left:1px solid #c8c8c8;
}

#footer ul li:first-child{border:0;}

#footer a{color:#78C800;}
#footer a:hover{color:#d2d2d2;}

#copyright{
position:relative;
bottom:10px;
height:20px;
margin-top:20px;
font-size:10px;
letter-spacing:2px;
}




/************************************************
/* サブページ
*************************************************/
.article{padding-bottom:20px;}

#main p{
font-size:12px;
line-height:1.4;
letter-spacing:2px;
}

#main h2{
border-left-width: 8px;
border-left-style: solid;
border-left-color: #B4B4B4;
padding-left:20px;
padding-bottom:5px;
clear:both;
font-size:14px;
line-height:26px;
color:#B4B4B4;
}

#main h3{
clear:both;
margin:0px 0px 5px 0px;
padding:0 0px;
line-height:1.5;
font-size:16px;
color:#828282;
letter-spacing:1px;
}

#main h3 span{
margin:0px 0px 0px 12px;
font-size:10px;
}

#main h4{
clear:both;
margin:0px 0px 10px 0px;
padding:0 12px;
line-height:20px;
font-size:12px;
color:#fff;
background:#B4B4B4;
letter-spacing:2px;
text-align:center;
}

#main h4 span{
margin:0px 0px 0px 12px;
font-size:10px;
}

#main h5{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:10px;
color:#828282;
letter-spacing:2px;
text-align:left;
margin:0px 0px 5px 0px;
}

#main span{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:12px;
letter-spacing:2px;
}

#main p.date{
padding:10px 10px 20px 0;
text-align:right;
}

img.alignleft,img.alignright{
float:left;
padding: 4px;
margin: 0 10px 2px 0;
display: inline;
padding: 4px;
background:#fff;
-moz-box-shadow: 1px 1px 5px #ccc;
-webkit-box-shadow: 1px 1px 5px #ccc;
-o-box-shadow: 1px 1px 5px #ccc;
box-shadow: 1px 1px 5px #ccc;	
}

img.alignright{
float:right;
margin:0 0 2px 10px;
}

/* ページナビゲーション */
ul.pagenav{
width:600px;
padding:20px 0;
}

ul.pagenav li{
list-style: none;
float: left;
}

ul.pagenav li a{
padding:0 0 0 10px;
background:url(images/arrowL.png) no-repeat 0 50%;
}

ul.pagenav li.next{float:right;}

ul.pagenav li.next a{
padding:0 10px 0 0;
background:url(images/arrowR.png) no-repeat 100% 50%;
}












/************************************************
/* トップページ グリッド
*************************************************/
.grid {
float: left;
width:260px;
min-height:200px;
margin:10px;
padding:10px;
background: #fff;
}





/* サイドバーとバナーのみグリッドの枠なし その他調節 */
.sidebar, .banner{
width:180px;
margin: 0px;
padding:0;
}

.grid img{
display: block;
max-width:260px;

}





.sidebar img, .banner img{
max-width:280px;
padding:0;
}

.sidebar a img:hover, .banner a img:hover{
opacity:.9;
-moz-opacity:0.9;
filter: alpha(opacity=90);
}

.grid h3{
margin:10px 0px 6px 0px;
color:#828282;
text-align:center;
font-size:14px;
}




.submenu h3{
padding:0 10px;
margin:10px 0 0;
line-height:35px;
color:#323232;
text-align:left;
background:#C8C8C8;
}


p.readon{margin-top:10px;}

p.readon a{
text-decoration:none;
padding:5px 10px;
position:relative;
display:inline-block;
text-shadow:0 1px 0 #fff;
-webkit-transition:border-color .218s;
-moz-transition:border .218s;
-o-transition:border-color .218s;
transition:border-color .218s;
background:#f3f3f3;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:-moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
-o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size:12px;
}

p.readon a:hover {
border-color:#ccc;
-moz-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.15);
}
p.readon a:active {color:#000; border-color:#444;}


/**** Transitions ****/
.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}

.transitions-enabled.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.transitions-enabled.masonry.masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}

.transitions-enabled.infinite-scroll.masonry {
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
}


/**** Clearfix ****/
.clearfix:before, .clearfix:after, .article:before, .article:after{content: ""; display: table;}
.clearfix:after, .article:after{clear: both;}
.clearfix, .article{zoom: 1;}












/************************************************
/* スライドショー
*************************************************/
/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next five rules are required for Slideshow to work correctly.
	Override at your own risk.
*/

.slideshow {
	display: block; position: relative; z-index: 0;
}
.slideshow-images {
	display: block; overflow: hidden; position: relative;
}		
.slideshow-images img {
	display: block; position: absolute; z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}
.slideshow-thumbnails ul {
	left: 0; position: absolute; top: 0; width: 100000px;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 450px; width: 800px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0;
}
.slideshow-images-next { 
	opacity: 0;
}
.slideshow-images img {
	float: left; left: 0; top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: auto; margin: 0 auto; width: 800px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000; bottom: 0; color: #FFF; font: normal 12px/22px Arial, sans-serif; left: 0; overflow: hidden; position: absolute; text-indent: 10px; width: 100%; z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0; opacity: 0;
}
.slideshow-captions-visible {
	height: 22px; opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(controller.png) no-repeat; height: 48px; left: 50%; margin: -24px 0 0 -122px; overflow: hidden; position: absolute; top: 50%; width: 244px; z-index: 10000;
}
.slideshow-controller * {
	margin: 0; outline: none; padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	background: url(controller-controls.png) no-repeat -47px 0; cursor: pointer; display: block; height: 18px; left: 112px; overflow: hidden; position: absolute; top: 15px; width: 20px;
}
.slideshow-controller a.active {
	background-position: -47px -18px;
}
.slideshow-controller li {
	list-style: none;
}			 
.slideshow-controller li.first a {
	background-position: 0 0; left: 36px; width: 19px;
}
.slideshow-controller li.first a.active {
	background-position: 0 -18px;
}
.slideshow-controller li.prev a {
	background-position: -19px 0; left: 68px; width: 28px;
}
.slideshow-controller li.prev a.active {
	background-position: -19px -18px;
}
.slideshow-controller li.play a {
	background-position: -67px 0;
}
.slideshow-controller li.play a.active {
	background-position: -67px -18px;
}
.slideshow-controller li.next a {
	background-position: -87px 0; left: 148px; width: 28px;
}
.slideshow-controller li.next a.active {
	background-position: -87px -18px;
}
.slideshow-controller li.last a {
	background-position: -115px 0; left: 189px; width: 19px;
}
.slideshow-controller li.last a.active {
	background-position: -115px -18px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	background: url(loader.png); height: 30px; right: 2px; position: absolute; top: 2px; width: 30px; z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -55px; height: 55px; left: 0; position: absolute; width: 100%;
}
.slideshow-thumbnails * {
	margin: 0; padding: 0;
}
.slideshow-thumbnails li {
	float: left; list-style: none;
}
.slideshow-thumbnails a {
	display: block; float: left; outline: none; margin: 5px 5px 0 0; padding: 5px;
}
.slideshow-thumbnails a:hover {
	background-color: #828282 !important; opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-hidden {
	background-color: #FFF; opacity: 0;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF; opacity: .5;
}
.slideshow-thumbnails-active {
	background-color: #E6E6E6; opacity: 1;
}








/************************************************
/* ギャラリー
*************************************************/
/* misc
 *----------------------------------------------- */
/* line 298, ../sass/screen.sass */
p.lead {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4em;
  margin-bottom: 0;
}

/* line 312, ../sass/screen.sass */
.section {
  padding: 40px 0;
}
/* line 314, ../sass/screen.sass */
.section:first-child {
  border-top: none;
}

/* line 317, ../sass/screen.sass */
.imageRow {
  *zoom: 1;
  margin: 10px 0px 20px 0px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.imageRow:after {
  content: "";
  display: table;
  clear: both;
}
/* line 320, ../sass/screen.sass */
.imageRow .single {
  float: left;
}
/* line 322, ../sass/screen.sass */
.imageRow .single a {
  float: left;
  display: block;
  background: rgba(255, 255, 255, 0.1);
  padding: 7px;
  line-height: 1em;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  margin: 4px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
/* line 332, ../sass/screen.sass */
.imageRow .single a img {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 0px solid rgba(0, 0, 0, 0.3);
}
/* line 335, ../sass/screen.sass */
.imageRow .single a:hover {
  background-color: #828282;
}
/* line 337, ../sass/screen.sass */
.imageRow .set {
  float: left;
  width:700px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  transition: all 0.2s ease-out;
}
/* line 343, ../sass/screen.sass */
.imageRow .set:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* line 346, ../sass/screen.sass */
.imageRow .set .single a {
  background: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  margin-right: 0;
}
/* line 351, ../sass/screen.sass */
.imageRow .set .single a:hover {
  background-color: #828282;
  -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}
/* line 355, ../sass/screen.sass */
.imageRow .set .single.first a {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  -ms-border-top-left-radius: 4px;
  -o-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
/* line 358, ../sass/screen.sass */
.imageRow .set .single.last a {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  -ms-border-top-right-radius: 4px;
  -o-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -ms-border-bottom-right-radius: 4px;
  -o-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}