body {
  background-image: url(https://lh3.googleusercontent.com/d/1PhxtoKbp111UjFW46uVkXCyfEqDny0TV);
  background-size: cover; /* 背景画像の寸法 *//* 縦横比維持 */
}

#haikeibtn{
  text-align: right;
  }

.classexplanation{ /* class名 */
  text-align: center; /* テキストの水平方向の配置 *//* 中央 */
  cursor: pointer; /* カーソル設定 *//* ポインター */
}

details > summary {
  padding: 2px 6px; /* 内側余白 */
  width: 15em; /* 幅 */
  background-color: #ddd; /*  背景色　*/
  border: dashed black; /* 枠線 */ /* 点線 */  /* 色 */
  box-shadow: 3px 3px 4px gray; /* 影 */
  cursor: pointer; /* カーソル設定 *//* ポインター */
}


#idexplanation{
  border-radius: 0 0 10px 10px; /* 角丸 */
  background-color: #ddd; /*  背景色　*/
  padding: 2px 6px; /* 内側余白 */
  margin: 0; /* 外側余白 */
  box-shadow: 3px 3px 4px black; /* 影 */
}

details[open] > summary{
  background-color: #ccf; /*  背景色　*/
}
  
  .container{ /*　class名　*/
    width: 360px; /* 幅 */
    margin: 20px auto; /* 外側余白 *//* 自動的に適切な値に調整*/
    padding: 15px; /* 内側余白 */
    background: #efefef; /*  背景　*//* 色 */
    text-align: center; /* テキストの水平方向の配置 *//* 中央 */
  }

#btn{/* id名 */
  width: 200px; /* 幅 */
  height: 40px; /* 要素の高さ */
  line-height: 40px; /* テキストの高さ */
  background: red; /* 背景 *//* 色 */
  margin: 10px auto; /* 外側余白 *//* 自動的に適切な値に調整*/
  color: #fff; /* テキストの色 */
  font-size: 24px; /* フォントの大きさ */
  ont-weight: bold; /* フォントの太さ *//* 700 */
  border-radius: 15px; /* 角丸 */
  user-select: none; /* テキスト範囲選択制御 *//* 選択不可能 */
  cursor: pointer; /* カーソル設定 *//* ポインター */
  animation: btn_animation 1.0s infinite;
 } 

p{ /* 段落 */
  margin: 30px 0px; /* 外側余白 */
}

#result{ /* id名 */
font-size: 28px; /* フォントの大きさ */
font-weight: bold; /* フォントの太さ *//* 700 */
}


@keyframes btn_animation { /* アニメーションの動きを指定 */ /* btnのアニメーション */
    0% {
        transform: scale(1.2)
    }
    5% {
        transform: scale(1)
    }
    95% {
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.2)
    }
}