@charset "UTF-8";
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  text-align: left;
  vertical-align: baseline;
  font-family: "Rounded Mplus 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff; }

nav {
  position: fixed;
  top: -88px;
  left: 0;
  width: 100%;
  height: 88px;
  background: #f4f4f4;
  z-index: 100;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }

.navFadeIn01 {
  top: 0px;
  opacity: 1;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

nav ul {
  text-align: center; }

nav li {
  display: inline-block;
  vertical-align: middle; }

nav .logo {
  margin-right: 15px; }

nav .line {
  margin: 0 15px; }

nav .chara {
  -webkit-box-shadow: 1px 1px 1px rgba(53, 15, 116, 0.3);
  box-shadow: 1px 1px 1px rgba(53, 15, 116, 0.3);
  border-radius: 50%;
  margin: 0 10px; }

nav .current {
  background: rgba(30, 0, 80, 0.9); }

nav .current img {
  opacity: .6; }

nav .btn {
  vertical-align: top; }

nav .btn img {
  width: 60px;
  height: auto; }

nav .btnTw {
  margin-left: 25px; }

.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1; }

.chara01Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara01_bg.jpg") 50% 0 no-repeat; }

.chara02Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara02_bg.jpg") 50% 0 no-repeat; }

.chara03Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara03_bg.jpg") 50% 0 no-repeat; }

.chara04Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara04_bg.jpg") 50% 0 no-repeat; }

.chara05Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara05_bg.jpg") 50% 0 no-repeat; }

.chara06Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara06_bg.jpg") 50% 0 no-repeat; }

.chara07Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara07_bg.jpg") 50% 0 no-repeat; }

.chara08Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara08_bg.jpg") 50% 0 no-repeat; }

.chara09Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara09_bg.jpg") 50% 0 no-repeat; }

.chara10Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara10_bg.jpg") 50% 0 no-repeat; }

.chara11Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara11_bg.jpg") 50% 0 no-repeat; }

.chara12Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara12_bg.jpg") 50% 0 no-repeat; }

.chara13Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara13_bg.jpg") 50% 0 no-repeat; }

.chara14Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara14_bg.jpg") 50% 0 no-repeat; }

.chara15Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara15_bg.jpg") 50% 0 no-repeat; }

.chara16Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara16_bg.jpg") 50% 0 no-repeat; }

.chara17Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara17_bg.jpg") 50% 0 no-repeat; }

.chara18Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara18_bg.jpg") 50% 0 no-repeat; }

.chara19Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara19_bg.jpg") 50% 0 no-repeat; }

.chara20Page .bgImg {
  background: url("/dreaming/assets/img/chara/chara20_bg.jpg") 50% 0 no-repeat; }

.charaWrap {
  position: relative;
  width: 1000px;
  height: auto;
  margin: 0 auto;
  z-index: 10; }

.charaImg {
  position: absolute;
  top: 0;
  left: -70px;
  padding-top: 120px;
  opacity: 0;
  z-index: 10;
  pointer-events: none; }

.chara_change {
  position: relative;
  pointer-events: auto;
  overflow: hidden; }
  .chara_change input[type="checkbox"] {
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none; }
  .chara_change input[type="checkbox"]:checked + span {
    background-position: center -157px; }
  .chara_change span {
    position: absolute;
    top: 460px;
    left: -30px;
    display: inline-block;
    width: 144px;
    height: 160px;
    z-index: 100;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(/dreaming/assets/img/chara/chara_btn_change.png); }
  .chara_change span:hover {
    background-position: center -157px; }
  .chara_change img {
    position: absolute;
    pointer-events: none;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out; }
  .chara_change input[type="checkbox"] ~ .no1 {
    opacity: 1; }
  .chara_change input[type="checkbox"] ~ .no2 {
    opacity: 0; }
  .chara_change input[type="checkbox"]:checked ~ .no1 {
    opacity: 0; }
  .chara_change input[type="checkbox"]:checked ~ .no2 {
    opacity: 1; }

.charaMark {
  position: absolute;
  bottom: 0;
  left: -70px;
  padding-bottom: 50px;
  opacity: 0; }

.profArea {
  position: relative;
  top: 0;
  left: 500px;
  width: 590px;
  z-index: 11;
  opacity: 0; }

.chara11Page .profArea {
  z-index: 10 !important; }

