@charset "utf-8";

/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body,div,dl,dd,dt,ol,ul,li,a,h1,h2,h3,h4,h5,h6,span,p,table, caption, tbody, tfoot, thead, tr, th, td,
article,figcaption, figure,input,textarea,footer,header{
  font-size: 16px;
  font-family: 'Roboto', 'YuGothic', '游ゴシック', "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro","メイリオ",sans-serif;
  color: #373737;
  text-decoration: none;
  line-height:1.5;
  list-style:none;
  letter-spacing:0.1em;
}

body{
  /* important */
  width:100%;
  max-width:800px;
  margin:0 auto;
  background: rgba(245,245,245,1);
}

body, img {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* -------------------------------- 

Main components 

-------------------------------- */
.head_cap {
  position: relative;
  max-width:600px;
  margin: 0 auto;
  margin-bottom:50px;
}

.head_cap p{
  margin-bottom:10px;
  font-size: 14px;
  text-align: right;
}

.logo img{
  width:100px;
  float: right;
}

ul,
li {
  margin: 0;
  padding: 0;
}

#container {
  width:90%;
  max-width: 600px;
  margin:0 auto;
  margin-top:25px;
}

#container #title {
  width:100%;
  text-align: center;
  margin-bottom: 80px;  
}

#container #title span{
	color: #333;
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-family: 'Oleo Script', cursive;
  letter-spacing: 0;
  font-size:26px;
}


#container ul li {
  list-style-position: inside;
  margin-bottom: 30px;
}


#container ul li a {
	display: block;
}

#container ul li a span{
  color: #099;
  margin-top:10px;
  text-align: center;
  text-decoration: none;
  display: block;
  width:100%;
}

#container ul li a img{
	width:100%;
	max-width:600px;
	margin: 0 auto;
	display: block;
}

.head_cap a img:hover ,#container ul li a:hover , .foot_cap a:hover ,footer p a:hover {
  color: #099;
  text-decoration: underline;
  opacity: 0.7;
}

.foot_cap{
  margin-top:100px;
  margin-bottom: 40px !important; 
}

.foot_cap .foot_logo{
  display: block;
  margin: 0 auto;
  width:200px;
  margin-bottom:15px; 
}

.foot_cap a img{
 width:100%;

}

.foot_cap p{
  text-align:center;
}

footer{
  background-color:#b2e5f8;
  padding:10px;
}

footer  div{
  width:90%;
  max-width: 600px;
  margin: 0 auto;
}

footer p{
  text-align: center;
  font-size: 14px;
}

footer p:first-child{
  margin-bottom: 6px;
}

footer p a{
  font-size: 14px;
  
}