.top,.bottom{
	display:flex;
	display:-webkit-flex;
}
.top_left_col{
	width:calc(100% - 200px);
	display:flex;
	align-items:center;
	justify-content:center;
}
.top_right_col{
	width:200px;
}
.right_col_item{
	background-color: var(--balloon_color);
    border-radius:5px;
	padding:5px;
	margin-bottom:5px;
}
.right_col_item>p{
	margin:0;
}

.pic_box{/*キャラ画像*/
	padding:0.5em 1em;
	text-align:center;
}
.pic_box>img{
	max-width:600px;
	max-height:600px;
}

/*吹き出し*/
.arrow_box{
	position:relative;
	border:0px solid var(--border_color);
	border-radius:0px;
	padding:0.5em 2em;
	margin:2em;
	background-color: var(--balloon_color);
}
.user_balloon{
	width:100%;
	margin:5px;
	padding:5px;
	/* margin-left:58%; */
	position:relative;
	border:0px solid var(--border_color);
	border-radius:0px;
	background-color:#f9fff2;
}

.conversation_box{
	width:100%;
	margin:10px;
	padding:10px;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	justify-content: left;
}
.conversation_box>div>input{
	width:100%;
}

.window_save{
    background: var(--balloon_color);
    border:1px solid var(--border_color);
    color: var(--text_color);
}
.window_save>a{
    display:block;
}
.window_save>a>i{
    display:inline;
    padding-top:10px;
}
.window_save>a>span{
    font-size:0.9em;
    padding-top:5px;
    padding-bottom:5px;
}

.maintext {
    text-align: left;
    margin: 0.5em 2em;
    padding: 0em 0em;
    border-radius: 10px;  
    color: #000000;/*文字色*/
}

.topsenyou {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #7a8a99;/*左ライン*/
}
.story {
   text-align: left;
    margin: 0.5em 2em;
    padding: 0.5em 2em;
    border: px double #77a261;
    border-radius: 16px;  
    background: #c6c6cc;/*背景色*/
}
.ayame {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #b37436;/*左ライン*/
}
.hachiya {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #74b336;/*左ライン*/
}
.yukito {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #e6cd45;/*左ライン*/
}
.forth {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #c4c4a3;/*左ライン*/
}  
.fifth {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #a3a3c4;/*左ライン*/
}  
.sixth {
    padding: 1em 1em;
    margin: 0.5em 2em;
    background-color: #ececec;/*背景色*/
    border-left: solid 10px #c4a3b4;/*左ライン*/
}  




.sample_box6 p {
    margin: 0; 
    padding: 0;
}

.toptext {
   text-align: left;
    margin: 0.5em 2em;
    padding: 0.5em 2em;
    border: px double #77a261;
    border-radius: 16px;  
    background: #ececec;/*背景色*/
    color: #000000;/*文字色*/
}

.sample_box_title p {
    margin-bottom: 0;
}

.infotext {
    position: relative;
    font-size:0.8em;
    margin: 0.5em 2em;
    padding: 0.5em 1.5em;
    border: solid 1px #5c5c5c;/*線*/
    border-radius: 4px;/*角の丸み*/
    background: #ececec;/*背景色*/
    color: #000000;/*文字色*/
}
.info2text {
    position: relative;
    margin: 0.5em 2em;
    padding: 0.5em 1.5em;
    border: solid 1px #5c5c5c;/*線*/
    border-radius: 4px;/*角の丸み*/
}