@charset "utf-8";
/* メインイメージ
---------------------------- */
.mainimgarea {
  position: relative;
  width: 100%;
}
.mainimgarea::before{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg02.svg) 0% 0% no-repeat;
  width: 45vw;
  height: 100%;
  bottom: -23vh;
  right: -10vw;
  background-size: contain;
  z-index: -1;
}

.g01 .mainimgarea::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/guide/m_01.svg) 0% 0% no-repeat;
  background-size: contain;
  width: 14%;
  height: 14%;
  right: 0;
  bottom: -2vh;
}
.g02 .mainimgarea::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/guide/m_02.svg) 0% 0% no-repeat;
      background-size: contain;
      width: 25%;
      height: 25%;
      bottom: -5vh;
      right: -9vw;
}
.g03 .mainimgarea::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/guide/m_03.svg) 0% 0% no-repeat;
  background-size: contain;
  width: 25%;
  height: 25%;
  bottom: -4vh;
  right: -9.5vw;
}
.mainimgin{
  position: relative;
  width: 87%;
  height: 600px;
  margin-left: 0;
  overflow: hidden;
  object-fit: contain;
  border-bottom-right-radius: 100px;
}
.mainimgin img{
  width: 100%;
}
@media screen and (min-width: 1500px) {
  .mainimgin img{
    position: absolute;
    bottom: -45%;
    width: 100%;
  }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
  .mainimgin img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

}
@media only screen and (max-width: 767px) {
  .low #header{ padding: 1em 0 0.5em;}
  .mainimgarea{position: relative;}
  .mainimgarea::before {
    content: "";
    position: absolute;
    background: url(/atsugi-de-cycle/assets/img/common/bg02_sp.svg) 0% 0% no-repeat;
    width: 100vw;
    height: 360px;
    bottom: -36vh;
    right: -32vw;
    background-size: contain;
}
.g01 .mainimgarea::after {
    width: 13%;
    height: 19%;
    right: 3vw;
    bottom: -1vh;
}
.g02 .mainimgarea::after {
  width: 25%;
  height: 35%;
  bottom: -6vh;
  right: -3vw;
}
.g03 .mainimgarea::after {
  width: 25%;
  height: 35%;
  bottom: -8vh;
  right: -4vw;
}
.mainimgin{
  position: relative;
  width: 88%;
  margin-left: 0;
  height: auto;
  border-bottom-right-radius: 50px;
}
main{position: relative;}
main::before{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon08.svg) 0% 0% no-repeat;
  width: 30%;
  height: 30%;
  top: -4%;
  left: -3%;
  background-size: contain;
}
.g02 main::before{    top: -6%;}
.g03 main::before{    top: -2%;}

}

/* コンテンツ /#section01/
---------------------------- */
#section01{    margin: 10em auto;}
.g03 #section01 {margin: 4em auto 10em;}
#section01 .soulfood-ttl{position: relative;}
.g03 #section01 .ttl{ padding: 1em 0 2em;}
#section01 .soulfood-ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg10.svg) 0 0 no-repeat;
  background-size: contain;
  top: 30%;
  left: 20%;
  width: 90px;
  height: 70px;
}
#section01 .soulfood-ttl::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg11.svg) 0 0 no-repeat;
  background-size: contain;
  top: -2%;
  right: 27%;
  width: 120px;
  height: 90px;
}
.g02 #section01 .soulfood-ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg15.svg) 0 0 no-repeat;
  background-size: contain;
  top: 0%;
  left: 24%;
  width: 50px;
  height: 80px;
}
.g02 #section01 .soulfood-ttl::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg16.svg) 0 0 no-repeat;
  background-size: contain;
  top: -20%;
  right: 23%;
  width: 100px;
  height: 100px;
}
.g03 #section01 .soulfood-ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg17.svg) 0 0 no-repeat;
  background-size: contain;
  top: 0%;
  left: 24%;
  width: 70px;
  height: 60px;
}
.g03 #section01 .soulfood-ttl::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg18.svg) 0 0 no-repeat;
  background-size: contain;
  top: -20%;
  right: 23%;
  width: 140px;
  height: 100px;
}
.catch p{
  position: relative;
  margin: auto;
  text-align: center;
}
.g01 .catch p::before{
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon06.svg) 0 0 no-repeat;
  background-size: contain;
  top: -5%;
  left: 5%;
  width: 175px;
  height: 160px;
}
.g01 .catch p::after{
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon07.svg) 0 0 no-repeat;
  background-size: contain;
  top: -50%;
  right: 5%;
  width: 230px;
  height: 200px;
}
.g02 .catch p::before{
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon15.svg) 0 0 no-repeat;
  background-size: contain;
  top: 46%;
  left: 12%;
  width: 80px;
  height: 130px;
}
.g02 .catch p::after{
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon16.svg) 0 0 no-repeat;
  background-size: contain;
  top: 90%;
  right: 11%;
  width: 110px;
  height: 85px;
}
.g03 .catch p::before{
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon17.svg) 0 0 no-repeat;
  background-size: contain;
  top: 46%;
  left: 12%;
  width: 180px;
  height: 120px;
}
.g03 .catch p::after{
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon18.svg) 0 0 no-repeat;
  background-size: contain;
  top: 60%;
      right: 20%;
      width: 80px;
      height: 90px;
}
.h_ttl .img {
  text-align: center;
  margin: auto;
}
.h_ttl .img img{width: 20%;}
@media screen and (min-width:768px) and ( max-width:1024px) {
  #section01 .soulfood-ttl::before {
      top: -5%;
      left: 15%;
  }
  #section01 .soulfood-ttl::after {
    top: -8%;
    right: 22%;
}
.g02 #section01 .soulfood-ttl::before {
    top: 0%;
    left: 20%;
}
.g02 #section01 .soulfood-ttl::after {
    top: -20%;
    right: 15%;
}

