@charset "utf-8";

/* CSS Document */

/* ----------リセット-------------  */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, a:hover,abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 20px;
    font-style:normal;
    font-weight: normal;
    list-style:  none;
}
h1,h2,h3,h4,h5,h6{
    font-size: 20px;
}

a{
  color: #222;
  text-decoration: none;
}

a:hover{
  color: #777;
  text-decoration: none;
}

a:visited{
  text-decoration: none;
}

a:active{
  text-decoration: none;
}

body {
  -webkit-text-size-adjust: 100%;
  color: #fff;
  font-size: 20px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  width: 100%;
  min-height: 100%;
  background: #fff;
}

#container{
  width: 50%;
  min-height: 100%;
  margin: 0 auto;
  background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8));
}

#header{
  width: 100%;
  margin: 0 auto;
  padding: 50px 0;
}

.header-logo{
  width: 30%;
  margin: 0 auto 15px;
}

.header-logo img{
  width: 100%;
  border-radius: 50%;
}

#header h1{
  width: 50%;
  margin: 0 auto;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}


#containts{
  width: 100%;
  margin:  0 auto;
}

#containts ul{
  width: 70%;
  margin: 0 auto;
}

#containts li{
  width: 100%;
  padding: 25px 0;
  margin: 30px auto;
  text-align: center;
  background: rgba(255,255,255,0.25);
}

#containts li a{
  color: #fff;
}

#containts i{
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}

#containts i span{
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 15px;
}

#footer{
  width: 100%;
  padding: 30px 0;
}

#footer p{
  font-size: 0.8em;
  text-align: center;
}



@media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */

#container{
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8));
}

#header{
  padding: 30px 0 0px;
}

.header-logo{
  width: 50%;
  margin: 0 auto 10px;
}

#containts ul{
  width: 80%;
  margin: 0 auto;
}

#containts li{
  padding: 15px 0;
}

#header h1{
  width: 80%;
  margin: 0 auto;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
}

#footer p{
  font-size: 0.5em;
  text-align: center;
}

   }