<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<dl>
  <dt>ある日のスケジュール</dt>
  <dd>
    <ol>
      <li><dl>
        <dt>
          9:00
          <span class="material-icons">contact_mail</span>
        </dt>
        <dd><dl>
          <dt>出社・メールチェック</dt>
          <dd>フレックスタイムを導入しているので、10時までに出社すればいいのですが、私のモットーは早く来て早く帰る！今日やる作業などをまとめる時間として使っています。</dd>
        </dl></dd>
      </dl></li>
      <li><dl>
        <dt>
          10:00
          <span class="material-icons">groups</span>
        </dt>
        <dd><dl>
          <dt>朝会</dt>
          <dd>プロジェクト内で本日行う作業について打ち合わせ。お客様から優先されている依頼に応えるにはどう動けばよいか検討したり、メンバーの進捗を確認するのもこの時間です。</dd>
        </dl></dd>
      </dl></li>
      <li><dl>
        <dt>
          10:30
          <span class="material-icons">visibility</span>
        </dt>
        <dd><dl>
          <dt>レビュー業務</dt>
          <dd>昨日中に自分に割り当てられたプロジェクトの改修資材レビューを行います。私も発展途上なので、他のスタッフの改修から非常に勉強させられることが多いです。</dd>
        </dl></dd>
      </dl></li>
      <li><dl>
        <dt>
          12:00
          <span class="material-icons">restaurant</span>
        </dt>
        <dd><dl>
          <dt>お昼休み</dt>
          <dd>昼ごはんを食べたら空いた時間を使って社内メンバーと持参してきたボードゲームで遊ぶことが多いです。自然と会話が生まれていい息抜きになっています。</dd>
        </dl></dd>
      </dl></li>
      <li><dl>
        <dt>
          13:00
          <span class="material-icons">laptop_mac</span>
        </dt>
        <dd><dl>
          <dt>実装作業</dt>
          <dd>午後からは朝会時に確認した優先順に、実装・検証作業を行います。</dd>
        </dl></dd>
      </dl></li>
      <li><dl>
        <dt>
          18:00
          <span class="material-icons">directions_run</span>
        </dt>
        <dd><dl>
          <dt>退社</dt>
          <dd>よほど急ぎの作業がない場合は定時退社を心がけてます。</dd>
        </dl></dd>
      </dl></li>
    </ol>
  </dd>
</dl>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body>dl{
  padding:2em;
  &>dt{
    margin:0 0 20px;
    padding:.25em .75em;
    font-size:24px;
    font-weight:700;
    color:#fff;
    position:relative;
    background:#44a0ae;
    border-radius:10px;
    &::after{
      content:"";
      display:block;
      width:6px;
      height:20px;
      position:absolute;
      top:100%;
      left:120px;
      background:#44a0ae;
    }
  }
  li{
    list-style:none;
    padding:0 0 2em;
    position:relative;
    &:nth-child(2n){
      &>dl{
        &>dd{
          background:#44a0ae;
          &:before{
            border-right-color:#44a0ae;
          }
        }
      }
    }
    &::before{
      content:"";
      display:block;
      width:6px;
      height:100%;
      position:absolute;
      top:0;
      left:120px;
      background:#44a0ae;
    }
    &:last-child{
      &::before{
        height:25px;
      }
    }
    &>dl{
      display:flex;
      &>dt{
        font-size:22px;
        font-weight:700;
        color:#2C6770;
        text-align:right;
        line-height:55px;
        width:90px;
        position:relative;
        span{
          position:absolute;
          top:0;
          right:-58px;
          border:5px solid #44a0ae;
        }
      }
      &>dd{
        margin-left:auto;
        padding:10px;
        width:calc(100% - 170px);
        background:#2C6770;
        border-radius:10px;
        position:relative;
        &::before{
          content:"";
          width:0;
          height:0;
          position:absolute;
          top:16px;
          right:100%;
          border-right:12px solid #2C6770;
          border-top:8px solid transparent;
          border-bottom:8px solid transparent;
          border-left:12px solid transparent;
        }
        dt{
          margin:0 .75em;
          padding:.25em 0;
          font-size:16px;
          font-weight:700;
          color:#fff;
          border-bottom:1px solid #fff;
        }
        dd{
          padding:.5em .75em;
          font-size:14px;
          color:#fff;
        }
      }
    }
  }
}
.material-icons{
  padding:5px;
  font-size:30px !important;
  color:#fff;
  background:#2C6770;
  border-radius:50%;
}
@media screen and (max-width: 640px){
body>dl{
  padding:1em;
  &>dt{
    font-size:16px;
    border-radius:5px;
    &::after{
      left:75px;
    }
  }
  li{
    padding:0 0 1em;
    &::before{
      left:75px;
    }
    &>dl{
      &>dt{
        font-size:15px;
        line-height:44px;
        width:50px;
        span{
          right:-48px;
        }
      }
      &>dd{
        width:calc(100% - 116px);
        border-radius:5px;
        &::before{
          top:12px;
        }
        dt{
          margin:0 .5em;
          font-size:14px;
          font-weight:400;
        }
        dd{
          padding:.5em;
          font-size:12px;
        }
      }
    }
  }
}
.material-icons{
  font-size:20px !important;
}
}