@charset "UTF-8";
/*MV*/
section#mv-area {
 padding: 0;
 position: relative;
}
@media screen and (min-width: 1280px) {
	section#mv-area {

	}
}

@media screen and (max-width: 767px) {
	section#mv-area {
padding-top: 20px;
	}
}


/*********共通*******/
.section-ttl{
 text-align: center;
 font-size: 40px;
 font-weight: bold;
 margin-bottom: 15px;
 line-height: 1.2;
}
.sub{
 font-size: 12px;
 font-weight: 800;
 text-align: center;
 display: table;
 margin: auto;
 color: #008FCA;
 position: relative;
 margin-bottom: 30px;
}
.sub::before{
 content: "";
 width: 12px;
 height: 2px;
 display: inline-block;
 background: #99D2EA;
 margin-bottom: 4px;
    margin-right: 10px;
}
.sub.sub02{
 margin: 0;
 color: #fff;
}
.sub.sub03{
 color: #fff;
}
.sub.sub03::before{
 background: #fff;
}
.sub.sub04{
 color: #fff;
}
.sub.sub05{
 margin: 0;
}
@media screen and (max-width: 767px) {
.section-ttl{
 font-size: 28px;
 line-height: 1.5;
}
.sub{
 font-size: 10px;
 font-weight: 800;
 text-align: center;
 display: table;
 margin: auto;
 color: #008FCA;
 position: relative;
 margin-bottom: 30px;
 margin-left: auto !important;
 margin-RIGHT: auto !important;
}
}
/*MV*/
.logo{
 position: absolute;
 top: 20px;
 left: 20px;
 max-width: 181px;
 width: 14%;
}

.mv-txt{
 max-width: 1000px;
 margin: auto;
 position: relative;
 opacity: 1;
 transition: all .5s;
 top: -200px;
}
@media screen and (max-width: 767px){
  .mv-txt{
    max-width: 1000px;
    margin: auto;
    position: relative;
    opacity: 1;
    transition: all .5s;
    top: -30px;
   }

}
.mv-txt.fo{
 opacity: 0;
 transition: all .5s;
 top: -50px;
}
.mv{
 /*display: flex;*/
 /*height: 100vh;*/
 align-content: center;
 align-items: center;
 justify-content: center;
 text-align:center;
 padding-top: 30px !important;
}
.view .mv-pet{
 animation: fmv-pet 1.5s ease 0s 1 normal forwards;
 animation-delay: 1s;
}
.mv-pet{
 opacity: 0;
 margin-bottom: 10px;
}
.mv-pet img{
 max-width: 396px;
 width: 100%;
}
.mv_item2{
  max-width: 239.15px;
  width: 100%;
  position: relative;
  top: 360px;
  left: -400px;
 }
