@charset 'Shift_JIS';
/* 共通CSS */

/* 各タグ向け */
html {
	background: url(border.png) #e4f2c2;
	height: 100%;
}
body {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-size: 14px;
	font-family: verdana, 'trebuchet ms', sans-serif;
	background: url(sakura.png) transparent repeat-x;
	overflow-y: scroll;
}
h2 {
	font-size: 150%;
	margin: 20px 14px 14px;
}
h2:first-child {
	margin: 0 14px 14px;
}
p {
	margin: 0;
	line-height: 1.3;
}
p + p {
	margin: .8em 0 0;
}
a:link {
	color: #4B6F73;
	text-decoration: none;
	font-weight: bold;
}
a:visited {
	color: #485859;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
}
img {
	border: 0;
}
b, em, strong {
	font-weight: bold;
}
em {
	font-style: normal;
	color: #CC2828;
}
strong {
	color: #ff3333;
}
small {
	font-size: 85%;
}
article, aside, details, footer, header, nav, section, summary {
	display: block; /* IE8/9用 */
}

#wrap {
	margin: 0 auto;
	width: 800px;
	background-color: white;
	box-shadow: rgba(0, 0, 0, .6) 0 0 20px;
	/* IE8用 */
	padding: 0 8px\9;
	background: url(shadow_bg.png) transparent repeat-y\9;
}
:root #wrap {
	/* IE9用 */
	padding: 0\9;
	background: none white\9;
}

header {
	background: url(top.jpg) no-repeat;
	height: 92px;
}
/*
2018年エイプリルフール
header {
	background: url(/authors/VA054960/0401/images/miyuki2018.png) no-repeat;
	height: 92px;
}
*/


header.full { /* TOPページ用 */
	height: 500px;
}
header h1 {
	margin: 0;
	padding: 6px 12px;
}
header a {
	margin-left: 2px;
}

/* MENU (スタイルの優先度・継承関係に注意) */
#wrap > nav {
	border-bottom: #eee 1px solid;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	/*display: table;*/
	height: 50px;
}
#menu > li {
	/*display: table-cell;*/
	position: relative;
	float: left;
	text-indent: -5555px;
}
#menu > li > a, #special, #info {
	display: block;
	height: 50px;
	background-repeat: no-repeat;
}
#menu li:hover {
	position: relative;
}
#menu li:hover ul {
	visibility: visible;
}
#menu ul {
	visibility: hidden;
	position: absolute;
	top: 100%;
	border-radius: 0 0 4px 4px;
	box-shadow: rgba(0,0,0,0.6) 0 2px 4px;
	z-index: 2;
}
#menu ul li {
	text-indent: 0;
}
#menu ul li a {
	display: block;
	padding: 2px 0;
	color: #E3F3C0;
	background-color: #b1c08e;
	text-align: center;
	text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:focus {
	outline: 0;
	background-color: #C1D19B;
	/*
	color: #b1c08e;
	background-color: #E3F3C0;
	*/
}
#menu ul li:last-child a {
	border-radius: 0 0 4px 4px;
}

a#top {
	width: 40px;
	background: url(home.png) -0px -0px;
}
a#top:hover {
	background-position: -0px -50px;
}

a#story {
	width: 130px;
	background: url(menu.png) -0px -0px;
}
a#story:hover {
	background-position: -0px -50px;
}
a#story.active {
	background-position: -0px -100px;
}
a#story.active:hover {
	background-position: -0px -150px;
}

a#stage {
	width: 120px;
	background: url(menu.png) -130px -0px;
}
a#stage:hover {
	background-position: -130px -50px;
}
a#stage.active {
	background-position: -130px -100px;
}
a#stage.active:hover{
	background-position: -130px -150px;
}

a#chara {
	width: 140px;
	background: url(menu.png) -250px -0px;
}
a#chara:hover {
	background-position: -250px -50px;
}
a#chara.active {
	background-position: -250px -100px;
}
a#chara.active:hover {
	background-position: -250px -150px;
}

