/* ===== 全体のスタイル ===== */
body {
  /* 使用するフォントを指定 */
  font-family:
    "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, "Meiryo UI",
    "Segoe UI", Tahoma, Geneva, Verdana;
  /* 背景色を薄いグレーに設定 */
  background-color: #f5f7fa;
  /* テキストの色をダークグレーに設定 */
  color: #34495e;
  /* コンテンツを中央揃え */
  /*display: flex;
    justify-content: center;*/
  align-items: center;
  /* ビューポートの高さを100%に設定 */
  height: 100vh;
  /* 余白をゼロに設定 */
  margin: auto 0;
  width: 100%;
}

A:link {
  color: #383c3c;
  text-decoration: none;
}
A:visited {
  color: #474a4d;
  text-decoration: none;
}
A:hover {
  color: orangered;
  text-decoration: none;
}

A:active {
  color: crimson;
  text-decoration: none;
  font-weight: 800;
}

.asciiart {
  font-family: Courier, "Courier New";
  font-size: 0.2rem;
  color: black;
  letter-spacing: -0.02rem;
  font-weight: 800;
  text-shadow: 2px 2px 1px lavender;
}

#clock {
  background-color: lightslategray;
  color: lavender;
  text-align: right;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 1rem;
  font-size: 0.5em;
  margin-top: 0;
}

/* ===== コンテナのスタイル ===== */
.container {
  /* 背景色を白に設定 */
  background-color: #ffffff;
  /* 内側の余白を設定 */
  padding-top: 1rem;
  padding-left: 2rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  /* 角を丸くする */
  border-radius: 10px;
  /* 影を設定 */
  box-shadow: 0 10px 10px rgba(112, 128, 144, 0.6);
  /* 幅を100%に設定 */
  width: 80%;
  /* ボックスのサイズを境界ボックスに基づかせる */
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  margin-top: 0;
  border: 1px solid lavender;
  /* white-space: nowrap;*/
}

.left_container {
  display: inline-block;
  width: 33%;
  vertical-align: top;
  padding-top: 0.2rem;
}

.center_container {
  display: inline-block;
  width: 32%;
  vertical-align: top;
  /*padding-top:1rem;*/
}

.right_container {
  display: inline-block;
  width: 33%;
  vertical-align: top;
  padding-top: 0.2rem;
}
.qrcodearea {
  /*width: 186px;*/
  width: 48px;
  text-align: center;
  margin: auto;
  margin-top: 1.5rem;
}

.commentmemo {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 300;
  color: #2b2b2b;
}

.titleimg {
  text-align: center;
  margin: auto;
}

.fudatitle {
  font-size: 0.8rem;
  color: #2b2b2b;
  text-align: center;
}

.fudatitlewhite {
  font-size: 0.8rem;
  text-align: center;
  color: white;
}

.fudaauthorkana {
  font-size: 0.5rem;
}

.fudablock {
  display: inline-block;
  width: 18%;
  background-color: white;
}

.fudablock:hover {
  background-color: teal;
  color: #2c3e50;
}

.fudatitlewhite:hover {
  color: #2c3e50;
  font-weight: 800;
}

.fudaimg {
  background-color: white;
  text-align: center;
  margin: auto;
}

.menulist {
  margin: auto;
  color: #43676b;
  text-align: center;
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px lightslategray;
}

.challenge {
  margin: auto;
  color: #43676b;
  text-align: center;
  margin-top: 2.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px lightslategray;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 2px solid gold;
  border-right: 1px solid gold;
  background-color: floralwhite;
  width: 7rem;
}

.reverse {
  margin: auto;
  color: #43676b;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px lightslategray;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 2px solid green;
  border-right: 1px solid green;
  background-color: honeydew;
  width: 7rem;
}

.color5box {
  margin: auto;
  text-align: center;
  margin-top: 1rem;
  border-top: 2px solid darkgray;
  border-left: 2px solid darkgray;
  border-bottom: 1px solid silver;
  border-right: 1px solid lightgrey;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  background-color: whitesmoke;
  border-radius: 4px;
}
.color5title {
  font-weight: 800;
  color: #2b2b2b;
  font-size: 1.2rem;
  text-shadow: 1px 1px 3px lightslategray;
}