.mv-main-ttl img{
 max-width: 836px;
 width: 84%;
}
.japan_img{
  margin: 0 auto;
  text-align: center;
}
.japan_img_pc{
  max-width: 795.67px;
  width: 100%;
  padding-bottom: 27px;
  display: block;
  margin: 0 auto;
}
.japan_img_sp{
  display: none;
}
@media screen and (max-width: 767px){
  .japan_img_pc{
    display: none;
  }
  .japan_img_sp{
    display: block;
    max-width: 295px;
    width: 100%;
    margin: 0 auto;
  }
}
.japan_text{
  margin: 0 auto;
  text-align: center;
  max-width: 700px;
}
.japan_text1{
  font-size: 24px;
}
.japan_text2{
  font-size: 26px;
  font-weight: bold;
  color: #E33B2C;
  background:linear-gradient(transparent 50%,#FFF204 50%,#FFF204 100%);
}
.japan_text3{
  font-size: 12px;
}
.japan_text4{
  font-size: 18px;
  text-align: left;
  padding-bottom: 25px;
}

@media screen and (max-width: 767px){
  .japan_text{
    margin: 0 auto;
    text-align: center;
    max-width: 285px;
  }
  .japan_text1{
    font-size: 18px;
  }
  .japan_text2{
    font-size: 24px;
    font-weight: bold;
    border-bottom: 8px;
    border-color: #FFF204;
    border-bottom-style: solid;
    color: #E33B2C;
  }
  .japan_text3{
    font-size: 12px;
  }
  .japan_text4{
    display: none;
  }
  .br_sp::after {
    content: "\A" ;
    white-space: pre;
  }
}

.coop_merchandise{
  text-align: center;
}
.coop_merchandise_img{
  max-width: 924.05px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 17px;
}
.coop_merchandise_sp_img{
  display: none;
}
@media screen and (max-width: 767px){
  .coop_merchandise_img{
    display: none;
  }
  .coop_merchandise_sp_img{
    display: block;
    max-width: 295px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 36px;
  }
}
.view .mv-main-ttl{
animation: fmv-main-ttl 1.5s ease 0s 1 normal forwards;
 animation-delay: 2.5s;
}
.mv-main-ttl{
 opacity: 0;
}
.view .mv-sub-ttl{
 animation: fmv-sub-ttl 1.5s ease 0s 1 normal forwards;
 animation-delay: 1.5s;
}
.mv-sub-ttl{
 opacity: 0;
}
.mv-sub-ttl{
 position: absolute;
 top: 20%;
 right: 0;
 max-width: 78px;
 width: 8%;
}
.mv-sub-ttl img{
  position: relative;
  top: 150px;
 max-width: 100%;
}
@media screen and (max-width: 767px){
  .mv-sub-ttl img{
    position: relative;
    top: 40px;
   }
}
@keyframes fmv-pet {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }
@keyframes fmv-main-ttl {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }
@keyframes fmv-sub-ttl  {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }
@media screen and (max-width: 767px) {
.logo{
 width: 20%;
}
.mv{
 height: auto;
 padding-top: 30px !important;
 padding-bottom: 1vh !important;
}
.mv-pet img{
 max-width: 240px;
 width: 100%;
 margin-bottom: 10px;
}
.mv_item2{
  width: 30%;
  position: relative;
  top: 190px;
  left: -125px;
}
}
.wrapper{
 position: relative;
}
.wrapper::before{
 content: "";
 display: block;
 width: 100%;
 height: 176px;
 height: 13vw;
 background: url("../images/top/kumo.png") center bottom no-repeat;
 background-size: 100%;
 margin-bottom: -2px;
}
@media screen and (max-width: 767px) {

.mv-main-ttl img{
 width: 100%;
}
.mv-sub-ttl{
 position: absolute;
    top: -2%;
    width: 16%;
}
 .wrapper{
 opacity: 1 !important;
}
}

/*about*/
.wrapper{
 opacity: 0;
 transition: all .8s;
 position: relative;
 top: 0px;
}
.fixed .wrapper{
 opacity: 1;
 transition: all .8s;
 top: 0;
}
.wrapper::after{
 content: "";
 display: block;
 width: 100%;
 height: 176px;
 height: 13vw;
 background: url("../images/top/kumo-shita.png") center top no-repeat;
 background-size: 100%;
 margin-top: -1px;
}
.about-pet{
 opacity: 0;
 transition: all .8s;
 max-width: 330px;
 width: 25%;
 position: absolute;
 left: 0;
 top: 0;
 /*-webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
 left:-100vw;*/
}
.fileft{
 left: 0;
 opacity: 1;
 transition: all .8s;
}

.animate__fadeInRight {
  opacity: 1;
 transition: all .8s;
}
.about-tree{
 opacity: 0;
 transition: all .8s;
 max-width: 400px;
 width: 31%;
 position: absolute;
 right: 0;
 top: 0;
 /*-webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
 right:-50vw;*/
}
.op0{
 opacity: 0 !important;
 transition: all .8s;
}
.firight{
 right: 0;
 opacity: 1;
 transition: all 1.2s;
 animation: fmv-pet 1.5s ease 0s 1 normal forwards;
}
@keyframes fmv-pet {
    0% {
      opacity: 0
    }
    60% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
.a-about{
 background: #fff;
}
.a-about h2{
 line-height: 1.5;
 margin-bottom: 20px;
}
.about-box{
 background: url("../images/top/about-box-bg.png") center bottom no-repeat;
 background-size: 100%;
 max-width: 1020px;
 margin: auto;
 text-align: center;
 padding: 50px 50px 130px 50px;
}
.aboutttl img{
 max-width: 665px;
}
.about-img img{
 max-width: 630px;
}
.about-box h3{
 font-size: 3.6rem;
 color: #DF707E;
 margin-top: -20px;
 margin-bottom: 20px;
}
.kyoucyou{
 font-size: 1.8rem;
 text-align: center;
}
.kyoucyou span{
 display: inline-block;
 font-size: 3.3rem;
 color: #fff;
 font-weight: bold;
 background: #DF707E;
 padding: 0 10px;
 margin: 0 10px;
}
.about-pz{
 font-size: 3.6rem;
 color: #DF707E;
 font-weight: bold;
}
@media screen and (max-width: 767px) {
.aboutttl img{
 width: 90%;
}
.about-box{
 background: url("../images/top/about-box-bg-sp.png") center bottom no-repeat;
 background-size: 110%;
 padding: 10% 0 20%;
 width: 108%;
 margin-left: -4%;
}
.about-box h3 {
    font-size: 1.8rem;
    line-height: 1.5;
}
.kyoucyou{
 font-size: 1.4rem;
}
.kyoucyou span{
 font-size: 1.9rem;
}
.about-pz{
 font-size: 2.4rem;
 line-height: 1.5;
}
.about-img img{
 width: 80%;
}
.indent{
      text-indent: -1.2rem;
    margin-left: 1.2rem;
 }
}
/*preparation*/
#preparation{
 opacity: 0;
 top:50px;
 transition: all .8s;
}
#preparation.fo{
 opacity: 1;
 transition: all 1.2s;
 top: 0;
}
.preparation-block{
 background: #fff;
 border-radius: 144px;
 position: relative;
 padding: 150px 0 30px;
}
.preparation-left{
 position: absolute;
 left: 0;
 top: 20px;
 max-width: 257px;
}
.preparation-right{
 position: absolute;
 right: 10px;
 top: 10px;
 max-width: 262px;
}
.preparation-ttl{
 position: absolute;
 right: 0;
 left: 0;
 margin: auto;
 top: -130px;
 max-width: 303px;
}
.preparation-block h2{
 text-align: center;
 margin-bottom: 30px;
}
.preparation-block h2 img{
 max-width: 670px;
 width: 80%;
}

