<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">body {
    background-color: #fef8f4;
    /* background-color: white; */
    background-image: url(img/haikei.png);
    max-width: 1200px;
    min-width: 200px;
    max-height: 1100px;
    height: auto;
    /* height: 100vh; */
    margin: 0 auto;
}


.headerbox {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-image: url(img/top.png);
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
}


.headerbox #logo img {
    width: 76vh;
    height: auto;
}

.headerbox #logo {
    position: absolute;
    top: 40px;
    right: 40px;
    opacity: 0.8;
    animation: logo 2.5s ease-in-out 0s infinite ;
}

/*--繝ｭ繧ｴ縺ｮ蜍輔″--*/
@keyframes logo {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.05);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/*--繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ--*/
.navbar {
    right: 0px;
    position: fixed;
    bottom: 0px;
    z-index: 3000;
}

.navbar ul :hover {
    transform: scale(1.06);
}

.navbar img {
    width: 100%;
}

.navbar ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

.navbar ul li {
    padding: 1px;
    display: block;
    margin: 0px 20px;
    /* text-align: center; */
    transition-duration: 0.5s;
}

.navbar ul li a {
    text-decoration: none;
}

/*-----縺薙％縺九ｉ譛ｬ繝壹�繧ｸ-----*/
.sectionbox {
    position: relative;
    width: 100%;
    height: 1045px;
}

/*----------縺薙％縺九ｉ1繝壹�繧ｸ逶ｮ----------*/
#transition .sectionbox {
    /* background-image: url("https://placehold.jp/800x500.png");
    background-size: cover; */
    color: burlywood;
}

#transition .table {
    text-align: center;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 11.8%;
}

/*譛ｺ縺ｮ逕ｻ蜒�*/
#transition .table img {
    width: 90%;
    /* border-radius: 1%; */
}

#transition .table .image1 {
    position: absolute;
    z-index: 800;
}

/* .image1 {
    overflow: hidden;
} */

/*-----縺薙％縺九ｉ縺顔堊-----*/
.plates {
    opacity:0;    
    /* transform:translateY(50px);  */
    transition: all 1s ease-out; 
}

#plate1 {
    position: absolute;
    top: -0.3%;
    left: 4%;
    animation: plate1 3.2s ease-in-out 0s infinite;
}

#plate2 {
    position: absolute;
    top: 9.5%;
    left: 33.5%;
    animation: plate2 3.2s ease-in-out 0.4s infinite;
}

#plate3 {
    position: absolute;
    top: 0.3%;
    right: 4%;
    animation: plate3 3.2s ease-in-out 0.2s infinite;
}

#plate4 {
    position: absolute;
    bottom: 8.2%;
    left: 19.6%;
    animation: plate4 3.2s ease-in-out 0.8s infinite;
}

#plate5 {
    position: absolute;
    bottom: 12%;
    right: 19.6%;
    animation: plate5 3.2s ease-in-out 0.6s infinite;
}

@keyframes plate1 {
    0% {
        transform: scale(1);
    }

    /* 45% {
        transform: scale(1.05);
    } */

    50% {
        transform: scale(1.08);
    }

    /* 60% {
        transform: scale(1.01);
    } */

    100% {
        transform: scale(1);
    }
}

@keyframes plate2 {
    0% {
        transform: scale(1);
    }

    /* 45% {
        transform: scale(1.05);
    } */

    50% {
        transform: scale(1.08);
    }

    /* 60% {
        transform: scale(1);
    }
 */
    100% {
        transform: scale(1);
    }
}

@keyframes plate3 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes plate4 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes plate5 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/*繝壹�繧ｸ1縺ｮ譁�ｫ�*/
.article1 {
    position: absolute;
    color: burlywood;
    width: 100%;
    top: 3%;
    text-align: center;
    font-family: "M PLUS Rounded 1c";
    /* background:linear-gradient(transparent 60%, rgb(255, 255, 255) 60%); */
}