.g03 .catch p::after{
  top: 85%;
  left: 3%;
  width: 180px;
  height: 120px;
}
.g03 .catch p::after {
    top: 80%;
    right: 17%;
    width: 80px;
    height: 90px;
}
  }
  @media only screen and (max-width: 767px) {

#section01 {
      position: relative;
      margin: 8em auto 10em;
      padding: 0;
  }
#section01 .soulfood-ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg10.svg) 0 0 no-repeat;
  background-size: contain;
  top: -23%;
  left: 0%;
  width: 80px;
  height: 60px;
}
#section01 .soulfood-ttl::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg12.svg) 0 0 no-repeat;
  background-size: contain;
  top: -45%;
  right: 5%;
  width: 110px;
  height: 80px;
}
.g02 #section01 .soulfood-ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg15.svg) 0 0 no-repeat;
  background-size: contain;
  top: -36%;
  left: 6%;
  width: 90px;
  height: 70px;
}
.g02 #section01 .soulfood-ttl::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg16.svg) 0 0 no-repeat;
  background-size: contain;
  top: -55%;
  right: -10%;
  width: 120px;
  height: 90px;
}
.g03 #section01 {
    margin: 2em auto 10em;
}
.h_ttl .img img {
    width: 35%;
}
.g03 #section01 .soulfood-ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg17.svg) 0 0 no-repeat;
  background-size: contain;
  top: -15%;
  left: 4%;
  width: 60px;
  height: 50px;
}
.g03 #section01 .soulfood-ttl::after {
  content: "";
  display: block;
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/ttl_bg18.svg) 0 0 no-repeat;
  background-size: contain;
  top: -39%;
  right: -3%;
  width: 100px;
  height: 70px;
}
#section01 p {
      font-size: 1.1em;
      text-align: center;
      width: 85%;
      margin: 1em auto;
}
.catch .container p::before{
    content: "";
    position: absolute;
    background: url(/atsugi-de-cycle/assets/img/common/bg_icon09.svg) 0% 0% no-repeat;
    width: 50%;
    height: 90%;
    top: 95%;
    left: -10%;
    background-size: contain;
}
.catch .container p::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon10.svg) 0% 0% no-repeat;
  width: 50%;
  height: 90%;
  top: 95%;
  right: -10%;
  background-size: contain;
}
.g02 .catch .container p::before{
    content: "";
    position: absolute;
    background: url(/atsugi-de-cycle/assets/img/common/bg_icon15.svg) 0% 0% no-repeat;
    width: 25%;
    height: 60%;
    top: 105%;
    left: -5%;
    background-size: contain;
}
.g02 .catch .container p::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon16.svg) 0% 0% no-repeat;
  width: 30%;
  height: 39%;
  top: 105%;
  right: -9%;
  background-size: contain;
}
.g03 .catch .container p::before{
    content: "";
    position: absolute;
    background: url(/atsugi-de-cycle/assets/img/common/bg_icon17.svg) 0% 0% no-repeat;
    width: 50%;
        height: 90%;
        top: 100%;
        left: -10%;
    background-size: contain;
}
.g03 .catch .container p::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg_icon18.svg) 0% 0% no-repeat;
  width: 22%;
  height: 50%;
  top: 110%;
  right: -10%;
  background-size: contain;
}

}
/* コンテンツ /#section02/
---------------------------- */
.soulfood{position: relative;}
.soulfood::before{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg03.svg) 0% 0% no-repeat;
  width: 100vw;
  height: 100%;
  top: -3%;
  left: 0;
  right: 0;
  background-size: contain;
  z-index: -1;
}

