body{
    font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
    max-width: 900px;
    margin: 0px auto;
    padding: 0px;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.6);
    background-color: #fff;
    line-height: 0;
}

img{
    display: block;
    width: 100%;
    height: auto;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}


.top{
    margin-bottom: 1.67%;
}

.contents_01{
    position: relative;
    margin-top: 10.56%;
    margin-bottom: 30.56%;
}

.contents_03{
    margin-top: 10%;
}

.contents_04{
    margin-bottom: 3.89%;
}

.contents_05{
    margin-top: 12.22%;
}


.btn{
    width: 98.22%;
}

.btn_01{
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.1));
}
.btn_01 > a{
    -webkit-mask-image: url('../img/btn_01.png');
    -webkit-mask-size: cover;
    mask-image: url('../img/btn_01.png');
    mask-size: cover;
}

.btn_02{
    position: absolute;
    bottom: -3%;
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.1));
}
.btn_02 > a{
    -webkit-mask-image: url('../img/btn_02.png');
    -webkit-mask-size: cover;
    mask-image: url('../img/btn_02.png');
    mask-size: cover;
}

.btn_03{
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.1));
}
.btn_03 > a{
    -webkit-mask-image: url('../img/btn_03.png');
    -webkit-mask-size: cover;
    mask-image: url('../img/btn_03.png');
    mask-size: cover;
}

.btn_04{
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.1));
}
.btn_04 > a{
    -webkit-mask-image: url('../img/btn_04.png');
    -webkit-mask-size: cover;
    mask-image: url('../img/btn_04.png');
    mask-size: cover;
}


.site-footer{
    background-color: #E95D14;
    padding: 11.78% 9.33%;
}


.terms{
    display: flex;
    justify-content: center;
    gap: 9%;
    color: #ffff;
    font-size: clamp(12px,3vw,30px);
    font-weight: 600;
}








/*特商・プライバシーポリシー・利用規約*/
.rule-top_bg{
    
}
.rule-area{
  padding: 8.89% 6.67% 12%;
    line-height: 1.9;
}
.rule-title{
    position: relative;
    color: #E95D15;
    font-size: clamp(20px,4.5vw,40px);
    font-weight: 600;
    text-align: center;
    margin-bottom: 8.39%;
}
.rule-title::after{
    content: "";
    position: absolute;
    bottom: 8.11%;
    left: 50%;
    transform: translateX(-50%);
    width: 14%;
    min-width: 60px;
    height: 4%;
    background-color: #E95D15;
    border-radius:2px;
}
.section-title{
    display: block;
    width: 39.89%;
    margin: 6.67% auto 5.56%;
    background-color: #E95D15;
    color: #ffff;
    padding: 1.33% 7.89%;
    border-radius: 50px;
    font-size: clamp(11px,2vw,26px);
    font-weight: 600;
    text-align: center;
}
.section-title:nth-of-type(n+4){
  width: 50.78%;
  padding: 1.33% 3.11%;
}
.section-p{
  display: inline-block;
    font-size: clamp(11px,2vw,26px);
    font-weight: 600;
    color: #2B2B2B;
}
.section-p:first-of-type{
  margin-bottom: 6.67%;
}


.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 11.17%;
}

.info-table th, .info-table td {
  border-bottom: 1px solid #707070;
  padding: 3.72% 0 3.5%;
  text-align: left;
  font-size: clamp(11px,2vw,26px);
  font-weight: 600;
}

.info-table th {
  width: 35%;
}


.back-btn{
    display: block;
    width: 34.22%;
    margin: 11.11% auto 0;
    color: #FFF;
    font-size: clamp(11px,2vw,26px);
    font-weight: 600;
    text-align: center;
    padding: 2.33% 13.67%;
    background-color: #909090;
    border-radius: 5px;
    line-height: 1.9;
}

/*アニメーション*/
.poyon{
    animation: poyon 2s  infinite;
}
.zoomin{
    animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
@keyframes poyon {
    33%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
    46%  { transform: scale(1.0, 1.0) translate(0%, 5%); }
    59%  { transform: scale(1.0, 0.8) translate(0%, 10%); }
    72%  { transform: scale(1.0, 1.0) translate(0%, -10%); }
    85%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }
  .poyopoyo {
    animation: poyopoyo 3s ease-out infinite;
    opacity: 1;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }
  .showUp{
    animation-name: showUp;
    animation-duration: 800ms;
    animation-fill-mode: forwards;
}
@keyframes showUp{
    0%{
        opacity: 0;
    }
    53%{
        opacity: 0.5;
        transform: translateY(-50%)
    }
    60%{
        transform: translateY(10%)
    }
    75%{
        transform: translateY(20%)
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
.slideIn1{
    animation-name: slideIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes slideIn{
    0%{
        opacity: 0;
        transform: translateX(-100%)
    }

    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}

.slideIn2{
    animation-name: slideIn2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes slideIn2{
    0%{
        opacity: 0;
        transform: translateX(100%)
    }

    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
.fadeUp{
    animation: fadeUp 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  }
   
  @keyframes fadeUp {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
        
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
        transform: translateX(-30%);
      }
        
      to {
         opacity: 1;
         transform: translateX(0);
      }
    }
    .fadeRight{
        animation-name:fadeRightAnime;
        animation-duration:2s;
        animation-fill-mode:forwards;
        opacity:0;
        }
            
        @keyframes fadeRightAnime{
          from {
            opacity: 0;
            transform: translateX(30%);
          }
            
          to {
             opacity: 1;
             transform: translateX(0);
          }
        }
.delay-time05{
    animation-delay: 0.5s;
}
.delay-time1{
    animation-delay: 1s;
}
.delay-time15{
    animation-delay: 1.5s;
}
.delay-time2{
    animation-delay: 2s;
}

.yurayura{
    animation:  yurayura 2s steps(2,end) infinite;
    transform-origin: 20% 100% ;
}
@keyframes yurayura{
  0%{ 
      transform:rotate(50deg);
  }
  100%{ 
      transform:rotate(-15deg); 
  }
}
.yurayura2{
  animation:  yurayura 2s infinite alternate ease-in-out;
  transform-origin: 80% 100% ;
}
@keyframes yurayura{
0%{ 
    transform:rotate(5deg);
}
100%{ 
    transform:rotate(-5deg); 
}
}

.shiny-btn {
    position: relative;
    display: block;
    overflow: hidden;
}
.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    animation-name: shiny;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}  

.down{
    animation: down 1s infinite alternate ease-out;;
}
@keyframes down {
  from {
      transform: translateY(0);
    }
    to {
      transform: translateY(20px);
    }
  }
  @media only screen and (max-width:500px){
    @keyframes down {
        from {
            transform: translateY(0);
          }
          to {
            transform: translateY(10px);
          }
        }
  }

  .down2{
    animation: down2 1s infinite alternate cubic-bezier(0.89, 0.02, 1, 1.2);
}
@keyframes down2 {
  from {
      transform: translateY(-18%);
    }
    to {
      transform: translateY(40%);
    }
  }
  @media only screen and (max-width:500px){
 
  }


.rotation{
    animation: rotation 20s linear infinite;
}
@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  
.blink{
	animation: blinking 1.5s ease-in-out infinite alternate;
}
  @keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}