/*
Theme Name: うさぎとカフェ
Description: うさぎとカフェ
Author: Eri Adachi
Version: 1
*/

@import url('common/css/reset.css');

/**************************************************
 @ BASE
 - ALL
**************************************************/

html {
}

	body {
		color: #444444;
		font-size: 74%;
		line-height: 1.9;
		background: #eeeee5 url(common/images/header/head_bg2.png) center top repeat-x;
		font-family: Meiryo, "メイリオ", MS PGothic, "ＭＳ Ｐゴシック", Osaka, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3";
	}

	a {
		color: #000000;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
	font-family: Helvetica, Arial, Meiryo, 'メイリオ', MS PGothic, "ＭＳ Ｐゴシック", Osaka, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3";
}
	.ornament1,
	.ornament2,
	.ornament3,
	.ornament4 {
		display:none !important;
		background: none !important;
	}
	.viewport {
		overflow: auto !important;
	}
	#keyvisual,#keyoption {
		/*display:none !important;*/
	}
}

/**************************************************
 @ COMMON
   - ALL
   - 1.HEADER
   - 2.FOOTER
   - 3.CONTENTS
   - 4.PAGETOP

***************************************************/

.preparation {
	font-size: 140%;
	text-align: center !important;
}

/*---------------------------
----------------- CLEARFIX */
.fix:before, 
.fix:after { 
    content: ""; 
    display: table; 
} 
.fix:after {
	clear: both;
} 
.fix {
	*zoom: 1;
}


/*************************************************
 @COMMON - 1.HEADER
----------------------------------------------- */
header {
	background: url(common/images/header/head_bg.png) center top no-repeat;
}

	header > div:first-child {
		width: 980px;
		margin: 0 auto 50px;
		position: relative;
	}

	header #logo {
		width: 317px;
		margin: 10px auto 0;
		text-align: center;
	}

	header #headnav {
		top: 0px;
		right: 0px;
		width: 229px;
		padding: 28px 0 0;
		position: absolute;
		text-align: center;
		background: url(common/images/header/head_nav_bg.png) top center no-repeat;
	}

		header #headnav ul {
			margin: 0 0 25px;
		}

			header #headnav ul li {
				margin: 0 0 7px;
			}

	header nav {
		height: 90px;
		z-index: 1;
		position: relative;
		background: url(common/images/header/gnav_bg.png) center top no-repeat;
	}

		header nav > ul {
			width: 980px;
			margin: 0 auto;
			padding: 7px 0 0;
		}

		header nav li {
			float: left;
		}

			header nav > ul > li > a {
				width: 203px;
				height: 42px;
				display: block;
				overflow: hidden;
				background: url(common/images/header/gnav.png);
				text-indent: 100%;
				white-space: nowrap;
			}

			header nav li:nth-child(2) a { width: 176px; background-position: -203px 0; }
			header nav li:nth-child(3) a { width: 69px;background-position: -384px 0; }
			header nav li:nth-child(4) a { width: 126px;background-position: -453px 0; }
			header nav li:nth-child(5) a { width: 117px;background-position: -579px 0; }
			header nav li:nth-child(6) a { width: 152px;background-position: -696px 0; }
			header nav li:nth-child(7) a { width: 133px;background-position: -848px 0; }

			header nav .inner {
				display: none;
				margin: 7px 0 0;
				position: absolute;
				background-color: #d21651;
				border-radius: 0 0 5px 5px;
			}

			header nav li:nth-child(1) .inner {	width: 220px; }
			header nav li:nth-child(2) .inner {	width: 180px; }
			header nav li:nth-child(3) .inner {	width: 220px; }
			header nav li:nth-child(4) .inner {	width: 220px; }
			header nav li:nth-child(5) .inner {	width: 200px; }

				header nav .inner li {
					float: none;
					border-bottom: 1px dotted #fff;
				}
				
				header nav .inner li:last-child {
					border: 0px;
				}

					header nav .inner li a {
						color: #fff;
						width: 95%;
						padding: 10px 0 10px 10px;
						display: block;
					}

					header nav .inner li a:hover {
						text-decoration: none;
						background-color: #E0195C;
					}
					header nav .inner li:last-child a:hover {
						border-radius: 5px;
					}

