/*
 -------------------------
All Web Designed by ayame 
------------------------- */


/*
 all rule
----------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

html {
	height:100%;
	margin: 0;
	padding: 0;
}

body {
	width:100%;
	color: #000;
    font-size: 0.8em;
	line-height: 1.7em;
	font-family: Verdana,Arial,MS UI Gothic,Osaka,sans-serif;
	letter-spacing: 0.1em;
	height:auto;
	margin: 0;
	padding: 0;
}

p {
	margin: 10px 0 0;
}

img {
	border: 0;
}


.clearfix {
	zoom:100%;
}

.clearfix:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}




.info_title_rubi {
	color: #FF0066;
	font-size: 0.7em;
}

.text01 {
	text-align: left;
}

.day {
	font-size: 1.1em;
	color: #ff4400;
	font-weight: 700;
}

.pink {
	font-size: 1.1em;
	color: #FF0066;
	font-weight: 700;
}

.little {
	font-size: 0.8em;
	color: #CC0000;
	line-height: 1.2em;
}

.small1 {
	font-size: 0.9em;
	line-height: 1.4em;
	padding-top: 10px;
}

.bold01 {
	font-weight: 700;
}

.bold02 {
	font-weight: 700;
	color: #FF3300;
}

.bold03 {
	font-weight: 700;
	color: #FF3399;
}

.bold04 {
	font-weight: 700;
	color: #003399;
}

.mail {
	font-weight: 700;
	color: #FF3300;
	font-size: 1.4em;
}




/*
 link
----------------------------------------------------------- */
a:link {
	color: #06f;
	text-decoration: underline;
}
a:visited {
	color: #663399;
	text-decoration: underline;
}
a:hover {
	color: #FF3366;
	text-decoration: none;
}
a:active {
	color: #333;
}


/*
 heading
----------------------------------------------------------- */
h1 {
	text-indent: -9999px;
}

h2 {
	text-indent: -9999px;
}

h3 {
	color: #FF0066;
	font-size: 1.5em;
	line-height: 1em;
	text-align: center;
}

h4 {
	height: 33px;
	background-image: url(images/li_clover01.gif);
	background-repeat: no-repeat;
	background-position: top left;
	padding-top: 3px;
	padding-left: 40px;
	color: #009966;
	font-size: 1.4em;
}

h5 {
	border-left: solid 4px #FF9900;
	padding-top: 3px;
	padding-left: 15px;
	color: #003399;
	font-size: 1em;
	margin-bottom: 10px;
}

h4.recruit_h {
	height: 33px;
	background-image: url(images/li_clover01.gif);
	background-repeat: no-repeat;
	background-position: top left;
	padding-top: 3px;
	padding-left: 40px;
	color: #009966;
	font-size: 1.4em;
	border-bottom: solid 1px #ccc;
}

h6 {
	color: #CC3300;
	font-size: 1em;
	margin-bottom: 10px;
}




/*
 wrapper
----------------------------------------------------------- */
#wrapper {
    width: 100%;
    height: 100%;
	text-align: center;
    margin: 0 auto;
    background-image: url(images/bg_sky.gif);
	background-repeat: repeat-x;
	background-position: top center;
}


#wrap01 {
    width:100%;
    height: 140px;
	text-align: center;
    margin: 0 auto;
    background-image: url(images/bg_main.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

#wrap02 {
    width: 100%;
    height: 100%;
	text-align: center;
    margin: 0 auto;
    background-image: url(images/bg_gr01.gif);
	background-repeat: repeat;
	background-position: top center;
}

#wrap01_index {
    width:100%;
    height: 402px;
	text-align: center;
    margin: 0 auto;
    background-image: url(images/bg_main_index.gif);
	background-repeat: no-repeat;
	background-position: top center;
}




/*
 main_wrap
----------------------------------------------------------- */
.main_box {
	width: 780px;
	height: 100%;
	text-align:center;
    margin:0 auto;
}

.main_wrap {
	width: 776px;
	text-align:center;
    margin:0 auto;
    background-color: #ffffff;
    border-left: solid 2px #B6E651;
    border-right: solid 2px #B6E651;
}

#main_wrap {
	width: 776px;
	height: 100%;
	text-align:center;
    margin:0 auto;
    background-image: url(images/bg_contents.gif);
	background-repeat: repeat;
	background-position: top center;
	border-left: solid 2px #B6E651;
    border-right: solid 2px #B6E651;
}

#main_wrap_index {
	width: 776px;
	height: 100%;
	text-align:center;
    margin:0 auto;
	border-left: solid 2px #B6E651;
    border-right: solid 2px #B6E651;
}



/*
 header
----------------------------------------------------------- */
#header {
	width: 776px;
	height: 138px;
	border-bottom: solid 2px #B6E651;
}

#header_index {
	width: 776px;
	height: 402px;
}

h2#info {
	width: 558px;
	height: 138px;
	background-image: url(images/h_info.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#story {
	width: 558px;
	height: 138px;
	background-image: url(images/h_story.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#chara {
	width: 558px;
	height: 138px;
	background-image: url(images/h_chara.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#cm {
	width: 558px;
	height: 138px;
	background-image: url(images/h_cm.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#recruit {
	width: 558px;
	height: 138px;
	background-image: url(images/h_recruit.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#announce {
	width: 558px;
	height: 138px;
	background-image: url(images/h_announce.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#link {
	width: 558px;
	height: 138px;
	background-image: url(images/h_link.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#radio {
	width: 558px;
	height: 138px;
	background-image: url(images/h_radio.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

h2#campaign {
	width: 558px;
	height: 138px;
	background-image: url(images/h_campaign.gif);
	background-repeat: no-repeat;
	background-position: top center;
}



#mv {
	width: 558px;
	height: 138px;
	float: left;
}

#mv_index {
	width: 558px;
	height: 402px;
	float: left;
	background: url(images/mv01.jpg) 0 0  no-repeat;
}

#mv_button {
	margin-top: 290px;
	margin-left: 360px;
}

.mv_btn_wrap {
	margin-top: 180px;
	margin-left: 212px;
	text-align: left;
}

.mv_btn02 {
	margin-top: 10px;
}


#logo {
	width: 218px;
	height: 138px;
	background-image: url(images/sn_logo.gif);
	background-repeat: no-repeat;
	background-position: top center;
	float: left;
}


#index_logo_wrap {
	width: 218px;
	height: 402px;
	float: left;
}

#index_logo {
	width: 218px;
	height: 138px;
	background-image: url(images/sn_logo.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

#index_logo_wrap li{
	list-style-type: none;
}



/*
 contents
----------------------------------------------------------- */
#contents_wrap {
	width: 558px;
	float: left;
	text-align: left;
}





/*
 nav
----------------------------------------------------------- */

#g_nav {
	width: 780px;
	text-align: center;
	margin: 0 auto;
	position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -390px;
}

ul#g_nav {
	width: 780px;
}

#g_nav li{
	list-style-type: none;
	float: left;
}


#s_nav {
	width: 218px;
	height: 100%;
	float: left;
}

#s_nav li{
	list-style-type: none;
}


.s_bn01 {
	padding-top: 10px;
}

.s_bn01_index {
	padding-top: 12px;
}

.s_bn02 {
	padding-top: 25px;
}

ul.s_bn02 {
	margin: 0;
	padding: 0;
}

.s_bn02 li {
	padding-bottom: 5px;
}

.s_bn03 {
	padding-top: 15px;
}

ul.s_bn03 {
	margin: 0;
	padding: 0;
}

.s_bn03 li {
	padding-bottom: 5px;
}




/*
 index
----------------------------------------------------------- */

#index_wrap {
	margin: 30px 20px auto 20px;
	width: 518px;
}

.index_left {
	width: 248px;
	float: left;
}

.index_right {
	width: 260px;
	float: right;
}

