@charset "utf-8";
/* CSS Document */
.camp_bodybg{
  padding: 10px 0 70px;
  background-position: center top, center top;
  background-repeat: repeat-x, repeat;
}


.atg_body img{max-width: 100%;}


.atg_body h1{
  position: relative;
  padding: 0 16px;
  text-align: center;
}
.atg_contents{
  max-width: 1080px;
  width: calc(100% - 32px);
  min-height: 440px;
  margin: -4px auto 40px;
  padding: 96px 20px 40px;
  background: url(../img/bg_flag.png) no-repeat top center #FFF;
  background-size: 100% auto;
  border: 10px solid #d18e4a;
}

.atg_goodskv{
  display: flex;
  justify-content: space-around;
  gap: 24px;
  max-width: 964px;
  width: 100%;
  margin: 0 auto 16px;
}
.atg_goodskv div:first-of-type{text-align: center;}
.atg_goodskv div p:first-of-type{margin-bottom: 32px;}
.atg_goodskv div p:nth-of-type(2){margin-bottom: 16px;}
.atg_goodskv div p:nth-of-type(3){margin-bottom: 24px;}
.atg_goodskv div p:nth-of-type(3) picture{
  display: inline-block;
  aspect-ratio: 29/15;
}
.atg_goodskv div p:nth-of-type(3) picture img{
  width: 100%;
  max-width: 261px;
  height: 100%;
}
.atg_goodskv div:nth-of-type(2){
  position: relative;
  width:100%;
  max-width:334px;
}
.atg_goodskv div:nth-of-type(2) picture{
  display: block;
  aspect-ratio: 167/259;
}
.atg_goodskv div:nth-of-type(2) picture img{
  width: 100%;
  height: 100%;
}
.atg_deco1{
  position: absolute;
  left: -131px;
  bottom: 66px;
}
.atg_deco2{
  position: absolute;
  right: -28px;
  bottom: -10px;
}


.atg_enibox{
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto 24px;
  padding: 24px;
  gap: 32px;
  background-color: #F3EDE7;
}
.atg_enibox p{
  width: 90px;
  aspect-ratio: 9/13;
}
.atg_enibox p img{
  width: 100%;
  height: 100%;
}
.atg_enibox dl{
  width: 820px;
  max-width: 100%;
  line-height: 2;
  font-size: 0.875rem;
}
.atg_enibox dl dt{font-weight: bold;}


.atg_copy{
  max-width: 1000px;
  width: 100%;
  line-height: 1.6;
  margin: 0 auto 1.5em;
  text-align: center;
}

.atg_copy dt{
  font-size: 1.125rem;
  font-weight: bold;
  line-height:1.25;
  margin-bottom:0.5em;
}
.atg_copy dd{font-size: clamp(0.875rem, 0.584rem + 1.08vw, 1.125rem);}/*14-18 430-800*/


.atg_imgbox{
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 8px;
}
.atg_imgbox div{
  position: relative;
  max-width:310px;
}
.atg_imgbox div picture{
  display: block;
  aspect-ratio: 155/142;
}
.atg_imgbox div picture img{
  width: 100%;
  height: 100%;
}
.atg_deco3{
  position: absolute;
  left: -10px;
  bottom: -20px;
}


.atg_entrybtn a{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: 588px;
  height: 100px;
  margin: auto;
  border-radius: 50px;
  background-color: #FF6F00;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}



.atg_home{text-align: center;}
.atg_home a{display: inline-block;}
.atg_home a img{
  width: 120px;
  height: 93px;
}




@media screen and (min-width:801px) {
  .atg_entrybtn a:hover{background-color: #FFAE5E;}
}



@media screen and (max-width:900px) and (min-width:801px){
  .atg_deco1{
    width: 80%;
    left: -80px;
    bottom: 84px;
  }
  .atg_deco2{
    width: 80%;
    bottom: 10px;
  }
}
@media screen and (max-width:800px) {
  .atg_body{padding-bottom: calc(17.5vw + 120px);}
  .atg_body h1{padding: 0 1em;}
  .atg_contents{padding: 8vw 16px;}
  .atg_goodskv{
    flex-direction:column;
    align-items: center;
  }
  .atg_goodskv div p:first-of-type{margin-bottom: max(4vw, 10px);}
  .atg_goodskv div p:nth-of-type(3){padding: 0 20%;}

  .atg_goodskv div:nth-of-type(2){
    width: 100%;
    text-align: center;
  }
  .atg_deco1{left: 0;}
  .atg_deco2{right: 0;}


  .atg_enibox{
    flex-direction:column;
    align-items: center;
    gap: 16px;
  }
  .atg_copy dt{font-size: max(2.5vw, 1rem);}  


  .atg_entrybtn a{
    width: max(73.5vw, 240px);
    height: max(12.5vw, 64px);
  }
  .atg_entrybtn a p{width: 80%;}
}
@media screen and (max-width:640px){
  .atg_deco1{
    width: 41vw;
    bottom: 10.3vw;
  }
  .atg_deco2{width: 41vw;}
}
@media screen and (max-width:428px){
  .atg_contents{padding: 9vw 10px 50px;}
  .atg_enibox{padding: 16px;}
}