BODY { font-size:14px ;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
TD { font-size:14px ;}
TH { font-size:14px ;}
A:link { text-decoration:none; }
A:visited { text-decoration:none; }
A:active { text-decoration:none; }
body,p,div,table { line-height : 150% ;}
A:hover { text-decoration:underline; }
p1 {
 padding: 0em 1em;
  position: absolute;
  bottom: 0;
}
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px #7d6442;
    border-bottom: solid 2px #7d6442;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #7d6442;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}
HTML CSSResult Skip Results Iframe
EDIT ON
/*-----------------------------------
sakura_block
-----------------------------------*/
#sakura_block{
  width: 100%;
}
#sakura_block .sakura_parts_box{
  position: relative;
}
#sakura_block .sakura_parts_box img{
  position: absolute;
}
#sakura_block .sakura_parts_box img:nth-child(2n+1){
  width: 20px;/*花びらのサイズ*/
}
#sakura_block .sakura_parts_box img:nth-child(2n){
  width: 60px;/*花びらのサイズ*/
}

/*-----------------------------------
桜の花びらパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 0; left: 43%;}
img.parts_10{top: 0; left: 50%;}
img.parts_11{top: 0; left: 55%;}
img.parts_12{top: 0; left: 60%;}
img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 81%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 90%;}
img.parts_19{top: 0; left: 97%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.sakura_parts_box img {
    animation: sakura linear 8s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}