#news {
	width: 260px;
	height: 285px;
	overflow: auto;
	font-size: 12px;
	line-height: 1.6em;
	letter-spacing: 0em;
}


ul#news {
}

#news li {
	list-style-type: disc;
	margin-left: 15px;
	margin-top: 10px;
}

#news_center {
	width: 498px;
	height: 100px;
	overflow: auto;
	font-size: 12px;
	line-height: 1.6em;
	letter-spacing: 0em;
}


ul#news_center {
}

#news_center li {
	list-style-type: disc;
	margin-left: 15px;
	margin-top: 10px;
}




/*
 info
----------------------------------------------------------- */

#info_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

.info_left {
	width: 288px;
	float: left;
}

.info_right {
	width: 180px;
	float: right;
}
.info_center {
	text-align: left;
	margin: 30px 30px auto 30px;
}

#staff {
	margin: 70px 30px auto 30px;
	width: 498px;
}

.staff_left {
	width: 240px;
	float: left;
}

.staff_right {
	width: 240px;
	float: right;
}



/*
 radio
----------------------------------------------------------- */

.radio_title {
	margin: 0 auto;
	text-align: center;
}

#radio_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

.radio_top {
	margin: 20px 10px;
	padding: 0 10px 10px;
	border-top: solid 1px #fc0;
	border-bottom: solid 1px #fc0;
	text-align: left;
	font-size: 0.8em;
	line-height: 1.4em;
	background-color: #FFFFCC;
}

.radio01 {
	margin-top: 20px;
	padding-top: 20px;
	border-top: dashed 1px #ccc;
}

#radio02 {
	width: 498px;
	font-size: 0.8em;
	line-height: 1.4em;
}

.radioplayer01 {
}

h4.radio {
	height: 33px;
	background-image: url(images/li_clover01.gif);
	background-repeat: no-repeat;
	background-position: top left;
	padding-top: 3px;
	padding-left: 40px;
	color: #FF3366;
	font-size: 1.3em;
}

.radio_left {
	width: 200px;
	float: left;
}

.radio_right {
	width: 290px;
	float: right;
}

td.right01 {
	padding-left: 10px;
	width: 75%;
}

td.left01 {
	font-weight: 700;
	color: #333;
	width: 25%;
}

td.right02 {
	padding-left: 10px;
	width: 60%;
}

td.left02 {
	font-weight: 700;
	color: #333;
	text-align: right;
	width: 40%;
}

.blue02 {
	font-weight: 700;
	color: #0033ff;
	font-size: 1.2em;
}



/*
 story
----------------------------------------------------------- */

#story_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

.box2 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: dashed 1px #ccc;
}

.word02 {
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid 1px #eee;
}






/*
 chara
----------------------------------------------------------- */

#chara_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

#chara_th1 {
	width: 498px;
	text-align: center;
	margin: 10px auto 0 auto;
}

ul#chara_th1 {
	width: 498px;
}

#chara_th1 li{
	list-style-type: none;
	float: left;
}



.chara01 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara01.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara02 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara02.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;;
}

