@charset "utf-8";

/*google fontsの読み込み*/
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');

------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*boxの設定
---------------------------------------------------------------------------*/
div {
  border: solid 0px white;
  box-sizing; border-box;

  text-align: 0px;
  line-height: 0px;
}

/*wrapの設定
---------------------------------------------------------------------------*/

.wrap{
 display:flex;
}
.box{
 width: 80%;
 background-color: #fff;
 margin: 2em 1em;
 position: relative;
 padding: 2em 1em;
 border-top: solid 2px #0391AC;
 border-bottom: solid 2px #0391AC;
}
.box:before, .box:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color:#0391AC;
}
.box:before {left: 10px;}
.box:after {right: 10px;}
.box p {
    margin: 0;
    padding: 0;
}

/*wrap CSS 【ベンダープレフィックス】の設定
---------------------------------------------------------------------------*/

.wrap {
  display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex
}