.preparation-box{
 background: #FFFDE3;
 padding: 80px 40px 0;
}
.problem img{
 max-width: 1018px;
}
.before-after{
 text-align: center;
}
.before-after img{
 max-width: 681px;
 margin-bottom: -130px;
 margin-right: 55px;
}
.p-inner{
 padding: 0 15px 50px;
}

@media screen and (max-width: 767px) {
 .a-preparation{
  padding-top: 150px !important;
 }
.preparation-block{
 border-radius: 60px;
 position: relative;
 padding: 100px 0 30px;
}
.preparation-ttl {
    top: -1.5%;
    width: 56%;
}
.preparation-left {
    top: 0.5%;
    width: 24%;
}
.preparation-right {
    top: 0.5%;
    width: 24%;
}
.p-inner{
 padding: 0 15px 30px;
}
.preparation-box{
 background: #FFFDE3;
 padding: 20px 20px 0;
}
.before-after img {
    width: 80%;
    margin: auto;
    margin-bottom: -70%;
}
}

.preparation-box02{
 padding: 150px 40px 80px;
}
.preparation-box02-lead{
 text-align: center;
 font-weight: bold;
 font-size: 3.2rem;
 line-height: 1.5;
 margin-bottom: 50px;
}
.preparation-box02-lead span{
 text-align: center;
 font-size: 5.2rem;
 line-height: 1;
 color: #4AA979;
}
.preparation-box02-list{
 display: flex;
 justify-content: space-between;
}
.preparation-box02-list li{
 width:24%;
 max-width: 242px;
 line-height: 1.3;
}
.preparation-box02-list-inner{
 border: 1px solid #D45D60;
 border-radius: 30px;
 overflow: hidden;
}
.preparation-box02-list-top{
 background: #D45D60;
 color: #fff;
 text-align: center;
 padding: 10px 30px;
}
.blue .preparation-box02-list-inner{
 border: 1px solid #6DBED9;
}
.blue .preparation-box02-list-top{
 background: #6DBED9;
}
.orange .preparation-box02-list-inner{
 border: 1px solid #F28C00;
}
.orange .preparation-box02-list-top{
 background: #F28C00;
}
.green .preparation-box02-list-inner{
 border: 1px solid #179974;
}
.green .preparation-box02-list-top{
 background: #179974;
}
.preparation-box02-list-top h3{
 font-size: 2.4rem;
 border-bottom: 1px solid #fff;
 padding-bottom: 10px;
 margin-bottom: 10px;
}
.preparation-box02-list-top h3 span{
 display: block;
 font-size: 1.6rem;
}
.preparation-box02-list-top h3 p{
 font-weight: bold;
 font-size: 2.4rem;
}
.preparation-box02-list-bottom{
 padding: 15px 15px 20px 15px;
 
}
.preparation-box02-list-bottom div{
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
}
.preparation-box02-list-bottom p{
 margin-top: 10px;
 line-height: 1.6;
}
.preparation-box02-list-link{
 text-align: center;
 padding-top: 15px;
}
.preparation-box02-list-link a{
 display: inline-block;
 padding-left: 30px;
 background: url("../images/top/link-arrow.png") left center no-repeat;
 background-size: 22px;
 text-decoration: underline;
}


