body{font-family: Yu Gothic Medium, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; 
  color: #333;
}
.kaigyou{
  display: block;
}
img{
  display: block;
}
p{
  font-family: 'Shippori Mincho B1', serif;
}
li{
  font-family: 'Shippori Mincho B1', serif;
}



@media screen and ( min-width:800px ){
  .all-wrap{
    width: 800px;
    margin:0px auto;
    padding:0px;
    background-color: rgb(255 255 255 / 68%);
  }
  
  .title-wrap{
    width: 800px;
    position: relative;
    margin: 0px auto;
    filter: initial;
    position: relative;
    padding: 0;
    background-color: black;
  }

  h1{
    font-family: 'Shippori Mincho B1', serif;
    color: rgb(255, 255, 255);
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin: auto;
    padding: 6px 0;
    }

  .text1{
    font-weight: bold;
    color: #2d7be3;
    margin: 0 auto;
    max-width: 80%;
    letter-spacing: 0.03em;
    font-size: 20px;
    line-height: 28px;
  }
  
  .text2{
     margin: 10px auto;
    max-width: 80%;
    letter-spacing: 0.04em;
    font-size: 16px;
    line-height: 30px;
  }

  .text3{
    font-weight: bold;
    /* color: #001aff; */
    margin: 0 auto;
    max-width: 80%;
    letter-spacing: 0.03em;
    font-size: 19px;
    line-height: 28px;
    font-weight: bold;
    text-align: center;
  }

  .fv{
    width: 100%;
  }

  .hame{
    width: 65%;
    margin: 15px auto;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 20%);
  }

  .hame2{
    width: 65%;
    margin: 15px auto;
  }


  img.emoji {
    color: #a5d85d;
    display: inline;
    border: none;
    box-shadow: none;
    height: 1em;
    width: 1em !important;
    margin: 0 .07em;
    vertical-align: -0.1em;
    background: none;
    padding: 0;
  }


  .simple-box1 {
    width: 80%;
    padding: 5px 15px;
    box-sizing: border-box;
    border: 10px solid #def1f9;
    background-color: #DEF1F8;
    border-radius: 4px;
    margin: 20px auto;
    text-align: center;
  }
  
  .simple-box2 {
    width: 80%;
    margin: 20px auto;
    padding: 10px 25px;
    box-sizing: border-box;
    border: 3px dashed #a5d85d;
    border-radius: 4px;
    position: relative;
    list-style: none;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 0.04em;
  }
  
  .simple-box2 li{
    padding: 5px;
    color: #ff7100;
  }
  .simple-box2 li::before{
    background-color: #a5d85d;
    content:  "";/* 空の要素作成 */
    width:  15px;
    height:  15px;
    display:  inline-block;
    border-radius:  50%;/* 要素を丸くする */
    position:  relative;/* 位置調整 */
    top: -1px;/* 位置調整 */
    margin-right: 10px;/* 余白指定 */
  }
  
  .simple-box3 {
    width: 80%;
    padding: 15px 25px;
    border: 3px double #b5e28a;
    border-radius: 4px;
    margin: 20px auto;
  }

