div.game-context{
  /* padding:10px; */
  margin: 5% 0 5% 0;
}


div.story-content{
  display:flex;
  position:relative; /**/
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

div.bubble{
  /*전체 버블 하나를 묶는div*/
  /* min-width: 20%; */
  /* flex-basis: 10%; */
  max-width: 80%;
  margin-top:5px;
}
div.non-right div.bubble{
  max-width: none;
}

div.char-name{
  /* width:30%; */
  /* padding:0 5px 0 5px; */
}

div.char-script{
  /* 대사 버블 */
  padding:15px;
  min-width:80px;
  display:inline-block;
  box-sizing: border-box;
  text-align: justify;
}

div.ito, .aporia-staff-right{
  /* 이토의 대사, 하코스 주체는 오른쪽에 */
  margin-left:auto;
  text-align: right;
}
div.ito .char-name,
.aporia-staff-right .char-name{
  text-align:right;
}
div.ito .char-script,
.aporia-staff-right .char-script{
  color:white;
  border-radius: 20px 20px 0 20px;  
}

div.event-story div.ito .char-script,
div.card-story div.ito .char-script{
  background-image: linear-gradient( 135deg, #cd79f6 40%, #9e87f3 100%);
}
div.blank-slate div.ito .char-script{
  background-image: linear-gradient( 135deg, #496388 5% ,#13063a 100%);
}
div.irresponsible-pink div.ito .char-script{
  background-image: linear-gradient( 135deg, #83bdb4 10% ,#f27bb1 80%);
}
div.aloof-yellow div.ito .char-script{
  background-image: linear-gradient( 135deg, #c07479 5% ,#dfa72b 70%);
}
div.sly-red div.ito .char-script{
  background-image: linear-gradient( 135deg, #6e8cb9 5% ,#c14a4a 70%);
}
div.phony-violet div.ito .char-script{
  background-image: linear-gradient( 135deg, #b19b7e 5% ,#9b24b2 90%);
}
div.chilling-green div.ito .char-script{
  background-image: linear-gradient( 135deg, #cf99a3 5% ,#6aab3a 90%);
}
div.vindictive-blue div.ito .char-script{
  background-image: linear-gradient( 135deg, #b6967a 5% ,#2184dc 90%);
}
div.piece-of-cake div.ito .char-script{
  background-image: linear-gradient( 135deg, #8058c1 15% ,#72a8d1 95%);
}


/*퍼스널 컬러(우측대사 색상, 캐릭터 컬러 추가용)*/
div.game-context div.aporia-staff-right.kosaka .char-script, .kosaka-color{
  background-color: #B22222;
}

div.game-context div.aporia-staff-right.kise .char-script, .kise-color{
  background-color: #7da852;
}

div.game-context div.aporia-staff-right.suoh .char-script, .suoh-color{
  background-color: #FFC02D;
}

div.game-context div.aporia-staff-right.ayato .char-script, .ayato-color{
  background-color: #FD1493;
}

div.game-context div.aporia-staff-right.ukyo .char-script, .ukyo-color{
  background-color: #A553EB;
}

div.game-context div.aporia-staff-right.hinomiya .char-script, .hinomiya-color{
  background-color: #FE8A23;
}

div.game-context div.aporia-staff-right.kanno .char-script, .kanno-color{
  background-color: #6495ED;
}

div.game-context div.aporia-staff-right.tsukimoto .char-script, .tsukimoto-color{
  background-color:#8bccd6;
  /* background-color:#7dbfc9; */
}

div.game-context div.aporia-staff-right.ichikawa .char-script,
div.game-context div.aporia-staff-right.suoh .char-script{
  color:#000000;
}

div.game-context div.aporia-staff-right.ichikawa .char-script, .ichikawa-color{
  background-color:#e9dc69;
}

div.game-context div.aporia-staff-right.okiya .char-script, .okiya-color{
  background-color:#9a98c1;
}

div.game-context div.aporia-staff-right.fushimi .char-script, .fushimi-color{
  background-color:#3f60be;
}

div.game-context div.aporia-staff-right.mikado .char-script, .mikado-color{
  background-color:#c437bc;
}

div.game-context div.aporia-staff-right.shinkai .char-script, .shinkai-color{
  background-color:#E04D21;
}

div.game-context div.aporia-staff-right.aizawa .char-script, .aizawa-color{
  background-color:#388138;
}

div.game-context div.aporia-staff-right.arima .char-script, .arima-color{
  background-color:#df507f;
}

div.game-context div.aporia-staff-right.shido .char-script, .shido-color{
  background-color:#F09C65;
}

div.game-context div.aporia-staff-right.tateshina .char-script, .tateshina-color{
  background-color:#7043bb;
}

div.game-context div.aporia-staff-right.onda .char-script, .onda-color{
  background-color:#61C892;
}

div.game-context div.aporia-staff-right.nina .char-script, .nina-color{
  background-color:#13bffc;
}

div.game-context div.aporia-staff-right.kamiya .char-script, .kamiya-color{
  background-color:#5E76BC;
}

div.game-context div.aporia-staff-right.manami .char-script, .manami-color{
  background-color:#DE7DF3;
}
/*퍼스널 색상 끝*/


div.aporia-staff,
div.ito-left{
  margin-right:auto;
}

div.aporia-staff .char-script,
div.ito-left .char-script{
  background-color: #ededed;
  border-radius: 0 20px 20px 20px;
}

div.monologue{
  color:#555555;
  box-shadow: 0 0 8px 1px #dddddd;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1em 1.8em;
  margin-top: 2em;
  width: 100%;
  border-radius: 20px;
  box-sizing: border-box;
  text-align: justify;
  text-align-last: center;
}

div.aporia-staff div.char-name::before,
div.aporia-staff-right div.char-name::after{
  content:'';
  display:inline-block;
  width: 4em;
  height: 4em;
  background-size: 4em 4em;
  background-repeat: no-repeat;
}

/**만우절 코드**/
.april-main .april-kosaka div.april-char-name::after,
.april-main .april-kise div.april-char-name::after{
  content:'';
  display:block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
}

.april-main div.aporia-staff.april-kosaka div.char-name::after{
  background-position: left;
}

.april-main div.aporia-staff.april-kise div.char-name::after{
  background-position: right;
  
}

/**만우절 코드 끝**/

div.aporia-staff div.char-name::before{
  padding-right:0.5em;
}


div.chat-wrap{
  width:76%;
  margin:30px;
}

div.chat-wrap .bubble.aporia-staff .char-script{
  padding:8px 12px;
  font-family: 'KOMACON';
  border-radius:7px;
  color:white;
  background-color: #282851 !important;
  position:relative;
}

div.chat-wrap .bubble.aporia-staff-right .char-script{
  padding:8px 12px;
  font-family: 'KOMACON';
  border-radius:7px;
  color:black;
  background-color: #33ffcc !important;
  position:relative;
}
div.chat-wrap .bubble.aporia-staff-right .char-script:after{
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: #33ffcc;
	border-right: 0;
	margin-top: -10px;
	margin-right: -10px;
}

div.chat-wrap .bubble.aporia-staff .char-script:after{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #282851;
	border-left: 0;
	margin-top: -10px;
	margin-left: -10px;
}