@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{
  background-color: #000;
  padding-top: 0;
}

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

.group3{
  background-color: #4694D1;
  padding: 1em 0em;
  margin: 0em auto;
  
}

.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;
  border-radius: 1.5em;
}

.wrapper_2{
  width: 90%;
  border: 3px solid #fff;
  /*background-image: linear-gradient(0deg, #ffffff, #26b7bc);*/
  background-color: #FDD35C;
  margin: 1em auto;
  border-radius: 1.5em;
}

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

.wrapper_4{
  width: 90%;
  /*border: 5px solid #fff;E60012*/
  margin: 1em auto;
  background-color: #fff;
  border-radius: 1.5em;
}



.BG_color1{
  background-color: #000;
  /**/padding: 0.5em;
  
}

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

.BG_color3{
  background-image: linear-gradient(90deg, #aa8657, #d3a358 20%, #ffe55f 39%, #fffcdb 50%, #ffe55f 65%, #d3a358 80%, #aa8657);
  padding: 1em 0;
}

.BG_color4{
  background-color: #DBBEDA;
  padding: 1em 0;
}

.BG_color5{
  background-image: url(../img/BG01.png);
  padding-top: 1em;
  padding-bottom: 1em;
}

.BG_color6{
  background-color: #4694D1;
}

.BG_color7{
  background-color: #b0b2b3;
}

.BG_color8{
  background-color: #EE7300;
}



.line{
  border-bottom: solid 8px #fff;
  width: 100%;
  margin: 5px auto;
}

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

hr{
  border: 1px solid transparent;
}

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

.img-size{
  width: 100%;
}

  .content > img , .content > a img {
  text-align: center;
  max-width: 100%;
  vertical-align: bottom;
  }

.pop_btn{
  width: 90%;
}

.pop_btn img:first-child {
  margin-bottom: 0;
}

.pop_btn img:last-child {
  margin-bottom: 1em;
}

.btn_wrapper{
  display: flex;
  /*gap: 10px;  余白（不要なら削除） */
}

.btn_wrapper img:first-child , .btn_wrapper img:last-child {
  width: 95%;
}

.btn_wrapper img {
  height: auto;
  object-fit: cover;
}

.btn_group{
  display: grid;
  width: 95%;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 auto;
}

.grid-btn {
  width: 100%;/*
  height: 50%;
  border: none;
  cursor: pointer;*/
}

/* 4行目は左だけ配置 */
.grid-btn:nth-child(10) {
  grid-column: 1 / 2;
}




@media screen and (max-width: 650px){
  
  .full_contents , .content {
    width: 100%;
  }
  
  
  .group2{
    padding: 1em 0;
    margin: 0.5em auto;
  }

  .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;
  }

}




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



}

@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;
  }
  

  
}

@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 {
    /*margin: 0 auto;*/
    width: 90%;
  }
  
  .btn1 > a > img , .btn2 > a > img {
    width: 100%;
  }

  
  .line{
  border-bottom: solid 1px #000;
  width: 90%;
  margin: 5px auto;
  }
  
 .continue{
  margin-top: -7px;
  }
  

  

  
}