.charaFadeIn01 {
  left: 0px;
  opacity: 1;
  -webkit-transition-delay: 1ms;
  -moz-transition-delay: 1ms;
  -ms-transition-delay: 1ms;
  -o-transition-delay: 1ms;
  transition-delay: 1ms;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

.chara03Page .charaFadeIn01 {
  left: 5px; }

.chara04Page .charaFadeIn01 {
  left: 15px; }

.chara05Page .charaFadeIn01 {
  left: 20px; }

.chara06Page .charaFadeIn01 {
  left: 10px; }

.chara07Page .charaFadeIn01 {
  left: 15px; }

.chara08Page .charaFadeIn01 {
  left: 5px; }

.chara09Page .charaFadeIn01 {
  left: 8px; }

.chara10Page .charaFadeIn01 {
  left: 15px; }

.chara12Page .charaFadeIn01 {
  left: 20px; }

.chara17Page .charaFadeIn01 {
  left: -30px; }

.charaFadeIn02 {
  left: 420px;
  opacity: 1;
  -webkit-transition-delay: 1ms;
  -moz-transition-delay: 1ms;
  -ms-transition-delay: 1ms;
  -o-transition-delay: 1ms;
  transition-delay: 1ms;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

.voice {
  position: relative; }

.voice ul {
  padding: 15px 0; }

.voice li {
  display: inline-block;
  margin-right: 12px; }

.voice li:last-child img {
  margin-top: -3px; }

.voice p {
  padding: 0 20px 20px;
  font-size: 10px;
  color: #aaa;
  text-align: right; }

.networkArea {
  position: relative;
  padding: 0 0 20px 0;
  width: 590px;
  height: 554px;
  z-index: 1; }

.networkArea .bg {
  position: relative; }

.networkArea .window {
  position: absolute;
  top: 26px;
  left: 13px;
  width: 545px;
  height: 420px;
  overflow-y: auto;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  z-index: 11; }

.networkArea .scrollBtn {
  position: absolute;
  bottom: 120px;
  right: 50px;
  z-index: 100; }

.fuwafuwa {
  -webkit-animation-name: fuwafuwa;
  -webkit-animation-duration: 2.5s;
  -webkit-animation-iteration-count: infinite;
  /*-webkit-animation-direction:alternate;*/
  -webkit-animation-timing-function: ease;
  -moz-animation-name: fuwafuwa;
  -moz-animation-duration: 2.5s;
  -moz-animation-iteration-count: infinite;
  /*-moz-animation-direction:alternate;*/
  -moz-animation-timing-function: ease; }

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, -10px);
    opacity: 0; }
  50% {
    -webkit-transform: translate(0, 10px);
    opacity: 1; }
  100% {
    -webkit-transform: translate(0, 20px);
    opacity: 0; } }

@-moz-keyframes fuwafuwa {
  0% {
    transform: translate(0, -10px);
    opacity: 0; }
  50% {
    transform: translate(0, 10px);
    opacity: 1; }
  100% {
    transform: translate(0, 20px);
    opacity: 0; } }

.chara01Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara01_network_window_bg.jpg") 50% 0 repeat; }

.chara02Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara02_network_window_bg.jpg") 50% 0 repeat; }

.chara03Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara03_network_window_bg.jpg") 50% 0 repeat; }

.chara04Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara04_network_window_bg.jpg") 50% 0 repeat; }

.chara05Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara05_network_window_bg.jpg") 50% 0 repeat; }

.chara06Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara06_network_window_bg.jpg") 50% 0 repeat; }

.chara07Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara07_network_window_bg.jpg") 50% 0 repeat; }

.chara08Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara08_network_window_bg.jpg") 50% 0 repeat; }

.chara09Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara09_network_window_bg.jpg") 50% 0 repeat; }

.chara10Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara10_network_window_bg.jpg") 50% 0 repeat; }

.chara11Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara11_network_window_bg.jpg") 50% 0 repeat; }

.chara12Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara12_network_window_bg.jpg") 50% 0 repeat; }

.chara13Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara13_network_window_bg.jpg") 50% 0 repeat; }

.chara14Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara14_network_window_bg.jpg") 50% 0 repeat; }

.chara15Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara15_network_window_bg.jpg") 50% 0 repeat; }

.chara16Page .networkArea .window {
  background: url("/dreaming/assets/img/chara/chara16_network_window_bg.jpg") 50% 0 repeat; }

.networkArea .window .wrap {
  min-width: 500px;
  padding: 15px 15px 15px 0; }

/* 全体のスタイル */
.chat {
  margin-bottom: 10px; }

.system p {
  margin: 25px 50px 20px 65px;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #e6e6e6;
  background: #828282;
  letter-spacing: .2em;
  border-radius: 2px; }

