@charset "utf-8";

/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

LINE

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/




.line-left{
    position: relative;
    height:270px;
    width:35%;
    margin:auto;
}

@media screen and (min-width: 768px),
print {
    .line-left{

        max-width:30%;

        height:auto;
}
}


@media screen and (min-width: 768px),
print {
.line-left img{
    width:200px;
}
    }


/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

qocard

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/



@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}


.anime-fuwafuwa {
  animation: 3s fuwafuwa infinite;
}


.top-qocard {
  position: absolute;
  top:80px;
  right: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

@media screen and (min-width: 768px),
print {
    .top-qocard {
  
  top:50px;
  width: 190px;
  height: 190px;
}
}
    
    












@media screen and (min-width: 768px),
print {
.top-line-right{
    max-width:58%;

    padding-top:50px;
}
    }

@media screen and (min-width: 992px),
print {
.top-line-right{
    padding-top:100px;
}
    }

.top-line-t1{
    font-size:22px;
    color:#fff;
    padding:0 10px;
    text-align: center;
    
}

@media screen and (min-width: 768px),
print {
    
    .top-line-t1{
                padding: 0;
    font-size:27px;
}
}

.top-line-t2 {
  position: relative;
  padding: 5px;
  text-align: center;
    margin-bottom:20px;
    font-size:25px;
    color:#E01215;
}

.top-line-t2:before {
  position: absolute;
  bottom: -3px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background:#E01215;
}

.top-line-t4-back{
    background-color: #00924F;
    padding:30px 10px;
    margin-bottom: 30px;
}


@media screen and (min-width: 768px),
print {
    .top-line-t4-back{
    padding:40px;
        max-width: 1000px;
        margin:0 auto 60px;
}
}

.top-line-t4{
    font-size:23px;
    color:#fff;
    margin-bottom:10px;
}

@media screen and (min-width: 768px),
print {
    .top-line-t4{
    font-size:27px;
}
}

.top-line-t5{
    color:#fff;
}

@media screen and (min-width: 768px),
print {
.top-line-qr{
    display: flex;
    justify-content: space-between;
    max-width: 800px;
        margin:0 auto 60px;
}
    }

.top-line-qr-left{
    margin-bottom:20px;
}

@media screen and (min-width: 768px),
print {
    .top-line-qr-left{
    width:49%;
}
}

.top-line-qr-right{
    margin-bottom:20px;
}

@media screen and (min-width: 768px),
print {
    .top-line-qr-right{
    width:49%;
}
}

.top-line-t6{
    font-size:30px;
    color:#F7F80A;
}

@media screen and (min-width: 768px),
print {
    .top-line-t6{
    font-size:37px;
}
}