.color5item {
  font-weight: 800;
  text-align: left;
  margin-left: 4rem;
}

.colorball {
  text-shadow: 1px 2px 3px gray;
}

.authorcolorball {
  font-size: 0.8rem;
  text-shadow: 1px 2px 3px gray;
}

.authorid {
  display: inline-block;
  text-align: center;
  margin-left: 1rem;
  border-bottom: lightgray 1px dotted;
}

.authorkana {
  display: inline-block;
  text-align: left;
  color: dimgray;
  font-size: 0.6rem;
  width: 17rem;
  margin-left: 0.5rem;
  border-bottom: lightgray 1px dotted;
}

.authorkana::first-letter {
  color: dimgray;
  font-size: 1.1rem;
  font-weight: 00;
  text-shadow: 1px 1px 2px silver;
}

.authorname {
  display: inline-block;
  font-size: 1.1rem;
  text-align: left;
  margin-left: 0.5rem;
  width: 16rem;
  border-bottom: lightgray 1px dotted;
}

.abovebelowkana {
  display: inline-block;
  text-align: left;
  color: #2b2b2b;
  font-size: 0.9rem;
  width: 16rem;
  margin-left: 0.5rem;
  border-bottom: lightgray 1px dotted;
}

.abovebelowkana::first-letter {
  color: #2b2b2b;
  font-size: 1.2rem;
  font-weight: 300;
  text-shadow: 1px 1px 2px silver;
}

.abovebelowafter {
  color: dimgray;
  font-size: 0.7rem;
}

.abovebelowname {
  display: inline-block;
  font-size: 1rem;
  text-align: left;
  margin-left: 0.5rem;
  width: 20rem;
  border-bottom: lightgray 1px dotted;
}

.abovebelow {
  display: inline-block;
  text-align: left;
  color: white;
  margin-left: 0.5rem;
  width: 30rem;
  border-bottom: lightgray 1px dotted;
}

.abovebelow:hover {
  color: slategrey;
}

.dtlabove {
  margin-left: 2rem;
  margin-top: 2rem;
  font-size: 2rem;
  font-style: oblique;
  font-family: "KouzanBrushFontSousyo", "HGSoeiKakugothicUB", cursive;
  color: #2b2b2b;
}

.dtlbelow {
  margin-left: 10rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-style: oblique;
  font-family: "KouzanBrushFontSousyo", "HGSoeiKakugothicUB", cursive;
  color: #2b2b2b;
}

.dtlkanaabove {
  display: inline-block;
  margin-left: 4rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 0.8rem;
  color: #43676b;
}

.dtlkanabelow {
  display: inline-block;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 0.8rem;
  color: #43676b;
}

.dtlauthor {
  margin-left: 4rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: #2b2b2b;
}

.dtlauthorkana {
  font-size: 0.4rem;
  text-decoration: none;
  color: dimgray;
}

.dtlmodern {
  margin-left: 2rem;
  max-width: 90%;
  border-top: 2px solid darkgray;
  border-left: 2px solid darkgray;
  border-bottom: 1px solid silver;
  border-right: 1px solid silver;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: whitesmoke;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.dtlfeeling {
  margin-left: 2rem;
  max-width: 90%;
  border-top: 2px solid darkgray;
  border-left: 2px solid darkgray;
  border-bottom: 1px solid silver;
  border-right: 1px solid silver;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: honeydew;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.dtlexplanation {
  display: block;
  margin-left: 2rem;
  max-width: 90%;
  border-top: 2px solid darkgray;
  border-left: 2px solid darkgray;
  border-bottom: 1px solid silver;
  border-right: 1px solid silver;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: azure;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.dtltextbold {
  font-size: 1.2em;
  font-weight: 800;
  color: #2b2b2b;
  margin-left: 1.2rem;
  margin-top: 0.5rem;
  display: inline-block;
}

.dtlref {
  font-size: 0.8em;
  font-weight: 400;
  color: royalblue;
  margin-left: 1.2rem;
  display: inline-block;
}

.dtlpicture {
  width: 18%;
  display: inline-block;
  vertical-align: top;
}

.dtledit {
  margin-left: 2rem;
  font-size: 1rem;
}
.dtlblock {
  max-width: 90%;
  margin: auto;
  text-align: center;
}

.dtlmovepage {
  width: 31%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-weight: 800;
  font-size: 1.2rem;
}

.challengefudaimg {
  background-color: white;
  text-align: center;
  margin: auto;
  width: 20%;
}

.challengecolorblock {
  text-align: center;
  margin: auto;
}

.challengecolor {
  display: inline-block;
  text-shadow: 1px 2px 3px #2b2b2b;
}

.simulation {
  font-family: "Times New Roman";
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 0rem;
  margin-top: 0rem;
  letter-spacing: 1px;
  text-shadow: 2px 2px 3px lightslategray;
}
input + #img {
  display: none;
}
#check {
  display: none;
}
input:checked + #img {
  display: block;
}
img {
  width: 100%;
}