.chara03 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara03.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara04 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara04.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara05 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara05.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara06 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara06.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara07 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara07.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara08 {
	width: 496px;
	height: 338px;
	background-image: url(images/chara08.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	text-align: left;
}

.chara01 li {
	padding-top: 76px;
	padding-left: 145px;
	list-style-type: none;
}

.chara02 li {
	padding-top: 76px;
	padding-left: 185px;
	list-style-type: none;
}

.chara03 li {
	padding-top: 76px;
	padding-left: 210px;
	list-style-type: none;
}

.chara04 li {
	padding-top: 76px;
	padding-left: 190px;
	list-style-type: none;
}

.chara05 li {
	padding-top: 76px;
	padding-left: 190px;
	list-style-type: none;
}

.chara06 li {
	padding-top: 76px;
	padding-left: 180px;
	list-style-type: none;
}

.chara07 li {
	padding-top: 86px;
	padding-left: 200px;
	list-style-type: none;
}

.chara08 li {
	padding-top: 76px;
	padding-left: 180px;
	list-style-type: none;
}


.chara_text1 {
	width: 280px;
	font-size: 14px;
	color: #FF3300;
}

.chara_text2 {
	margin-top: 10px;
	width: 456px;
	font-size: 11px;
	line-height: 1.6em;
	letter-spacing: 0em;
	background-color:#fff;
	filter:alpha(opacity=75); /*IE*/
	-moz-opacity:0.75; /*FF*/
	opacity:0.75;
}

.chara_text3 {
	margin-top: 10px;
	width: 370px;
	font-size: 11px;
	color: #333;
	line-height: 1.6em;
	letter-spacing: 0em;
}



/*
 cm
----------------------------------------------------------- */

#cm_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

.cm_contents {
	margin: 0 auto;
	width: 400px;
}

.cm01 {
	margin: 0 auto 10px auto;
}

.cm02 {
	margin: 10px auto 0 auto;
}

.cm_line01 {
	margin-top: 20px;
	padding-top: 20px;
	border-top: dashed 1px #ccc;
}




/*
 link
----------------------------------------------------------- */

#link_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

#link_wrap_index {
	margin: 40px 30px auto 30px;
	width: 498px;
}


.box4 {
	margin-top: 10px;
	padding-top: 10px;
	border-top: dashed 1px #ccc;
}


/*
 campaign
----------------------------------------------------------- */

.campaign_title {
	margin: 0 auto;
	text-align: center;
}

#campaign_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

.campaign_box1 {
	margin-top: 30px;
}

.campaign_box1 li {
	margin-top: 10px;
	margin-left: 26px;
	font-size: 1.1em;
	color: #333;
	font-weight: 700;
}

#campaign01 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: dashed 1px #ccc;
}

#campaign02 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: dashed 1px #ccc;
}



/*
 recruit
----------------------------------------------------------- */

#recruit_wrap {
	margin: 30px 30px auto 30px;
	width: 498px;
}

.recruit_page1 li {
	list-style-type: none;
	margin-left: 15px;
	text-align: right;
}


ul.recruit_li {
	margin-top: 10px;
}

.recruit_li li {
	list-style-type: circle;
	margin-left: 15px;
}

#box2 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: dashed 1px #ccc;
}

.box3 {
	padding-top: 20px;
}

.box5 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.recruit_chara1 li {
	list-style-type: decimal;
	margin-left: 30px;
}

.tdleft {
	width: 30%;
}

.tdright {
	width: 60%;
}

.recruit_left {
	width: 29%;
	float: left;
}

.recruit_right {
	width: 70%;
	float: right;
}

.recruit_text1 {
	margin-top: 15px;
}

#recruit2 {
	margin-top: 80px;
}

.recruit_chara01 {
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid 1px #eee;
	zoom:100%;
}

.recruit_chara01:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}

.recruit_chara02 {
	margin-top: 20px;
	padding-top: 10px;
	border-top: solid 1px #eee;
}

.recruit_chara03 {
	margin-top: 10px;
	padding-top: 0px;
	border-top: dashed 1px #eee;
}

.blue {
	font-weight: 700;
	color: #0033ff;
	font-size: 1.2em;
	padding-top: 20px;
}

.green {
	font-weight: 700;
	color: #006600;
	padding-top: 20px;
}

.sub {
	color: #CC3300;
	font-size: 1em;
	margin-bottom: 10px;
	font-weight :700;
}

.sub1 {
	color: #CC3300;
	font-size: 1em;
	margin-bottom: 10px;
	font-weight :700;
	margin-top: 20px;
}

.normal {
	color: #000;
	font-size: 0.9em;
	font-weight :normal;
}




/*
 copy
----------------------------------------------------------- */
.copy{
	text-align:center;
	padding-top: 50px;
	clear: both;
}

.copy p {
	font-size:0.8em;
	color:#999;
}