@charset "UTF-8";

/* ==============================
parallax
================================= */
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    max-width: 540px;
    height: 100vh;

    background:
    url("/images/img_fanart1.png") 100% 77% / 110px no-repeat,
    url("/images/img_fanart2.png") -12% 32% / 180px no-repeat,
    url("/images/img_fanart3.png") 100% 63% / 120px no-repeat,
    url("/images/img_fanart4.png") 0% 80% / 130px no-repeat,
    url("/images/img_fanart9.png") 38% 95% / 90px no-repeat,
    url("/images/img_fanart10.png") 110% 45% / 150px no-repeat,
    url("/images/img_fanart11.png") 100% 25% / 120px no-repeat,
    url("/images/img_fanart12.png") -8% 48% / 120px no-repeat,
    url("/images/img_fanart13.png") 66% 100% / 120px no-repeat,
    url("/images/img_fanart14.png") 20% 13% / 150px no-repeat,
    url("/images/img_fanart15.png") 70% 10% / 110px no-repeat,
    url("/images/img_fanart16.png") 9% 94% / 90px no-repeat,
    url("/images/img_fanart17.png") 95% 93% / 100px no-repeat,
    /* url("/images/img_fanart18.png") 105% 90% / 100px no-repeat, */
    url("/images/img_fanart19.png") 0% 66% / 100px no-repeat;

    margin: 0 auto;
}

.content {
    position: relative;

}


/* ==============================
main visual
================================= */

.circle__line__top{
    height: 26px;
    width: 70%;
    /* max-width: 285px; */

    background-image: url("../images/img_circle_horizontal.png");
    background-repeat: repeat-x;

    background-size: 36px 20px;
    background-position: center;
    /* padding-right: 20px; */

    position: absolute;
    top: 15px;
    /* right: 48px; */
}

.mainVisual {
    width: 100%;
    height: 100%;
    min-height: 670px;
    max-width: 550px;
    border-radius: 0 0 50px 50px;
    /* box-shadow: 0 4px 10.5px 0 rgba(201,106,141,0.7); */
    box-shadow: var(--boxshadow-pink-under);
    
    background-image: url(../images/img_tulip.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 80;
}

.mainVisual{
    position: relative;
  /* min-height: 300px; */
  /* background: #eee;  */
}

.tamayura{
    position: absolute;
    inset: 0;
    z-index: 10;
}


.dot{
    position: absolute;
    border-radius: 50%;

    background: #fff;       
    filter: blur(3px);     

    opacity: 0;

    animation: fadeInOut ease-in-out infinite;
}

/* なめらかな明滅 */
@keyframes fadeInOut{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.3;
    }
    50%{
        opacity: 0.6;
    }
    80%{
        opacity: 0.2;
    }
    100%{
        opacity: 0;
    }
}


.img__mv {
    position: absolute;
    bottom: 15%;
    z-index: 100;
}

.img__fanart5 {
    position: absolute;
    width: 150px;
    top: 75%;
    left: 60%;
    z-index: 50;
}

.img__fanart6 {
    position: absolute;
    width: 65px;
    top: 59%;
    left: 80%;
    z-index: 50;
}

.img__fanart7 {
    position: absolute;
    width: 80px;
    top: 56%;
    left: 70%;
    z-index: 50;
}

.img__fanart8 {
    position: absolute;
    width: 80px;
    top: 78%;
    right: 70%;
    z-index: 50;
}

@keyframes floatY{
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

.float:nth-child(1){ animation-delay: 0s; }
.float:nth-child(2){ animation-delay: 0.5s; }
.float:nth-child(3){ animation-delay: 1s; }

/* ==============================
about
================================= */

.about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* margin: 64px 64px; */
    /* padding: 120px 64px 64px; */
    padding: 160px 64px 80px;
    margin-top: -50px;
    gap: 24px;
    position: relative;
    z-index: 49;

    background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0.6) 20%,
    rgba(255,255,255,0.6) 70%,
    rgba(255,255,255,0.6) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.about__txt {
    text-align: center;
    text-shadow: var(--textshadow-white-normal);
}

.totalParticipants {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: var(--textshadow-white-normal);
}

.tP__text__wrapper {
    display: flex;
    align-items: baseline;
}

.tP__counter {
    display: block;
    font-size: 5.6rem;
    font-family: var(--font-coiny);
}

.tP__text {
    font-size: 1.6rem;
}


/* ==============================
how to play
================================= */
.bgCheck__wrapper {
    background:
    linear-gradient(rgba(255,252,247,0.8), rgba(255,252,247,0.8)),
    url(../images/img_bgCheck.jpeg);
    /* background-image: url(../images/img_bgCheck.jpeg); */
    background-size: 500px;
    background-repeat: repeat;
    background-position: center;

    padding-bottom: 40px;
}

.circle__line__htp{
    height: 20px;
    width: 85%;
    /* max-width: 375px; */

    background-image: url("../images/img_circle_horizontal.png");
    background-repeat: repeat-x;

    background-size: 36px 20px;
    background-position: left center;
    padding-right: 20px;

    position: absolute;
    top: 20px;
    /* right: 18px; */
}


.howToPlay {
    background:
    linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),
    url(../images/img_bgGingham.png);
    background-size: 300px;
    background-repeat: repeat;
    background-position: center;
    background-color: #FFF;

    border-radius: 50px;
    box-shadow: var(--boxshadow-pink-under);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;

    padding: 60px 20px;
    margin-top: -40px;
    position: relative;
    z-index: 50;
}

.htp__title {
    position: relative;
}

.img__sticker__crown {
    position: absolute;
    width: 75px;
    top: -20%;
    left: -10%;
}

.img__sticker__musicD {
    position: absolute;
    width: 70px;
    top: 45%;
    left: 85%;
}

.htp__list {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
}

.htp__list__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    position: relative;
}


.htp__list__item:nth-child(2),
.htp__list__item:nth-child(4) {
    flex-direction: row-reverse;
}

.htp__img {
    width: 40%;
}

.htp__txtWrap {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.htp__li__title {
    text-shadow: var(--textshadow-pink-under);
}

.htp__li__txt {
    text-shadow: var(--textshadow-pink-under);
}

.img__sticker__cake {
    position: absolute;
    width: 80px;
    top: 55%;
    left: 82%;
}

.img__sticker__heart {
    position: absolute;
    width: 80px;
    top: 60%;
    left: -5%;
}

.img__sticker__bubble {
    position: absolute;
    width: 90px;
    top: 65%;
    left: 80%;
}

.htp__btn__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    position: relative;
}

.img__sticker__game {
    position: absolute;
    width: 90px;
    top: 30%;
    left: 5%;
}

.img__sticker__sparkles {
    position: absolute;
    width: 80px;
    top: -15%;
    left: 70%;
}



.hint__img {
    display: flex;
    margin: 10px auto;
    width: 90%;
    max-width: 400px;
}


/* ==============================
other link
================================= */

.otherLink {
    display: flex;
    flex-direction: row;
    justify-content: center;

    margin: 48px 20px 64px;
}

.crowdFunding a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 170px;
}

.cf__txt {
    font-size: 1.8rem;
    margin-top: -12px;
}

.SNS a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 170px;
}

.sns__txt {
    font-size: 1.8rem;
    margin-top: -12px;
}