.top,.bottom{
	display:flex;
	display:-webkit-flex;
}
.top_left_col{
	width:calc(100% - 350px);
}
.top_right_col{
	width:300px;
}
.right_col_item{
	background-color: #f6f6f6;
	padding:5px;
	margin-bottom:5px;
}
.right_col_item>p{
	margin:0;
}

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

/*吹き出し*/
.balloon5 {
  position:relative;
  box-sizing: border-box;
  width: 85%;
  margin-bottom:50px;
  overflow: hidden;
}

.balloon5 .faceicon {
 
  position:absolute;
  top:0px;
  margin-right: 0px;
  width: 80px;
}
.balloon5 .faceicon1 {
 
 position:absolute;
  top:0px;
  left: 33%;
  transform: translate(-33%);
        -webkit-transform: translate(-33%);
	
  margin-right: 0px;
  width: 80px;
}
.balloon5 .faceicon2 {
 
 position:absolute;
  top:0px;
  left: 66%;
  transform: translate(-66%);
        -webkit-transform: translate(-66%);
  margin-right: 0px;
  width: 60px;
}
.balloon5 .faceicon3 {
 
 position:absolute;
  top:0px;
  left: 100%;
  transform: translate(-100%);
        -webkit-transform: translate(-100%);
  margin-right: 0px;
  width: 65px;
}
.balloon5 .faceicon img{
  
  width: 100%;
  height: auto;
 
}
.balloon5 .faceicon1 img{
  
  width: 100%;
  height: auto;
 
}
.balloon5 .faceicon2 img{
  
  width: 100%;
  height: auto;
 
}

.balloon5 .faceicon3 img{
  
  width: 100%;
  height: auto;
 
}


.fashionable-box4{
  margin: 1em 0;
  padding: 1em;
  background-size: 20px 20px;
  border-radius: 5px;
  background-color: #ffffff;
	background-image:
	linear-gradient(45deg, rgba(220, 220, 220, 0.5) 25%, transparent 25%,
	 transparent 50%, rgba(220, 220, 220, 0.5) 50%, rgba(220, 220, 220, 0.5) 75%,
	 transparent 75%, transparent),
	linear-gradient(-45deg, rgba(220, 220, 220, 0.5) 25%, transparent 25%,
	 transparent 50%, rgba(220, 220, 220, 0.5) 50%, rgba(220, 220, 220, 0.5) 75%,
	 transparent 75%, transparent);
  border: solid 2px #000000;
}

.fashionable-box4 p{
  margin: 0;
  padding: 0;
}

.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%;
	  border-radius: 3px;
}


.click-down {
  transition: 0.2s;
}

.click-down:active {
  transform: translateY(2px);
}


a {
text-decoration: underline;
}

a:visited{
  color : #BA55D3;
}

.memo {
  position: relative;
  background: #F8F0D7;
  border-left:4px dotted rgba(0,0,0,.1);
  border-right:4px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 1em;
  color: #65513f;
  width: 300px;
}
.masking-tape{
  position: absolute;
  top: -1em;
  left: 30%;
  width:70px;
  height:30px;
  background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-4deg); 
}
.memo p {
  color: #65513f;
  padding: 10px;
}

.box-shadow{
   box-shadow: 10px 10px 15px -10px #000000;
}

.border_radius {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}
.title-box2-title{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: bold;
  font-size: 1.1em;
  background-color: #ffffff;
  color: #000000;
  padding: 0 0.5em;
}

/*↓会話入力のボックス */ 


.box4{
    padding: 8px 19px;
    margin: 0em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #0000cd;
     position: fixed;
     z-index: 3;
    bottom: 0px;
    right: 0;
}
.box4 p {
    margin: 0; 
    padding: 0;
    
}

/*縁取りお試し HTMLは91と93のとこ*/

.t1 span{
  text-shadow:1px 0 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff;
}

.buruburu {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}


/*ノイズテキスト */
.flash {
  animation: flash .03s infinite;
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}
.skew {
  animation: skew 3s infinite;
}
@keyframes skew {
  0% {
    transform: none;
  }
  33% {
    transform: none;
  }
  33.3% {
    transform: skewX(30deg);
  }
  33.6% {
    transform: skewX(-30deg);
  }
  33.9% {
    transform: none;
  }
  66% {
    transform: none;
  }
  66.3% {
    transform: skewX(5deg);
  }
  66.6% {
    transform: skewX(-5deg);
  }
  66.9% {
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewX(15deg);
  }
  77.6% {
    transform: skewX(-15deg);
  }
  77.9% {
    transform: none;
  }
}


/*反転 */
.reflect {
  transform: scale(-1, 1);
}