@charset "UTF-8";
.banner-i {
  width: 100%;
  display: block;
}

.line0 {
  position: absolute;
  left: 0;
  bottom: 0.1%;
  margin: 0;
}

.line1 {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  z-index: 1;
}

.word {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 60%;
}

.word2 {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 55%;
}

.head {
  position: absolute;
  bottom: 0;
  right: 5%;
  width: 30%;
  animation-delay: 1s !important;
}

.sign {
  position: absolute;
  bottom: 3%;
  right: 25%;
  width: 15%;
}

.word-box {
  margin: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  letter-spacing: 0.1em;
}

.word-box2 {
  margin-top: -3%;
}

.words {
  font-size: 20px;
  letter-spacing: 0.1em;
}

.words-center {
  text-align: center;
  width: 100%;
  margin-bottom: 15%;
}

.title {
  text-align: center;
  color: #006237;
  margin-bottom: 5%;
}
.title h2 {
  font-size: 3vw;
  letter-spacing: 0.2em;
  /*
  span {
      background: linear-gradient(transparent 70%, #ffff00a8 0%);
  }*/
}
.title h3 {
  font-size: 2vw;
  letter-spacing: 0.2em;
}

.card-box {
  width: 100%;
  margin: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.card-box .t-card {
  width: 30%;
  height: 30%;
  min-width: 300px;
  margin: 0 auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4%;
}
.card-box .t2-card {
  width: 70%;
  height: 30%;
  min-width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10%;
}

.b-card {
  width: 50%;
}

.title-card {
  width: 100%;
}
.title-card h2 {
  font-size: 5vw;
}
.title-card h2 span {
  background: none;
}
.title-card .yellow-l {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  border-bottom: solid 8px rgba(255, 255, 0, 0.6588235294);
}

.ye-l2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  border-bottom: solid 8px rgba(255, 255, 0, 0.6588235294);
  margin-bottom: 1%;
}

.t-down {
  margin-top: 0%;
}

.ribbon {
  position: absolute;
  top: 7%;
  left: 0%;
  width: 77%;
}

.rate {
  position: absolute;
  top: 2%;
  right: 5%;
  width: 13%;
}

.high-name {
  position: absolute;
  top: 35%;
  left: 5%;
  width: 90%;
  font-size: 4vw;
  font-family: "HGS明朝E", "Times New Roman";
  line-height: 170%;
}

.high-name0 {
  color: white;
  font-weight: 800;
  -webkit-text-stroke: 1.2vw black;
  text-shadow: 0.7vw 0.7vw 0.7vw rgba(0, 0, 0, 0.652);
}

.high-name1 {
  color: white;
  font-weight: 800;
  -webkit-text-stroke: 1vw #fff;
}

.high-name2 {
  color: rgb(255, 0, 76);
  font-weight: 300;
}

.cong {
  margin-top: 3%;
  -webkit-text-stroke: 0;
  font-size: 2vw;
  text-align: center;
  font-family: "HGS明朝E", "Times New Roman" !important;
  text-shadow: none;
  color: rgb(252, 121, 143);
}

.high-s {
  font-size: 3.5vw;
}

.h-move {
  margin-left: 5%;
}

.sakura {
  margin-bottom: 5%;
}

.pass-card {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 100%;
  border: solid 10px #006237;
  border-radius: 30px;
  padding: 5%;
  padding-top: 7%;
  padding-bottom: 7%;
}
.pass-card h4 {
  text-align: center;
  color: #006237;
  font-size: 1.2vw;
}
.pass-card h5 {
  text-align: center;
  color: #006237;
  font-size: 2vw;
  margin-top: 3%;
  margin-bottom: 5%;
  letter-spacing: 0.2em;
}
.pass-card .text-b {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.pass-card .text-b p {
  text-align: center;
  color: #006237;
  font-size: 2.7vw;
  margin: 1%;
  line-height: 200%;
  letter-spacing: 0.2em;
  font-weight: 800;
}

.intro {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 98, 55, 0.7450980392);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

/*
table {
    @include center;
    width: 80%;
    border: solid 5px $green;
    background-color: white;
    color: $green;
    padding: 2%;
    font-size: 2.5vw;


    th {
        width: 21%;
        padding: 2%;
        //padding-bottom: 5%;
        font-weight: 800;
        vertical-align: text-bottom;
    }

    td {
        font-weight: 800;
        padding: 2%;
    }
}*/
.table-box {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
}

.card-open {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

.close {
  display: none;
}

#a1 {
  display: block;
}

#a2 {
  display: block;
}

#a3 {
  display: block;
}

.batsu {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 30px;
  height: 30px;
  margin-top: 1%;
  background-color: white;
  padding: 20px;
  border: solid #333 5px;
  border-radius: 50%;
}

.batsu::before,
.batsu::after {
  /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  /* 棒の幅（太さ） */
  height: 30px;
  /* 棒の高さ */
  background: #333;
  border-radius: 2.5px;
}

.batsu::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.batsu::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/*========= SVG操作手書き風にするためのCSS ===============*/
#mask .cls-1 {
  position: absolute;
  fill: none;
  stroke: #fff;
  stroke-width: 70;
  /*線の太さを指定する*/
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* 線の間隔を指定する */
  stroke-dashoffset: 1500;
  /* 線の位置を指定する */
}

svg {
  position: relative;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 700px) {
  .card-box .t2-card {
    width: 91%;
  }
  .word {
    top: 30%;
    width: 65%;
    left: 2%;
  }
  .word2 {
    left: 6%;
    width: 60%;
  }
  .banner-i {
    width: 200%;
    transform: translate(-40%, 0);
  }
  .banner-i2 {
    width: 100%;
    transform: translate(0%, 0);
  }
  .line0 {
    bottom: 0%;
  }
  .head {
    bottom: 0%;
    width: 55%;
    right: -4%;
  }
  .sign {
    bottom: 3%;
    right: 35%;
    width: 30%;
  }
  p.words {
    font-size: 15px;
  }
  .title h2 span {
    font-size: 20px;
  }
  .title-card {
    width: 100%;
  }
  .title-card h2 span {
    font-size: 25px;
  }
  h3 {
    font-size: 15px !important;
  }
  .card-box {
    display: block;
  }
  .card-box .t-card {
    width: 90%;
    margin-bottom: 10%;
  }
  .card-box .b-card {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .rate {
    width: 15%;
    right: 2%;
  }
  .pass-card {
    width: 90%;
    border: solid 5px #006237;
    border-radius: 30px;
    padding: 5%;
    padding-top: 10%;
    padding-bottom: 10%;
  }
  .pass-card h4 {
    font-size: 13px;
  }
  .pass-card h5 {
    font-size: 17px;
  }
  .pass-card .text-b p {
    font-size: 5vw;
  }
  /*
  table {
      width: 95%;
      font-size: 17px;

      th {
          width: 25%;
      }
  }*/
  .card-open {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
  }
  .high-name {
    top: 25%;
    font-size: 4vw;
  }
  .cong {
    font-size: 3vw;
  }
  .h-move1 {
    margin-left: 7%;
  }
  .h-move2 {
    margin-left: 14%;
  }
  .h-move3 {
    margin-left: 21%;
  }
  .word-box {
    width: 90%;
  }
  .title55 {
    font-size: 17px !important;
  }
  .ye-l2 {
    border-bottom: solid 5px rgba(255, 255, 0, 0.6588235294);
    width: 50%;
  }
}/*# sourceMappingURL=guide.css.map */