* {
  box-sizing: border-box;
}

.resizeimage img { width: 100%; }
@font-face{
  font-family: "kawaii";
  src: url("APJapanesefontT.ttf") format("truetype");
}
body{
  background-color: #FFEAB7;
}
h1.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 500px;
  height: 100px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}
 
#app {
  max-width: 640px;
  margin: 0 auto;
}
.title{
  font-family: "kawaii";
  font-size: 70px;
  text-align: center;
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  border-bottom: 2px solid #0099e4; /*#d31c4a */
  color: #0099e4;
}
th,
th {
  padding: 0 8px;
  line-height: 40px;
}
thead th.id {
  width: 50px;
}
thead th.state {
  width: 100px;
}
thead th.date{
  width: 150px;
}
thead th.deadline{
  width: 150px;
}

thead th.button {
  width: 60px;
}
tbody td.button, tbody td.state {
  text-align: center;
}
tbody tr td,
tbody tr th {
  border-bottom: 1px solid #ccc;
  transition: all 0.4s;
}
tbody tr.done td,
tbody tr.done th {
  background: #f8f8f8;
  color: #bbb;
}
tbody tr:hover td,
tbody tr:hover th {
  background: #f4fbff;
}
button {
  border: none;
  border-radius: 20px;
  line-height: 24px;
  padding: 0 8px;
  background: #0099e4;
  color: #fff;
  cursor: pointer;
}
#box {
  border: none;
  border-radius: 20px;
  line-height: 24px;
  padding: 0 8px;
  background: #0099e4;
  color: #fff;
  cursor: pointer;
}

tbody tr.done #box{
  background: #FF8C00;
}

.addbutton{
  border: none;
  border-radius: 20px;
  line-height: 24px;
  padding: 0 8px;
  background: #e400ab;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  font-size: 25px;

  padding: 10px;
  color: #CCC;
  -webkit-text-stroke:1px #000;
  position: relative;
  margin: 0;
}

.square_contents {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
}

.square_contents div {
  position: relative;
  max-width: 200px;
  width: 20%; /*ボタンの大きさ*/
  margin: 1%;
}
 
.square_contents div::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square_contents button {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*transform: translate(-50%,-50%);*/
}

.b{
  font-weight: bold;
  font-size: 25px;

  padding: 10px;
  color: #CCC;
  -webkit-text-stroke:1px #000;
  position: relative;
  margin: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-align: left;
  color: crimson;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #ff80b0;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%; 
  left: 50%; 
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 15px;  /* 文字サイズを10pxに設定 */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* トップへ戻るボタン */
html {
  scroll-behavior: smooth;
}
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 90px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}
.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .pagetop:hover, .pagetop:hover .pagetop__arrow {
      border-color: #3293e7;
  }
}
.listtop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}
.listtop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(135deg);
}
@media (hover: hover) and (pointer: fine) {
  .listtop:hover, .listtop:hover .listtop__arrow {
      border-color: #3293e7;
  }
}

.text{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}