.flex_test-box {
    background-color: #fff;     /* 背景色指定 */
    padding:  0px;             /* 余白指定 */
    display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
}
 
.flex_test-item {
    padding: 0px;
    color:  #000;               /* 文字色 */
    margin:  0px 15px 0 0;              /* 外側の余白 */
                     /* 幅指定 */
}
 
.flex_test-item:nth-child(1) {
	 width: 340px;

}
 
.flex_test-item:nth-child(2) {

}
 
.flex_test-item:nth-child(3) {
    background-color: #3F51B5; /* 背景色指定 */
}
 
.flex_test-item:nth-child(4) {
    background-color:  #00BCD4; /* 背景色指定 */
}

/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btn,
a.btn,
button.btn {
  font-size: 1.0rem;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
}

.btn a:hover {
  color: #fff; /* 文字色 */
}

.btn:hover {
  opacity: .7;
}

.btn--orange,
a.btn--orange {
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 500;
line-height:0;
  margin:20px 20px ;
  padding:30px;
  width:300px;color: #fff;
  background-color: #ffac3b;border-bottom:2px solid #f90;border-radius:4px;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #ffba5b;border-bottom:2px solid #f90;border-radius:4px;
}

.btn--orange2,
a.btn--orange2 {
line-height:0;
  margin:3px 0 0 0;
  padding:0px 0;
  color: #fff;
  height:25px;
  background-color: #ffac3b;border-bottom:2px solid #f90;border-radius:3px;
}

.dlname {
font-size:30px;
height:70px;
}