a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s;
}

a:visited {
  color: #ffffff;
}

a:hover {
  color: #aaffff;
}

a:active {
  color: #aaffff;
}

/*.titlezone {
  width: 640px;
  text-align: center;
  margin: 20px auto 20px auto;
}*/

/*.title {
  vertical-align:top;
}*/

/*.myphoto {
  max-width: 640px;
  max-width: 100%;
  width: 100%;
  border-radius: 40px 40px 40px 40px;
  margin: 0px;
  vertical-align: bottom;
}

.phshu {
  text-align: right;
  font-size: 0.5em;
  margin: 0px;
  padding: 0px;
}*/

.myphoto {
  display: block;        /* 画像の下に変な隙間ができないようにする */
  max-width: 100%;
  height: auto;
  border-radius: 40px;
  margin: 0px;
}

.phshu {
  text-align: right;     /* これで btncover（画像幅）の右端に寄る！ */
  font-size: 0.5em;
  margin: 5px 0 0 0;     /* 写真との間隔を少しだけ開けると可愛いよ */
  padding: 0px;
  color: var(--text-dim); /* ついでにちょっと色を落とすとエモい */
}

/*.basewaku {
  max-width: 800px;
  width: 90%;
  background-color: rgba(10,0,0,0.3);
  background-color: rgba(255,230,230,0.3);
  margin: 20px auto 20px auto;
  border-radius: 40px 40px 40px 40px;
  text-align: center;
}*/

/*.btnarea {
  max-width: 700px;
  max-width: 100%;
  width: max-content;
  width: 70%;
  margin: 20px auto 0px auto;
  margin: 0px auto;
  padding: 0px 0px 20px 0px;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
}*/

.btnarea {
  max-width: 100%;
  margin: 0px auto;
  padding: 0px 0px 20px 0px;
  text-align: center; /* これで中の inline-block を中央に寄せる */
}

.btncover {
  display: inline-block; /* これが重要！中身（画像）の幅にピタッと吸着するよ */
  position: relative;    /* 基準点にする */
  max-width: 100%;       /* これで親を突き破らない */
}

@font-face {
  font-family: 'Hanazome';
  src: url("./hanazome.ttf") format('truetype');
}

.jsarea1 {
  text-align: center;
  margin: 0px auto 10px auto;
}

.jsarea2 {
  text-align: center;
  margin: 20px auto 10px auto;
}

.jsareabox {
  margin: 20px auto 10px auto;
  /*max-width: 700px;*/
  max-width: 100%;
  /* width: 80%; */
  text-align: left;
}

.jsfont1 {
  font-family: "Hanazome";
  font-size: 4vmin;
  color: #99ffff;
  margin: 0px auto 20px auto;
}

.jsfont2 {
  font-family: "Hanazome";
  font-size: 3vmin;
  color: #ffffff;
  margin: 0px auto 20px auto;
}

.jsfont3 {
  font-family: "Hanazome";
  font-size: 2vmin;
  color: #ffffff;
  margin: 0px auto 20px auto;
}

.jsfont4 {
  font-family: "Hanazome";
  font-size: 2vmin;
  color: #ffff99;
  margin: 0px auto 20px auto;
}

/*.btnimg {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}*/

/*.btnimg:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}*/

/*#textfooter {
  text-align: center;
  color: #333333;
  margin: 20px;
}*/

.hrbar {
  /* width: 80%; */
  margin: 20px auto;
}

.sikakubox {
  margin: auto;
  /* width: 80%; */
  /* max-width: 750px; */
  /*background-color: #ff0000;*/
}

.ttlarea {
  text-align: center;
  margin: 20px auto;
}

.sikakubar {
  border-radius: 10px;
  background-color: #646464;
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakupar1 {
  border-radius: 10px;
  background-color: rgba(0,0,255);
  color: #ffffff;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakuchi1 {
  border-radius: 10px;
  background-color: rgba(0,0,128);
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakupar2 {
  border-radius: 10px;
  background-color: #9EA418;
  color: #ffffff;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakuchi2 {
  border-radius: 10px;
  background-color: #5A5C29;
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakupar3 {
  border-radius: 10px;
  background-color: rgba(255,0,0);
  color: #ffffff;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakuchi3 {
  border-radius: 10px;
  background-color: rgba(128,0,0);
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakupar4 {
  border-radius: 10px;
  background-color: rgba(255,0,255);
  color: #ffffff;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakuchi4 {
  border-radius: 10px;
  background-color: rgba(128,0,128);
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakupar5 {
  border-radius: 10px;
  background-color: #027E00;
  color: #ffffff;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakuchi5 {
  border-radius: 10px;
  background-color: #124411;
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakupar6 {
  border-radius: 10px;
  background-color: #1583A9;
  color: #ffffff;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

.sikakuchi6 {
  border-radius: 10px;
  background-color: rgba(0,128,128);
  color: #ffffff;
  padding: 5px 30px;
  text-align: left;
  font-size: 0.7em;
  margin: 5px auto;
}

@media (max-width: 768px) {
  .jsfont3 {
    font-family: "Hanazome";
    font-size: 3vmin;
    color: #ffffff;
    margin: 0px auto 20px auto;
  }

  .jsfont4 {
    font-family: "Hanazome";
    font-size: 3vmin;
    color: #ffff99;
    margin: 0px auto 20px auto;
  }

  /*#textfooter {
    text-align: center;
    color: #333333;
    margin: 20px;
    font-size: 3vmin;
  }*/

  .sikakubar, .sikakupar1, .sikakupar2, .sikakupar3 {
    font-size: 2.4vw;
  }

  .sikakupar4, .sikakupar5, .sikakupar6 {
    font-size: 2.4vw;
  }

  .sikakuchi1, .sikakuchi2, .sikakuchi3 {
    font-size: 2.4vw;
  }

  .sikakuchi4, .sikakuchi5, .sikakuchi6 {
    font-size: 2.4vw;
  }
}