@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

* {
	margin:0;
	padding: 0;
	outline: none;
}

a:link ,a:visited {
	color: #CEFFFF;
	text-decoration: underline;
}
a:hover {
	color: #0FF;
	text-decoration: underline;
}
a:active {
	color: #09F;
}

body {
	font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-family: 'Noto Sans Japanese';
	color: #8A562D;
	font-size: 14px;
	overflow-x: hidden;
	background-color: #7DC3ED;
}

h1, h2 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.scroll {
	position: fixed;
	bottom: 0;
	left: 0;
}

.mirror {
	-webkit-transform: scaleX(-1);
	   -moz-transform: scaleX(-1);
	    -ms-transform: scaleX(-1);
	     -o-transform: scaleX(-1);
	        transform: scaleX(-1);
	filter: FlipH;
}

#container {
	height: 500px;
}

#header {
	height: 44px;
	width: 100%;
	background: #FFF;
	position: fixed;
	z-index: 100;
}

#header #logo {
	height: 40px;
	width: 688px;
	margin: 0 auto;
	text-align: center;
	background-image: url('/img/header.png');
}

#header #logo a {
	width: 100%;
	height: 100%;
	display: block;
}

.line {
	background-color: #DABA27;
	height: 4px;
	width: 100%;
}


#share {
	position: fixed;
	z-index: 98;
	top: -30px;
	right: 40px;
}

#share ul {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 0 0 10px 10px;
}

#share li {
	display: inline-block;
	list-style: none;
}

#share #line_share {
	display: none;
}

/* パララックス設定「値を小さくするほどゆっくり流れる」 */

#sky {
	z-index: 1;
	width: 2000px;
}

#bg1 {
	z-index: 10;
	width: 3000px;
	height: 376px;
	bottom: 64px;
	background: url('img/bg1.png') repeat-x; /* 山 */
}

#road {
	z-index: 30;
	width: 10000px;
	height: 56px;
	bottom: 110px;
	background: url('img/road.png') repeat-x;
}

#toTop {
	z-index: 150;
	width: 10000px;
	height: 100px;
	bottom: 64px;
}

/* テキスト関係 */
#text {
	z-index: 80;
	width: 10000px;
	height: 376px;
	bottom: 64px;
}

#menu {
	position: absolute;
	width: 260px;
	height: 170px;
	left: 800px;
	bottom: 100px;
	background: url('img/board01.png') no-repeat;
	padding: 24px 0 0 40px;
}

#menu li {
	list-style: none;
}

#menu a {
	color: #8A562D;
}

#menu a:hover {
	text-decoration: none;
}

#about, #cake {
	position: absolute;
	height: 230px;
	bottom: 136px;
	padding: 5px 5px 5px 10px;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: 10px;
}

#about {
	width: 450px;
	left: 1800px;
}

#cake {
	width: 350px;
	left: 2500px;
}

#sample_board {
	position: absolute;
	left: 3000px;
	bottom: 100px;
}

#sample {
	position: absolute;
	width: 380px;
	height: 200px;
	padding: 5px;
	left: 3000px;
	bottom: 150px;
	text-align: center;
}

#sample h2 {
	margin: 0;
}

#sample p {
	margin-bottom: 10px;
}

/* パララックスここまで */
/* リスと道端の画像 */
#risuBox {
	position: fixed;
	width: 133px;
	height: 100px;
	left: 100px;
	bottom: 125px;
	z-index: 100;
}


#fukidashi {
	position: absolute;
	left: 110px;
	bottom: 140px;
	display: none;
}

#kirikabu {
	position: absolute;
	left: 1600px;
	bottom: 70px;
}

/* 画像たちここまで */

/* リスを跳ね続けさせる */

.jump {
	-webkit-animation-name:jump;
	-webkit-animation-duration:0.5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	
	-moz-animation-name:jump;
	-moz-animation-duration:0.5s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
}
@-webkit-keyframes jump {
	0% {-webkit-transform:translate(0, 0);}
	25% {-webkit-transform:translate(0, -20px);}
	40% {-webkit-transform:translate(0, -26px);}
	50% {-webkit-transform:translate(0, -28px);}
	60% {-webkit-transform:translate(0, -26px);}
	75% {-webkit-transform:translate(0, -20px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes jump {
	0% {-moz-transform:translate(0, 0);}
	25% {-moz-transform:translate(0, -20px);}
	40% {-moz-transform:translate(0, -26px);}
	50% {-moz-transform:translate(0, -28px);}
	60% {-moz-transform:translate(0, -26px);}
	75% {-moz-transform:translate(0, -20px);}
	100% {-moz-transform:translate(0, 0);}
}

/* ページトップへ */
#toTop .board {
	position: absolute;
	width: 118px;
	height: 55px;
	bottom: 30px;
	background: url('img/board03.png') no-repeat;
	padding: 6px 0 0 18px;
	transform: rotate(-5deg);
}

#toTop a		{ color: #8A562D;}
#toTop a:hover	{ text-decoration: none;}

#toTop .no_1 { left: 2200px;}
#toTop .no_2 { left: 3400px;	transform: rotate(2deg);}

#footer {
	width: 100%;
	height: 64px;
	background: url('/img/bg.jpg');
	color: #FFF;
	font-size: 13px;
	text-align: center;
	position: fixed;
	bottom: 0;
	z-index: 100;
}

p#others a:first-child {
	margin-right: 10px;
}

#counter {
	height: 20px;
}


/* 表示領域が450px以下の場合に適用するスタイル */
@media screen and (max-width: 450px) {

body {	
	font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

#header #logo {
	width: 247px;
	background-image: url('/img/header_sp.png');
}

#share {
	right: 10px;
}

#share #line_share {
	display: inline-block;
}

#fukidashi {
	left: 10px;
}

#risuBox {
	left: 10px;
}

#about, #cake {
	width: 300px;
	height: auto;
	max-height: 300px;
}


}