@charset "UTF-8";

/*================ SP ================*/
html,
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, Yu Gothic,
    Meiryo, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6666;
  color: #0085ff;
  letter-spacing: 0.08em;
  background: #fff none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}
*::-moz-selection {
  background: rgba(0, 0, 0, 0.2);
}
*::-moz-selection,
*::selection,
*::-moz-selection {
  background: rgba(0, 0, 0, 0.2);
}
/* ------ option ------ */
/* roboto-100 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: url("../font/roboto-v20-latin-100.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../font/roboto-v20-latin-100.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../font/roboto-v20-latin-100.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../font/roboto-v20-latin-100.woff")
      format("woff"),
    /* Modern Browsers */ url("../font/roboto-v20-latin-100.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../font/roboto-v20-latin-100.svg#Roboto")
      format("svg"); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../font/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../font/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../font/roboto-v20-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../font/roboto-v20-latin-300.woff")
      format("woff"),
    /* Modern Browsers */ url("../font/roboto-v20-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../font/roboto-v20-latin-300.svg#Roboto")
      format("svg"); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../font/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../font/roboto-v20-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../font/roboto-v20-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../font/roboto-v20-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../font/roboto-v20-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../font/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../font/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../font/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../font/roboto-v20-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../font/roboto-v20-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../font/roboto-v20-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../font/roboto-v20-latin-700.svg#Roboto")
      format("svg"); /* Legacy iOS */
}
.ff_roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
}
/*================ header ================*/
#header {
  position: fixed;
  top: -70px;
  left: 0;
  z-index: 10000;
  width: 100%;
  padding: 15px 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
body.h_on #header {
  top: 0;
}
.hlogo {
  font-size: 2.6vh;
}
.logottl {
  font-weight: 300;
}
/*================ 見出し ================*/
.blk__ttl {
  font-size: 5.6vh;
  letter-spacing: 0.02em;
  line-height: 1.4666;
  margin-bottom: 0.5em;
  font-weight: 300;
}
/*================ taglist ================*/
.taglist {
  font-size: 1.8vh;
  letter-spacing: 0.02em;
  line-height: 1.666;
}
.taglist > li {
  display: inline-block;
}

/*================ footer ================*/
#footer {
  text-align: center;
  padding: 1em 0;
  font-size: 1.5vh;
}

@media screen and (min-width: 560px) {
  /* ------ 560px~ ------ */
}

@media screen and (min-width: 960px) {
  /* ------ 960px~ ------ */
  html,
  body {
    font-size: 14px;
  }
  #header {
    padding: 15px 50px;
  }
}