.soulfood::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg03.svg) 0% 100% no-repeat;
  width: 100%;
  height: 100%;
  bottom: -10%;
  left: 0;
  right: 0;
  background-size: contain;
  z-index: -1;
}
.g02 .soulfood::after{bottom: -25%;}
.g03 .soulfood::after{background: none;}
.soulfood .ttl,.soulfood02 .ttl{    font-size: 1.8em;}
.soulfood .box{
  position: relative;
  margin: 2em auto 8em;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.soulfood .box02{ flex-direction: row-reverse;}
.soulfood .box .img{
  position: relative;
  width: 50%;
}
.soulfood .box .img img{}
.soulfood .box01 .lavel {
  position: absolute;
  left: -3%;
  top: -3%;
  width: 20%;
}
.soulfood .box02 .lavel {
    position: absolute;
    right: -3%;
    top: -3%;
  width: 20%;
}
.soulfood .box .txt{width: 40%;}
.soulfood .box .ttl {
    padding: 0.5em 0;
    font-size: 1.8em;
    letter-spacing: 0.1px;
    text-align: left;
}
.soulfood .box .ttl span {
    display: block;
    font-size: 0.4em;
    color: #999;
    letter-spacing: 0.1em;
}
@media screen and (min-width:1560px){
  .soulfood::after {    background: none;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
}
@media only screen and (max-width: 767px) {
.soulfood{position: relative;}
.soulfood .container,
.soulfood02 .container{
  position: relative;
}
.soulfood::before{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg03_sp.svg) 0% 0% no-repeat;
  width: 100vw;
  height: 550px;
  top: -1.5%;
  left: 0;
  right: 0;
  background-size: cover;
  z-index: -1
}
.soulfood::after{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg03_sp.svg) 0% 0% no-repeat;
  width: 100vw;
  height: 560px;
  bottom: 70vh;
  left: 0vw;
  background-size: cover;
  z-index: -1
}
.soulfood .ttl,.soulfood02 .ttl{    font-size: 1.8em;}
.soulfood .box{
  position: relative;
  margin: 2em auto 8em;
}

.soulfood .box01{ margin: 4em auto 5em;}
.soulfood .box .img {
    position: relative;
    width: 100%;
    margin: 0 auto 1em;
}
.soulfood .box01 .lavel {
  position: absolute;
  left: -4%;
  top: -10%;
  width: 23vw;
}
.soulfood .box02 .lavel {
    position: absolute;
    right: -4%;
    top: -10%;
    width: 23vw;
}
.soulfood .box .txt {
    width: 90%;
    margin: auto;
}
.soulfood .box .ttl {
    font-size: 3em;
    letter-spacing: 0.1px;
    text-align: left;
    padding: 0;
}
.soulfood .box .ttl span{
  display: block;
  font-size: 0.4em;
  color: #999;
  letter-spacing: 0.1em;
}
.soulfood .box .btn{width: 100%;}
}
/* コンテンツ /#section02/
---------------------------- */
.soulfood02 .ttlbox{
  width: 50%;
  margin: auto;
}
.soulfood02 .ttlbox .ttl{padding: 0 0 2em;}
.soulfood02 .btn{
  width: 40%;
  margin: auto;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
  .soulfood02{
    position: relative;
    margin: 1em auto 12em!important;
  }
  .soulfood02::before{
    content: "";
    position: absolute;
    background: url(/atsugi-de-cycle/assets/img/common/bg02.svg) 0% 0% no-repeat;
    width: 100vw;
    height: 360px;
    top: -23vh;
    left: -40vw;
    background-size: contain;
  }
  .soulfood02 ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin: 2em auto 1em;
  }
  .soulfood02 ul li{width: 31%;}
  .soulfood02 .btn{
    width: 80%;
    margin: auto;
  }
}
@media only screen and (max-width: 767px) {
.soulfood02{
  position: relative;
  margin: 1em auto 12em!important;
}
.soulfood02::before{
  content: "";
  position: absolute;
  background: url(/atsugi-de-cycle/assets/img/common/bg02_sp.svg) 0% 0% no-repeat;
  width: 100vw;
  height: 410px;
  top: -23vh;
  left: -25vw;
  background-size: contain;
  z-index: -1;
}
.soulfood02 .ttlbox {width: 100%;}
.soulfood02 .ttlbox .ttl {padding: 0 0 1em;}
.soulfood02 ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
margin: 2em auto 1em;
}
.soulfood02 ul li{width: 31%;}
.soulfood02 .btn{
  width: 80%;
  margin: auto;
}


}