.chatChara01 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon01.png") 50%/72px no-repeat; }

.chatChara02 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon02.png") 50%/72px no-repeat; }

.chatChara03 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon03.png") 50%/72px no-repeat; }

.chatChara04 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon04.png") 50%/72px no-repeat; }

.chatChara05 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon05.png") 50%/72px no-repeat; }

.chatChara06 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon06.png") 50%/72px no-repeat; }

.chatChara07 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon07.png") 50%/72px no-repeat; }

.chatChara08 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon08.png") 50%/72px no-repeat; }

.chatChara09 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon09.png") 50%/72px no-repeat; }

.chatChara10 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon10.png") 50%/72px no-repeat; }

.chatChara11 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon11.png") 50%/72px no-repeat; }

.chatChara12 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon12.png") 50%/72px no-repeat; }

.chatChara13 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon13.png") 50%/72px no-repeat; }

.chatChara14 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon14.png") 50%/72px no-repeat; }

.chatChara15 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon15.png") 50%/72px no-repeat; }

.chatChara16 .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon16.png") 50%/72px no-repeat; }

.chatAutoTrans .chat-img-left {
  background: url("/dreaming/assets/img/chara/net_icon_auto_trans.png") 50%/72px no-repeat; }

/* 左画像 */
.chat-img-left {
  margin: 0;
  float: left;
  width: 88px;
  height: 80px;
  margin-right: -95px;
  -webkit-background-size: 72px 72px;
  -moz-background-size: 72px 72px;
  background-size: 72px 72px; }

/* 右画像 */
.chat-img-right {
  margin: 0;
  float: right;
  width: 72px;
  height: 72px;
  margin-left: -80px;
  -webkit-background-size: 72px 72px;
  -moz-background-size: 72px 72px;
  background-size: 72px 72px; }

.chat figure img {
  width: 100%;
  height: 100%;
  margin: 0; }

