/*
@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
*/

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  src: local("Noto Sans CJK JP Thin"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: local("Noto Sans CJK JP Light"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP Regular"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans CJK JP Medium"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans CJK JP Bold"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: local("Noto Sans CJK JP Black"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff');
}

@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin-ext,vietnamese");

/*AUC内環境準拠用 */

#preview {
  width: 640px;
  border-top: solid 1px;
  font-family: "Noto Sans CJK JP", 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-feature-settings: "palt" 1;
  margin: auto;
  padding: 0;
  background: #fff8f3;
  display: block;
  word-wrap: break-word;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3em;
  text-align: left;
  color: #000;
}

#preview * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}


.preview_bg {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color:black ;
  overflow-y: scroll;
  height: 700px;
  color:white;
  min-width: 680px;
}

@keyframes marquee {
  from {
    transform: translate(0%);
  }
  99%,
  to {
    transform: translate(-100%);
  }
}

/*プレビュー内　AUCタグ*/

#preview a {
  color: #7762ff;
  font-weight: normal;
  outline: 0 none;
  text-decoration: none;
}

#preview a:hover {
  text-decoration: underline;
}

 .b {
  font-weight: bold;
}

 .i {
  font-style: italic;
}

 .o {
  text-decoration: overline;
}

 .d {
  text-decoration: line-through;
}

 .u {
  text-decoration: underline;
}

 .black {
  color: #000000;
}

 .white {
  color: #ffffff;
}

 .red {
  color: #fd3838;
}

 .green {
  color: #28b731;
}

 .blue {
  color: #5e7dff;
}

 .yellow {
  color: #ffc513;
}

 .lightblue {
  color: #4bd9ea;
}

 .purple {
  color: #aa6dca;
}

 .orange {
  color: #ff7f2b;
}

 .brown {
  color: #8e4731;
}

 .gray {
  color: #c7c7c7;
}

 .pink {
  color: #ff89af;
}

 .rainbow {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.font_rainbow {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow {
  from {
    color: #fd3838;
  }
  14% {
    color: #ff7f2b;
  }
  29% {
    color: #ffc513;
  }
  43% {
    color: #28b731;
  }
  57% {
    color: #4bd9ea;
  }
  71% {
    color: #5e7dff;
  }
  86% {
    color: #aa6dca;
  }
  to {
    color: #fd3838;
  }
}



 .big {
  font-size: 22px;
  line-height: 1.3em;
}

 .small {
  font-size: 10px;
  line-height: 1.2em;
}

#preview .line1 {
  width: 620px;
  height: 4px;
  background-color: #e1ccaa;
  margin: auto;
}

#preview .line2 {
  width: 620px;
  height: 2px;
  background-color: #e1ccaa;
  margin: auto;
}

#preview .line3 {
  width: 620px;
  height: 1px;
  background-color: #e1ccaa;
  margin: auto;
}
