<!-- ========================================  
  デザイン01 ズラし二重線ボックス  
 ========================================  -->
 <section id="design-01">

<div class="box">
  <span>zurashi</span>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
</div>

 </section>

/* =================================== */
/*   デザイン01 ズラし二重線ボックス   */
/* =================================== */
#design-01 .box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 280px;
  height: 190px;
  margin: 0 auto;
  text-align: left;
  padding: 25px 20px 15px;
  background-color: #FFF;
  border: 1px solid #8C8C8C;
  font-size: 1.6rem;
  line-height: 1.5;

  /* box-shadowで二重線の装飾 */
  box-shadow: 4px 5px 0 0 #fff/*内側余白*/, 4px 5px 0 1px #8C8C8C/*外側線*/; 
  
}

#design-01 .box span {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: #CBCBCB;
  font-size: 1.2rem;
  line-height: 1.2rem;
}