@charset "UTF-8";

/*
  リセットcss
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}
a{text-decoration: none;
display: block;
}

ul {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

 html {
  font-size: 62.5%; /* -> 10px; */
}

body{

  /*background-color: #ffeded;
  background-image:
    radial-gradient(#f9ffc9 20%, transparent 20%),
    radial-gradient(#ffa481 20%, transparent 20%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;*/
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-size: 1.4em; /* -> 14px; */
}
div#content {
  width: 1000px;
  margin: 0 auto;
}
/*ここから*/

html {
  font-size: 62.5%; /* -> 10px; */
}
p.topm {
  font-size: 0.8rem;
  text-align: left;
  margin-top: 2%;
  margin-bottom: 0;
}
h1{
  text-align: center;
  margin: 3% 0;
  font-size: 3.2rem;
}
p{
  font-size: 2.6rem;
}

.mov {
  margin: 0 0 5%;
}
 
span.suki {
  display: none;
}
img{
  margin-bottom: 5%;
}
.blue {
  color: #000;
  background: #98ecff;
}

.puru {
  padding: 0 2.66666%;
  animation: btHop .5s ease infinite alternate;
}
@keyframes btHop {
  0% {
   transform:scale(.9,.9) translateY(0)
  }
  100% {
   transform:scale(1,1) translateY(-1rem)
  }
 }
/*.shiny-btn {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /*line-height: 40px;*/
 /* text-decoration: none;
  overflow: hidden;
}
.shiny-btn:hover {
  text-decoration: none;
  color: #fff;
}
.shiny-btn::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 45px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn 3s ease-in-out infinite;
}


@keyframes shiny-btn {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}*/
span.undred{
text-decoration:underline 5px;/*下線を引く*/
text-decoration-color:#FF0000;/*下線を赤色*/}

p.te_lin {
  text-align: right;
  font-size: 0.8rem;
}

span.big{
  font-size: 2rem;
}
span.small {
  font-size: smaller;
}

span.pink {
  background: #ffc8df;
  padding: 3px;
}
.texare {
  width: 80%;
  margin: 0 auto 6%;
  background: #fffdbf;
  text-align: left;
  padding: 2%;
  box-sizing: border-box;
  border-radius: 2vw;
}
.ao {
  color: #00a6ff;
}

.yel {
  background: #fff7af;
  padding: 2px;
}

span.red{
  background: #ffa494;
  padding: 2px;
  color: #000;
}
span.gree {
  background: #98ecff;
  padding: 2px;
}
span.undgre{
text-decoration:underline 5px;/*下線を引く*/
text-decoration-color:#00f7ff;/*下線を赤色*/
}

span.namred {
  text-decoration: underline wavy #FF0000;
}

span.bigp {
  font-size: 1.7rem;
}

span.undpin{
  text-decoration:underline 5px;/*下線を引く*/
  text-decoration-color:#ff84e4;/*下線を赤色*/}
  
span.emela {
    color: #00d3c7;
}

.bold {
  font-weight: bold;
}
.unli{
text-decoration:underline 2px;
}
span.mred{
  color: #FF0000;
}

.article h4 {
  border-top: none;
  border-bottom: double 10px #FFC778;
  font-size: 1.7rem;
}
section.comment {
  display: inline-flex;
  justify-content: space-between;
}

p.mida{
  font-weight: bold;
  border-left: 10px solid #ff84e4;
  border-bottom: 2px solid #ff84e4;
  padding: 0.25em 0 0.3em 0.5em;
    font-size: 1.4rem!important;
    text-align: left;
}




section.comment .left {
  width: 30%;
}
section.comment .right {
  position: relative;
padding: 20px 5px;
background-color: #42acdd;
color: #fff;
border-radius: 10px;
width: 65%;
margin-bottom: 3%;
}

section.comment .right p {
  display: block;
  padding-top: 11%;
}

section.comment .right p.volm {
  padding-top: 3%;
}
section.comment .right:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #42acdd;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  }
  
  .tenm{
    animation: blinking 0.7s ease-in-out infinite alternate;
  }

  @keyframes blinking {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  section.bg_ye {
    display: block;
    padding: 5%;
    background: #feffc1;
    border-radius: 1vw;
    margin-bottom: 3%;
}
section.bg_ye li{
font-weight: bold;
font-size: 3.4rem;
color: #00d3c7;
}
section.bg_ye p{
  font-size: 2.3rem;
  }
  .tyusm p{
    font-size: 1.7rem;
    text-align: right;
  }
  section.point {
    display: block;
    width: 100%;
  }

  section.point li {
    font-size: 2.6rem;
  }


footer{
  background: #ff5b98;
  padding: 12% 4% 27%;
  margin-top: 9%;
  font-size: 1rem;
  }

footer a{
  color: #fff;
}

  .copy {
    color: #fff;
}
div#bottombt {
  position: fixed;
  bottom: 0;
  z-index: 2;
  transform: translate(12vw);
  filter: drop-shadow(10px 10px 10px rgba(93,93,93,0.6));
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
html {
    font-size: 90%;
}
body{
  -webkit-text-size-adjust: 100%;
}

div#content {
  width: 90%;
}
h1 {
  margin: 8% 0;
    font-size: 1.7rem;
    text-align: justify;
    line-height: 2.5rem;
    font-weight: bold;
}
section.comment .left {
  width: 34%;
  padding-top: 2%;
}
img {
  margin-bottom: 4%;
}
p {
  font-size: 1.3rem;
  line-height: 2rem;
}
.tyusm p {
  font-size: 1rem;
}
p.sp_sm {
  font-size: 1.2rem;
}
section.bg_ye li {
  font-size: 2.2rem;
}
section.bg_ye p {
  font-size: 1.5rem;
}
section.point li {
  font-size: 1.4rem;
}
.texare {
  width: 95%;
  padding: 2% 4%;
}

 .itm_bt {
  margin-bottom: -10%;
}
 .itm_bt{
  margin: 4vh auto;
}
 
p.up_tex {
  margin: 0 0 -7%;
}

p.up_tex{
  margin: 0 0 0;
}
span.big {
  font-size: 1.7rem;
}
span.big {
  font-size: 1.7rem;
}

span.bigp {
  font-size: 1.8rem;
}
img.bt_te {
  margin-bottom: -4vh;
}
span.suki {
   display: block;
   line-height: 0.5rem;
}
section#botom p{
  font-size: 1.1rem;
  line-height: 1.7rem;
}
.article h4 {
  font-size: 1.5rem;
  line-height: 2rem;
}
div#bottombt {
  bottom: 1vh;
  transform: translate(-2vw);
  width: 95%;
 
}
footer {
  padding: 12% 4% 40%;
}

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}