@charset "utf-8";
/* reset */

.wrap img {
    vertical-align:bottom;
    width:100%;
    height:auto;
    display:block
}

.wrap {max-width: 750px; margin: 0 auto; overflow: hidden;}
.posi-rela {position: relative;}
.ab-center{position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center;}  

/* utility */
p {font-feature-settings: "palt";}
.ff-min { font-family: 'Noto Serif JP', serif;}
.ff-go { font-family: 'Noto Sans Japanese', sans-serif;}

/*動きのある素材の位置指定 都度変える*/
.move-posi1 {width: 24%; top: 7%; right: 60%;}
.move-posi2 {width: 20%; top: 55%; right: -84%;}
.move-posi3 {width: 100%; top: 20.5%; right: 6%;}
.move-posi4 {width: 19%; top: 87%; right: 6%;}
.move-posi5 {width: 19%; top: 87%; right: -78%;}
.move-posi6 {width: 25%; top: 73%; right: 75%;}
.move-posi7 {width: 28%; top: -3%; right: 75%;}
.move-posi8 {width: 24%; top: 70%; right: 73%;}
.move-posi9 {width: 100%; top: 90%; right: 73%;}
.move-posi10 {width: 100%; top: 84%; right: 73%;}
.move-posi11 {width: 31%; top: 1%; right: 64%;}
.move-posi12 {width: 100%; top: 2%; right: 0%;}
.move-posi13 {width: 100%; top: 11%; right: 0%;}
.move-posi14 {width: 31%; top: 47%; right: 64%;}
.move-posi15 {width: 100%; top: 50%; right: 0%;}
.move-posi16 {width: 100%; top: 61%; right: 0%;}
.move-posi17 {width: 100%; top: 80%; right: 0%;}
.move-posi18 {width: 28%; top: 0%; right: 75%;}
.move-posi19 {width: 24%; top: 74%; right: 73%;}
.move-posi20 {width: 31%; top: 3%; right: 64%;}
.move-posi21 {width: 100%; top: 15%; right: 64%;}
.move-posi22 {width: 15%; top: 50%; right: 82%;}


/* フレックス */
.flex-wrap1 {
  position: absolute;
  top: 63.2%;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0;
}


/* オファーボタン 位置 */
.ofr-btn {bottom: 3%;}
.ofr-btn2 {bottom: 5%;}
.btn-arr {position: absolute; bottom: 12.5%; width: 15%; left: 5%;}
.btn-arr2 {position: absolute; bottom: 3.5%; width: 15%; left: 10%;}

/* フッター電話番号 */
.tel-sub {top: 6%;}
.tel-btn {top: 17%;}

