/* 
    Document   : anniv
    Created on : 2015/03/09, 16:19
    Author     : 
    Description:
	Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

body {
	background: #FFFFFF;
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

body #wrapper {
	max-width:800px;
	margin: 0 auto;
	background: #ceefad;
}

.cf:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility:hidden;
}

#wrapper h1 img {
	display: block;
	width: 100%;
	height: auto;
}

/****/

#wrapper #container {
	background: #ceefad;
	position: relative;
	line-height: 24px;
}

h2.title {
	color:#ffba00;
	text-align: center;
	line-height: 50px;
	font-size: 24px;
	background: #184a03; /* Old browsers */
	background: -moz-linear-gradient(top,  #184a03 0%, #164303 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184a03), color-stop(100%,#164303)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #184a03 0%,#164303 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #184a03 0%,#164303 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #184a03 0%,#164303 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #184a03 0%,#164303 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184a03', endColorstr='#164303',GradientType=0 ); /* IE6-9 */
}
h3.title {
	color:#ffffff;
	line-height: 50px;
	font-size: 24px;
	background: #184a03; /* Old browsers */
	background: -moz-linear-gradient(top,  #184a03 0%, #164303 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184a03), color-stop(100%,#164303)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #184a03 0%,#164303 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #184a03 0%,#164303 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #184a03 0%,#164303 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #184a03 0%,#164303 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184a03', endColorstr='#164303',GradientType=0 ); /* IE6-9 */
}
h3.title.red {
	background: #7b0b0b; /* Old browsers */
	background: -moz-linear-gradient(top,  #7b0b0b 0%, #7b0b0b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b0b0b), color-stop(100%,#7b0b0b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7b0b0b 0%,#7b0b0b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7b0b0b 0%,#7b0b0b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #7b0b0b 0%,#7b0b0b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7b0b0b 0%,#7b0b0b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b0b0b', endColorstr='#7b0b0b',GradientType=0 ); /* IE6-9 */
}
h3.title span                                                                                    {
	background: url("../images/announce/nico3/point1.png") 16px 0 no-repeat;
	background-size: auto 100%;
	padding: 0 0 0 60px;
}

section + h3{
	margin-top: 16px;
}

section{
	padding: 24px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #bae094 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bae094)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#bae094 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#bae094 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#bae094 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#bae094 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bae094',GradientType=0 ); /* IE6-9 */
}

/**********/
#intro div.first{
	color: #7b0b0b;
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 12px;
	font-weight: bold;
	text-align: center;
}

#intro div.second{
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
	margin-bottom: 24px;
	text-align: center;
}
#intro div.second span{color: #164403;}

#intro div.third{
	color:#ffffff;
	background: #7b0b0b;
	font-size: 18px;
	line-height: 32px;
	margin-bottom: 12px;
	padding: 24px;
	border-radius: 8px;
}
#intro div.third p{ font-size: 24px;font-weight: bold;}
#intro div.third span{ color:#fff000;}

#intro div.four{
	text-align: center;
}

/**********/
#member .pro dl{
	float: left;
	width: 21%;
}

#member .pro dl + dl{
	padding-left: 5%;
}

#member .pro dt img{
	text-align: center;
	max-width: 130px;
	width: 100%;
	margin: 0 auto;
	display: block;
}

#member .pro dd .name{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding: 8px 0 0 0;
}

#member .pro dd .team{
	text-align: center;
}

#member .pro dd .text{
	background: #ffffff;
	padding: 12px;
	margin: 8px 0 0;
	border-radius: 8px;
}

/**********/
#howto .date{
	padding: 24px;
}

#howto .date dl + dl {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 2px solid #B6C5A8;
}

#howto .date dl dt{
	color: #7b0b0b;
	float: left;
	font-size: 24px;
	width: 30%;
	font-weight: bold;
	text-align: center;
}