.simple-box4 {
  width: 80%;
  margin: 20px auto;
  padding: 10px 25px;
  list-style: none;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.simple-box4 li{
  margin-bottom: 0.2rem;
  padding: 5px;
  background-color: #ffffff;
  font-weight: bold;
  font-size: 19px;
}

.simple-box4 li::before{
  margin-right: 0.5rem;
  border-left: 10px solid;
  content: '';
}



.simple-box5 {
  margin: 1.5rem auto;
  width: 60%;
  position: relative;
  padding: 1rem;
  background-image: linear-gradient(-135deg, transparent 10px, #c1e9f9 10px);
  color: #212121;
  overflow: hidden;
  text-align: center;
}
.simple-box5 li{
  list-style: none;
  line-height: 2;
  font-size: 18px;
}
.simple-box5::before {
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  width: 15px;
  height: 15px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
}

.simple-box5 p {
  color: #292929;
  line-height: 1.5;
}


.simple-box6 {
  position: relative;
  padding: 2rem;
  border-radius: 10px;
  border: 3px solid #333;
  box-shadow: 5px 5px 0 #333;
  color: #333;
}


.simole-box6 p {
  line-height: 1.5;
}

.simple-box7{
  width: 80%;
  margin: 10px auto;
  position: relative;
  list-style-type: none;
  padding: 1rem 1rem 1rem 2rem;
  border: 1px solid #003dcb;
  background-color: #ffffff;
  color: #003dcb;
  font-weight: bold;
}

.simple-box7 li {
  padding: 0.5rem 0;
  line-height: 1;
}

.simple-box7 li::before {
  position: absolute;
  left: 1rem;
  padding-left: 0.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f105';
}
.simple-box8{
    position: relative;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.simple-box8::before,
.simple-box8::after {
    position: absolute;
    top: 0.8rem;
    height: 1.8rem;
    content: '';
}

.simple-box8::before {
    border-left: solid 3px;
    left: 0;
    transform: rotate(-30deg);
}

.simple-box8::after {
    border-right: solid 3px;
    right: 0;
    transform: rotate(30deg);

}
.simple-box9{
  width: 80%;
  background-color: white;
  margin: 1.5rem auto;
  padding: 1rem;
  color: #212121;
  text-align: center;
  box-shadow: 5px 5px 0px 0 rgb(231 231 231);
}
/* 
h2{
  font-size: 1.65rem;
  line-height: 2rem;
  padding: 15px;
  padding-bottom: 16px;
  margin-top: 2.6rem;
  margin-bottom: 1.6rem;
  background-color: #a5d85d;
  color: white;
  text-shadow: 1px 1px 1px #86b840, -1px 1px 1px #86b840, 1px -1px 1px #86b840, -1px -1px 1px #86b840, 1px 0px 1px #86b840, 0px 1px 1px #86b840, -1px 0px 1px #86b840, 0px -1px 1px #86b840;
} */

h2 {
  margin-bottom: 0.2rem;
  padding: 0.6rem;
  color: #333;
  border: 1.5px solid;
  /* border-radius: 2rem; */
  font-size: 26px;
  text-align: center;
}


.frame{
  position: relative;
  width: 90%;
  margin: 10px auto;
  /* padding-bottom: 10px; */
  padding: 1rem 1rem 1.2rem;
  border-bottom: 4px solid #333;
}

.frame p{
  color: #333;
  line-height: 1.5;
}

.frame img{
  width: 80%;
  margin: 8px auto;
  padding: 35px;
  padding-bottom: 0px;
}


.frame:before {
  position: absolute;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
  top: 100%;
  border: 15px solid;
  border-color: transparent;
  border-top-color: #333;
}




/* h3 {
  width: 90%;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  position: relative;
  margin-bottom: 0.2rem;
  padding: 0 0.7rem;
  border: 0.3rem solid;
  color: white;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #406d86, -1px 1px 1px #406d86, 1px -1px 1px #406d86, -1px -1px 1px #406d86, 1px 0px 1px #406d86, 0px 1px 1px #406d86, -1px 0px 1px #406d86, 0px -1px 1px #406d86;
}

h3:before {
  position: absolute;
  top: -0.6rem;
  left: -0.6rem;
  bottom: -0.6rem;
  right: -0.6rem;
  border: 1px solid;
  content: '';
} */

h3 {
  width: 20%;
  margin-bottom: 0.2rem;
  padding: 0 0.7rem;
  background-color: #212121;
  color: white;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}




.big{
  font-size: 18px;
  font-weight: bold;
}
.superbig{
  font-size: 24px;
  font-weight: bold;
}
.marker{
  font-weight: bold;
  background:linear-gradient(transparent 60%, rgb(255 253 162) 60%);
}
.fullmarker{
  background: #ffdf0094;
  display: inline-block;
  padding: 3px 5px;
}
.underline-red {
  border-bottom: double;
  border-color: #FF0000;
  border-width: 3px;
  color: #FF0000;
  font-size: 20px;
  font-weight: bold;
}
.markerLightblue {
    text-shadow: 0 3px 5px rgba(163, 226, 252, .6);  /* 微妙ににじんだ感じを出すため（さほど明示的ではない） */
    line-height: normal;  /* このnormalの指定が、可変文字サイズ取得やクロスブラウザのために重要！ */
    font-weight: bold;
    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(163, 226, 252, .6) 0);
  }
  .markerLightblue::before, .markerLightblue::after {
    display: inline-block;  /* 高さを持たせるためにインラインブロックに */
    content: "\A";     /* 改行を入れて高さを発生させる */
    white-space: pre;  /* 改行を入れて高さを発生させる */
    width: 0.41em; /* この数字が出てくる理由は後述 */
    clip-path: inset(1px 0); /* はみ出し部分をトリミング */
    transform-origin: bottom left;  /* トランスフォームの起点を左下隅に。重要！ */
    transform: skewX(-20deg) translateX(-0.41em);  /* 「平行四辺形」の幅の分ずらす */
    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(163, 226, 252, .6) 0); /* 本要素と同じ指定 */
  }
  .markerLightblue::after {
    filter: blur(.03em);  /* 終端のにじみの演出 */
    transform: skewX(-20deg); /* マーカー右端の平行四辺形の移動は不要 */
    background: linear-gradient(rgba(0,0,0,0) 60%, rgba(163, 226, 252, .95) 0); /* 背景色の透明度を少し濃い目に */
  }
  .markerLightyellow {
    text-shadow: rgb(252 230 163 / 60%);  /* 微妙ににじんだ感じを出すため（さほど明示的ではない） */
    line-height: normal;  /* このnormalの指定が、可変文字サイズ取得やクロスブラウザのために重要！ */
    font-weight: bold;
    background: linear-gradient(rgba(0,0,0,0) 60%, rgb(252 244 163 / 60%) 0);
  }
  .markerLightyellow::before, .markerLightyellow::after {
    display: inline-block;  /* 高さを持たせるためにインラインブロックに */
    content: "\A";     /* 改行を入れて高さを発生させる */
    white-space: pre;  /* 改行を入れて高さを発生させる */
    width: 0.41em; /* この数字が出てくる理由は後述 */
    clip-path: inset(1px 0); /* はみ出し部分をトリミング */
    transform-origin: bottom left;  /* トランスフォームの起点を左下隅に。重要！ */
    transform: skewX(-20deg) translateX(-0.41em);  /* 「平行四辺形」の幅の分ずらす */
    background: linear-gradient(rgba(0,0,0,0) 60%, rgb(240 231 131 / 60%) 0); /* 本要素と同じ指定 */
  }
  .markerLightyellow::after {
    filter: blur(.03em);  /* 終端のにじみの演出 */
    transform: skewX(-20deg); /* マーカー右端の平行四辺形の移動は不要 */
    background: linear-gradient(rgba(0,0,0,0) 60%, rgb(248 231 166 / 95%) 0); /* 背景色の透明度を少し濃い目に */
  }

.blink {
  animation: blinkAnime 0.7s infinite alternate;
}
@keyframes blinkAnime{
  0% { color: #ffa000 }
  100% { color: #ff5e00 }
}
.red{
  color: #ff0000;
  font-weight: bold;
}
.yellow{
  color: #e2fd02;
}
.blue{
  color: #003dcb;
}
/* .pink{
  color: #fa45ff;
} */
.shadow{
  font-size: 24px;
  text-align: center;
  line-height: 0.95em;
  font-weight: bold;
  color: #ffa000!important;
  text-shadow: 0.02em 0.02em 0.02em rgb(0 0 0);
}




.btn{
  width: initial;
  margin: initial; 
  padding: initial; 
  float: initial;
  font-size: initial; 
  background: initial; 
  text-decoration: initial;
  width: 630px;margin:15px auto; 
  transition: all 0.3s ease 0s;
}
.btn img{width: 100%;
}
.btn:hover{ width: 640px;
}


}



























@media screen and ( max-width:799px ){
 
  .all-wrap{
    width: 100%;
    margin:0px auto;
    padding:5px;
    background-color: #fff;
  }
  
  .title-wrap{
    width: 100%;
    position: relative;
    margin: 0px auto;
    filter: initial;
    position: relative;
    padding: 0;
    background-color: black;
  }

  h1{
    font-family: 'Shippori Mincho B1', serif;
    padding: 0.5rem;
    color: rgb(255, 255, 255);
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    }

  .text1{
    font-weight: bold;
    color: #2d7be3;
    margin: 0 auto;
    max-width: 100%;
    letter-spacing: 0.04em;
    font-size: 17px;
    line-height: 25px;
  }

  .text2{
    margin: 5px auto;
    max-width: 90%;
    letter-spacing: 0.04em;
    font-size: 16px;
    line-height: 25px;
  }
  .text3{
    font-weight: bold;
    margin: 0 auto;
    max-width: 100%;
    letter-spacing: 0.04em;
    font-size: 17px;
    line-height: 25px;
    text-align: center;
  }
  .fv{
    width: 100%;
  }

  .hame{
    width: 90%;
    margin: 10px auto;
  }

  .hame2{
    width: 90%;
    margin: 10px auto;
  }

  img.emoji {
    color: #a5d85d;
    display: inline;
    border: none;
    box-shadow: none;
    height: 1em;
    width: 1em !important;
    margin: 0 .07em;
    vertical-align: -0.1em;
    background: none;
    padding: 0;
  }

.simple-box1 {
  width: 90%;
  /* padding: 5px 15px; */
  box-sizing: border-box;
  border: 10px solid #def1f9;
  background-color: #DEF1F8;
  border-radius: 4px;
  margin: 5px auto;
  text-align: center;
}

.simple-box2 {
  width: 90%;
  margin: 5px auto;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 3px dashed #a5d85d;
  border-radius: 4px;
  position: relative;
  list-style: none;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.simple-box2 li{
  padding: 5px;
  color: #ff7100;
}
.simple-box2 li::before{
  background-color: #a5d85d;
  content:  "";/* 空の要素作成 */
  width:  15px;
  height:  15px;
  display:  inline-block;
  border-radius:  50%;/* 要素を丸くする */
  position:  relative;/* 位置調整 */
  top: -1px;/* 位置調整 */
  margin-right: 10px;/* 余白指定 */
}

.simple-box3 {
  width: 80%;
  padding: 5px 10px;
  border: 3px double #b5e28a;
  border-radius: 4px;
  margin: 5px auto;
}
.simple-box4 {
  width: 80%;
  margin: 20px auto;
  padding: 10px 25px;
  list-style: none;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.simple-box4 li{
  margin-bottom: 0.2rem;
  padding: 5px;
  background-color: #ffffff;
  font-weight: bold;
  font-size: 19px;
}

.simple-box4 li::before{
  margin-right: 0.5rem;
  border-left: 10px solid;
  content: '';
}



.simple-box5 {
  margin: 1rem auto;
  width: 100%;
  position: relative;
  padding: 0.5rem;
  background-image: linear-gradient(-135deg, transparent 10px, #c1e9f9 10px);
  color: #212121;
  overflow: hidden;
  text-align: center;
}
.simple-box5 li{
  list-style: none;
  line-height: 2;
  font-size: 16px;
}
.simple-box5::before {
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  width: 15px;
  height: 15px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
}

.simple-box5 p {
  color: #292929;
  line-height: 1.5;
}


.simple-box6 {
  position: relative;
  padding: 2rem;
  border-radius: 10px;
  border: 3px solid #333;
  box-shadow: 5px 5px 0 #333;
  color: #333;
}


.simole-box6 p {
  line-height: 1.5;
}

.simple-box7{
  width: 90%;
  margin: 10px auto;
  position: relative;
  list-style-type: none;
  padding: 1rem 1rem 1rem 2rem;
  border: 1px solid #003dcb;
  background-color: #ffffff;
  color: #003dcb;
  font-weight: bold;
}

.simple-box7 li {
  padding: 0.5rem 0;
  line-height: 1;
}

.simple-box7 li::before {
  position: absolute;
  left: 1rem;
  padding-left: 0.2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f105';
}
.simple-box8{
    position: relative;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.simple-box8::before,
.simple-box8::after {
    position: absolute;
    top: 0.8rem;
    height: 1.8rem;
    content: '';
}

.simple-box8::before {
    border-left: solid 3px;
    left: 0;
    transform: rotate(-30deg);
}

.simple-box8::after {
    border-right: solid 3px;
    right: 0;
    transform: rotate(30deg);

}
.simple-box9{
  width: 90%;
  background-color: white;
  margin: 1.5rem auto;
  padding: 0.5rem;
  color: #212121;
  text-align: center;
  box-shadow: 5px 5px 0px 0 rgb(231 231 231);
}


/* 

h2{
  padding: 0.4em 0.5em;
  margin: 2em auto 0.5em;
  font-size: 19px;
  line-height: 25px;
  background-color: #a5d85d;
  color: white;
  text-shadow: 1px 1px 1px #86b840, -1px 1px 1px #86b840, 1px -1px 1px #86b840, -1px -1px 1px #86b840, 1px 0px 1px #86b840, 0px 1px 1px #86b840, -1px 0px 1px #86b840, 0px -1px 1px #86b840;
} */

h2 {
  margin: 2em auto 0.5em;
  padding: 0.4em 0.5em;
  color: #333;
  border: 1.5px solid;
  font-size: 19px;
  text-align: center;
  line-height: 25px;
}


.frame{
  width: 100%;
  margin: 10px auto;
  padding: 1rem 1rem 1.2rem;
  background-color: #eeeeee;
  position: relative;
  border-bottom: 4px solid #333;
}

.frame p{
  color: #333;
  line-height: 1.5;
}

.frame img{
  width: 80%;
  margin: 10px auto;
  padding: 15px;
  padding-bottom: 0px;
}
.frame:before {
  position: absolute;
  left: 40%;
  content: "";
  height: 0;
  width: 0;
  top: 100%;
  border: 15px solid;
  border-color: transparent;
  border-top-color: #333;
}

/* h3 {
  width: 90%;
  margin: 0 auto;
  position: absolute;
  top: 12px;
  position: relative;
  padding: 0 0.7rem;
  border: 0.3rem solid;
  color: white;
  font-size: 17px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #406d86, -1px 1px 1px #406d86, 1px -1px 1px #406d86, -1px -1px 1px #406d86, 1px 0px 1px #406d86, 0px 1px 1px #406d86, -1px 0px 1px #406d86, 0px -1px 1px #406d86;
}

h3:before {
  position: absolute;
  top: -0.6rem;
  left: -0.6rem;
  bottom: -0.6rem;
  right: -0.6rem;
  border: 1px solid;
  content: '';
} */
h3 {
  width: 40%;
  margin-bottom: 0.2rem;
  padding: 0 0.7rem;
  background-color: #212121;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.big{
  font-size: 18px;
  font-weight: bold;
}
.superbig{
  font-size: 19px;
  font-weight: bold;
}
.small{
  font-size: 13px;
}
.marker{
  font-weight: bold;
  background:linear-gradient(transparent 60%, rgb(255 227 0 / 58%) 60%);
}
.fullmarker{
  background: #ffdf0094;
  display: inline-block;
  padding: 3px 5px;
}
.underline-red {
  border-bottom: double;
  border-color: #FF0000;
  border-width: 3px;
  color: #FF0000;
  font-size: 20px;
  font-weight: bold;
  line-height: 38px;
}
.markerLightblue {
  text-shadow: 0 3px 5px rgba(163, 226, 252, .6);  /* 微妙ににじんだ感じを出すため（さほど明示的ではない） */
  line-height: normal;  /* このnormalの指定が、可変文字サイズ取得やクロスブラウザのために重要！ */
  font-weight: bold;
  background: linear-gradient(rgba(0,0,0,0) 60%, rgba(163, 226, 252, .6) 0);
  font-size: 30px;
}
.markerLightblue::before, .markerLightblue::after {
  display: inline-block;
  content: "\A";
  white-space: pre;
  width: 0.3em;
  clip-path: inset(1px 0);
  transform-origin: bottom left;
  transform: skewX(-20deg) translateX(-0.3em);
  background: linear-gradient(rgba(0,0,0,0) 60%, rgba(163, 226, 252, .6) 0);
}
.markerLightblue::after {
  filter: blur(.03em);  /* 終端のにじみの演出 */
  transform: skewX(-20deg); /* マーカー右端の平行四辺形の移動は不要 */
  background: linear-gradient(rgba(0,0,0,0) 60%, rgba(163, 226, 252, .95) 0); /* 背景色の透明度を少し濃い目に */
}
.markerLightyellow {
  text-shadow: rgb(252 230 163 / 60%);  /* 微妙ににじんだ感じを出すため（さほど明示的ではない） */
  line-height: normal;  /* このnormalの指定が、可変文字サイズ取得やクロスブラウザのために重要！ */
  font-weight: bold;
  background: linear-gradient(rgba(0,0,0,0) 60%, rgb(252 244 163 / 60%) 0);
}
.markerLightyellow::before, .markerLightyellow::after {
  display: inline-block;  /* 高さを持たせるためにインラインブロックに */
  content: "\A";     /* 改行を入れて高さを発生させる */
  white-space: pre;  /* 改行を入れて高さを発生させる */
  width: 0.41em; /* この数字が出てくる理由は後述 */
  clip-path: inset(1px 0); /* はみ出し部分をトリミング */
  transform-origin: bottom left;  /* トランスフォームの起点を左下隅に。重要！ */
  transform: skewX(-20deg) translateX(-0.41em);  /* 「平行四辺形」の幅の分ずらす */
  background: linear-gradient(rgba(0,0,0,0) 60%, rgb(240 231 131 / 60%) 0); /* 本要素と同じ指定 */
}
.markerLightyellow::after {
  filter: blur(.03em);  /* 終端のにじみの演出 */
  transform: skewX(-20deg); /* マーカー右端の平行四辺形の移動は不要 */
  background: linear-gradient(rgba(0,0,0,0) 60%, rgb(248 231 166 / 95%) 0); /* 背景色の透明度を少し濃い目に */
}
.blink {
  animation: blinkAnime 0.7s infinite alternate;
}
@keyframes blinkAnime{
  0% { color: #ffa000 }
  100% { color: #ff5e00 }
}
.red{
  color: #f23131;
  font-weight: bold;
}
.yellow{
  color: #e2fd02;
}
.blue{
  color: #003dcb;
}
/* .pink{
  color: #fa45ff;
} */
.shadow{
  font-size: 24px;
  text-align: center;
  line-height: 0.95em;
  font-weight: bold;
  color: #ffa000!important;
  text-shadow: 0.02em 0.02em 0.02em rgb(0 0 0);
}

.btn{width: initial;
  margin: initial; 
  padding: initial; 
  float: initial;
  font-size: initial; 
  background: initial; 
  text-decoration: initial;
  width: 94%;
  margin:0px auto;
  padding: 10px 0;
}

  .btn img{
  width: 100%;
}


 
}