@charset "utf-8";
/* ベーステンプレート */

/* basic setting */
html, body{ position:relative; width:100%; height:100%; }
body{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  padding:0;
  font-size:14px;
  font-family: Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  line-height:1.5;
  color:#000;
  background:#fff;
}
h1,h2,h3,h4,h5,h6,p,em,pre,th,td,blockquote{margin:0; padding:0; font-size:100%}
img,table{border:0; vertical-align:bottom}
img{max-width:100%; height:auto}
form,ul,dl,ol{margin:0; padding:0}
li{list-style:none}
a, a:visited{color:#000; outline:none; text-decoration:none;}
@media screen and (min-width:769px){
  a, .rollAlpha, input[type="submit"], button{transition-duration:0.3s}
  a:hover, .rollAlpha:hover,  input[type="submit"]:hover, button:hover{opacity:0.7}
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{display: block; margin:0; padding:0}
.clr{clear:both}
.cf{*zoom:1}
.cf:after{content:""; display:block; clear:both}

input[type="submit"], button{cursor:pointer}
input:focus, textarea:focus, select:focus{outline:none}

/* outer page */
article{
  max-width:700px;
  margin:0 auto;
  padding:100px 20px 0;
}
h1{
  text-align:center;
  margin-bottom:100px;
}
ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
ul li{
  margin:0 20px 15px;
}
ul li a{
  display:block;
  padding:7px 40px;
  border:solid 1px #666;
  border-radius:18px;
}

/* =================================================================== */
@media screen and (max-width:480px){
/* =================================================================== */

h1{
  margin-bottom:70px;
}

}/* max-width:480px */