@charset "utf-8";
footer{
    margin-top: 0;
    padding-top: 60px;
}

img{
    width: 100%;
    height: auto;
    display: block;
}
#wrapper{
    overflow: hidden;
}
.main_bg{
    position: fixed;
    width: 100vw;
    height: 100svh;
}
.main_bg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.lp_wrap{
    max-width: 1920px;
    margin: 0 auto;
}
.lp_inner{
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    /* overflow-x: hidden; */
}
.pos_re{
    position: relative;
}
.de01{
    transition-delay: 0.3s;
}
.de02{
    transition-delay: 0.75s;
}
.de03{
    transition-delay: 1s;
}
.de04{
    transition-delay: 1.25s;
}

/* 左右固定画像の表示領域 */
.side_fixed {
    position: fixed;
    bottom: 0;
    width: calc((100vw - 1000px) / 2);
    height: calc(100svh - 70px);
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* 左側 */
.side_fixed_left {
    left: 0;
    display: flex;
    justify-content: flex-end;
    background: url(https://d2w53g1q050m78.cloudfront.net/bshikijp/uploads/fruc/img/official/allen_collab/side_left.jpg);
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

/* 右側 */
.side_fixed_right {
    right: 0;
    display: flex;
    justify-content: flex-end;
    background: url(https://d2w53g1q050m78.cloudfront.net/bshikijp/uploads/fruc/img/official/allen_collab/side_right.jpg);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
}



/* ========================
    中央再生ボタン
======================== */
.collab_story_video_play {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .2s ease, visibility .2s ease;
}
.collab_story_video_play img {
    width: 100%;
}
/* 再生中は中央ボタンを消す */
.collab_story_video.is-playing .collab_story_video_play {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* ========================
    コントローラー
======================== */
.collab_story_video_controls {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 30px 18px 14px;
    /*
        上側を透明にして
        YouTubeっぽく下だけ暗くする
    */
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0, .65)
        );
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .2s ease,
        visibility .2s ease;
}
/*
    JSから表示するとき
*/
.collab_story_video.show-controls
.collab_story_video_controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* ========================
    PC
======================== */
@media (hover: hover) and (pointer: fine) {
    /*
        再生中＋ホバー時のみ表示
    */
    .collab_story_video.is-playing
    .video_item:hover
    .collab_story_video_controls {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
/* ========================
    一時停止ボタン
======================== */
.collab_story_video_pause {
    position: relative;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
/* || */
.collab_story_video_pause::before,
.collab_story_video_pause::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 5px;
    height: 20px;
    background: #fff;
    border-radius: 1px;
}
.collab_story_video_pause::before {
    left: 8px;
}
.collab_story_video_pause::after {
    right: 8px;
}
/* ========================
    再生バー
======================== */
.collab_story_video_seek {
    --progress: 0%;
    flex: 1;
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background:
        linear-gradient(
            to right,
            #fff 0,
            #fff var(--progress),
            rgba(255, 255, 255, .4) var(--progress),
            rgba(255, 255, 255, .4) 100%
        );
    cursor: pointer;
}
/* Chrome / Safari / Edge */
.collab_story_video_seek::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}
.collab_story_video_seek::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -4.5px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
}
/* Firefox */
.collab_story_video_seek::-moz-range-track {
    height: 4px;
    background: transparent;
}
.collab_story_video_seek::-moz-range-progress {
    height: 4px;
    background: #fff;
}
.collab_story_video_seek::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}


.fv {
    z-index: 3;
}
.fv_inner {
    width: 1920px;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
}
.ab_item{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.fv_allen{
    opacity: 0;
    transition-duration: 0.5s;
    transition-delay: 0.5s;
    transform: translateY(2%);
}
.fv_allen.is-show{
    opacity: 1;
    transform: translateY(0);
}
.fv_text{
    opacity: 0;
    transition-duration: 0.5s;
    transition-delay: 1s;
}
.fv_text.is-show{
    opacity: 1;
}
.appear{
    opacity: 0;
    transition-duration: 0.5s;
}
.appear.is-show{
    opacity: 1;
}


.catchcopy{
    margin-top: -23%;
}


.collab_story{
    z-index: 3;
    margin-top: -6.9%;
}
.darken{
    mix-blend-mode: darken;
}
.collab_story_video .video_item{
    position: absolute;
    z-index: 1;
    width: 74.8%;
    aspect-ratio: 16 / 9;
    bottom: 5.4%;
    left: 12.6%;
    display: block;
    overflow: hidden;
}
.video_item video{
    display: block;
    width: 100%;
}
.video_item iframe{
    width: 100%;
    height: 100%;
}
.collab_story_frame{
    z-index: 2;
    position: relative;
    pointer-events: none;
}


.product_01 .ab_item.product_01_subttl{
    width: 69.9%;
    top: 15.4%;
    right: 14%;
    left: unset;
}
.product_01 .ab_item.product_01_name{
    width: 61.1%;
    top: 22.9%;
    right: -4.8%;
    left: unset;
}
.product_01 .ab_item.product_01_feature{
    top: 32.7%;
    left: 9.7%;
    width: 81.4%;
}
.product_01 .ab_item.product_01_eval{
    top: 41.4%;
    left: 4.9%;
    width: 91.2%;
}
.product_01 .ab_item.product_01_eval{
    top: 41.4%;
    left: 4.9%;
    width: 91.2%;
}
.product_01 .ab_item.product_01_surprise{
    top: 54.1%;
    left: 7.1%;
    width: 44.1%;
}
.surprise {
    animation: surprise 2s ease-out infinite;
    opacity: 1;
}
@keyframes surprise {
    0%, 40%, 60%, 80% {
        transform: scale(1.0);
    }
    50%, 70% {
        transform: scale(0.95);
    }
}
.product_01 .ab_item.product_01_total{
    top: 57.15%;
    left: 6%;
    width: 87.6%;
}
.product_01 .ab_item.product_01_dtl{
    top: 64.15%;
    left: 0;
    width: 100%;
}
.product_01_video{
    position: absolute;
    bottom: 2.8%;
    left: 13%;
    width: 74%;
    aspect-ratio: 16 / 9;
    filter: drop-shadow(0px 3px 11px rgba(125,72,0,0.75));
}
.product_01_video iframe{
    width: 100%;
    height: 100%;
}


.product_02 .ab_item{
    top: unset;
    left: unset;
}
.product_02 .ab_item.product_02_item01{
    max-width: 320px;
    width: 32%;
    top: 26.2%;
    right: 0%;
}
.product_02 .ab_item.product_02_item02{
    max-width: 322px;
    width: 32.2%;
    top: 40.9%;
    right: 4.4%;
}
.product_02 .ab_item.product_02_item03{
    max-width: 332px;
    width: 33.2%;
    top: 55.1%;
    right: 3.6%;
}
.product_02 .ab_item.product_02_item04{
    max-width: 313px;
    width: 31.3%;
    top: 70%;
    right: 4.1%;
}
.product_02 .ab_item.product_02_item05{
    max-width: 345px;
    width: 34.5%;
    top: 82.25%;
    right: 3.8%;
}

.product_03{
    margin-top: -4.1%;
}
.product_03 .ab_item.product_03_title{
    width: 76%;
    top: 5.1%;
    left: 1.3%;
}

.product_03 .ab_item.product_03_title img {
    opacity: 0;
}

.product_03 .ab_item.product_03_title img.is-show {
    animation: bounceIn 0.5s ease-out 0.5s both;
}

@keyframes bounceIn {
    0% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
    }
    50% {
        transform: scale(1.08) translateY(0);
        opacity: 1;
    }
    70% {
        transform: scale(0.9) translateY(-10px);
    }
    85% {
        transform: scale(1.03) translateY(0);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}
.product_03 .ab_item.product_03_subttl{
    width: 66.2%;
    top: 18.3%;
    left: 2.1%;
}
.product_03 .ab_item.product_03_line{
    width: 82.8%;
    top: 24.9%;
    left: 19.4%;
}
.product_03 .ab_item.product_03_line img{
    opacity: 0;
}
.product_03 .ab_item.product_03_line img.is-show{
    animation: bounceIn 0.5s ease-out 0.5s both;
}
.product_03 .ab_item.product_03_item{
    width: 26.2%;
    top: 26.8%;
    left: -3.8%;
}
.product_03 .ab_item.product_03_ribon{
    width: 77.1%;
    top: 54.9%;
    left: 21%;
}
.product_03 .ab_item.product_03_btn_ttl{
    width: 72.2%;
    top: 59.8%;
    left: 14.8%;
}
.product_03 .ab_item.product_03_btn_ttl img{
    mix-blend-mode: darken;
}
.product_03 .ab_item.product_03_btn{
    width: 100.5%;
    top: 75.35%;
    left: 0%;
    transition-duration: 0.5s;
}
.product_03 .ab_item.product_03_btn:hover{
    opacity: 0.7;
}
.product_03 .ab_item.product_03_btn img {
    animation: updown 1s infinite;
}
@keyframes updown {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
.product_03 .ab_item.product_03_btn_arrow{
    width: 56.6%;
    top: 73%;
    left: 21.8%;
    pointer-events: none;
}
.product_03 .ab_item.product_03_btn_arrow img{
    animation: updown 1s infinite;
    animation-delay: 0.5s;
}

.sparkle-btn {
position: relative;
display: inline-block;
overflow: hidden;
}

.sparkle-btn img {
display: block;
width: 100%;
height: auto;
}

.sparkle-layer {
position: absolute;
inset: 0;
pointer-events: none;
}

.sparkle {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: #f7eb64;

box-shadow:
    0 0 4px #fff,
    0 0 8px rgba(255,255,255,.9),
    0 0 12px rgba(255,245,180,.8);

opacity: 0;

animation: twinkle var(--duration) ease-in-out infinite;
animation-delay: var(--delay);
}

.sparkle.big {
width: 8px;
height: 8px;
}

/* 十字のキラッとした光 */
.sparkle.big::before,
.sparkle.big::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #f7eb64;
transform: translate(-50%, -50%);
border-radius: 50%;
}

.sparkle.big::before {
width: 18px;
height: 1px;
}

.sparkle.big::after {
width: 1px;
height: 18px;
}

@keyframes twinkle {
0%,
70%,
100% {
    opacity: 0;
    transform: scale(.3);
}

78% {
    opacity: .5;
}

84% {
    opacity: 1;
    transform: scale(1.3);
}

90% {
    opacity: .4;
    transform: scale(.7);
}

94% {
    opacity: .9;
    transform: scale(1);
}
}

@media (prefers-reduced-motion: reduce) {
.sparkle {
    animation: none;
}
}



.product_04{
    margin-top: -12%;
}
.product_04 .ab_item.product_04_title{
    width: 100%;
    top: 7.7%;
    left: 1.5%;
}
.product_04 .ab_item.product_04_subttl{
    width: 96.1%;
    top: 24.3%;
    left: 2%;
}
.product_04 .ab_item.product_04_name{
    width: 73.5%;
    top: 33%;
    left: -2.5%;
}
.product_04 .ab_item.product_04_feature{
    width: 81.4%;
    top: 53.9%;
    left: 9.3%;
}
.product_04_video{
    position: absolute;
    bottom: 15.2%;
    left: 13%;
    width: 74%;
    aspect-ratio: 16 / 9;
    filter: drop-shadow(0px 3px 11px rgba(125,72,0,0.75));
}
.product_04_video iframe{
    width: 100%;
    height: 100%;
}
.product_04 .ab_item.product_04_btn_box{
    width: 93.2%;
    top: 84.7%;
    left: 3.9%;
}
.product_04 .ab_item.product_04_btn{
    width: 19.9%;
    top: 86.5%;
    left: 73.1%;
    transition-duration: 0.5s;
}
.product_04 .ab_item.product_04_btn:hover{
    opacity: 0.7;
}
.product_04 .ab_item.product_04_btn img {
    animation: updown 1s infinite;
}



.novelty .ab_item.novelty_title{
    width: 107.8%;
    top: -2.1%;
    left: -3.7%;
}
.novelty .ab_item.novelty_heading{
    width: 93.7%;
    top: 13.8%;
    left: 1.6%;
}
.novelty .ab_item.novelty_apply{
    width: 94.2%;
    top: 28.5%;
    left: 3.1%;
}
.apply_sns_icon{
    position: absolute;
    width: 7.1126%;
    top: 78.5%;
    transition-duration: 0.5s;
}
.apply_sns_icon:hover{
    opacity: 0.7;
}
.apply_sns_icon.icon_insta {
    left: 86.8%;
}
.apply_sns_icon.icon_x {
    left: 78%;
}
.copy-button{
    position: absolute;
    top: 62%;
    left: 20.3%;
    width: 53.8%;
    height: 9%;
    display: block;
}
.copy-message {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 9999;
}
.copy-message.show {
    opacity: 1;
}
.novelty .ab_item.novelty_prize{
    width: 93.8%;
    top: 44.33%;
    left: 5.8%;
}
.novelty .ab_item.sns_title{
    width: 93.8%;
    top: 44.33%;
    left: 5.8%;
}
.novelty .ab_item.sns_title{
    width: 96.7%;
    top: 66.93%;
    left: 1.9%;
}
.novelty .ab_item.sns_subttl{
    width: 95.1%;
    top: 74.63%;
    left: 2.4%;
}
.novelty .ab_item.sns_subttl img.is-show{
    animation: bounceIn 0.8s ease-out;
}

.novelty .ab_item.sns_link{
    width: 79.2%;
    left: 11.1%;
    transition-duration: 0.5s;
    filter: drop-shadow(0px 3px 11px rgba(125, 72, 0, 0.75));
}
.novelty .ab_item.sns_link:hover{
    opacity: 0.7;
}
.novelty .ab_item.sns_line{
    top: 86.5%;
}
.novelty .ab_item.sns_insta{
    top: 90.27%;
}
.novelty .ab_item.sns_x{
    top: 94.1%;
}

.profile .ab_item.profile_allen{
    width: 61.8%;
    top: 1.9%;
    left: 34.8%;
}
.profile .ab_item.profile_title{
    width: 70.4%;
    top: 6.7%;
    left: -0.4%;
}
.profile .ab_item.profile_title img{
    /* 左から徐々に見せる */
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 70%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 70%,
        transparent 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
}
.profile .ab_item.profile_title img.is-show{
    animation: reveal 0.7s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes reveal {
from {
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
}
to {
    -webkit-mask-size: 120% 100%;
    mask-size: 120% 100%;
}
}


.profile .ab_item.profile_lead{
    width: 100.6%;
    top: 37.4%;
    left: -0.1%;
}
.profile .ab_item.profile_link{
    width: 90.9%;
    left: 4.8%;
    transition-duration: 0.5s;
    filter: drop-shadow(0px 3px 11px rgba(125, 72, 0, 0.75));
}
.profile .ab_item.profile_link:hover{
    opacity: 0.7;
}
.profile .ab_item.profile_link.link_x{
    top: 73.5%;
}
.profile .ab_item.profile_link.link_insta{
    top: 82.9%;
}


@media screen and (max-width: 1000px) {
    .fv_inner {
        width: 182%;
    }
}

@media screen and (max-width: 650px) {
    .sparkle {
        width: 2px;
        height: 2px;
    }
    .sparkle.big {
        width: 5px;
        height: 5px;
    }
    .sparkle.big::before {
    width: 13px;
    height: 1px;
    }
    .product_04 .ab_item.product_04_btn {
        width: 25%;
        top: 85.9%;
        left: 72.7%;
        transition-duration: 0.5s;
    }
}