/*************************************************
 @COMMON - 2.FOOTER
----------------------------------------------- */
footer {
	background: url(common/images/footer/foot_bg2.jpg) center bottom repeat-x;
}

	/*--------------------------
	----------------- SNSNAV */
	footer .snsnav {
		width: 980px;
		margin: 30px auto;
	}

	.snsnav > div {
		float: left;
		width: 300px;
		height: 470px;
		margin: 0 0 0 30px;
	}

	.snsnav > div:first-child {
		margin: 0;
	}

	.snsnav #twitter-widget-0 {
	}

	.snsnav .fb-like-box > span {
		background-color: #fff;
	}

	.snsnav #calendar {
		width: 300px;
		height: 450px;
		padding: 10px;
		border-radius: 3px;
		background-color: #fff;
	}

		.snsnav .calendar > iframe {
			width: 300px;
			height: 400px;
			border: 0;
		}

	/*---------------------------
	----------------- SITEINFO */
	footer #siteinfo {
		padding: 35px 0 20px;
		background: url(common/images/footer/foot_bg.jpg) center bottom no-repeat;
	}

	footer #siteinfo > div {
		width: 980px;
		margin: 0 auto;
	}

		/*------- SITENAV */
		#siteinfo .sitenav {
			float: left;
		}

		#siteinfo .sitenav dl {
			float: left;
			margin: 0 0 0 20px;
		}

		#siteinfo .sitenav dl:nth-child(1) {
			margin-left: 0;
		}

		#siteinfo .sitenav dl:nth-child(2) {
			width: 200px;
		}

		#siteinfo .sitenav dl:nth-child(3) {
			width: 185px;
		}

			#siteinfo .sitenav dl dt {
				margin: 0 0 12px;
			}

			#siteinfo .sitenav dl dd {
				margin: 0 0 4px 10px;
				text-indent: -1em;
				padding-left: 1em;
			}

			#siteinfo .sitenav dl dd:before {
				content: '・';
			}


		/*---------------------------
		----------------- COMPANY */
		#siteinfo .company {
			float: right;
		}

		#siteinfo .company .btn {
			margin: 0 0 20px;
		}

		#siteinfo .company > div {
			width: 300px;
			padding: 20px 0 10px;
			border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			background: url(common/images/footer/company_bg.png) center top repeat;
		}

			#siteinfo .company div p {
				margin: 0 0 10px;
				text-align: center;
			}

			#siteinfo .company div dl {
				margin: 0 7px 10px;
			}

				#siteinfo .company div dt {
					margin: 0 0 2px;
					font-weight: bold;
				}

				#siteinfo .company div dd {
					white-space: nowrap;
				}

				#siteinfo .company div address {
					font-style: normal;
				}

				#siteinfo .company div dl:nth-child(4) dd {
					text-align: center;
				}

				#siteinfo .company div dl:nth-child(4) address {
					text-align: left;
				}


/*************************************************
 @COMMON - 3.CONTENTS
----------------------------------------------- */
#container {
	padding: 0 0 80px;
	background: url(common/images/footer/content_line.jpg) center bottom repeat-x;
}

	#contents {
		width: 980px;
		margin: 0 auto;
		padding: 0 0 30px;
	}

	/*---------------------------
	----------------- PARALLAX */
	.ornament1 {
		left: 0;
		width: 100%;
		height: 3620px;
		z-index: -1;
		position: absolute;
		background: url(common/images/ornament1.png) 50% 310px repeat-y;
	}

	.ornament2 {
		left: 0;
		width: 100%;
		height: 3620px;
		z-index: -1;
		position: absolute;
		background: url(common/images/ornament2.png) 50% 310px  repeat-y;
	}

	.ornament3 {
		left: 0;
		width: 100%;
		height: 3620px;
		z-index: -1;
		position: absolute;
		background: url(common/images/ornament3.png) 50% 310px  repeat-y;
	}

	.ornament4 {
		left: 0;
		width: 100%;
		height: 3620px;
		z-index: -1;
		position: absolute;
		background: url(common/images/ornament4.png) 50% 310px repeat-y;
	}

	.line {
		width: 100%;
		height: 70px;
		background: url(common/images/top/line.png) center top repeat-x;
	}


/*************************************************
 @COMMON - 4.PAGETOP
----------------------------------------------- */
#pagetop {
	background: url(common/images/footer/pagetop_bg.jpg) center top repeat-x;
}

	#pagetop p {
		width: 980px;
		margin: 0 auto;
		padding: 4px 0;
		text-align: right;
	}

/*************************************************
 @COMMON - 5.SIDE
----------------------------------------------- */
#sidemenu {
	top: 150px;
	right: 0;
	z-index: 2;
	position: absolute;
}