@charset "UTF-8";

.flex_test-box {
    display: -webkit-flex; /* Safari対応のつもり */
    display: -ms-flexbox; /* IE10以下対応 */
    display: flex;
    -webkit-flex-direction: row; /* Safari対応のつもり */
    -ms-flex-direction: row;/* IE10以下対応 */
    flex-direction: row;
    background-color: #fff;/*#eee;      背景色指定 */
    padding:  10px 10px 40px 10px;             /* 余白指定 */
    align-items:stretch;        /* 縦の位置指定 */
    justify-content:center;/*space-between;center;*/
}
@media only screen and (max-width: 680px) {
.flex_test-box {
    padding:  10px 1vw 40px 1vw;
    justify-content:space-between;/*center;*/
    }
}

.flex_test-item {
    padding: 95px 0.5em 10px 0.5em; /*95px 10px 10px 10px*/
    color:  #fff;               /* 文字色 */
    margin:  0 15px;              /* 0 10px 外側の余白 */
    /*border-radius:  5px;        角丸指定 */
}
.flex_test-item {
    height: 500px;
}
@media only screen and (max-width: 680px) {
.flex_test-item {
    padding: 95px 1em 10px 1em;/*95px .5em 10px 1.5em;*/
    margin:  0 0.1em;/*0 2vw*/
    background-size: 2em auto;/*追加*/
    }
}

.flex_test-box .flex_test-item p.rl{
    width:3em;/*追加*/
    line-height: 1.5;
    float: right;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
}
@media only screen and (max-width: 680px) {
    .flex_test-box .flex_test-item p.rl{
        width:2em;/*追加*/
    }
}

@media only screen and (max-width: 680px) {
    .flex_test-box .flex_test-item p.tt{
        width:0.5em;/*追加*/
    }
}

.flex_test-item:nth-child(1) {
    /*background-color:  #2196F3;  背景色指定 */
    background-image: url(../img/mark3.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: contain;/*100% auto;*/
}

.flex_test-item:nth-child(2) {
    /*background-color:  #4CAF50;  背景色指定 */
    background-image: url(../img/mark2.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: contain;/*100% auto;*/
}

.flex_test-item:nth-child(3) {
    /*background-color: #3F51B5;  背景色指定 */
    background-image: url(../img/mark1.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: contain;/*100% auto;*/
}

.flex_test-item:nth-child(4) {
    margin-top: -30px;
    background-color:  #fff;/*#eee;#00BCD4;  背景色指定 */
}