.chat .name-right {
  display: block;
  margin-left: 105px;
  margin-bottom: 2px;
  padding-top: 12px;
  font-size: 12px;
  color: #b3b3b3; }

.chatChara01 .name-right:after {
  content: "望月 悠馬"; }

.chatChara02 .name-right:after {
  content: "花房 柳"; }

.chatChara03 .name-right:after {
  content: "新兎 千里"; }

.chatChara04 .name-right:after {
  content: "獅子丸 孝臣"; }

.chatChara05 .name-right:after {
  content: "針宮 藤次"; }

.chatChara06 .name-right:after {
  content: "三毛門 紫音"; }

.chatChara07 .name-right:after {
  content: "虎澤 一生"; }

.chatChara08 .name-right:after {
  content: "浅霧 巳影"; }

.chatChara09 .name-right:after {
  content: "竜ヶ崎 仁"; }

.chatChara10 .name-right:after {
  content: "槙 千鶴"; }

.chatChara11 .name-right:after {
  content: "柴咲 真也"; }

.chatChara12 .name-right:after {
  content: "白華 時雨"; }

.chatChara13 .name-right:after {
  content: "ビアンキ 由仁"; }

.chatChara14 .name-right:after {
  content: "志部谷 幽"; }

.chatChara15 .name-right:after {
  content: "牛若 湊"; }

.chatChara16 .name-right:after {
  content: "久磨 凛太朗"; }

.chatAutoTrans .name-right:after {
  content: "自動翻訳"; }

/* テキストフォーマット */
.chatText {
  position: relative;
  padding: 12px;
  border-radius: 10px; }

/* 左からの吹き出しテキスト */
.chat-text-right {
  position: relative;
  margin-left: 95px;
  background: #fff;
  border: 1px solid #aaa;
  float: left; }

.chatChara01 .chat-text-right {
  border: 2px solid #00ccff; }

.chatChara02 .chat-text-right {
  border: 2px solid #ff99cc; }

.chatChara03 .chat-text-right {
  border: 2px solid #ff8400; }

.chatChara04 .chat-text-right {
  border: 2px solid #26bc69; }

.chatChara05 .chat-text-right {
  border: 2px solid #ffcc00; }

.chatChara06 .chat-text-right {
  border: 2px solid #c8a5e9; }

.chatChara07 .chat-text-right {
  border: 2px solid #d6ff43; }

.chatChara08 .chat-text-right {
  border: 2px solid #adc7ca; }

.chatChara09 .chat-text-right {
  border: 2px solid #70007a; }

.chatChara10 .chat-text-right {
  border: 2px solid #3e76d4; }

.chatChara11 .chat-text-right {
  border: 2px solid #ff4e00; }

.chatChara12 .chat-text-right {
  border: 2px solid #d5d3d3; }

.chatChara13 .chat-text-right {
  border: 2px solid #f0e4a1; }

.chatChara14 .chat-text-right {
  border: 2px solid #128c82; }

.chatChara15 .chat-text-right {
  border: 2px solid #ffcec7; }

.chatChara16 .chat-text-right {
  border: 2px solid #5be2c0; }

.chatAutoTrans .chat-text-right {
  border: 2px solid #aaa; }

/* 右からの吹き出しテキスト */
.chat-text-left {
  position: relative;
  margin-right: 80px;
  background-color: #fff;
  float: right; }

p.chat-text {
  margin: 0 0 20px;
  color: #535353;
  line-height: 1.5; }

p.chat-text:last-child {
  margin-bottom: 0; }

/* 左の三角形を作る */
.chat-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #aaa;
  top: 15px;
  left: -20px; }

.chat-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -17px; }

.chatChara01 .chat-text-right:before {
  border-right: 10px solid #00ccff; }

.chatChara02 .chat-text-right:before {
  border-right: 10px solid #ff99cc; }

.chatChara03 .chat-text-right:before {
  border-right: 10px solid #ff8400; }

.chatChara04 .chat-text-right:before {
  border-right: 10px solid #26bc69; }

.chatChara05 .chat-text-right:before {
  border-right: 10px solid #ffcc00; }

.chatChara06 .chat-text-right:before {
  border-right: 10px solid #c8a5e9; }

.chatChara07 .chat-text-right:before {
  border-right: 10px solid #d6ff43; }

.chatChara08 .chat-text-right:before {
  border-right: 10px solid #adc7ca; }

.chatChara09 .chat-text-right:before {
  border-right: 10px solid #70007a; }

.chatChara10 .chat-text-right:before {
  border-right: 10px solid #3e76d4; }

.chatChara11 .chat-text-right:before {
  border-right: 10px solid #ff4e00; }

.chatChara12 .chat-text-right:before {
  border-right: 10px solid #d5d3d3; }

.chatChara13 .chat-text-right:before {
  border-right: 10px solid #f0e4a1; }

.chatChara14 .chat-text-right:before {
  border-right: 10px solid #128c82; }

.chatChara15 .chat-text-right:before {
  border-right: 10px solid #ffcec7; }

.chatChara16 .chat-text-right:before {
  border-right: 10px solid #5be2c0; }

/* 右の三角形を作る */
.chat-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  top: 15px;
  right: -20px; }

.chat-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #9cd6e7;
  top: 15px;
  right: -19px; }

/* 回り込み解除 */
.chat:after, .chat:before {
  clear: both;
  content: "";
  display: block; }

.footerNav {
  width: 100%;
  background: #f4f4f4;
  text-align: center;
  padding-bottom: 60px; }

.footerNav .title {
  padding: 45px 0 35px;
  text-align: center; }

.footerNav ul {
  width: 686px;
  margin: 0 auto;
  text-align: center; }

.footerNav li {
  display: inline-block;
  margin: 10px 10px; }

.footerNav .chara {
  -webkit-box-shadow: 1px 1px 1px rgba(53, 15, 116, 0.3);
  box-shadow: 1px 1px 1px rgba(53, 15, 116, 0.3);
  border-radius: 50%; }

.footerNav .current {
  background: rgba(30, 0, 80, 0.9); }

.footerNav .current img {
  opacity: .6; }

.backBtn {
  display: inline-block;
  width: 100%;
  background: #fff; }

.backBtn a {
  display: inline-block;
  width: 100%;
  padding: 16px 0;
  text-align: center; }

.sideBtnArea {
  position: relative;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

.sideBtnArea .leftBtn {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 1%;
  width: 48px;
  height: 48px;
  background: url("/dreaming/assets/img/chara/btn_left_hover.png") 50% 50%/cover no-repeat; }

.sideBtnArea .rightBtn {
  position: fixed;
  z-index: 1000;
  top: 50%;
  right: 1%;
  width: 48px;
  height: 48px;
  background: url("/dreaming/assets/img/chara/btn_right_hover.png") 50% 50%/cover no-repeat; }

.sideBtnArea .leftBtn img,
.sideBtnArea .rightBtn img {
  width: 100%;
  height: auto;
  opacity: 1; }

.sideBtnArea .leftBtn:hover img,
.sideBtnArea .rightBtn:hover img {
  opacity: 0; }