@media screen and (max-width: 767px) {
.preparation-box02 {
    padding: 67% 20px 80px;
}
.preparation-box02-lead{
 font-size: 2.2rem;

}
.preparation-box02-list-top{
 padding: 10px 10px;
}
.preparation-box02-lead span{
 font-size: 2.8rem;
}
.preparation-box02-list{
 flex-wrap: wrap;
}
.preparation-box02-list li{
 width:49%;
 max-width: 100%;
}
.preparation-box02-list-top h3{
 font-size: 1.6rem;
 padding-bottom: 5px;
 margin-bottom: 5px;
}
.preparation-box02-list-top h3 span{
 display: block;
 font-size: 1.2rem;
}
.preparation-box02-list-top h3 p{
 font-size: 1.6rem;
}
.preparation-box02-list-bottom img {
    max-width: 100% !important;
    width: auto;
    height: 71px;
}
.preparation-box02-list-bottom{
 padding: 15px 10px 15px 10px;
}
 .preparation-box02-list-link {

    padding-top: 5px;
}
.preparation-box02-list-link a{
 background: url("../images/top/link-arrow.png") left center no-repeat;
 background-size: 14px;
 padding-left: 20px;
}
}

.preparation-box03 {
 padding: 0 30px;
}
.preparation-box03 .inner1000{
 background: #FCFCFC;
 box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); 
 padding: 50px 40px;
 position: relative;
}
.red-pin-left{
 position: absolute;
 top:10px;
 left: 10px;
 max-width: 42px;
}
.red-pin-right{
 position: absolute;
 top:10px;
 right :10px;
 max-width: 42px;
}
.preparation-box03-ttl{
 margin-top: -10px;
 margin-bottom: 20px;
 position: relative;
}
.preparation-box03-ttl h3{
 max-width: 405px;
 width: 100%;
 padding: 10px;
 background: #179974;
 color: #fff;
 font-size: 2.4rem;
 display: table;
 margin: 0 auto 20px;
 text-align: center;
 border-radius: 100px;
}
.preparation-box03-ttl h3.yellow{
 background: #6DBED9;
}
.preparation-box03-img{
 position: absolute;
 right: 0;
 bottom: 0;
}
@media screen and (max-width: 767px) {
.preparation-box03 {
    padding: 0 20px;
}
.preparation-box03 .inner1000{
 background: #FCFCFC;
 box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); 
 padding: 50px 0 20px;
 position: relative;
}
.red-pin-left{
 max-width: 24px;
}
.red-pin-right{
 max-width: 24px;
}
.preparation-box03-ttl {
    margin-top: 0;
    padding: 0 15px;
}
.preparation-box03-ttl h3 {
    padding: 5px 10px;
    font-size: 1.8rem;
 max-width: 80%;
 white-space: nowrap;
}
.preparation-box03-img {
    position: static;
    margin: auto;
    display: table;
}
.manga{
 padding: 0 10px;
}
}



.manga{
 max-width: 720px;
 margin: auto;
}
.manga p{
 max-width: 650px;
 margin: auto;
}

