@charset "UTF-8";

html {
    margin: 0 auto;
    max-width: 1080px;
    font-family: 'Noto Sans JP', sans-serif;
  
}

body{
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

.full_contents {
  margin: 0 auto 0 auto;
  width: 650px;
}

.content {
  text-align:center;
  margin: 0;
  padding: 0;
  width: 650px;
  position: relative;
}

.group1 , .group2 , .group3 , .group4 {
  width: 650px;
  flex-direction: column;
  position:relative;
  margin: 0;
  padding: 0;
}

.group1 > img  , .group2 > img , .group3 > img , .group4 > img{
  margin: 0 auto;
  padding: 0;
  width: 100%;
  vertical-align: bottom;
}

.group1{
  background-color: #000;
  padding-top: 0;
}

.group2{
  background-color: #FFF100;
  padding: 1em 0;
  /*width: 95%;
  border-radius: 1em;*/
  margin: 0.3em auto;
  
}

.group3{
  background-color: #FFF;
  padding: 1em 0 0.5em;
  width: 95%;
  margin: 1em auto;
  border-radius: 1em;
}

.group4{
  background-color: #00A040;
  margin: 1em auto;
  padding: 1em 0;
  width: 95%;
  border-radius: 1em;
}

.group5{
  background-color: #727171;
  padding: 1em 0 0.5em;
  width: 95%;
  margin: 1.5em auto;
  border-radius: 1em;
}

.group6{
  background-color: #00A0E9;
  padding: 1em 0 0.5em;
  width: 95%;
  margin: 1.5em auto;
  border-radius: 1em;
}

.group7{
  background-color: #007A28;
  padding: 1em 0 0.5em;
  width: 95%;
  margin: 1.5em auto;
  border-radius: 1em;
}

.wrapper_1{
  width: 90%;
  border: 5px solid #fff;
  margin: 1em auto;
  background-color: #EF845C;
  border-radius: 1.5em;
}

.wrapper_2{
  width: 90%;
  border: 5px solid #fff;
  margin: 1em auto;
  border-radius: 1.5em;
}

.wrapper_3{
  width: 90%;
  border: 5px solid #fff;
  margin: 1em auto;
  background-color: #000;
  border-radius: 1.5em;
}

.BG_color1{
  background-color: #C8161D;
  padding-bottom: 1em;
}

.BG_color2{
  background-color: #38A1DB;
  padding-top: 1em;
  padding-bottom: 1em;
}

.BG_color3{
  background-color: #ED6C00;
}

.BG_color4{
  background-color: #FFF9B1;
}

.BG_color5{
  background-color: #00a73c;
}

.BG_color6{
  background-color: #004098;
}

.BG_color7{
  background-color: #b0b2b3;
}

.BG_color8{
  background-color: #a6c7a6;
}

/*
.back2{
  margin-top: 0;
  background-color: #fff100;
}
*/
.btn1 , .btn2 {
  display: inline-block;
  width: 90px;
  margin: 0;
  padding: 0;
}

.btn1{
  position: absolute;
  bottom: 60px;
  left: 60px;
}

.btn2 {
  position: absolute;
  bottom: 6em;
  left: 3em;
}

.btn_double{
  text-align: center;
}

.line{
  border-bottom: solid 1px #000;
  width: 50%;
  margin: 5px auto;
}

.line1{
  border-bottom: solid 1px #000;
  width: 80%;
  margin: 10px auto 0;
}

hr{
  border: 1px solid transparent;
}

.continue{
  margin-top: -7px;
  }


  .car-img{
    width: 95%;
    margin: 0.5em auto -0.5em;
  }

.inline{
  width: 200px;
}

.ev{
  margin: 0 auto;
  text-align: center;
  background-color: #2C4596;
  width: 86%;
}

.ev img {
  width: 90%;
  
}

.fixed{
 position: fixed;
 top: 0;
}

.btn-show{
  position: fixed;
  bottom: 3.5em;
  right: 0.2em;
  z-index: 5;
}

.btn-show img {
  width: 100px;
  height: 100px;
}

.wrap_img{
  position: relative;
}
.campaign-btn1{
  position: absolute;
  top: 9%;
  left: 6%;
  width: 88%;
  z-index: 10;
}

.campaign-btn2{
  position: absolute;
  bottom: 27%;
  left: 6%;
  width: 88%;
  z-index: 9;
}

.campaign-btn3{
  position: absolute;
  bottom: 7.2%;
  left: 6%;
  width: 88%;
  z-index: 9;
}


.top-img{
  margin: -12em auto 1em;
}

@media screen and (max-width: 650px){
  
  .full_contents , .content {
    width: 100%;
  }
  
  .continue{
  margin-top: -7px;
  }
  
  .movie{
    width: 90%;
    aspect-ratio: 16 / 9;
    margin: 5px auto;
  }
  
  .movie iframe{
    width: 100%;
    height: 100%;
  }
 
  .group1 , .group2 , .group3 , .group4 {
      width: 100%;
  /*display: inline-flex;*/
  flex-direction: column;
  position:relative;
  margin: 0;
  padding: 0;
}
  
.group1 > img  , .group2 > img , .group3 > img , .group4 > img{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.group2{
  padding: 1em 0;
  width: 95%;
  margin: 0.5em auto;
  border-radius: 1em;
}

.group3{
  padding: 1em 0 0.5em;
  width: 95%;
  margin: 0.5em auto;
  border-radius: 1em;
}

.group4{
  padding: 1em 0;
  width: 95%;
  margin: 1em auto;
  border-radius: 1em;
}


}


.line{
  border-bottom: solid 1px #000;
  width: 80%;
  margin: 5px auto;
}
  
  .btn_double {
  text-align: center;
    margin: 0 5%;
    padding-bottom: 20px;
}
.btn_content {
    position: relative;
}

.btn_content a img{
    position: absolute;
    bottom: 3%;
    left: 10%;
  }
  
  .content > img , .content > a img {
  text-align: center;
  max-width: 100%;
  vertical-align: bottom;
  }

.btn-show img {
  width: 100px;
  height: 100px;
}


@media screen and (min-width: 501px) and ( max-width:650px){
  
  .line{
  border-bottom: solid 1px #000;
  width: 90%;
  margin: 5px auto;
  }
  
  .ev{
    width: 92%;
  }
  
  .btn1 > a > img , .btn2 > a > img {
    width: 100%;
  }

 .btn1 , .btn2 {
  display: inline-block;
  /*width: 50px;*/
  width: 45%;
  margin: 0;
  padding: 0;
}  
  
.btn1{
  position: absolute;
  bottom: 3.5em;
  left: 10px;
}

.btn2 {
  position: absolute;
  bottom: 5.5em;
  left: 12px;
}
  
.btn-show img {
  width: 80px;
  height: 80px;
}

.top-img{
  margin: -11em auto 1em;
}
  
}

@media screen and (min-width: 301px) and ( max-width:500px){
  
  .content > img , .content > a img {
    max-width: 100%;
    text-align: center;
    padding: 0;
}
  
  .btn_double img {
    margin: 0 auto;
    width: 95%;
  }
  
  .btn_double a img{
    margin: 0 auto;
    width: 95%;
  }
  
  .line{
  border-bottom: solid 1px #000;
  width: 90%;
  margin: 5px auto;
  }
  
  .ev{
    width: 90%;
  }
  
  .btn1 > a > img , .btn2 > a > img {
    width: 100%;
  }
  
  .btn1 , .btn2 {
  display: inline-block;
  /*width: 50px;*/
  width: 45%;
  margin: 0;
  padding: 0;
}

.btn1{
  position: absolute;
  bottom: 2.5em;
  left: 10px;
}

.btn2 {
  position: absolute;
  bottom: 15%;
  left: 12px;
}
  
.btn-show img {
  width: 80px;
  height: 80px;
}

.top-img{
  margin: -32% auto 1em;
}

  
}

@media screen and (max-width: 300px){
  
  .btn_double img {
    margin: 0 auto;
    width: 95%;
  }
  
  .btn_double a img{
    margin: 0 auto;
    width: 95%;
  }
  
  .top-img{
  margin: -30% auto 1em;
}

  .content > img , .content > a img , .ev > img {
    /*margin: 0 auto;*/
    width: 90%;
  }
  
  .btn1 > a > img , .btn2 > a > img {
    width: 100%;
  }
  
  .btn1 , .btn2 {
  display: inline-block;
  /*width: 50px;*/
  width: 45%;
  margin: 0;
  padding: 0;
}
  
  .btn1{
  position: absolute;
  bottom: 1.5em;
  left: 12px;
}

.btn2 {
  position: absolute;
  bottom: 15%;
  left: 12px;
}
  
  .line{
  border-bottom: solid 1px #000;
  width: 90%;
  margin: 5px auto;
  }
  
 .continue{
  margin-top: -7px;
  }
  
  .ev{
    width: 90%;
  }
  
  .btn-show img {
  width: 80px;
  height: 80px;
}
  
}