.article1 h1 {
    font-size: 300%;
    margin: 6px;
    /* background: linear-gradient(transparent 70%, #FFFFFF 0%); */
}

.article1 p {
    font-size: 135%;
    margin: 1px;
}

/*繝槭�繧ｫ繝ｼ*/
.white-marker {
    /* background: linear-gradient(transparent 60%,#fcf1c6 0%); */
    background: linear-gradient(transparent 75%,#ffffff 75%);
}


/*----------縺薙％縺九ｉ2繝壹�繧ｸ逶ｮ----------*/
#combination .sectionbox {
    /* background-image: url("https://placehold.jp/800x500.png");
    background-size: cover; */
    text-align: center;
    color: burlywood;
    display: flex;
}

#combination .sheet {
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    bottom: 11.8%;
}
#combination .sheet img {
    width: 90%;
    /* border-radius: 1%; */
    margin: 0 auto;
    justify-content: center;
    text-align: center;
    align-items: center;
}

/*繧ｫ繝ｼ繝峨�蜈･繧狗ｯ�峇*/
.box1 {
    position: absolute;
    width: 250px;
    top: 9.7%;
    left: 4.1%;
    display: flex;
    flex-wrap: wrap;
}

/*譁咏炊繧ｫ繝ｼ繝�*/
#combination .image2 {
    width: 70%;
    padding: 0px;
    margin: 10px 12.5px 10px;
    z-index: 800;
    /* align-items: center; */
    cursor: pointer;
}

/*繧ｫ繝ｼ繝会ｼ代�繧√￥繧句虚菴�*/
.image2 .back1,
.image2 .front1 {
    transition: all 1s;
    position: absolute;
    left: 66px;
    top: 20px;
    /* height: 100%; */
    /* width: 100%; */
    width: 90%;
    backface-visibility: hidden;
}
/* 繧ｫ繝ｼ繝芽｡ｨ髱｢縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.image2 .front1 {
    transform: rotateY(180deg);
  /* opacity: 1; */
}
/* 繝帙ヰ繝ｼ譎ゅ�繧ｫ繝ｼ繝芽｣城擇 */
.image2:hover .back1 {
    transform: rotateY(180deg);
  /* animation: fadeIn 2s ease-in-out 0 ; */
}
/* 繝帙ヰ繝ｼ譎ゅ�繧ｫ繝ｼ繝芽｡ｨ髱｢ */
.image2:hover .front1 {
    transform: rotateY(0);
  /* opacity: 0; */
}

/* 繧ｫ繝ｼ繝会ｼ偵�繧√￥繧句虚菴� */
.image2 .back2,
.image2 .front2 {
    transition: all 1s;
    position: absolute;
    left: 310px;
    top: 20px;
    /* height: 100%; */
    /* width: 100%; */
    backface-visibility: hidden;
    width: 90%;
}
.image2 .front2 {
    transform: rotateY(180deg);
  /* opacity: 1; */
}
.image2:hover .back2 {
    transform: rotateY(180deg);
  /* animation: fadeIn 2s ease-in-out 0 ; */
}
.image2:hover .front2 {
    transform: rotateY(0);
  /* opacity: 0; */
}

/* 繧ｫ繝ｼ繝会ｼ薙�繧√￥繧句虚菴� */
.image2 .back3,
.image2 .front3 {
    transition: all 1s;
    position: absolute;
    left: 66px;
    top: 330px;
    /* height: 100%; */
    /* width: 100%; */
    backface-visibility: hidden;
    width: 90%;
}
.image2 .front3 {
    transform: rotateY(180deg);
  /* opacity: 1; */
}
.image2:hover .back3 {
    transform: rotateY(180deg);
  /* animation: fadeIn 2s ease-in-out 0 ; */
}
.image2:hover .front3 {
    transform: rotateY(0);
  /* opacity: 0; */
}