.list{
 margin-top: 50px;
}
.list li{
 background: url("../images/top/list-bg.png") left center no-repeat;
 background-size: 100% 100%;
 padding: 40px;
 display: flex;
 width: 100%;
 align-items: center;
 position:  relative;
}
.list li{
 font-size: 2.0rem;
}
.list li h4{
 margin-bottom: 10px;
}
.list li .list-txt{
 max-width: 374px;
}

@media screen and (max-width: 767px) {
.list {
    padding: 0 20px;
}
.list li{
 background: url("../images/top/list-bg-sp.png") left center no-repeat;
 background-size: 100% 100%;
 padding: 10%;
 display: block;
 width: 100%;
 font-size: 1.4rem;
}
.list li:nth-child(2){
 background: url("../images/top/list-bg02-sp.png") left center no-repeat;
 background-size: 100% 100%;
}
.list li .list-txt{
 margin-bottom: 20px;
 margin-top: 20px;
 max-width: 100%;
}
}

/*test*/
.wrapper02{
 position: relative;
 margin-top: 100px;
}
.wrapper02::before{
 content: "";
 display: block;
 width: 100%;
 height: 176px;
 height: 13vw;
 background: url("../images/top/mekuri.png") center bottom no-repeat;
 background-size: 100%;
 margin-bottom: -1px;
}
.wrapper02::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -84px;
  border: 84px solid transparent;
  border-top: 84px solid #fff;
}
.test-ttl{
 position: absolute;
 left: 0;
 right: 0;
 top: -70px;
 margin: auto;
 z-index: 2;
}
@media screen and (max-width: 767px) {
.wrapper02::before {
    background: url(../images/top/mekuri.png) right bottom no-repeat;
    background-size: 140%;
    margin-bottom: -1px;
}
.test-ttl{
 width: 46%;
 max-width: 200px !important;
}
.wrapper02::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -27px;
  border: 27px solid transparent;
  border-top: 27px solid #fff;
}
}


.a-test{
 position: relative;
 background: #fff;
 padding-top: 150px 0;
}
.test-block{
 border: 1px solid #707070;
 border-radius: 30px;
 padding: 60px 0 0 0;
 position: relative;
 color: #656354;
 margin-bottom: 115px;
}
.numbar{
 display: flex;
 align-content: center;
 align-items: center;
 justify-content: center;
 border: 5px solid #656354;
 border-radius: 100%;
 width: 114px;
 height: 114px;
 font-size: 32px;
 text-align: center;
 font-weight: bold;
 position: absolute;
 left: -40px;
 top: -40px;
 background: #fff;
 overflow: hidden;
}

@media screen and (max-width: 767px) {
.test-block{
 margin-bottom: 70px;
}
 .a-test .inner{
  padding:  0 40px !important;
 }
.numbar {
    border: 4px solid #656354;
    width: 84px;
    height: 84px;
    font-size: 23px;
    left: -30px;
    top: -30px;
}
}

.mondai{
 display: flex;
 align-items: center;
 justify-content: flex-end;
 margin: auto;
 margin-bottom: 50px;
 max-width: 1030px;
 padding: 0 20px;
}
.mondai p{
 width: 80%;
 padding-right: 10px;
 font-size: 2.4rem;
 font-weight: bold;
}
.mondai p span{
 color: #DF707E;
}
.mondai .hint{
 max-width: 157px;
 width: 20%;
}
@media screen and (max-width: 767px) {
.mondai{
 display: block;
 margin-bottom: 25px;
}
.mondai p{
 width: 100%;
 padding-right: 0;
 font-size: 1.6rem;
 margin-bottom: 30px;
}

.mondai .hint{
 max-width: 100%;
 width: 100%;
 margin: auto;
}
}


.kaitou{
 max-width: 922px;
 margin: auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-bottom: 40px;
 padding: 0 20px;
}
.kaitou li{
 max-width: 450px;
 width: 49%;
 margin-bottom: 20px;
 cursor: pointer;
 transition: all .2s;
}
.kaitou li:hover{
 transition: all .2s;
 opacity: .6;
}
.kaitou li a{
 display: flex;
 align-items: center;
 background: #D45D60;
 border-radius: 100px;
 padding: 6px;
 border: 2px solid #D45D60;
 pointer-events: none;
 cursor: pointer;
}
/*.kaitou li a:hover{
 opacity: 1;
}*/
.kaitou .alf{
 min-width: 81px;
 height: 81px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #fff;
 border-radius: 100px;
 font-size: 32px;
 font-weight: bold;
 color: #D45D60;
}
.kaitou .sentaku{
 text-align: center;
 font-size: 2.4rem;
 font-weight: bold;
 color: #fff;
 width: 73%;
}

