@charset "UTF-8";
  /* CSS Document */
  .sample1 {
    width: 98%;
      margin: 1%;
    overflow: hidden;
    position: relative; /* 相対位置指定 */
      color: #fff !important;
  }

.sample1 .caption a{
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.45);
    color: #fff !important;
}

  .sample1 .caption {
       font-family: "Klee One", cursive;
      letter-spacing: 0;
      font-size: 0.8em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
    line-height: 200%;
    width: 90%;
    opacity: 0; /* クリック時に表示 */
    transition: all 0.2s ease;
  }
  .sample1 .mask {
    width: 100%;
    height: 100%;
    position: absolute; /* 絶対位置指定 */
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6); /* マスクは半透明 */
    opacity: 0; /* クリック時に表示 */
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .sample1.clicked .caption,
  .sample1.clicked .mask {
    opacity: 1;
  }
  .sample1 .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }