.top,.bottom{
	display:flex;
	display:-webkit-flex;
}
.demo_tategaki2{
writing-mode: vertical-rl;
ruby-position : over;
}
.box {
  height: 100px;
  margin-inline: auto;
  margin-top: 50px;
  width: 100px;
}
.box img {
  animation: rotation-r 4s linear infinite;
  height: auto;
  width: 100%;
}
.title {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 40px;
  position: relative;
}
/* アニメーション */
@keyframes rotation-r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.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:3px;
	text-align:center;
}
.pic_box>img{
	max-width:1000px;
	max-height:1000px;
}

/*吹き出し*/
.arrow_box{
	position:relative;
	border:1px solid var(--border_color);
	border-radius:5px 5px 5px 5px;
	padding:5px;
	margin:5px;
	background-color: var(--balloon_color);
}
.arrow_box:before{
	content:"";
	position:absolute;
	top:-11px;
	left:50%;
	width:0;
	height:0;
	margin-left:-10px;
	border-bottom:10px solid var(--border_color);
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}.arrow_box:after{
	content:"";
	position:absolute;
	top:-10px;
	left:50%;
	width:0;
	height:0;
	margin-left:-10px;
	border-bottom:10px solid var(--balloon_color);
	border-left:10px solid transparent;
	border-right:10px solid transparent;
}
.user_balloon{
	width:40%;
	margin:5px;
	padding:5px;
	/* margin-left:58%; */
	position:relative;
	border:1px solid var(--border_color);
	border-radius:5px 5px 5px 5px;
	background-color: var(--balloon_color);
}
.user_balloon:before{
	content:"";
	position:absolute;
	top:calc(50% - 8px);
	width:0;
	height:0;
		padding:-5px;
	margin-left:calc(100% - 5px);
	border-top:8px solid transparent;
	border-left:8px solid var(--border_color);
	border-bottom:8px solid transparent;
}
.user_balloon:after{
	content:"";
	position:absolute;
	top:calc(50% - 8px);
	left:0;
	width:0;
	height:0;
	margin-left:calc(100% - 1px);
	border-top:8px solid transparent;
	border-left:8px solid var(--balloon_color);
	border-bottom:8px solid transparent;
}

.conversation_box{
	width:100%;
	margin:5px;
	padding:5px;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	justify-content: left;
}
.conversation_box>div>input{
	width:100%;
}
img {
    border-radius: 30px;
}

.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;
}