.btnupdate {
  width: 10rem;
  margin: auto;
  text-align: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: darkgreen;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: "Times New Roman";
  color: springgreen;
  margin-bottom: 2rem;
}
.btnprogress {
  width: 100%;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0;
}
.btnbox {
  display: inline-block;
  margin-top: 0.2rem;
  text-align: right;
  width: 25%;
  /* border:1px red solid; */
}

.btndraw {
  font-family: "Times New Roman";
  padding: 0.2rem;
  text-align: center;
  background-color: #005243;
  border-top: solid 1px green;
  border-left: solid 1px green;
  border-right: solid 1px #2b2b2b;
  border-bottom: solid 1px #2b2b2b;
  font-weight: 800;
  font-size: 1rem;
  color: honeydew;
  width: 100%;
}

.btndrawLike {
  font-family: "Times New Roman";
  padding: 0.2rem;
  text-align: center;
  background-color: lavender;
  border-top: solid 1px silver;
  border-left: solid 1px silver;
  border-right: solid 1px slategray;
  border-bottom: solid 1px slategray;
  font-weight: 800;
  font-size: 1rem;
  color: blue;
  width: 90%;
}

.progressabcd {
  display: inline-block;
  text-align: left;
  width: 73%;
  /* border:1px blue solid; */
}

