@charset "utf-8";
/* reset */
.wrap img {
    vertical-align:bottom;
    max-width: 100%;
    height:auto;
    display:block
}
/*全体*/
#contents {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

h1 > img,
p > img,
div > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* utility */
p {font-feature-settings: "palt";}
.ff-min { font-family: 'Noto Serif JP', serif;}
.ff-go { font-family: 'Noto Sans Japanese', sans-serif;}
.ut-btm0 {bottom: 0;}
.ut-top0 {top: 0;}
.ut-top1 {top: 25%;}
.ut-top2 {top: 8%;}
.ut-top3 {top: 61%;}
.ut-top4 {top: 75%;}
.ut-top5 {top: 98%;}

/* content */
.soukai-01 {top: 9%;}
.soukai-02 {top: 70%;}
.soukai-03 {top: 54%;}
.soukai-04 {top: 42%;}
.soukai-05 {top: 62%;}
.soukai-06 {top: 0%;}
.soukai-07 {top: 33%;}
.soukai-08 {top: 66%;}
.soukai-09 {top: 92%;}

/* position */
.posi-rela {
    position: relative;
}
.ab-center {
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto;
}
.flex-wrap1 {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 20%;
    gap: 10px;
}
.flex-wrap2 {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0px;
    top: 41.5%;
}




/* フローティング */
.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;
}
/* .fadein {
opacity : 0;
transform: translateY(20px);
transition: all 1s;
} */
.float-bnr {display: block; width: 100%; margin: 0 auto;}

/* .process {display: inline-block;} */
.ofr-cp {top: 0%;}
.ofr-btn1 {bottom: 30%;}
.ofr-btn2 {bottom: -4%;}
.btn-arr {position: absolute; bottom: 12.3%; width: 17%; left: 8%;}

/* アニメーション */
/* 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 1s 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 1s infinite; } 

@keyframes fuwafuwa2 {
    0% {transform: translateY(0px);}
    50% {transform: translateY(8px);}
    100% {transform: translateY(0px);}
    }
    .ani-fuwa2 { animation: fuwafuwa2 1.5s 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); }


/* 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--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; 
}


/* 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.8);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;}
/* 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;}


/* 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; }


/* 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 0.5s 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;} 



@media screen and (min-width: 751px) {
/* --------------- PC --------------- */
#contents {margin: 50px auto 0;}
.btn-arr {width: 26%;}

}

@media screen and (max-width:767px) {
/* --------------- SP --------------- */
#contents {margin: 0px auto 0;}

}