.kaitou li:nth-child(2) a{
 background: #6DBED9;
 border: 2px solid #6DBED9;
}
.kaitou li:nth-child(2) .alf{
 color: #6DBED9;
}
.kaitou li:nth-child(3) a{
 background: #F28C00;
 border: 2px solid #F28C00;
}
.kaitou li:nth-child(3) .alf{
 color: #F28C00;
}
.kaitou li:nth-child(4) a{
 background: #179974;
 border: 2px solid #179974;
}
.kaitou li:nth-child(4) .alf{
 color: #179974;
}

.kaitou li.btn-active:nth-child(1) a{
 background: #fff;
}
.kaitou li.btn-active:nth-child(1) .sentaku{
 color: #D45D60;
}
.kaitou li.btn-active:nth-child(1) .alf{
 color: #fff;
 background: #D45D60;
}
.kaitou li.btn-active:nth-child(2) a{
 background: #fff;
}
.kaitou li.btn-active:nth-child(2) .sentaku{
 color: #6DBED9;
}
.kaitou li.btn-active:nth-child(2) .alf{
 color: #fff;
 background: #6DBED9;
}
.kaitou li.btn-active:nth-child(3) a{
 background: #fff;
}
.kaitou li.btn-active:nth-child(3) .sentaku{
 color: #F28C00;
}
.kaitou li.btn-active:nth-child(3) .alf{
 color: #fff;
 background: #F28C00;
}
.kaitou li.btn-active:nth-child(4) a{
 background: #fff;
}
.kaitou li.btn-active:nth-child(4) .sentaku{
 color: #179974;
}
.kaitou li.btn-active:nth-child(4) .alf{
 color: #fff;
 background: #179974;
}

@media screen and (max-width: 767px) {
.kaitou{
 display:block;
 margin-bottom: 40px;
}
.kaitou li{
 max-width: 100%;
 width: 100%;
 margin-bottom: 15px;
}
.kaitou .alf {
    min-width: 53px;
    height: 53px;
    font-size: 20px;
}
.kaitou .sentaku {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    width: 64%;
    line-height: 150%
}
 .lh11{
  line-height: 1.1;
 }
}

.kekka{
 background: #FEE37E;
 border-radius: 0 0 30px 30px;
 padding: 50px 20px;
 position: relative;
 display: none;
}
.close{
 position: absolute;
 top:20px;
 right: 20px;
 width: 49px;
 cursor: pointer;
}

.kekka-inner{
 max-width: 922px;
 margin: auto;
}
.seikai{
 font-size: 4.0rem;
 font-weight: bold;
 display: flex;
 align-items: center;
 margin-bottom: 10px;
}
.seikai-small{
 font-size: 3.2rem;
 position: relative;
 bottom: -5px;
}
.seikai .naka{
 width: 56px;
 height: 56px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #F28C00;
 border-radius: 100px;
 font-size: 32px;
 font-weight: bold;
 color: #fff;
 margin: 0 10px;
}
.setumei{
 font-size: 2.4rem;
 font-weight: bold;
}
.setumei a{
 text-decoration: underline;
}
.setumei a:hover{
 text-decoration: none;
}
@media screen and (max-width: 767px) {
.seikai{
 font-size: 2.4rem;
 flex-wrap: wrap;
 line-height: 1.2;
 margin-bottom: 20px;
}
.seikai-small{
 font-size: 1.8rem;
}
.seikai .naka{
 width: 50px;
 height: 50px;
 font-size: 28px;
}
.setumei{
 font-size: 1.6rem;
}
.close{
 position: absolute;
 top:20px;
 right: 20px;
 width: 36px;
 cursor: pointer;
}
}
.a-prezent{
 padding: 130px 0 !important;
}
@media screen and (max-width: 767px) {
.a-prezent{
 padding: 70px 0 !important;
}
}