#howto .date dl dd{
	float: right;
	width: 70%;
	font-weight: bold;
	font-size: 18px;
}


#howto .date dl dd a{
	color: #1D6D37;
	display: inline-block;
	border-radius: 4px;
	padding: 4px;
	border: 1px solid #ffffff;
}

#howto .date dl dd a:hover{border: 1px solid #1D6D37;}

#howto .jannavi{
	color: #26410b;
	background-color: #ffffff;
	width: 80%;
	margin: 0 auto;
	padding: 24px;
	border-radius: 8px;
}

#howto .jannavi dl dt{
	float: left;
	width: 27%;
}

#howto .jannavi dl dt img{
	width: 100%;
	max-width: 120px;
	display: block;
	margin: 0 auto;
}

#howto .jannavi dl dd.text{
	border-top: 1px solid #26410b;
	padding-top: 6px;
	margin-top: 6px;
	font-size: 14px;
	line-height: 20px;
}

#howto .jannavi dl dd{
	float: right;
	width: 70%;
}

.download a{
	float: left;
	color: #ffffff;
	width: 32%;
	font-size:15px;
	font-weight: bold;
	padding: 2% 0;
	margin: 4% 0 2%;
	display: block;
	background: #24482b; /* Old browsers */
	background: -moz-linear-gradient(top,  #24482b 0%, #1c3721 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#24482b), color-stop(100%,#1c3721)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #24482b 0%,#1c3721 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #24482b 0%,#1c3721 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #24482b 0%,#1c3721 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #24482b 0%,#1c3721 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24482b', endColorstr='#1c3721',GradientType=0 ); /* IE6-9 */
	border-radius: 8px;
	text-align: center;
	border-bottom: 2px solid #142919;
}

.download a + a{margin-left: 2%;}

.download a:hover{
	background: #489056; /* Old browsers */
	background: -moz-linear-gradient(top,  #489056 0%, #386e42 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489056), color-stop(100%,#386e42)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #489056 0%,#386e42 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #489056 0%,#386e42 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #489056 0%,#386e42 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #489056 0%,#386e42 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489056', endColorstr='#386e42',GradientType=0 ); /* IE6-9 */
}

.download a p{font-size: 20px;}
.download p{text-align: center;}

/**********/
#present{
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffba6e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffba6e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffba6e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#ffba6e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#ffba6e 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#ffba6e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffba6e',GradientType=0 ); /* IE6-9 */
}

#present div{
	text-align: center;
	color: #7b0b0b;
	font-size: 24px;
	line-height: 70px;
	font-weight: bold;
}

#present dl{
	background: #ffffff;
	padding: 12px;
	border-radius: 8px;
	margin-top: 12px;
}

#present dl dt{
	color: #ffffff;
	padding: 12px;
	font-size: 24px;
	font-weight: bold;
	border-radius: 8px;
	width: 70%;
}
#present dl.prise_a dt{background: #7b0b0b;}
#present dl.prise_b dt{background: #174803;}

#present dl dd{
	padding: 12px 0 0;
	font-weight: bold;
	position: relative;
	font-size: 20px;
	line-height: 30px;
}

#present dl.prise_a .image{
	position: absolute;
	top: -90px;
	right: 0px;
	width: 24%;
}
#present dl.prise_a .image img{width: 100%;}

#present p{
	color: #5F4803;
	font-size: 14px;
}