/* fv-fade */
@keyframes fv-fadeIn { to {opacity: 1; transform: scale(1) rotate(0deg) translate(0px, 0px);}}
.fv-fadein-0 {
    opacity : 0;
    animation: fv-fadeIn 1s forwards;
}
.fv-fadein-bs {
    opacity : 0;
    transform: scale(1.2);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-sb {
    opacity : 0;
    transform: scale(0.6);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-x1 {
    opacity : 0;
    transform: translateX(10px);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-x2 {
    opacity : 0;
    transform: translateX(-10px);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-y1 {
    opacity : 0;
    transform: translatey(10px);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-y2 {
    opacity : 0;
    transform: translatey(-10px);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-d1 {
    opacity : 0;
    transform: rotate(10deg);
    animation: fv-fadeIn 0.8s forwards;
}
.fv-fadein-d2 {
    opacity : 0;
    transform: rotate(-10deg);
    animation: fv-fadeIn 0.8s forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }
.delay-6 { animation-delay: 1.2s; }
.delay-7 { animation-delay: 1.4s; }
.delay-8 { animation-delay: 1.6s; }

/* fadeIn */
.fadein {opacity : 0;transform: translateY(20px);transition: all 1s;}
.fadein2 {opacity : 0;transform: translateY(-20px);transition: all 1s;}
.fadein3 {opacity : 0;transition: all 2s;}
.fadein4 {opacity : 0;transform: scale(0.6);transition: all 1s;}
.fadein5 {opacity : 0;transform: translatex(-20px);transition: all 1s;}
.fadein6 {opacity : 0;transform: translatex(20px);transition: all 1s;}
.fadein7 {opacity : 0;transform: scale(1.2);transition: all 0.4s;}



/* フローティングバナー */
.floating {
position: fixed;
bottom: 0;
left: 0;
right: 0;
transition: .3s;
max-width: 750px;
padding: 10px 0;
margin: 0 auto;
/*デフォルトで非表示にする*/
opacity: 0;
visibility: hidden;
z-index: 9999;
}
/*このクラスが付与されると表示する*/
.active {
opacity: 1;
visibility: visible;
}

.float-bnr {display: block;  margin: 0 auto;}

/* アニメーション */

/* L→R */
.lr-slide {
animation: lr-s 1s linear 0s infinite;
}
@keyframes lr-s {
0%   { opacity: 1; transform: translatex(-10px); }
30%  { opacity: 1; transform: translatex( 0px); }
50%  { opacity: 1; transform: translatex( 0px); }
}
/* gyugyugyu */
@keyframes gyugyu {
0% {transform:scale(0.85);}
50% {transform:scale(1);}
100% {transform:scale(0.85);}
}
.ani-gyu { animation: gyugyu 1.8s infinite; } 

/* gyugyu2 */
@keyframes gyugyu2 {
45% {transform:scale(1);}
50% {transform:scale(1.03);}
90% {transform:scale(1.03);}
100% {transform:scale(1);}
}
.ani-gyu2 { animation: gyugyu2 2s infinite; } 

/* fuwafuwa */
@keyframes fuwafuwa {
0% {transform: translateY(0px);}
50% {transform: translateY(-10px);}
100% {transform: translateY(0px);}
}
.ani-fuwa { animation: fuwafuwa 2s infinite; } 
/* flash */
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0; } }
.u--flash { animation: flash 0.7s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash2 */
@keyframes flash2 {
    0%, 100% { opacity: 0; }
    30%, 90% { opacity: 1; } }
.u--flash2 { animation: flash2 1s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash3 */
@keyframes flash3 {
    0%, 30%, 70%, 100% { opacity: 1; }
    40%, 50% { opacity: 0; } }
.u--flash3 { animation: flash3 1s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash4 */
@keyframes flash4 {
    0%, 50% { opacity: 0; }
    70%, 100% { opacity: 1; } }
.u--flash4 { animation: flash4 2s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }
/* flash5 */
@keyframes flash5 {
    0%, 50% { opacity: 1; }
    70%, 100% { opacity: 0; } }
.u--flash5 { animation: flash5 2s infinite; cubic-bezier(0.445, 0.05, 0.55, 0.95); }



/* Bounce In */
@keyframes bounceIn {
0% {transform: scale(0.5);opacity: 0; }
80% {transform: scale(1.02);opacity: 1; }
100% {transform: scale(1);opacity: 1; } }
.u--bounceIn {animation: bounceIn 1.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
/* fadein soon */
@keyframes fadein-soon {
0% {opacity: 0; }
100% {opacity: 1; }
}
.u--fadein {animation: fadein-soon 1s}

/* x-swing */
@keyframes x-swing {
50% {transform: translatex(0px);}
52% {transform: translatex(3px);}
54% {transform: translatex(0px);}
56% {transform: translatex(-3px);}
58% {transform: translatex(0px);}
60% {transform: translatex(3px);}
62% {transform: translatex(0px);} }
.x-swing {animation: x-swing 1s infinite;}
.x-swing-b {animation: x-swing 1.2s infinite;}
/* Swing */
@keyframes swing {
10% {transform: rotate(0, 0, 1, 0deg); }
20% {transform: rotate3d(0, 0, 1, 1deg); }
25% {transform: rotate3d(0, 0, 1, -1deg); }
30% {transform: rotate3d(0, 0, 1, 1deg); }
35% {transform: rotate3d(0, 0, 1, -1deg); }
40% {transform: rotate3d(0, 0, 1, 0deg); }
100% {transform: rotate3d(0, 0, 1, 0deg); } }
.u--swing {
transform-origin: bottom center;
animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }
.u--swing-c {
    transform-origin: center;
    animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-iteration-count: infinite; }
.u--swing3 {
transform-origin: bottom right;
animation: swing 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; }

/* swing */
@keyframes swing2{
0% { transform: rotate(0deg); }
25% { transform: rotate(3deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}
.u--swing2 { 
transform-origin: bottom left;
animation: swing2 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; 
}

/* swing */
@keyframes swing3{
0% { transform: rotate(3deg); }
30% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
70% { transform: rotate(-3deg); }
90% { transform: rotate(3deg); }
100% { transform: rotate(3deg); }
}
.u--swing4 {
transform-origin: center;
animation: swing3 0.75s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; 
}
.u--swing5 {
transform-origin: center;
animation: swing3 1.0s cubic-bezier(0.445, 0.05, 0.55, 0.95);
animation-iteration-count: infinite; 
}

/* buruburu */
@keyframes bururi {
50% {transform: scale(1, 1);}
52% {transform: scale(0.98, 0.95)}
54% {transform: scale(1, 1);}
56% {transform: scale(0.98, 0.95)}
58% {transform: scale(1, 1);}
60% {transform: scale(0.98, 0.95)}
}
.bururi {animation: bururi 1s infinite;}
/* purupuru */
@keyframes purupuru {
0% {transform: skew(0deg, 0deg);}
5% {transform: skew(1deg, 1deg);}
10% {transform: skew(-2deg, -1deg);}
15% {transform: skew(2deg, 1.5deg);}
20% {transform: skew(-2deg, -1.5deg);}
25% {transform: skew(0.9deg, 0.9deg);}
30% {transform: skew(-0.6deg, -0.6deg);}
35% {transform: skew(0.3deg, 0.3deg);}
40% {transform: skew(-0.2deg, -0.2deg);}
45% {transform: skew(0.1deg, 0.1deg);}
50% {transform: skew(0deg, 0deg);}
}
.purupuru {animation: purupuru 1.5s infinite;}
.purupuru2 {animation: purupuru 1.75s infinite;}



/* kurukuru */

@keyframes anikuru{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}
.ani-kuru{animation:5s linear infinite anikuru;}

@keyframes anikuru2{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(-360deg); }
    }
.ani-kuru2{animation:8s linear infinite anikuru2;}

/* underslide */
@keyframes u-slide {
0% {transform: translateY(0px);}
50% {transform: translateY(5px);}
60% {transform: translateY(0px);}
}
.ani-slide { animation: u-slide 1s infinite; animation-timing-function: ease;} 
@keyframes u-slide2 {
0% {transform: translateY(5px);}
50% {transform: translateY(0px);}
60% {transform: translateY(5px);}
}
.ani-slide2 { animation: u-slide2 1.5s infinite; animation-timing-function: ease;} 

/* 注意書き */
.noteBox {
max-width: 750px;
margin: 0 auto;
margin-top: -50px;
}
.noteBox dt {
font-size: 18px;
font-weight: bold;
margin-bottom: .4em;
}
.noteBox dd {
font-size: 14px;
line-height: 1.5em;
}
.noteBox dl {
padding: 3.75% 5%;
}
.note {
background-color: #eeeeee;
}
.under_line {
text-decoration: underline;
}
.item {
display: block;
margin-top: 50px;
}
.buybtn {
width: 100%;
margin: 20px auto;
}

.buybtn p {
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}

.buybtn img{
width: 90%;
height: auto;
display: block;
margin: 0 auto 30px;
}

.ItemList {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}

.ItemList li{
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 0;
margin: 0;

}



@media screen and (min-width: 751px) {


}

@media screen and (max-width:767px) {
/* -------------------- SP -------------------- */
.wrap {max-width: 100%;}
.c06-sub {width: 75%;}
/* 注意書き */
.info {
padding: 5.8% 4.8%;
}
}