/*footer*/
footer{
 background: #fff;
 padding: 50px 0 0;
 position: relative;
}
.sns{
 display: flex;
 justify-content: center;
 max-width: 480px;
 margin: 0 auto 20px;
}
.sns li{
 margin: 0 23px;
}
.sns li img{
 max-width: 50px;
}
.btn a{
 width: 100%;
 max-width: 630px;
 display: inline-block;
 text-align: center;
 padding: 12px;
 background: url("../images/top/btn-arrow.png") right 50px center no-repeat;
 background-size: 13px;
 font-size: 2.2rem;
 border: 1px solid #333333;
 border-radius: 100px;
 font-weight: bold;
}

copy{
 display: block;
 background: #000;
 text-align: center;
 color: #fff;
 font-size: 1.4rem;
 margin-top: 50px;
}
@media screen and (max-width: 767px) {
.btn a{
 background: url("../images/top/btn-arrow.png") right 50px center no-repeat;
 background-size: 8px;
 font-size: 1.6rem;
}
.sns li {
    margin: 0 5px;
}
}

/*追従 */
.flow-area{
 position: fixed;
 right: 0;
 top: 40px;
 width: 60px;
 z-index: 2;
}
.flow-area li{
 margin-bottom: 6px;
}
@media screen and (max-width: 767px) {
.flow-area{
 position: fixed;
 right: 0;
 left: 0;
 top: auto;
 bottom: 0;
 width: 100%;
 display: flex;
}
.flow-area li{
 margin: 0;
 width: 33.33333%;
}
}



/*loading*/
/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #DEFAFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 align-content: center;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
#loading .txt{
 width: 100%;
 text-align: center;
 color: #333;
 animation: sk-txt 1.5s infinite ease-in-out;
 font-family: "Hiragino Kaku Gothic Pro", メイリオ, sans-serif;
 opacity: .8;
}
/* Loading Animation */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-txt {
  0% {
    opacity: .8;
  }
 50% {
    opacity: 0;
  }
  100% {
    opacity: .8;
  }
}
 /* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden;
}



/*調整*/
.about-pet.animate__animated,.about-tree.animate__animated {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
}


/* 追加 */
.reuse_y_text{
  max-width: 450px;
  font-size: 20px;
}
.reuse_y_text_b{
  max-width: 480px;
  font-size: 20px;
}
.reuse_y_text2{
  color: #E33B2C;
  font-weight: bold;
}
.reuse_y_text3{
  font-size: 12px;
}
@media screen and (max-width: 767px){
  .reuse_y_text{
    max-width: 450px;
    font-size: 15px;
  }
  .reuse_y_text_b{
    max-width: 400px;
    font-size: 15px;
  }
  .reuse_y_text2{
    color: #E33B2C;
    font-weight: bold;
  }
  .reuse_y_text3{
    font-size: 12px;
  }
}
.reuse_y{
  background: url(../images/top/list-bg.png) left center no-repeat;
  background-size: 100% 100%;
  padding: 40px 47px;
  position: relative;
  display: flex;
  margin-top: 80px;
}
.reuse_y2{
  background: url(../images/top/list-bg.png) left center no-repeat;
  background-size: 100% 100%;
  padding: 40px 47px;
  position: relative;
  margin-top: 80px;
}
@media screen and (max-width: 767px){
  .reuse_y{
    height: 500px;
  background: url(../images/top/list-bg02-sp.png) left center no-repeat;
  background-size: 100% 100%;
  max-width: 259.86px;
  padding: 30px 20px;
  position: relative;
  margin: 0 auto;
    margin-top: 16px;
  }
}
.plastic_img{
  max-width: 348.85px;
  width: 100%;
  position: absolute;
  top: -50px;
  left: 500px;
}
@media screen and (max-width: 767px){
  .plastic_img{
    max-width: 211px;
    width: 100%;
    position: absolute;
    top: 295px;
    left: 25px;
  }
}

.refill_text1{
  font-size: 30px;
  font-weight: bold;
  background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
  width: 640px;
  margin: 0 auto;
}
.refill_text2{
  font-size: 30px;
  font-weight: bold;
  background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
  width: 460px;
  margin: 0 auto;
}
.refill_text3{
  font-size: 30px;
  font-weight: bold;
  background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
  width: 230px;
  margin: 0 auto;
}
.refill{
  text-align: center;
  padding-top: 48px;
  padding-bottom: 50px;
}
.reproduction_img{
  max-width: 447.23px;
  width: 100%;
  position: absolute;
  top: -30px;
  left: 460px;
}
.refill_sp{
  text-align: center;
  padding-top: 27.9px;
  padding-bottom: 50px;
  display: none;
}