/**********/
footer {
	font-size: 70%;
	background: #184a03; /* Old browsers */
	background: -moz-linear-gradient(top,  #184a03 0%, #164303 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184a03), color-stop(100%,#164303)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #184a03 0%,#164303 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #184a03 0%,#164303 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #184a03 0%,#164303 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #184a03 0%,#164303 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#184a03', endColorstr='#164303',GradientType=0 ); /* IE6-9 */
}

footer p {
	color: #FFF;
	padding: 8px;
	text-align: center;
}

footer p {
	font-size: 70%;
	color: #FFF;
	padding: 8px;
	text-align: center;
}

footer ul {
	max-width: 500px;
	padding: 6% 6% 3%;
	margin: 0 auto
}

footer ul li {
	display: block;
	width: 32%;
	text-align: center;
	float: left;
}
footer ul li + li {margin-left: 2%;}

footer ul li a {
	color: #FFF;
	font-weight: bold;
	display: block;
	padding: 0.5em 0;
	border-radius: 8px;
	background: #3057ba;
}
footer ul li a:hover {background: #5377ce;}
footer ul li.tw a {background: #37b6ff;}
footer ul li.tw a:hover {background: #5fc5ff;}
footer ul li.gp a {background: #de3e2d;}
footer ul li.gp a:hover {background: #ec5e4f;}


/*----------------------------------------------------------------------
    SmartPhone CSS 480以下
----------------------------------------------------------------------*/
@media (max-width: 479px) {

#wrapper #container {
	line-height: 1.2em;
}

h2.title {
	line-height: 2em;
	font-size: 1em;
}
h3.title {
	line-height: 2em;
	font-size: 1.2em;
}
h3.title span {
	background: url("../images/announce/nico3/point1.png") 6% 0 no-repeat;
	background-size: auto 100%;
	padding: 0px 0 0 10%;
}
section{
	padding: 3%;
}

/**********/
#intro div.first{
	line-height: 1.2em;
	font-size: 1em;
}

#intro div.second{
	font-size: 0.9em;
	line-height: 1.2em;
}
#intro div.second span{color: #164403;}

#intro div.third{
	line-height: 1.4em;
	font-size: 0.9em;
	padding: 3%;
}
#intro div.third p{ font-size: 1.2em;}

#intro div.four{
	font-size: 0.8em;
}
/**********/
#member .pro dl{
	float: none;
	width: 100%;
}

#member .pro dl + dl{
	padding:12px 0 0 0;
}

#member .pro dt{float: left;width: 30%;}
#member .pro dd{float: right;width: 70%;}

#member .pro dl:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility:hidden;
}

#member .pro dt img{
	text-align: center;
	max-width: 130px;
	width: 100%;
	margin: 0 auto;
	display: block;
}

#member .pro dd .name{
	font-size: 1em;
	text-align: left;
	padding:0 0 0 2%;
}

#member .pro dd .team{
	text-align: left;
	padding:0 0 0 2%;
	font-size: 0.8em;
}

#member .pro dd .text{
	padding: 3%;
	margin: 0 0 0 2%;
	font-size: 0.8em;
	line-height: 1.2em;
}

/**********/
#howto .date{
	padding: 3%;
}

#howto .date dl + dl {
	margin-top: 3%;
	padding-top: 3%;
	border-top: 2px solid #B6C5A8;
}

#howto .date dl dt{
	float: none;
	width: 100%;
	font-size: 1.2em;
	text-align: left;
}

#howto .date dl dd{
	float: none;
	width: 100%;
	font-size: 0.9em;
}

#howto .jannavi{
	width: 94%;
	padding: 3%;
}

#howto .jannavi dl dd.text{
	font-size: 0.8em;
	line-height: 1.2em;
}

#howto .jannavi dl dd.name span{
	font-size: 0.7em;
}

.download a{
	font-size: 0.7em;
}
.download a p{font-size: 1.2em;}

.download p{text-align: center;font-size: 0.9em;}

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

#present div{
	font-size: 0.9em;
	line-height: 3em;
}

#present dl {
	padding: 2%;
}

#present dl dt{
	padding: 2%;
	font-size: 1em;
}

#present dl dd{
	padding: 3% 0 0;
	font-size: 0.8em;
	line-height: 1.5em;
}

#present dl.prise_a .image{
	top: -61px;
	right: -10px;
	width: 28%;
}

#present p{
	margin-top: 12px;
	font-size: 0.8em;
}