a#link {
	width: 110px;
	background: url(menu.png) -390px -0px;
}
a#link:hover {
	background-position: -390px -50px;
}
a#link.active {
	background-position: -390px -100px;
}
a#link.active:hover {
	background-position: -390px -150px;
}

li#special {
	width: 140px;
	background: url(menu.png) -500px -0px;
}
li#special:hover {
	background-position: -500px -50px;
}
li#special.active {
	background-position: -500px -100px;
}
li#special.active:hover {
	background-position: -500px -150px;
}
li#special ul li {
	width: 140px;
}

li#info {
	width: 120px;
	background: url(menu.png) -640px -0px;
}
li#info:hover {
	background-position: -640px -50px;
}
li#info.active {
	background-position: -640px -100px;
}
li#info.active:hover {
	background-position: -640px -150px;
}
li#info ul li {
	width: 120px;
}

/* Footer */
footer {
	margin-top: 20px;
	padding: 2px 0 8px;
	background-color: #b1c08e;
	border-top: #99A67B 1px solid;
}
footer p {
	margin: 6px 12px;
	color: #333;
}
footer strong {
	color: #E63939;
	font-weight: normal;
}

/* Main */
#main h1 {
	margin: 18px 20px 20px;
	padding-left: 80px;
	line-height: 42px;
	font-size: 180%;
	background: url(header.jpg);
}
#main > p {
	margin-left: 20px;
}

/* トップ */
#main.top_info {
	padding: 20px 20px 0 0;
}
.top_info h2 {
	margin: 20px 16px 8px;
}

#table {
	display: table;
	border-spacing: 20px;
	margin-right: -20px;
}
#table > div {
	display: table-cell;
    text-align: center;
}

#recent {
	margin: 0;
	margin-left: 17px;
	padding: 4px;
	overflow: auto;
	height: 350px;
	border: 1px solid #CCC;
}
#recent li {
	padding: 4px;
	list-style: none;
	border-bottom: 1px dotted #999;
}

#join_us {
	position: absolute;
	bottom: 0;
	right: 20px;
	padding-bottom: 105px;
	background: url(hayu_sd_small.png) bottom no-repeat;
}
#join_us a {
	display: block;
	position: relative;
	padding: 6px;
	width: 121px;
	background-color: #E1F0FF;
	border: #4596E6 2px solid;
	border-radius: 8px;
	font-size: 85%;
	line-height: 1.4;
	box-shadow: black 0 1px 3px;
}
#join_us a:before, #join_us a:after {
	position: absolute;
	left: 30px;
	top: 100%;
	content: "";
	width: 0;
	height: 0;
	border: solid transparent;
}
#join_us a:before {
	border-top-color: #4596E6;
	border-width: 11px 7px 0;
	margin-left: -11px;
}
#join_us a:after {
	border-top-color: #E1F0FF;
	border-width: 8px 4px 0;
	margin-left: -8px;
}


/* AA */
#wrap #main .aa {
	font-size: 12pt;
	line-height: 18px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 0;
	font-family: Monapo,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,Mona,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","MS Pｺﾞｼｯｸ","MS PGothic",sans-serif;
}


/*** map ***/
#map {
	position: relative;
	width: 640px;
	height: 400px;
	margin: 0 auto;
	background: url(map.jpg);
	text-align: center;
}
#map img {
	position: absolute;
}
.map_img {
	float: left;
	margin-right: 16px;
}
.map_img img {
	width: 200px;
}
#map ~ section {
	overflow: hidden;
}

#map_get {
	left: 320px;
	top: 270px;
}
#map_shame {
	left: 180px;
	top: 10px;
}
#map_mall {
	left: 260px;
	top: 80px;
}
#map_park {
	left: 180px;
	top: 360px;
}
#map_college {
	left: 470px;
	top: 300px;
}
#map_hayato {
	left: 90px;
	top: 330px;
}
#map_station {
	left: 250px;
	top: 160px;
}
#map_hospital {
	left: 50px;
	top: 200px;
}
#map_name {
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 10px 12px;
	background-color: #e1f0be;
	border: solid #B1C08E;
	border-width: 0 0 1px 1px;
	border-bottom-left-radius: 12px;
}