/*----------------------------------------------------
  core
----------------------------------------------------*/
/*----------------------------------------------------
  base (styling element directly contain reset style)
----------------------------------------------------*/
body {
  color: #222222;
  line-height: 1.6;
  font-family: Noto Sans Japanese, "Meiryo", sans-serif;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 300;
}

a {
  color: inherit;
  -webkit-transition: color .2s ease;
  transition: color .2s ease;
}

a:hover, a:focus {
  color: #f7931e;
}

b,
strong {
  font-weight: 700;
}

strong {
  color: #f7931e;
}

svg,
img {
  max-width: 100%;
}

abbr[title] {
  border-bottom: none;
  text-decoration: none;
}

[data-js-fade-in="true"] {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
  will-change: none;
}

[data-js-fade-in="true"].-transparent {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  will-change: opacity;
}

/*----------------------------------------------------
  Style Guide
----------------------------------------------------*/
.sg-section {
  clear: both;
}

.sg-color .sg-color__item {
  margin-top: 0;
  margin-right: 0;
}

.sg-color .sg-color__box {
  padding-bottom: 56.25%;
}

.sg-color .sg-color__box.-primary {
  background-image: -webkit-linear-gradient(left, #00a496, #0065a4);
  background-image: linear-gradient(to right, #00a496, #0065a4);
}

.sg-color .sg-color__box.-background {
  background-color: #e5e3e1;
}

.sg-color .sg-color__box.-border {
  background-color: #e5e3e1;
}

.sg-color .sg-color__box.-accent {
  background-color: #f7931e;
}

.sg-code {
  margin-bottom: 40px;
}

.sg-code figcaption code,
p code {
  margin: 0 .2em;
  padding: 0 .2em;
  border-radius: 3px;
  background-color: #e5e3e1;
}

/*# sourceMappingURL=styleguide.css.map */