@charset="utf-8";

/*初期設定
----------------------------------------------------*/
body{
   min-width: 320px;
   background-color: #000000;
   line-height: 1.5;
   color: #fff;
   }
   
img{
    max-width: 100%;
	height: auto;
	}

.ie8 img{
    width: auto;
	}
/*clearfix*/
.clearfix{
     zoom: 1;
	 }
.clearfix:after {
     content: "";
	 display: block;
	 clear: both;
	 }
/*layout
--------------------------------------------------*/
nav {
    border-bottom: 1px solid #456729;
	background: #1d4000;
	background: -webkit-linear-gradient(top, #1d4000, #183400);
	background: -moz-linear-gradient(top, #1d4000,#183400);
	background: -olinear-gradient(top, #1d4000, #183400);
	background: linear-gradient(to, bottom, #1d4000, #183400);
	box-shadow: 0 1px 1px #000;
	text-align: center;
	}
	
nav ul{
    margin: 0;
	padding: 0;
	list-style: none;
	}
	
nav ul li{
    float: left;
	width: 25%;
	font-family: 'Marcellus SC',serif;
	letter-spacing: 0.1em;
	text-align: center;
	text-shadow: 1px 1px 1px #000;
	}
	
.ie7 nav ul li{
    width: 24,84375%;
	}
	
nav ul li a{
    display: block;
	padding: 10px 0;
	color: #FFF;
	text-decoration: none;
	}

header{
    margin-bottom: 1.5em;
	}
	
header h1{
    line-height: 1.1;
	color: #fff;
	font-size: 2.5em;
	font-weight: normal;
	font-family: 'Marcellus SC',serif;
	text-align: center;
}

header h2{
    line-height: 1.1;
	color: #000;
	font-size: 2.0em;
	font-weight: normal;
	font-family: 'Marcellus SC',serif;
	text-align: center;
}

header #mainImage{
　　margin-top: 100px;
	text-align: left;
	background: white;
	color:#000000;
	padding: 20px;
   
	}

.span_blu{
    color: #0066CC;
	}
	
article{
    padding: 0 10px;
	}
	
article h2{
    padding: 0 0 0 10px;
	border-left: 3px solid #000;
	line-height: 1.1;
	font-size: 2em;
	font-weight: normal;
	}
	
section{
    margin-bottom: 3em;
	}
	
#bar{
    margin: 50px 0;
	}

/*ripplesここから*/
.ripplesimg{
    width: 100%;
	height: 300px;
	background-image: url(../img/chromium_1.jpg);
	background-size: cover;
	}
	
.ripfont{
    color: #FFFFFF;
	text-align: center;
	font-size: 4em;
	padding-top: 100px;
	}
/*ripplesここまで*/
 
@keyframes width-0to100 {
  0% {
    width: 0;
  }
 

  100% {
    width: 100%;
  }
 
}
 
	
.s_button {
display: block;
width: 200px;
padding:10px 0;
text-align: center;
text-decoration: none;
border: 1px solid #000000;
background-color:#111111;
color: #fff;
margin: 10px auto 100px;
clear: both;
}
.s_button:hover {
background-color:#333333;
color: #fff;
border: 1px solid #333333;
}
.s_button,
.s_button::before,
.s_button::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.button {
display: block;
width: 200px;
padding:15px 0;
text-align: center;
text-decoration: none;
border: 1px solid #000000;
background-color:#111111;
color: #fff;
margin: 10px auto 100px;
clear: both;
}
.button:hover {
background-color:#333333;
color: #fff;
border: 1px solid #333333;
}
.button,
.button::before,
.button::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

footer{
    padding: 30px 0;
	background: #1a1603;
	color: #FFF;
	text-align: center;
	}
	
/*media Queries
-------------------------------------------------------*/
@media only screen and (min-width: 768px){
    #content{
	          margin: 0 20px;
			 }
    header h1 {
              margin: 1.1em 0;
	          line-height: 1.5;
	          font-size: 3em;
	          }
	article {
	         padding: 0;
			 }
}

@media only screen and (min-width: 840px){
    nav ul,
	#content{
	         width: 800px;
			 margin: 0 auto;
			 }
}