/*スタイルシート*/
@charset "UTF-8";
@import url(normalize.css);

/*------------------------------
    common styles
 ------------------------------*/

body {
  background: url(../theme/50-collect/bg-yoko-w-elegance-1.jpg) repeat;/*壁紙や壁色の設定*/
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #222;
  font-size: 16px;
}

#container {
  width: 100%;
  background-color: rgba(255,255,255,0.8);
}


/*------------------------------
    contents styles
 ------------------------------*/


#contents {
  width: 95%;  /*デザインのバランスを考えてコンテンツより少し小さくする*/
  margin: 0 auto;
  padding: 0 .8em;
  line-height: 1.9;
}

li {
  margin-left : 2em;
}

li a {
  margin-right : 3em;
}


/*リンク文字の設定*/

a {
  color:#4455dd;
  text-decoration: none;
}


a:visited {
  color: #6655bb;
}

a:hover {
  color:#0000aa;
  text-decoration: underline;
}

h1 {
  font-size: 150%;
  text-align: center;
  margin-bottom: 5%;
}

h2 {
  color: #336699;
  font-size: 98%;
  margin-top: 5%;
  margin-bottom: 5%;
  border-bottom: solid 1px #aaa;
}

.btn{
  padding: .5em 1.5em;
  max-width: 10em;
  background: #fff;
  border: solid 1px #6bb6b3;
  display: block;
  text-align: center;
  text-decoration: none;
  transition: .5s;
}

.btn:any-link {
  color: #6bb6b3;
}

.btn:hover {
  background: #6bb6b3;
  color: #fff;
}

.btn:active{
  color: #6bb6b3;
}

.btn + .btn {
  margin-left: .5em;
}


/*------------------------------
    footer styles
 ------------------------------*/

footer {
  width: 100%;
  background-color: rgba(255,255,255,0.8);
}

.copyright {
  font-size: 80%;
  font-style: normal;/*指定をしないと文字が斜めに表示される*/
  text-align: center;
  padding: 1em 0;
}

/*------------------------------
    common styles
 ------------------------------*/

@media screen and (max-width:768px) {
  body {
    font-size: 3vw;
  }
}