body{
    background-color:skyblue
}
.flex_test-box {
    background-color:      /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
}

.flex_test-item {
    padding: 10px;
    color:  #000000;               /* 文字色 */
    margin:  5px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
    width: 30%;                 /* 幅指定 */
    background-color:  #ffffff; /* 背景色指定 */
    margin-bottom: 10px; 
    border: 1px 
    solid #333333; 
    border-radius: 20px;
}

small{
    font-size: x-small;
}

p.example1 { font-size: xx-large; text-align: right;}
p.example2 { font-size: x-large; text-align: right;}
p.example3 { font-size: large; text-align: right;}
p.example4 { font-size: medium; text-align: right;}
p.example5 { font-size: small; text-align: right;}
p.example6 { font-size: x-small; text-align: right;}
p.example7 { font-size: xx-small; text-align: right; top;}
p.example9 { font-size: 0.6em; text-align: right; top;}

.outside-box {
    position: relative;

}
.messgae-box {
    position: absolute;
    left : 50px;
    top  : 30px;
}

.messgae-box2 {
    position: absolute;
 right: 0;
 bottom: 0;
}

.messgae-box3 {
    position: absolute;
 right: 40%;
 top: 0;
}


h2{
 font-size:medium; 
 right:0;
 
}

p {
  margin : 0.4em 0 0.4em ;
 line-height: 1.6em;
}

figure1 {
 float: right;


}

figure2 {
 float: left;


}

figure img {
 max-width: 100%;
}

.tensen {
    margin : 0.4em 0 0.4em ;
    padding : 0.2em 0.2em ;
    border : dashed 2px #333;
    border-radius: 20px;
}
.tensen p {
font-size: small;
}

.under {
 background: linear-gradient(transparent 60%, yellow 50%);
}