@media screen and (max-width: 767px){
  .refill{
    text-align: center;
    padding-top: 27.9px;
    padding-bottom: 42px;
    display: none;
  }
  .refill_sp{
    text-align: center;
    padding-top: 27.9px;
    padding-bottom: 50px;
    display: block;
  }
  .refill_text1{
    font-size: 20px;
    font-weight: bold;
    background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
    width: 214.82px;
    margin: 0 auto;
  }
  .refill_text2{
    font-size: 20px;
    font-weight: bold;
    background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
    width: 125px;
    margin: 0 auto;
  }
  .refill_text3{
    font-size: 20px;
    font-weight: bold;
    background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
    width: 150px;
    margin: 0 auto;
  }
  .refill_text4{
    font-size: 20px;
    font-weight: bold;
    background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
    width: 230px;
    margin: 0 auto;
  }
  .refill_text5{
    font-size: 20px;
    font-weight: bold;
    background:linear-gradient(transparent 50%,#FEE37E 50%,#FEE37E 100%);
    width: 190px;
    margin: 0 auto;
  }
}
.reproduction_img2{
  max-width: 447.23px;
  width: 100%;
  position: absolute;
  top: 330px;
  left: 25px;
  display: none;
}
@media screen and (max-width: 767px){
  .reproduction_img{
    max-width: 447.23px;
    width: 100%;
    position: absolute;
    top: 330px;
    left: 25px;
    display: none;
  }
  .reproduction_img2{
    max-width: 246.71px;
    width: 90%;
    position: absolute;
    top: 230px;
    left: 10px;
    display: block;
  }
  .reuse_y2{
  background: url(../images/new/list-bg02-sp_a.png) left center no-repeat;
  background-size: 100% 100%;
  max-width: 259.86px;
  padding: 30px 20px;
  position: relative;
  margin: 0 auto;
    margin-top: 16px;
  }
}
.biomass_text{
  text-align: center;
}
.biomass_text1{
  font-size: 14px;
}
@media screen and (max-width: 767px){
  .biomass_text{
    text-align: center;
    max-width: 285px;
    margin: auto;
  }
  .biomass_text1{
    max-width: 285px;
    font-size: 12px;
    text-align: left;
  }
}
.case_study_img{
  display: block;
  max-width: 211.78px;
  width: 100%;
  margin: 0 auto;
  padding-top: 24px;
}
.case_study_img_sp{
  display: none;
}
@media screen and (max-width: 767px){
  .case_study_img{
    display: none;
  }
  .case_study_img_sp{
    display: block;
    max-width: 92.17px;
    width: 100%;
    margin: 0 auto;
    padding-top: 150px;
  }
}
.case_study{
  display: flex;
  justify-content: center;
  padding-top: 15px;
  gap: 80px;
}
.case_study_text{
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  padding: 5px;
}
.case_study_title{
  max-width: 271px;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  border-radius: 25px;
}
.case_study_img2{
  display: block;
  max-width: 259.16px;
  width: 100%;
  margin: auto;
  padding-top: 15px;
}
.case_study_img2_sp{
  display: none;
}
@media screen and (max-width: 767px){
  .case_study{
    display: flex;
    padding-top: 7px;
    flex-flow: column;
    gap: 25px;
  }
  .case_study_title{
    max-width: 153px;
    width: 100%;
    margin: 0 auto;
    background-color: white;
    border-radius: 25px;
  }
  .case_study_text{
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    padding: 5px;
  }
  .case_study_img2{
    display: none;
  }
  .case_study_img2_sp{
    display: block;
    max-width: 209.74px;
    width: 100%;
    margin: auto;
    padding-top: 20px;
  }
}
.no1_test_btn_img{
  display: block;
  max-width: 619.05px;
  width: 100%;
  margin: auto;
}
.no1_test_btn_img_sp{
  display: none;
}
@media screen and (max-width: 767px){
  .no1_test_btn_img{
    display: none;
  }
  .no1_test_btn_img_sp{
    display: block;
    max-width: 345px;
    width: 100%;
    margin: auto;
  }
}