/* ==========================================================================
   Section comment block
   ========================================================================== */
/* Sub-section comment block
   ========================================================================== */
/* Basic comment */
@font-face {
  font-family: 'zeroWidth';
  src: url("../fonts/AdobeBlank.eot");
  src: url("../fonts/AdobeBlank.eot#iefix") format("embedded-opentype"), url("../fonts/AdobeBlank.woff") format("woff"), url("../fonts/AdobeBlank.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
/* ==========================================================================
   for styleguide
   ========================================================================== */
.DEBUG {
  color: #FFF;
  font-size: 16px;
  font-family: sans-serif;
  padding: 5px;
  margin: 1em 0;
  background: orange; }

/* modifier: nowrap
   ========================================================================== */
.s5--nowrap br {
  display: none; }

/* modifier: align
   ========================================================================== */
.s5--alignLeft {
  text-align: left !important; }

.s5--alignRight {
  text-align: right !important; }

.s5--alignCenter {
  text-align: center !important; }

.s5--alignTop {
  vertical-align: top !important; }

.s5--alignMiddle {
  vertical-align: middle !important; }

.s5--alignBottom {
  vertical-align: bottom !important; }

/* modifier:fontsize
   ========================================================================== */
.s5--fontXSmall {
  font-size: 12px !important;
  font-size: 0.75rem !important; }

.s5--fontSmall {
  font-size: 14px !important;
  font-size: 0.875rem !important; }

.s5--fontBase {
  font-size: 16px !important;
  font-size: 1rem !important; }

.s5--fontLarge {
  font-size: 18px !important;
  font-size: 1.125rem !important; }

.s5--fontXLarge {
  font-size: 20px !important;
  font-size: 1.25rem !important; }

.s5--fontBold {
  font-weight: bold !important; }

/* modifier: text color
   ========================================================================== */
.s5--colorStoreOrange {
  color: #f5683a !important; }

.s5--colorBlack {
  color: #2f353d !important; }

.s5--colorGray {
  color: #83838f !important; }

.s5--colorRed {
  color: #c93434 !important; }

.s5--colorPink {
  color: #f26b88 !important; }

.s5--colorGray-light {
  color: #cccccc !important; }

.s5--colorGray {
  color: #83838f !important; }

.s5--colorGreen {
  color: #22c083 !important; }

.s5--colorBlue-light {
  color: #55acee !important; }

.s5--colorBlue {
  color: #5887ab !important; }

.s5--colorBlue-dark {
  color: #3a5897 !important; }

.s5--colorOrange {
  color: #f25529 !important; }

/* modifier: display
   ========================================================================== */
.s5--disableLeargeScreen,
.s5--disableLargeScreen {
  display: none; }

@media screen and (max-width: 767px) and (min-width: 640px) {
  .s5--disableLeargeScreen, .s5--disableLargeScreen {
    display: block; }

  .s5--disableMiddleScreen {
    display: none !important; }

  .s5--disableSmallScreen {
    display: block; }

  br.s5--disableLargeScreen {
    display: inline; }

  br.s5--disableMiddleScreen {
    display: none !important; }

  br.s5--disableSmallScreen {
    display: inline; } }
@media screen and (max-width: 639px) {
  .s5--disableLeargeScreen, .s5--disableLargeScreen {
    display: block; }

  .s5--disableMiddleScreen {
    display: block; }

  .s5--disableSmallScreen {
    display: none !important; }

  br.s5--disableLargeScreen {
    display: inline; }

  br.s5--disableMiddleScreen {
    display: inline; }

  br.s5--disableSmallScreen {
    display: none !important; } }
/* ==========================================================================
   general style
   ========================================================================== */
::-webkit-selection {
  background: rgba(0, 0, 0, 0.7);
  color: #fff; }

::selection {
  background: rgba(0, 0, 0, 0.7);
  color: #fff; }

html {
  color: #2f353d;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.6; }
  @media screen and (max-width: 639px) {
    html {
      font-size: 87.5%;
      line-height: 1.8; } }

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color .2s;
          transition: color .2s; }

a:hover, a:active {
  color: #2f353d;
  text-decoration: underline;
  outline: none;
  -webkit-transition: color 0s;
          transition: color 0s; }