.tefuda {
  width: 88%;
  padding-left: 1em;
  padding-right: 0.1rem;
  height: 12.5rem;
  border-top: 2px solid darkgray;
  border-left: 2px solid darkgray;
  border-bottom: 1px solid silver;
  border-right: 1px solid lightgrey;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.tefudacard {
  text-align: center;
  margin: auto;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  padding-left: 0.1rem;
  padding-right: 0rem;
  border-bottom: 1px darkslategray solid;
  border-right: 1px darkslategray solid;
  border-top: 1px green solid;
  border-left: 1px darkgreen solid;
  background-color: #005243;
  color: honeydew;
  font-weight: 800;
  font-size: 1rem;
  width: 4rem;
}
.player {
  font-family: "Times New Roman", "Meiryo UI";
  width: 8rem;
  padding-left: 1rem;
}
.boseimgbox {
  text-align: center;
  margin-top: 1rem;
}

.boseautor {
  text-align: center;
  font-size: 0.8rem;
  color: #2b2b2b;
}
.bosebelow {
  text-align: center;
  font-size: 0.8rem;
  color: darkslategray;
}
.bosevictory {
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1.2rem;
  color: #2b2b2b;
  font-weight: 800;
}

.h1shadow{
  text-shadow: 2px 2px 2px #2b2b2b;
}
/* ===== 見出しのスタイル ===== */
h1 {
  /* テキストの色を青に設定 */
  color: #2b2b2b;
  /* テキストを中央揃え */
  text-align: center;
  /* フォントサイズを設定 */
  font-size: 2.2rem;
  /* 下に20pxの余白を設定 */
  margin-bottom: 0;
  /* フォントの太さを設定 */
  font-weight: 800;
  /* 文字間のスペースを設定 */
  letter-spacing: 1px;
  background-color: #640125;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-left: 1px solid crimson;
  border-right: 1px solid crimson;
  border-top: 1px solid orangered;
  border-bottom: 2px solid #2b2b2b;
}

/* ===== 見出しのスタイル ===== */
h2 {
  /* テキストの色を青に設定 */
  color: #2b2b2b;
  /* テキストを中央揃え */
  text-align: left;
  /* フォントサイズを設定 */
  font-size: 1.6rem;
  margin:auto;
  margin-bottom: 0.5rem;
  width: 98%;
  padding-top: 0.2rem;
  padding-bottom: 0.3rem;
  /* フォントの太さを設定 */
  font-weight: 800;
  /* 文字間のスペースを設定 */
  letter-spacing: 1px;
  text-shadow: 2px 3px 5px lightslategray;
}

/* ===== 見出しのスタイル ===== */
h3 {
  /* テキストの色を青に設定 */
  color: #2b2b2b;
  /* テキストを中央揃え */
  text-align: center;
  /* フォントサイズを設定 */
  font-size: 1.2rem;
  /* 下に20pxの余白を設定 */
  margin-bottom: 0;
  margin-top: 0;
  /* フォントの太さを設定 */
  font-weight: 800;
  /* 文字間のスペースを設定 */
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px lightslategray;
}

footer {
  background-color: #640125;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0rem;
}

img {
  max-width: 100%;
  height: auto; /* アスペクト比維持 */
}

/* ===== フォームのスタイル ===== */
form {
  /* フレックスボックスを使用して縦方向にアイテムを並べる */
  display: flex;
  flex-direction: column;
}

input[type="text"],
textarea {
  width: 100%; /* 親要素いっぱいに広げる */
  padding: 10px;
  box-sizing: border-box; /* パディングを含めた幅計算 */
  background-color: lavender;
}

p {
  margin-top: -0.5rem;
}

.progressbox {
  margin: auto;
  text-align: center;
}

progress {
  -webkit-appearance: none; /* プログレスバーのスタイルをリセット */
  -moz-appearance: none; /* プログレスバーのスタイルをリセット */
  background-color: #fff; /* プログレスバーの背景色/-moz- 用 */
  width: 100%;
  text-align: left;
  padding-left: 0;
}

::-webkit-progress-bar {
  background-color: lavender; /* プログレスバーの背景色/-webkit- 用 */
}
::-webkit-progress-value {
  background-color: green; /* プログレスバーの進捗部分色/-webkit- 用 */
}
::-moz-progress-bar {
  background-color: green; /* プログレスバーの進捗部分色/-moz- 用 */
}

/*################### BASE FROM #######################################*/

.textgold {
  color: #e6b422;
}
.textwhite {
  color: white;
}

.textbold {
  font-size: 1.2em;
  font-weight: 800;
  color: royalblue;
  margin-left: 1rem;
  margin-top: 1rem;
}

.textsmall {
  font-size: 0.9rem;
  font-weight: 400;
  color: dimgray;
  margin-left: 1rem;
  margin-top: 0.5rem;
}
.left2 {
  margin-left: 2rem;
}
.small8 {
  font-size: 0.8rem;
}
.small7 {
  font-size: 0.7rem;
}
.bottom1 {
  margin-bottom: 1rem;
}
.font2b {
  color: #2b2b2b;
}
.fontblue {
  color: blue;
}
.fontgray {
  color: slategray;
}
.fontred {
  color: crimson;
}
.fontpink {
  color: hotpink;
}
.fontyellow {
  color:#e6b422;
}
.fontgreen {
  color: green;
}
.fontorange {
  color: darkorange;
}

.font400 {
  font-weight: 400;
}

.font800 {
  font-weight: 800;
}

.backrose {
  background-color: mistyrose;
}
.backlavenderblush {
  background-color: lavenderblush;
}
.backyellow {
  background-color: lightyellow;
}
.backivory {
  background-color: ivory;
}
.backhoneydue {
  background-color: honeydew;
}
.backazure {
  background-color: azure;
}
.backlavender {
  background-color: lavender;
}
.backblack{
   background-color: #2b2b2b;
}

.paddingt2{
  padding-top:0.2rem;
}

.inlineblock{
  display: inline-block;
}
/*################### BASE TO #######################################*/

@media screen and (max-width: 768px) {
  /* ===== コンテナのスタイル ===== */
  .container {
    /* 背景色を白に設定 */
    background-color: #ffffff;
    /* 内側の余白を設定 */
    padding-top: 0.5rem;
    padding-left: 0.2rem;
    padding-bottom: 0.5rem;
    padding-right: 0.2rem;
    /* 角を丸くする */
    border-radius: 8px;
    /* 影を設定 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* 幅を100%に設定 */
    width: 100%;
    /* ボックスのサイズを境界ボックスに基づかせる */
    box-sizing: border-box;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
  }

  .left_container {
    display: block;
    width: 100%;
    padding-top: 1rem;
  }
  .center_container {
    display: none;
  }

  .right_container {
    display: block;
    width: 100%;
    padding-top: 1rem;
  }

  .fudablock {
    display: block;
    width: 90%;
  }
  /*.authorname {
    display: block;
  }

  .abovebelow {
    display: block;
  }*/

  .authorid {
    display: inline-block;
    text-align: center;
    margin-left: 0.2rem;
    border-bottom: whitesmoke 1px dotted;
  }

  .authorkana {
    display: inline-block;
    text-align: left;
    color: dimgray;
    font-size: 0.6rem;
    width: 17rem;
    margin-left: 0.2rem;
    border-bottom: whitesmoke 1px dotted;
  }

  .authorkana::first-letter {
    color: dimgray;
    font-size: 0.8rem;
    font-weight: 300;
    text-shadow: 1px 1px 2px silver;
  }

  .authorname {
    display: block;
    font-size: 1rem;
    text-align: left;
    margin-left: 0.5rem;
    width: 16rem;
    border-bottom: whitesmoke 1px dotted;
  }

  .abovebelowkana {
    display: inline-block;
    color: dimgray;
    font-size: 0.8rem;
    width: 16rem;
    margin-left: 0.5rem;
    border-bottom: whitesmoke 1px dotted;
  }

  .abovebelowkana::first-letter {
    color: dimgray;
    font-size: 1rem;
    font-weight: 300;
    text-shadow: 1px 1px 2px silver;
  }
 
  .abovebelowafter {
    color: darkgray;
    font-size: 0.6rem;
  }

  .abovebelowname {
    display: block;
    font-size: 1rem;
    text-align: left;
    margin-left: 0.5rem;
    width: 20rem;
    border-bottom: whitesmoke 1px dotted;
  }

  .abovebelow {
    display: inline-block;
    text-align: left;
    color: white;
    margin-left: 0.5rem;
    width: 30rem;
    border-bottom: whitesmoke 1px dotted;
  }

  .dtlpicture {
    display: block;
    width: 80%;
    text-align: center;
    margin: auto;
  }

  .dtlabove {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-style: oblique;
    font-family: "KouzanBrushFontSousyo", "HGSoeiKakugothicUB", cursive;
    color: #2b2b2b;
  }

  .dtlbelow {
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-style: oblique;
    font-family: "KouzanBrushFontSousyo", "HGSoeiKakugothicUB", cursive;
    color: #2b2b2b;
  }

  .dtlmodern {
    margin-left: 0rem;
    max-width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .dtlfeeling {
    margin-left: 0rem;
    max-width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .dtlexplanation {
    margin-left: 0rem;
    max-width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .dtlkana {
    margin-left: 0rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: #43676b;
  }

  .dtlkanaabove {
    display: block;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
  }

  .dtlkanabelow {
    display: block;
    margin-left: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .dtlauthor {
    margin-left: 0rem;
    font-size: 0.9rem;
    text-decoration: none;
  }
  .dtlmovepage {
    width: 32%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-weight: 800;
    font-size: 0.8rem;
  }

  .challengefudaimg {
    width: 50%;
  }

  .simulation {
    display: none;
  }
  /* ===== 見出しのスタイル ===== */
  h1 {
    /* テキストの色を青に設定 */
    color: #2b2b2b;
    /* テキストを中央揃え */
    text-align: center;
    /* フォントサイズを設定 */
    font-size: 1.5em;
    /* 下に20pxの余白を設定 */
    margin-bottom: 0;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* 文字間のスペースを設定 */
    letter-spacing: 1px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
  
  h2 {
    font-size: 1.4rem;
    /* 下に20pxの余白を設定 */
    margin-bottom: 0.5rem;
    margin-top: 0;
    /* フォントの太さを設定 */
    font-weight: 800;
    /* 文字間のスペースを設定 */
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    letter-spacing: 1px;
    text-shadow: 2px 3px 5px lightslategray;
  }
}