@charset "utf-8";
/*
Theme Name: Simply Red
Theme URI: http://simply-r.com/
Author: Taro Misako
*/

*.* { margin: 0; padding: 0;}

html { overflow: hidden; }

body {
	font-size: 11px;
	line-height: 160%;
	color: #333;
	background-color: #FFF;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Lucida Grande', 'ＭＳ Ｐゴシック', Osaka, sans-serif;
	padding: 0;
	margin: 0;
	overflow: hidden;
	height: 100%;
}

img {

	border: none; 
	-ms-interpolation-mode: bicubic;

}


a {
	color: #333;
	text-decoration: underline;
}

	a:hover {
		color: #CCC;
		text-decoration:none;
	}

	a:hover img {
		-moz-opacity:0.7;
		opacity:0.7;
		text-decoration:none;
		border: none;
	}
	
	
/* 背景画像（最大化表示） ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */		
#supersize {
	position:fixed;
	z-index: 0;
}

	#supersize img, #supersize a {
		height:100%;
		width:100%;
		position:absolute;
	}
	
/* ドット背景 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */			
#bg_dot {
	position:absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	top:0;
	background-image: url("img/common/bg_dot.gif");
}			

/* ページ下部のナビゲーション ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#navi {
	position: absolute;
	bottom: 6%;
	left: 5%;
	width: 790px;
	z-index: 200;
}

	#navi #logo {
		float: left;
		width: 140px;
	}
	
	#navi #button {
		float: left;
		width: 650px;
	}
	
	#navi #button #large {
		height: 33px;
		margin: 33px 0 0 0;
	}
	
		#navi #button #large img {
			float: left;
			margin-right: 15px;
		}
	
	#navi #button #small {
		height: 40px;
	}
	
		#navi #button #small img {
			float: left;
			margin-right: 15px;
	}

/* Wordpressページのレイアウト ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#page {
	position: absolute;
	top: 10%;
	width: 100%;
	z-index: 100;	
}

	#page #page_body {	
		width: 630px;
		height: 400px;
		margin: 0 auto 0 auto;
	}
	
		#page #page_body h3 {
			font-weight: bold;
			font-size: 11px;
			margin: 0 0 5px 0;
		}
	
		#page #page_body .left {
			float: left;
			width: 300px;
		}
		
		#page #page_body .right {
			float: right;
			width: 300px;
		}
		
		#page #page_body .img_right {
			float: right;
			margin-right: 30px;
		}	
		
		#page #page_body .order_allow {
			margin: 15px 0;
		}

/* ページ中央のアーカイブ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#archive {
	position:absolute;
	top: 7%;
	width: 100%;
	z-index: 100;		
}
		
	#archive_body {	
		width: 780px;
		height: 480px;
		margin: 0 auto;		
		overflow-y: scroll;	
	}	
	
	#archive_body:focus {
		outline: 0;
	}
	
		#archive_body .margin {
			margin-left: 40px;
		}
		
		#archive_body img {
			float: left;
			border: 5px solid #FFF;
			margin: 0 40px 40px 0;
			width: 133px;
			height: 200px;
		}
		
		#archive_body a:hover img {
			-moz-opacity:1;
			opacity:1;
			text-decoration:none;
			border: 5px solid #DDD;
		}	
	
		
/* ページ中央のアーカイブ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#single {
	position:absolute;
	top: 5%;
	width: 100%;
	z-index: 100;
}

/* 2枚目の画像がある場合 */
#single2 {
	position:absolute;
	top: 5%;
	width: 100%;
	z-index: 90;
}
	
	.btn_left, .btn_right {
		width: 17px;	
		position:absolute;
		top: 45%;
		z-index: 150;		
	}
	
	.btn_left {
		left: 7%;
	}
	
	.btn_right {
		right: 7%;
	}
	
	.single_body {	
		text-align: center;
	}
	
	.single_body:focus {
		outline: 0;
	}
	
		.single_body .centering {	
			margin: 0 auto;
		}
		
		.single_body  img {
			border: 5px solid #FFF;
		}
		
		/* フェードイン用の2枚目の画像 */
		.single_body .single_image2 {
			display: none;
		}
		
			
/* ページ左上のメニュー ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#menu {
	position: absolute;
	top: 8%;
	left: 5%;
	width: 350px;
	z-index: 40;
}

	#menu img {
		margin-bottom: 25px;
	}
	
	#menu .concept_title {
		margin-left: 15px;
	}
	
	#menu .concept_text {
		margin-left: 17px;
		line-height: 180%;
	}

/* ページ左上の「一覧に戻る」ボタン ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#back {
	position: absolute;
	top: 0px;
	left: 5%;
	padding: 0 5px 0 5px;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	background-color: #FFF;	
	z-index: 210;
	font-size: 11px;
	text-align: center;
}

	#back a {
		text-decoration: none;
	}

/* ページ右上のコンテンツ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#content {
	position: absolute;
	top: 0px;
	right: 5%;
	width: 198px;
	padding: 0;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	background-color: #FFF;	
	z-index: 200;
}

	#content .more {
		cursor: pointer;
	}
	
	#content .body {
		padding: 0px 20px 0px 20px;
		width: 158px;
		overflow: hidden;
	}

		#content .body h2 {
			font-size: 0;
			margin: 20px 0 15px 0;
		}
		
			#content .body .text {
				margin-bottom: 20px;
			}
			
			#content .body .close {
				cursor: pointer;
				margin-left: -20px;
			}



/* 共通のスタイル ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.center { width: 100%; text-align: center; }
.clear { clear:both; }