:root{
  --red:#ff7491;
  --blue:#129abf;
  --lightblue:#abcddd;
  --black:#333;
  --gray:#ddd;
}

html,body{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3";
  margin:0;
  scroll-behavior: smooth;
}
.red {
  font-weight: bold;
  color: var(--red);
}

.blue {
  font-weight: bold;
  color: var(--blue);
}

.marker {
  font-weight: bold;
  background: linear-gradient(transparent 50%, #ffefb4 50%);
}

.large {
  font-weight: bold;
  font-size: 1.2em;
}

.small{
  font-size: .7em;
}

.bold{
  font-weight: bolder;
}

.annotation{
color: #777;
font-size: .8em;
}

.sp{
display: none;
}

.pc{
display: block;
}

@media screen and (max-width : 480px) {
  .main{
    width: 96%;
    margin:0 auto;
  }
  .sp{
    display: inherit;
  }

  .pc{
    display: none;
  }
}
#container{
  max-width: 800px;
  margin:0 auto;
}
.main{
  width:96%;
  max-width: 800px;
  margin:0 auto;
}
img{
  width:100%;
  vertical-align: bottom;
}
.center{
  text-align: center;
}

label{
  display: block;
  padding:.5em ;
  border:1px solid var(--gray);
  border-radius:2px;
  margin-bottom:.5em;
}
label:hover{
  cursor: pointer;
  background: #94cae4;
  color: #fff;
}
input{
  display: none;
}
input:checked+label{
  background-color: var(--blue);
  color: #fff;
}
.byan img {
  width: 50%;
  display: block;
  margin: 0 auto;
  animation-name:byanbyan;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
@keyframes byanbyan {
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(12px);
  }
  100%{
    transform: translateY(0);
  }
}
.btn img{
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-name:band;
}
#scroll{
  position:relative;
}
#scroll:after {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  transform: rotate(30deg);
  width: 70px;
  height: 100%;
  animation-name: shiny;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  background-image: linear-gradient(100deg , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes shiny {
  17%{
    left: 120%;
  }
  100%{
    left: 120%;
  }
}
.byon{
  animation-duration: 2s;
  animation-name:byonbyon;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.none{
  display: none;
}
@keyframes byonbyon {
  0%{
    transform: scale3d(1,1,1)  
  }
  30%{
    transform: scale3d(1.06,0.94,1)  
  }
  40%{
    transform: scale3d(0.94,1.06,1)
  }
  50%{
    transform: scale3d(1.04,0.96,1)
  }
  60%{
    transform: scale3d(0.96,1.04,1)
  }
  70%{
    transform: scale3d(1.02,0.98,1)
  }
  100%{
    transform: scale3d(0.98,1.02,1)
  }
}
.faq{
  margin:20px auto;
  padding: 15px;
  border: 4px solid #129abf;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}
.contents_footer{
  text-align: center;
  margin-bottom: 1em;
}
.faq-item > h3{
  position: relative;
  padding-left: 2em;
}
.faq-item > h3::before{
  position: absolute;
  content:"";
  left: 0;
  width: 25px;
  height: 25px;
  background: #129abf;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.faq-item > h3:after{
  color:#fff;
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  left:8px;
  font-size:.8em;
}
.faq-item:first-child > h3:after{
  content:"1";
}
.faq-item:nth-child(2) > h3:after{
  content:"2";
}
.faq-item:last-child > h3:after{
  content:"3";
}
.gazo{
  margin: 20px;
}
footer{
  text-align: center;
}
#target p{
font-size: 1.2em;
}
@media screen and (min-width:481px){
  #target p:first-child{
    font-size: 2.5em;
    }
   #target p:last-of-type{
      font-size: 2em;
    }
}
.banner {
	display: inline-block;
	padding: 0.6em 2em;
	margin: 0 0 1em;
	background-color: #ffffff;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.banner:hover {
	opacity: 0.6;
}