/* 繧ｫ繝ｼ繝会ｼ斐�繧√￥繧句虚菴� */
.image2 .back4,
.image2 .front4 {
    transition: all 1s;
    position: absolute;
    left: 310px;
    top: 330px;
    /* height: 100%; */
    /* width: 100%; */
    backface-visibility: hidden;
    width: 90%;
}
.image2 .front4 {
    transform: rotateY(180deg);
  /* opacity: 1; */
}
.image2:hover .back4 {
    transform: rotateY(180deg);
  /* animation: fadeIn 2s ease-in-out 0 ; */
}
.image2:hover .front4 {
    transform: rotateY(0);
  /* opacity: 0; */
}





/* (ScrollMagic逕ｨ) */
.image2 {
    opacity: 0;
}

#combination .image2 img {
    width: 100%;
    height: auto;
}

.genre {
    width: 41%;
    position: absolute;
    top: 23.3%;
    right: 8.1%;
    z-index: 2000;
    /* animation: animate__fadeIn 3s ease-in-out 0s 1; */
}

.pastaname {
    width: 39%;
    position: absolute;
    top: 29.5%;
    right: 8%;
    z-index: 2000;
    opacity: 0;
}

/*-----繝壹�繧ｸ2縺ｮ譁�ｫ�-----*/
.article2 {
    position: absolute; 
    width: 100%;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "M PLUS Rounded 1c";
}

.article2 h1 {
    font-size: 300%;
    margin: 6px;
}

.article2 p {
    position: absolute;
    font-size: 135%;
    top: 96%;
    left: 29%;
    margin: 0 auto;
}



/*----------縺薙％縺九ｉ3繝壹�繧ｸ逶ｮ----------*/
#recommend .sectionbox {
    text-align: center;
    top: 40px;
}

.frame {
    background-image: url("img/frame.png");
    border-radius: 2%;
    width: 100%;
    /* height: 78vh; */
    margin: 0 auto;
}

/*-----3繝壹�繧ｸ逶ｮ縺ｮ譁�ｫ�-----*/
#recommend .sectionbox {
    width: 90%;
    margin: 0 auto;
}
.article3 {
    top: 10px;
    /* align-items: center; */
    text-align: center;
    font-family: "M PLUS Rounded 1c";
    color: burlywood;
}

.article3 h1 {
    font-size: 300%;
    margin: 10px 10px 0px 10px;
    padding: 25px 10px 10px 10px;
}

.article3 h3 {
    font-size: 140%;
    margin: 5px 5px 20px 5px;
}

.gacha {
    align-items: center;
    text-align: center;
    width: 100%;
    /* height: auto; */
    margin: 0 auto;
    width: 80%;
    justify-content: center;
}
.image3 {
    /* align-items: center; */
    height: 600px;
    margin: 0 0 30px;
    position: relative;
}


/* .button {
    text-align: center;
} */
#bt {
    /* width: 100%; */
    border: none;
    background-color: rgba(255, 255, 255, 0);
    /* top: 700px; */
    /* padding-top: 600px; */
    text-align: center;
    align-items: center;
    cursor: pointer;
    margin: 10px;
    /* margin: 0 auto; */
}

#bt :hover {
    transform: scale(1.06);
    transition-duration: 0.5s;
}

#bt img {
    width: 100%;
}


#target {
    width: 100%;
    /* background-image: url(https://placehold.jp/ffffff/ffffff/950x600.png); */
    /* position: fixed; */
    align-items: center;
    text-align: center;
    justify-content: center;
    /* margin: 5px; */
}

#target img {
    width: 100%;
}

.activate1 {
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 2s;
}

.activate2 {
    opacity: 1;
    animation-name: jackInTheBox;
    animation-duration: 2.5s;
}

/* .activate3 {
    opacity: 1;
    animation-name: fadeIn;
    animation-duration: 1.3s;
} */

.fade-in{
    opacity: 1; 
}

footer {
    text-align: center;
    color: burlywood;
    background-color: #fef8f400;
}</pre></body></html>