* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.head-1 {
    text-align: center;
    margin: 20px 0;
}

.img-wrap {
    max-width: 1500px;
    margin: 15 auto;
}

.img-wrap img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    object-fit: cover;
}

.wrapper {
    max-width: 1280px;
    padding: 0 22px;
    margin: 0 auto;
    position: relative;
}

.line {
    border-top: 1px solid var(--line);
    margin: 0 auto;
}

.link-more {
    font-size: 14px;
    position: relative;
}

.link-more::after {
    position: absolute;
    top: 54%;
    right: -12px;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}

.link-more:hover {
    text-decoration: underline;
}

.ad {
    margin: 30px auto;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    .ad {
        max-width: 90%;
    }
}

.fonts1 {
    font-family: 'Noto Sans JP', sans-serif;
}

.fonts21 {
    font-family: 'Edu VIC WA NT Beginner', cursive;
    font-size: 80px;
}

.fonts22 {
    font-family: 'Edu VIC WA NT Beginner', cursive;
    font-size: 25px;
    color: var(--main-text);
}

.fontsgradationYP {
    display: inline-block;
    background: linear-gradient(45deg, #f200ff 16%, rgb(0, 255, 110) 90%);
    background: -webkit-linear-gradient(45deg, #f200ff 16%, #fbff00 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientEffect 8s infinite alternate;
    transition: 1s;
}

.fontsgradationYP:hover {
    transform: scale(1.1, 1.1);
}

@keyframes gradientEffect {
    from {
        background-position: left
    }

    to {
        background-position: right
    }
}

/* メイン */
.title1 {
    font-family: 'Edu VIC WA NT Beginner', cursive;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: var(--maintext);
    background-size: 200% 100%;
    border-radius: 1000px;
    margin: 0 auto;
    padding: 8px 5px;
    width: 180px;
    background: linear-gradient(90deg, rgb(219, 105, 215) 0%, rgb(219, 217, 107) 100%);
    transition: 0.3s;
}

.title1:hover {
    transform: scale(1.05, 1.05);
    letter-spacing: 0.1em;
}

.top-news {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}

/* トップ */
.top-hello {
    height: 100vh;
    height: 100vh;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    animation: top-hello-fade-img 1.5s var(--easing27) .5s forwards;
    margin: 0;
    position: relative;
}

@keyframes top-hello-fade-img {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.top-hello .back {
    width: 100%;
    height: 100%;
    background: var(--top-hello-gradation);
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-hello .content {
    color: #FFF;
    margin: 0 20px;
    width: 100%;
    filter: drop-shadow(0 0 10px #00000099);
    transform: translateY(-50px);
}

.top-hello .content img {
    display: block;
    margin: 0 auto 15px;
    width: min(400px, 100%);
    z-index: 10;
    transform: scale(1.1) translateY(92px);
    animation: top-hello-fadein 4s var(--easing8) 1s forwards;
}

@keyframes top-hello-fadein {
    0% {
        transform: scale(1.1) translateY(92px);
    }

    20% {
        transform: scale(1.1) translateY(92px);
    }

    100% {
        transform: scale(.4) translateY(100px);
    }
}

.top-hello .content .greeting {
    font-weight: 900;
    font-size: 60px;
    transform: scale(0);
    line-height: 1.1;
    animation: top-hello-fadeBig 1.5s var(--easing27) 3.5s forwards;
}

@keyframes top-hello-fadeBig {
    from {
        opacity: 0;
        transform: scale(1.5) translateY(200px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.top-hello h1 {
    font-size: 25px;
    opacity: 0;
    height: 0;
}

.shortmessage p:first-child {
    animation: top-hello-fadeUp 1s 4s forwards;
    opacity: 0;
    font-weight: 700;
    color: #e0e0e0;
}

.top-hello .shortmessage p:last-child {
    font-size: 13px;
    color: #dadada;
    transform: skewX(-10deg);
    animation: top-hello-fadeUp 1s 4s forwards;
    opacity: 0;
}

.top-hello .shortmessage {
    position: relative;
}

.top-hello .shortmessage::before {
    position: absolute;
    content: attr(data-topwordsexplain);
    width: 250px;
    bottom: -60px;
    right: 50%;
    transform: translateX(calc(-50% + 270px/2));
    background: var(--firstback);
    color: var(--subtext);
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
    line-height: 1.2;
    pointer-events: none;
    opacity: 0;
    pointer-events: none;
    transition: 1s;
}

.top-hello .shortmessage:hover::before {
    transition: .2s 1s;
    opacity: 1;
}

@keyframes top-hello-fadeUp {
    from {
        opacity: 0;
        transform: translateY(-10px) traskewX(-10deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) traskewX(-10deg);
    }
}

.top-hello .accesscover {
    width: 100%;
    height: 100vh;
    height: 100svh;
    top: 0;
    right: 0;
    position: absolute;
    pointer-events: none;
}

.top-hello .access {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    pointer-events: all;
}

.top-hello .access .area {
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
}

.top-hello .access a {
    display: block;
    width: 34px;
    padding: 6px;
    margin: 0 2px;
    border-radius: 50%;
    transition: 1s;
    opacity: 0;
}

.top-hello .access a:nth-child(1) {
    animation: access-fadeup 1s 3s forwards;
}

.top-hello .access a:nth-child(2) {
    animation: access-fadeup 1s 3.1s forwards;
}

.top-hello .access a:nth-child(3) {
    animation: access-fadeup 1s 3.2s forwards;
}

.top-hello .access a:nth-child(4) {
    animation: access-fadeup 1s 3.3s forwards;
}

.top-hello .access a:nth-child(5) {
    animation: access-fadeup 1s 3.4s forwards;
}

.top-hello .access a:nth-child(6) {
    animation: access-fadeup 1s 3.5s forwards;
}

.top-hello .access a:nth-child(7) {
    animation: access-fadeup 1s 3.6s forwards;
}

.top-hello .access a:hover {
    background: rgba(160, 160, 160, 0.4);
    transition: .2s;
}

.top-hello .access img {
    display: block;
    width: 100%;
    filter: var(--img-change-white);
}

@keyframes access-fadeup {
    0% {
        transform: translateY(24px);
        opacity: 0;
    }

    75% {
        transform: translateY(-4px);
        opacity: .75;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 上部の宣伝 */
.foryou {
    color: #fff;
    margin: 0 auto 60px;
}

.foryou .area {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 calc((100% - var(--width-l)) / 2);
    scroll-padding: 0 calc((100% - var(--width-l)) / 2);
}

.foryou .area::-webkit-scrollbar {
    height: 4px;
}

.foryou article {
    scroll-snap-align: start;
    margin: 5px;
}

.foryou .content {
    position: relative;
    width: calc(1280px/3 - 5px*2 + 12px/3);
    height: min(65vh, 500px);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

@media screen and (max-width: 1320px) {
    .foryou .area {
        padding: 0 20px;
        scroll-padding: 0 20px;
    }

    .foryou .content {
        width: calc((100vw - 40px)/3 - 10px);
        transition: .2s;
    }
}

@media screen and (max-width: 1040px) {
    .foryou .content {
        width: calc((100vw - 40px)/2 - 12px);
    }
}

@media screen and (max-width: 767px) {
    .foryou .content {
        width: calc(100vw - 40px);
    }
}

.foryou .content>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: 0;
    transition: 1s;
}

.foryou .content:hover>img {
    transform: scale(1.05);
    transition: .5s;
}

.foryou .content .img2 {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    padding-top: 40px;
    z-index: 0;
    justify-content: center;
}

.foryou .content .img2 img {
    display: block;
    filter: drop-shadow(0 0 10px #0007);
}

.foryou .status {
    position: absolute;
    top: 15px;
    left: 0px;
    margin: 5px;
    padding: 6px;
    line-height: 1;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: .4s .01s;
}

.foryou article.active .status {
    opacity: 1;
    left: 15px;
    transition: .4s .4s;
}

.foryou .gradation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    transition: .5s .01s;
    backdrop-filter: blur(20px);
    mask-image: linear-gradient(to top, rgb(0 0 0 / 100%) 50%, rgb(0 0 0 / 0%) 100%);
    mask-composite: intersect;
}

.foryou article.active .gradation {
    height: 50%;
}

.foryou .content .info {
    z-index: 1;
    transform: scale(1);
    width: 100%;
}

.foryou .content .texts {
    padding: 20px 20px 0px;
    line-height: 1;
    opacity: 0;
    transition: .4s .1s;
}

.foryou article.active .content .texts {
    padding: 20px 20px 15px;
    line-height: 1.2;
    opacity: 1;
    transition: .5s .01s;
}

.foryou .content .texts h4 {
    font-size: 14px;
    color: #fffd;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.foryou .content .texts h3 {
    font-size: 24px;
    margin: 2px 0 0;
}

.foryou .content .texts p {
    font-size: 12px;
    color: #fffc;
    display: -webkit-box;
    margin: 10px 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

:root {
    --foryou-back: #fff3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foryou-back: #0003;
    }
}

.foryou .content .links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    padding: 15px 20px 15px;
    transition: .4s .01s;
}

.foryou article.active .content .links {
    padding: 15px 20px 20px;
    background: var(--foryou-back);
}

.foryou .content .links .left {
    display: flex;
    align-items: center;
}

.foryou .content .links .left img {
    width: 30px;
    border-radius: 8px;
    transition: .4s .01s;
}

.foryou article.active .content .links .left img {
    width: 40px;
    border-radius: 10px;
}

.foryou .content .links .left .linkdetail {
    margin-left: 10px;
    line-height: 1.25;
}

.foryou .content .links .left .linkdetail h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.foryou .content .links .left .linkdetail p {
    font-size: 12px;
    color: #fffa;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    height: 0px;
    opacity: 0;
    transition: .4s .01s;
}

.foryou article.active .content .links .left .linkdetail p {
    height: 15px;
    opacity: 1;
}

.foryou .content:hover .texts h4,
.foryou .content:hover .texts p,
.foryou .content:hover .links .left .linkdetail h4,
.foryou .content:hover .links .left .linkdetail p {
    -webkit-line-clamp: 3;
}

.foryou .content .links .right a {
    display: block;
    text-align: center;
    color: #fffc;
    background: #fff3;
    min-width: 60px;
    font-size: 14px;
    padding: 4px 12px;
    margin-left: 5px;
    border-radius: 50px;
    transition: 1s;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: .4s .01s;
}

.foryou article.active .content .links .right a {
    opacity: 1;
}

.foryou .content .links .right a:hover {
    color: #ffff;
    background: #fff5;
    filter: drop-shadow(0 0 10px #fff5);
    transition: .2s;
}

.foryou .pagination {
    width: min(var(--width-l), 100% - 40px);
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.foryou .pagination .right,
.foryou .pagination .left {
    display: flex;
}

.foryou .pagination button {
    background: var(--fourthback);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 1s;
}

.foryou .pagination button.play::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    transform: translateX(1px);
    border-left: 11px solid var(--maintext);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.foryou .pagination button.pause::before {
    content: '';
    display: block;
    width: 4px;
    height: 12px;
    transform: translateX(-3.5px);
    background-color: var(--maintext);
    box-shadow: 7px 0 0 0 var(--maintext);
}

.foryou .pagination .prev,
.foryou .pagination .next {
    padding: 10px;
}

.foryou .pagination .play-pause {
    margin-right: 7px;
}

.foryou .pagination .prev:hover,
.foryou .pagination .next:hover,
.foryou .pagination .play-pause:hover {
    background: var(--fifthback);
    transition: .2s;
}

.foryou .pagination .prev:active,
.foryou .pagination .next:active,
.foryou .pagination .play-pause:active {
    background: var(--sixthback);
    transform: scale(.94);
    transition: 0s;
}

.foryou .pagination .prev span,
.foryou .pagination .next span {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--maintext);
    border-right: 2px solid var(--maintext);
    transform: rotate(45deg) translate(-15%, 15%);
}

.foryou .pagination .prev span {
    transform: rotate(-135deg) translate(-15%, 15%);
}

.foryou .pagination .selects {
    display: flex;
}

.foryou .pagination .dot {
    background: var(--thirdtext);
    border: none;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s .18s, background .2s .02s;
}

.foryou .pagination .dot:hover {
    background: var(--secondtext);
    transition: all .1s 0s;
}

.foryou .pagination .dot.active {
    background: var(--maintext);
    width: 40px;
}

/* 投票する */
.vote-top-words {
    margin: 60px 0 0 0;
}

.vote-top-words .back {
    margin: 0 auto;
    width: min(var(--width-l), 100% - 40px);
    background: var(--secondback);
    border-radius: 30px;
    padding: 30px;
}

.vote-top-words .mini {
    font-size: 12px;
    color: var(--accentcolor);
}

.vote-top-words h2 {
    margin: 0 0 10px 0;
    line-height: 1.2;
    font-size: 32px;
    font-weight: 900;
}

.vote-top-words .lightexplain {
    margin: 0 0 20px;
    font-weight: 700;
    color: var(--subtext);
    line-height: 1.2;
}

.vote-top-words .open {
    color: var(--btntext);
    background: var(--btn);
    cursor: pointer;
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: bold;
    transition: 1s;
}

.vote-top-words .open:hover {
    background: var(--btnhover);
    transition: .2s;
}

.vote-top-words .form,
input[name="vote-top-words-page"] {
    display: none;
}

body:has(input[name="vote-top-words-page"]:checked) {
    overflow: hidden;
}

input:checked+.open+.form {
    display: flex;
    position: fixed;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 999;
    overflow-y: auto;
}

@media screen and (max-height: 750px) {
    input:checked+.open+.form {
        align-items: start;
    }
}

.vote-top-words form {
    width: min(720px, 90%);
    background: var(--secondback);
    filter: drop-shadow(0 0 30px #fff3);
    margin: 50px auto;
    padding: 20px;
    border-radius: 30px;
    z-index: 999;
}

.vote-top-words .backclose {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: #0003;
    backdrop-filter: blur(10px);
    cursor: pointer;
}

input[name="vote-top-words-page"]:checked+label {
    display: none;
}

.vote-top-words #form.active {
    display: none;
}

.vote-top-words .title {
    margin: 15px 0 0 0;
    font-size: 18px;
    font-weight: bold;
}

.vote-top-words span {
    border-radius: 5px;
    padding: 2px 5px;
    margin-left: 5px;
    font-size: 10px;
    font-weight: lighter;
    color: #FFF;
    text-align: center;
}

.vote-top-words .explain {
    font-size: 14px;
    color: var(--subtext);
}

.vote-top-words .name,
.vote-top-words textarea {
    background: var(--thirdback);
    max-width: 100%;
    border-radius: 5px;
    border: none;
    outline: none;
    margin: 5px 0;
    padding: 7px 10px;
    font-family: 'LSeedJP', sans-serif;
}

.vote-top-words .name {
    min-height: 35px;
    max-height: 35px;
    height: 35px;
}

.vote-top-words textarea {
    min-height: 35px;
    height: 60px;
    max-height: 100px;
}

.vote-top-words .name {
    width: 200px;
}

.vote-top-words .text {
    width: 100%;
    min-width: 100%;
}

.vote-top-words button {
    display: block;
    margin: 20px 0 0 0;
    padding: 6px 18px;
    background: var(--btn);
    color: var(--btntext);
    font-family: var(--font-family);
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: 1s;
}

.vote-top-words button.disabled {
    pointer-events: none;
    background: var(--sixthback);
    color: var(--subtext);
}

.vote-top-words button:hover {
    background: var(--btnhover);
    transition: .2s;
}

.vote-top-words .agreement {
    margin: 10px 0;
}

.vote-top-words .agreement label {
    margin: 5px 0;
}

.vote-top-words .help {
    background: var(--supportback);
    margin: 20px 0 0;
    padding: 15px;
    border-radius: 10px;
}

.vote-top-words .help h3 {
    font-size: 16px;
}

.vote-top-words .help p {
    font-size: 12px;
    line-height: 1.2;
    color: var(--secondtext);
    margin: 0 0 10px 0;
}

.vote-top-words .help a {
    background: var(--support);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
}

form input[type="checkbox"] {
    display: none;
}

form input[type="checkbox"]+label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
    color: var(--maintext);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

form input[type="checkbox"]+label:last-child {
    margin-bottom: 0;
}

form input[type="checkbox"]+label:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid var(--themecolor);
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

form input[type="checkbox"]:checked+label:before {
    width: 5px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    border: 2px solid var(--accentcolor);
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* SNSリンク */
.linktosns {
    margin: 60px auto 0 auto;
    width: min(var(--width-l), 100% - 40px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;

    .box.x {
        grid-column: span 3;
        grid-row: span 6;
    }

    .box.instagram,
    .box.youtube,
    .box.tiktok {
        grid-column: span 2;
        grid-row: span 6;
        aspect-ratio: 4/3;
    }

    @media (max-width:1000px) {

        .box.instagram,
        .box.youtube,
        .box.tiktok {
            aspect-ratio: 1/1;
        }
    }

    @media (max-width:767px) {
        .box.x {
            grid-column: span 3;
            grid-row: span 6;
        }

        .box.instagram {
            grid-column: span 6;
            grid-row: span 3;
            aspect-ratio: auto;
        }

        .box.youtube,
        .box.tiktok {
            grid-column: span 3;
            grid-row: span 3;
            aspect-ratio: 1/1;
        }
    }

    @media (max-width:500px) {
        .box.x {
            grid-column: span 5;
            grid-row: span 4;
        }

        .box.instagram {
            grid-column: span 9;
            grid-row: 5 / 7;
            aspect-ratio: auto;
        }

        .box.youtube,
        .box.tiktok {
            grid-column: span 4;
            grid-row: span 2;
        }
    }

    .box.instagram>label::before {
        content: "";
        position: absolute;
        bottom: -80%;
        left: -45%;
        width: 150%;
        height: 150%;
        background: radial-gradient(#fcff4e, #ffa959, #ffae00ad 40%, #ff19ba00 70%);
        z-index: 0;
    }

    .box.instagram>label::after {
        content: "";
        position: absolute;
        top: -20%;
        right: -20%;
        width: 100%;
        height: 100%;
        background: radial-gradient(#ff72d59c, #ff5a1900 70%);
        z-index: 0;
    }

    .box.tiktok>label::before {
        content: "";
        position: absolute;
        top: -170%;
        right: -100%;
        width: 200%;
        height: 200%;
        background: #18b6be;
        opacity: .9;
        border-radius: 50%;
        z-index: 0;
    }

    .box.tiktok>label::after {
        content: "";
        position: absolute;
        bottom: -110%;
        right: -180%;
        width: 220%;
        height: 220%;
        background: #e72b55;
        opacity: .9;
        border-radius: 50%;
        z-index: 0;
    }

    .box {
        input {
            display: none;
        }

        input+label {
            background: var(--secondback);
            width: 100%;
            height: 100%;
            padding: 15px;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            outline: 2px solid #0000;
            outline-offset: 8px;
            transition: 1s;
            position: relative;
            overflow: hidden;

            img {
                filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
                width: 50px;
                z-index: 1;
            }

            .buttom {
                z-index: 1;
                color: #fff;

                p {
                    font-size: 12px;
                    color: #fffb;
                    line-height: 1.2;
                }
            }

            &:hover {
                outline: 2px solid var(--line);
                outline-offset: 2px;
                transition: .2s;
            }

            &:active {
                outline: 2px solid var(--accentcolor);
                outline-offset: -2px;
                transform: scale(.95);
                transition: .1s;
            }
        }

        input+label+article {
            display: none;
            z-index: 3;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }

        input:checked+label+article {
            display: block;
        }

        article {
            .backblur {
                display: block;
                backdrop-filter: blur(20px);
                width: 100%;
                height: 100vh;
                background: #0004;
                cursor: pointer;
                animation: linktosnsbackblur .5s;
            }

            .content {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;

                &>div {
                    width: min(var(--width-ss), 100% - 40px);
                    height: fit-content;
                    background: var(--thirdback);
                    border-radius: 30px;
                    padding: 25px 0 15px;
                    filter: drop-shadow(0 0 10px #0004);
                    pointer-events: all;
                    animation: linktosnscontent .5s;

                    .top {
                        display: flex;
                        align-items: center;
                        padding: 0 20px;

                        img {
                            filter: var(--img-change-white);
                            height: 1.5lh;
                        }

                        h3 {
                            font-size: 28px;
                            font-weight: 900;
                            line-height: 1.2;
                            margin: 0 0 0 10px;
                        }
                    }

                    .accounts {
                        margin: 20px 0 0;

                        .select {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 5px 20px;
                            transition: 1s;

                            &:hover {
                                background: var(--fourthback);
                                transition: .2s;
                            }

                            .left {
                                display: flex;
                                align-items: center;

                                img {
                                    border-radius: 50%;
                                    width: 50px;
                                }

                                .name {
                                    line-height: 1.2;
                                    margin: 0 0 0 10px;
                                    color: var(--maintext);

                                    p {
                                        color: var(--subtext);
                                        font-size: 12px;
                                    }
                                }
                            }

                            .right {
                                font-size: 12px;
                                color: var(--subtext);
                            }
                        }
                    }
                }
            }
        }
    }
}

body:has(.linktosns input[type="checkbox"]:checked) {
    overflow: hidden;
}

@keyframes linktosnsbackblur {
    0% {
        backdrop-filter: blur(0px);
    }

    100% {
        backdrop-filter: blur(20px);
    }
}

@keyframes linktosnscontent {
    0% {
        transform: scale(.8);
        filter: blur(20px);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

/* プロフィール */
.profile {
    width: 100%;
    margin: 60px auto;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--secondback);
    color: var(--maintext);
    box-sizing: border-box;

    h2 {
        font-size: 3rem;
        margin-bottom: 50px;
        font-weight: 800;
        letter-spacing: -0.04em;
        width: min(100% - 40px, var(--width-l));
        text-align: left;

        @media (max-width: 767px) {
            font-size: 2.2rem;
            margin-bottom: 35px;

        }
    }

    .area {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 max(20px, calc((100% - var(--width-l)) / 2));
        width: 100%;
        box-sizing: border-box;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
        cursor: grab;

        &:active {
            cursor: grabbing;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        @media (max-width: 900px) {
            padding: 0 20px;
            gap: 12px;
        }
    }

    .box {
        background: var(--thirdback);
        border-radius: 32px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s ease;
        height: min(100svh - 100px, 600px);
        flex: 0 0 auto;
        width: 100%;
        scroll-snap-align: center;
        justify-content: space-between;
        box-sizing: border-box;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

        @media (max-width: 767px) {
            min-height: 450px;
            padding: 25px 20px;
        }

        @media (max-width: 767px) {
            &:hover {
                transform: scale(1.01);
            }
        }

        &.dark-overlay .box-overlay {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
        }

        .box-content {
            z-index: 1;
        }

        h4 {
            margin: 0;
            font-size: 2rem;
            gap: 12px;
            color: #FFF;
        }

        p {
            line-height: 1.7;
        }

        .category {
            color: var(--secondtext);
            background: var(--thirdback-t);
            padding: 5px;
            font-size: 12px;
            line-height: 1;
            border-radius: 5px;
            width: fit-content;
        }

        /* ここから各ボックスのデザイン */

        h4 {
            font-size: 36px;
            word-break: keep-all;
            overflow-wrap: break-word;
            line-height: 1.2;
        }

        p {
            font-size: 20px;
            color: var(--secondtext);
            line-height: 1.4;
            margin-top: 10px;
        }

        &#slide-0 {
            h3 {
                font-size: 40px;
                line-height: 1.2;
            }

            .emoji {
                position: absolute;
                top: 25%;
                right: 30%;
                font-size: 100px;
                color: var(--maintext);

                span {
                    position: absolute;
                    display: block;

                    &:first-child {
                        font-size: 2em;
                        left: -150px;
                        top: -30px;
                    }

                    &:last-child {
                        transform: rotate(10deg);
                    }
                }

                @media (max-width: 767px) {
                    display: none;
                }
            }
        }

        &#slide-1 {
            display: flex;
            justify-content: space-between;
            padding: 0;

            div {
                margin-top: 20px;
                padding: 30px;

                h4 {
                    line-height: 1.5;
                    text-align: center;
                }

                p {
                    text-align: center;
                    color: var(--secondtext);
                }

                a {
                    display: block;
                    margin: 20px auto 0;
                    text-align: center;
                    width: fit-content;
                    color: var(--btntext);
                    background: var(--btn);
                    padding: 6px 16px;
                    border-radius: 99px;
                    transition: .2s;

                    &:hover {
                        background: var(--btnhover);
                    }
                }
            }

            img {
                display: block;
                margin: 0 auto 0;
                width: fit-content;
                max-width: min(400px, 100% - 40px);
                transform: translateY(100px);
                transition: 1s;
            }

            &.active img {
                transform: translateY(0px);
            }
        }

        &#slide-2 {
            color: #fff;

            .box-overlay {
                background: radial-gradient(at top right, #0000 60%, #000a);
            }

            .box-content {
                z-index: 2;
                position: absolute;
                width: calc(100% - 60px);
                bottom: 30px;
                left: 30px;
            }
        }

        &#slide-3 {
            display: flex;
            justify-content: center;
            background: radial-gradient(at top right, #e1ff00, #ff00f2);

            .category {
                margin: 0 0 10px;
            }
        }

        &#slide-4 {
            display: flex;
            align-items: center;
            text-align: center;
            background: radial-gradient(at top, #45388c, #3a0340);

            .texts {
                z-index: 2;
                transform: scale(1) translateX(-50%);
                position: absolute;
                top: 30px;
                left: 50%;
                width: calc(100% - 40px);

                .category {
                    margin: 0 auto 10px;
                }
            }

            .imgs {
                position: absolute;
                top: 40%;
                right: 50%;
                transform: translateX(-50%);
                z-index: 0;

                img {
                    position: absolute;
                    width: 128px;
                    z-index: 0;
                    opacity: 0;
                    transition: 2s;
                    filter: drop-shadow(0 0 10px #0004);

                    &:nth-child(1) {
                        top: -170px;
                        left: 180px;
                        transform: rotate(-18deg) scale(0.7);
                    }

                    &:nth-child(2) {
                        top: 240px;
                        right: -160px;
                        transform: rotate(-5deg) scale(0.75);
                    }

                    &:nth-child(3) {
                        top: -190px;
                        right: -130px;
                        transform: rotate(0deg) scale(0.8);
                    }

                    &:nth-child(4) {
                        top: 360px;
                        left: -140px;
                        transform: rotate(2deg) scale(0.85);
                    }

                    &:nth-child(5) {
                        top: 180px;
                        left: -300px;
                        transform: rotate(-15deg) scale(0.9);
                    }

                    &:nth-child(6) {
                        top: 300px;
                        right: 140px;
                        transform: rotate(20deg) scale(0.95);
                    }

                    &:nth-child(7) {
                        top: -140px;
                        right: 200px;
                        transform: rotate(-10deg) scale(1.0);
                    }

                    &:nth-child(8) {
                        top: 250px;
                        left: 170px;
                        transform: rotate(-3deg) scale(1.05);
                    }

                    &:nth-child(9) {
                        top: -110px;
                        left: 260px;
                        transform: rotate(40deg) scale(1.1);
                    }

                    &:nth-child(10) {
                        top: 0;
                        right: -170px;
                        transform: rotate(10deg) scale(1.15);
                        transition: 2s;
                    }
                }
            }

            &.active .imgs {
                img {
                    transition: 1s;
                    opacity: 1;

                    &:nth-child(1) {
                        top: -70px;
                        left: 80px;
                        transform: rotate(-12deg) scale(0.7);
                        transition: 1s .2s;
                    }

                    &:nth-child(2) {
                        top: 140px;
                        right: -60px;
                        transform: rotate(5deg) scale(0.75);
                        transition: 1.5s .3s;
                    }

                    &:nth-child(3) {
                        top: -90px;
                        right: -30px;
                        transform: rotate(8deg) scale(0.8);
                        transition: 1.2s .4s;
                    }

                    &:nth-child(4) {
                        top: 260px;
                        left: -40px;
                        transform: rotate(25deg) scale(0.85);
                        transition: 1s .5s;
                    }

                    &:nth-child(5) {
                        top: 80px;
                        left: -250px;
                        transform: rotate(15deg) scale(0.9);
                        transition: 1.2s .6s;
                    }

                    &:nth-child(6) {
                        top: 200px;
                        right: 40px;
                        transform: rotate(-20deg) scale(0.95);
                        transition: 1.8s .7s;
                    }

                    &:nth-child(7) {
                        top: -40px;
                        right: 100px;
                        transform: rotate(10deg) scale(1.0);
                        transition: 1s .8s;
                    }

                    &:nth-child(8) {
                        top: 150px;
                        left: 70px;
                        transform: rotate(15deg) scale(1.05);
                        transition: 1.5s .9s;
                    }

                    &:nth-child(9) {
                        top: -10px;
                        left: 160px;
                        transform: rotate(22deg) scale(1.1);
                        transition: 1.3s 1s;
                    }

                    &:nth-child(10) {
                        top: 0;
                        right: -70px;
                        transform: rotate(-10deg) scale(1.15);
                        transition: 1s 1.1s;
                    }

                    &:hover {
                        transition: .2s 0s;
                        transform: rotate(0);
                    }

                    &:active {
                        transition: .1s 0s;
                        transform: scale(0.8);
                    }
                }
            }
        }

        &#slide-5 {
            .box-overlay {
                background: radial-gradient(at top left, #181444aa, #0000 50%);
                z-index: 1;
            }
        }

        &#slide-6 {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: flex-end;

            .category {
                margin: 0 auto 10px;
            }

            .box-overlay {
                background: linear-gradient(#00000000 50%, #00000070 90%);
            }
        }

        &#slide-7 {
            display: flex;
            justify-content: flex-end;

            .box-overlay {
                background: linear-gradient(#00000000 50%, #00000070 90%);
            }
        }
    }

    .box-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: cover;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .box:hover .box-bg {
        transform: scale(1.05);
    }

    .box-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 1;
        pointer-events: none;
        transition: background 0.3s ease;
    }

    .material-symbols-outlined {
        font-size: 36px;
        color: #fff;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 14px;
        border-radius: 50%;
        width: fit-content;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;

        @media (max-width: 767px) {
            font-size: 32px;
            padding: 12px;
        }
    }

    @keyframes iconPop {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }

        50% {
            transform: scale(1.1);
        }

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

    .box:hover .material-symbols-outlined {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(1.05);
    }

    .carousel-controls {
        display: flex;
        align-items: center;
        position: sticky;
        bottom: 20px;
        gap: 12px;
        margin-top: 40px;
        background: var(--thirdback-t);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 8px 8px 8px 20px;
        border-radius: 50px;
        z-index: 10;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        max-width: 100%;
        overflow: visible;

        .indicators {
            display: flex;
            gap: 6px;
            align-items: center;
            flex: 1;
            min-width: 0;
        }

        .indicators .dot {
            flex: 0 0 6px;
            height: 8px;
            min-width: 8px;
            max-width: 8px;
            background: var(--thirdtext);
            border-radius: 4px;
            cursor: pointer;
            transition: max-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), min-width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), flex 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .indicators .dot.active {
            flex: 1 1 auto;
            min-width: 50px;
            max-width: 100%;
        }

        .indicators .dot.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--maintext);
            width: var(--progress, 0%);
            border-radius: 3px;
            transition: width 0.05s linear;
        }

        .indicators .dot:not(.active):hover {
            background: var(--accentcolor);
        }
    }

    .auto-play-toggle {
        background: var(--fourthback-t);
        border: none;
        color: var(--secondtext);
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border-radius: 50%;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        min-width: 36px;

        &:hover {
            color: #fff;
            background: var(--fifthback-t);
        }

        &:active {
            transform: scale(0.95);
            transition: 0s;
        }

        span {
            font-size: 20px;
            margin: 0;
            background: none;
            box-shadow: none;
            backdrop-filter: none;
        }
    }
}

@keyframes progressBarFill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes waveHand {

    0%,
    100% {
        transform: rotate(-14deg);
    }

    15% {
        transform: rotate(10deg);
    }

    30% {
        transform: rotate(-14deg);
    }

    45% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-14deg);
    }
}

/* slide-0\u306e✋\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 */
#slide-0 span:first-of-type {
    display: inline-block;
    transform-origin: 70% 70%;
}

#slide-0.active span:first-of-type {
    animation: waveHand 3s infinite;
}


/* Created By Xullua */
.createdbyxullua {
    --createdbyxullua-radius: 30px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--secondback);
    border-radius: var(--createdbyxullua-radius);
    width: min(var(--width-l), 100% - 40px);
    margin: 60px auto 0 auto;
    padding: 20px 20px 28px;
    line-height: 1.2;

    &::before {
        content: "";
        position: absolute;
        inset: -3px;
        aspect-ratio: 1/1;
        border-radius: inherit;
        background: conic-gradient(
            from 0deg,
            #6da6ff,
            #7ddaff,
            #63ffce,
            #eaff7f,
            #ffb26f,
            #ff89d6,
            #8b7bff,
            #6da6ff);
        animation: ai-rainbow-spin 20s linear infinite;
        filter: saturate(125%) blur(30px);
        z-index: 0;
        opacity: .5;
        pointer-events: none;
        transition: 1s;
    }

    &::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: calc(var(--createdbyxullua-radius) - 4px);
        background: var(--secondback);
        filter: blur(15px);
        z-index: 1;
        pointer-events: none;
        transition: 1s;
    }

    &:hover::before {
        opacity: 1;
    }

    > * {
        position: relative;
        z-index: 2;
    }

    p {
        font-size: 12px;
        color: var(--secondtext);
        margin: 5px 0 40px 0;
    }

    a {
        background: var(--btn);
        color: var(--btntext);
        padding: 5px 15px;
        border-radius: 99px;
        transition: .2s;

        &:hover {
            background: var(--btnhover);
        }
    }
}

@keyframes ai-rainbow-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 仕様デバイス */
.usedevice {
    background: var(--secondback);
    border-radius: 30px;
    width: min(var(--width-l), 100% - 40px);
    height: 50svh;
    margin: 60px auto 0 auto;
    padding: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-image: url(//xullua.com/img/profile-gadget.webp);
    background-size: cover;
    background-position: center center;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(#00000000,#000000a7);
        z-index: 0;
    }

    .texts {
        z-index: 1;
        text-align: center;
        line-height: 1.2;

        h2 {
            font-size: 16px;
        }

        p {
            font-size: 40px;
            word-break: auto-phrase;
        }

        a {
            display: block;
            width: fit-content;
            padding: 8px 15px;
            border-radius: 99px;
            background: var(--btn);
            color: var(--btntext);
            margin: 10px auto 0;
            font-size: 14px;
            transition: .2s;

            &:hover {
                background: var(--btnhover);
            }
        }

        @media screen and (max-width:500px) {
            p {
                font-size: 36px;
            }
            
        }
    }
}


/* ストア宣伝 */
.store-ad {
    background: var(--secondback);
    border-radius: 30px;
    width: min(var(--width-l), 100% - 40px);
    margin: 60px auto 0 auto;
    padding: 40px 0;
}

.store-ad h2 {
    text-align: center;
    line-height: 1.1;
    font-weight: 900;
}

.store-ad .slide {
    display: flex;
    overflow-y: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc((100% - 260px*4)/2);
    padding: 0 calc((100% - 260px*4)/2);
}

.store-ad .slide::-webkit-scrollbar {
    display: block;
}

.store-ad .type {
    min-width: 260px;
    scroll-snap-align: start;
}

@media screen and (max-width: 1200px) {
    .store-ad .slide {
        padding: 0 calc((100% - 260px*3)/2);
        scroll-padding: 0 calc((100% - 260px*3)/2);
    }
}

@media screen and (max-width: 900px) {
    .store-ad .slide {
        padding: 0 calc((100% - 260px*2)/2);
        scroll-padding: 0 calc((100% - 260px*2)/2);
    }
}

@media screen and (max-width: 600px) {
    .store-ad .slide {
        padding: 0 calc((100% - 240px)/2);
        scroll-padding: 0 calc((100% - 240px)/2);
    }

    .store-ad .slide::-webkit-scrollbar {
        display: none;
    }

    .store-ad .type {
        min-width: 240px;
    }
}

.store-ad .area {
    width: 100%;
}

input[name="store-mystical"],
input[name="store-glowwiper"],
input[name="store-snake"],
input[name="store-ad"],
input[name="store-overlap"],
input[name="store-Wave"] {
    display: none;
}

.store-ad .content {
    display: none;
}

input:checked+label+.content {
    display: block;
    text-align: center;
    margin: 20px 0 0 0;
}

.store-ad .area .content img {
    width: 200px;
    border-radius: 25px;
    animation: store-ad-img .8s cubic-bezier(0, 1.1, 1, 1);
}

@keyframes store-ad-img {
    from {
        transform: scale(.8) translateY(75px);
    }

    to {
        transform: scale(1) translateY(0);
    }
}

.store-ad .area .content h3 {
    opacity: 0;
    animation: store-ad-text .7s cubic-bezier(0, 1.1, 1, 1) .1s forwards;
}

.store-ad .area .content p {
    margin: 0 0 10px 0;
    opacity: 0;
    animation: store-ad-text .5s cubic-bezier(0, 1.1, 1, 1) .3s forwards;
}

@keyframes store-ad-text {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.store-ad .area .content a {
    background: var(--themecolor);
    border-radius: 40px;
    padding: 6px 18px;
    color: #FFF;
    font-size: 14px;
    transition: 1s;
}

.store-ad .area .content a:hover {
    background: var(--themecolorhover);
    transition: .2s;
}

.store-ad .all-buy {
    display: block;
    text-align: center;
    margin: 10px auto 0 auto;
    font-size: 13px;
    color: var(--url);
}

.store-ad .all-buy:hover {
    color: var(--urlhover);
    text-decoration: underline;
}

.store-ad .btn {
    margin: 10px 0 10px 0;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-ad .btn label {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #ebebeb;
    margin: 0 5px;
    cursor: pointer;
    transition: .2s;
}

.store-ad .btn label:hover {
    width: 25px;
    height: 25px;
    margin: 0 2.5px;
}

.store-ad .move p {
    text-align: center;
    font-size: 14px;
    margin: 20px 0 0 0;
}

/* ツール */
.indextools {
    width: min(var(--width-l), 100% - 40px);
    margin: 60px auto;
}

.indextools h2 {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.2;
}

.indextools .topexplain {
    font-weight: 700;
    color: var(--subtext);
    line-height: 1.2;
    margin: 10px 0;
}

.indextools .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}

.indextools article {
    grid-column: span 1;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--secondback);
    text-align: center;
}

.indextools article img {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
}

.indextools article .text {
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 20px 0 40px;
    background: linear-gradient(var(--secondback) 30%, #00000000);
}

.indextools .text h5 {
    font-size: 10px;
    font-weight: 500;
    color: var(--accentcolor);
    line-height: 1;
    height: 10px;
}

.indextools .text h3 {
    font-size: 24px;
}

.indextools .text p {
    margin: 0 0 20px;
    padding: 0 10px;
}

.indextools a {
    background: var(--btn);
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--btntext);
    border-radius: 99px;
    transition: 1s;
}

.indextools a:hover {
    background: var(--btnhover);
    transition: .2s;
}

@media screen and (max-width: 1280px) {
    .indextools .text h3 {
        font-size: 22px;
    }

    .indextools .text p {
        font-size: 15px;
    }
}

@media screen and (max-width: 1000px) {
    .indextools .text h3 {
        font-size: 24px;
    }

    .indextools .text p {
        font-size: 16px;
    }

    .indextools .grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .indextools .text h3 {
        font-size: 22px;
    }

    .indextools .text p {
        font-size: 15px;
    }
}

@media screen and (max-width: 600px) {
    .indextools .text h3 {
        font-size: 24px;
    }

    .indextools .text p {
        font-size: 16px;
    }

    .indextools .grid {
        grid-template-columns: 1fr;
    }
}

/* instagram AD */
.instaad {
    width: min(var(--width-l), 100% - 40px);
    margin: 60px auto;
}

.instaad .area {
    min-height: 60vh;
    background-position: center center;
    background-size: 115%;
    border-radius: 30px;
    padding: 20px 20px 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

.instaad .area::before {
    content: "";
    bottom: 0;
    right: 0;
    position: absolute;
    width: 100%;
    height: min(50%, 200px);
    background: linear-gradient(185deg, #0000 38%, var(--secondback));
    border-radius: 0 0 15px 15px;
}

.instaad img {
    width: min(35px, 8%);
    aspect-ratio: 1/1;
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

.instaad .in {
    width: 100%;
    line-height: 1.3;
    transform: translate(0);
}

.instaad .in h2 {
    font-weight: 900;
    font-size: 32px;
}

.instaad .in p {
    font-size: 12px;
    margin: 0 0 15px;
}

.instaad .in a {
    color: var(--btntext);
    background: var(--btn);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 99px;
    transition: 1s;
}

.instaad .in a:hover {
    background: var(--btnhover);
    transition: .2s;
}

/* サイトマップ */
.sitemap {
    margin: 50px auto;
    width: 1280px;
    max-width: 100%;
    padding: 20px;
}

.sitemap h1 {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    background: linear-gradient(45deg, #553686, #e967ee);
    background: -webkit-linear-gradient(45deg, #8752db, #eba3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sitemap hr {
    border: none;
    border-bottom: 1px solid var(--line);
}

.sitemap .top {
    margin-bottom: 30px;
}

.sitemap .top p {
    color: var(--subtext);
}

.sitemap .map {
    margin: 30px 0;
}

.sitemap .map h2 {
    font-size: 18px;
}

.sitemap .map ul {
    list-style: none;
}

@media screen and (max-width: 767px) {
    .sitemap .top p {
        font-size: 14px;
    }
}

/* プレゼント */
.presents {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    margin-right: 25px;
    margin-left: 25px;
    margin-bottom: 50px;
    text-align: center;
    color: var(--maintext);
}

.present-title1 {
    font-size: 23px;
}

.present-text1 {
    font-size: 14px;
}

.present-howto {
    background-color: var(--subback);
    border-radius: 25px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: var(--maintext);
    text-align: center;
    max-width: 90%;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 20px;
}

.present-howto-title {
    font-size: 23px;
    margin-bottom: 10px;
}

.present-howto-text {
    font-size: 16px;
    color: var(--subtext);
}

.present-text-mini {
    font-size: 12px;
    color: rgb(124, 124, 124);
}

.simple_square_btn6 {
    display: block;
    font-size: 14px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    width: 160px;
    padding: 0.4em;
    text-align: center;
    text-decoration: none;
    color: #222222;
    background: #fff;
    border-radius: 30px;
    border: 0px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.simple_square_btn6:hover {
    cursor: pointer;
    text-decoration: none;
    -webkit-animation: simple_square_btn6 0.5s both;
    -moz-animation: simple_square_btn6 0.5s both;
    animation: simple_square_btn6 0.5s both;
    background-color: #585858;
    color: #fff;
}

@-webkit-keyframes simple_square_btn6 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@-moz-keyframes simple_square_btn6 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes simple_square_btn6 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.present-attention {
    width: 500px;
    max-width: 90%;
    margin: 0 auto;
    margin-bottom: 50px;
    margin-top: 50px;
}

.present-a-title {
    text-align: center;
    font-size: 23px;
    margin-bottom: 10px;
    color: var(--maintext);
}

.present-a-text {
    font-size: 14px;
    color: var(--subtext);
}

.present-ex {
    background-color: var(--mainback);
    text-align: left;
    padding: 15px;
    width: 180px;
    max-width: 90%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 5px;
    border-radius: 10px;
}

.present-ex-img {
    max-width: 100%;
    width: 500px;
    border-radius: 15px;
    margin-top: 15px;
}

.present-img {
    max-width: 100%;
    border-radius: 15px;
    margin-left: 10px;
    margin-right: 10px;
}

.present-samune {
    max-width: 90%;
    width: 720px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.pre-a-top {
    margin-top: 80px;
}

.pre-a-top-title {
    text-align: center;
}

.pre-a-top-text {
    text-align: center;
    text-decoration: none;
}

.pre-a-howto {
    margin-top: 30px;
}

.pre-a-img {
    width: 500px;
    max-width: 90%;
    border-radius: 10px;
    margin-top: 15px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.26));
}

.pre-a-un {
    margin: 30px auto;
    text-align: center;
}

/* ゲーム */
.game-box {
    border-radius: 15px;
    background-color: var(--secondback);
    width: 720px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 90%;
    padding: 20px;
    transition: 0.5s;
}

.game-box:hover {
    transform: scale(1.03, 1.03);
    background-color: var(--blue-2);
    color: #fff;
}

.game-inside {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.game-img {
    width: 60px;
    margin-right: 20px;
}

.game-more {
    flex: 1;
}

.game-title {
    margin-bottom: 5px;
    color: var(--maintext);
}

.game-text {
    font-size: 14px;
    color: var(--subtext);
}

.game-btn {
    display: block;
    font-size: 14px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    width: 180px;
    padding: 0.4em;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: var(--blue-1);
    border-radius: 30px;
    border: 0px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 1s;
}

.game-btn:hover {
    cursor: pointer;
    text-decoration: none;
    -webkit-animation: game-btn 0.5s both;
    -moz-animation: game-btn 0.5s both;
    animation: game-btn 0.5s both;
    background-color: var(--blue-3);
    color: #fff;
}

@-webkit-keyframes game-btn {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@-moz-keyframes game-btn {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes game-btn {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.game-fb {
    font-size: 8px;
    color: #7e7e7e;
    text-align: center;
    margin-top: 5px;
}

.game-title2 {
    margin-bottom: 5px;
    text-align: center;
    color: var(--maintext);
}

.game-text2 {
    font-size: 14px;
    text-align: center;
    color: var(--subtext);
}

.game-faq {
    max-width: 720px;
    width: 90%;
    margin: 0 auto;
}

.game-faq-titles {
    margin-top: 30px;
    margin-bottom: 20px;
    margin: 0 auto;
    text-align: center;
}

.game-faq-title {
    margin-bottom: 5px;
    color: var(--maintext);
}

.game-faq-text {
    font-size: 10px;
    color: var(--subtext);
}

.game-faq-url {
    font-size: 10px;
    color: var(--url);
    text-decoration: none;
}

.game-faq-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

.game-q {
    background: linear-gradient(transparent 60%, rgba(255, 255, 102, 0.425) 30%);
    font-weight: bold;
    color: var(--maintext);
}

.game-a {
    font-size: 14px;
    color: var(--subtext);
}

.game-a-url {
    text-decoration: none;
    font-size: 14px;
    color: var(url);
}

.game-blog {}

.game-blog-top {
    margin: 30px auto 10px auto;
    text-align: center;
}

.game-blog-top-title {
    color: var(--maintext);
}

.game-blog-top-text {
    font-size: 12px;
    color: var(--subtext);
}

.game-blog-top-text::after {
    content: "横にスクロールできます。";
}

.blog-slide {
    display: flex;
    max-width: 100%;
    margin: 0 auto 20px auto;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
}

/* Chrome, Safari 対応 */
.blog-slide::-webkit-scrollbar {
    display: none;
}

.blog-slide ul {
    display: flex;
    overflow-x: auto;
    padding: 0 calc((100% - 720px)/2);
    scroll-snap-type: x mandatory;
    margin: 0 auto;
}

.blog-slide li {
    min-width: 45%;
    max-width: 50%;
    margin: 5px;
    padding: 0;
    list-style: none;
    scroll-snap-align: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-margin-left: 20px;
    display: flex;
}

.blog-box {
    border-radius: 10px;
    background-color: var(--subback);
    height: 100%;
}

.blog-box-url {
    text-decoration: none;
}

.blog-box-img {
    border-radius: 10px 10px 0 0;
    max-width: 100%;
}

.blog-box-more {
    margin: 5px 10px 10px 10px;
}

.blog-box-more-title {
    font-weight: bold;
    color: var(--maintext);
}

.blog-box-more-text {
    font-size: 12px;
    color: var(--subtext);
}

@media screen and (max-width: 767px) {
    .game-blog-top-text::after {
        content: "横にスワイプできます。";
    }

    .blog-slide ul {
        padding: 0 calc((100vw - 80vw)/2);
    }

    .blog-slide li {
        min-width: 100%;
    }

    .blog-box-more-title {
        font-size: 14px;
    }

    .blog-box-more-text {
        font-size: 11px;
    }
}

.faq-btn {
    background-color: var(--blue-2);
    border-radius: 50px;
    color: var(--maintext);
    padding: 5px 20px;
    text-decoration: none;
    font-size: 11px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    float: right;
    transition: 0.5s;
}

.faq-btn:hover {
    background-color: var(--blue-3);
    color: #FFFFFF;
}

.faq-btns {
    margin-bottom: 40px;
}

.faq-hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.faq-btn2 {
    background-color: rgb(126, 126, 126);
    border-radius: 50px;
    padding: 3px 10px;
    color: #FFF;
    text-decoration: none;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s;
    width: 110px;
}

.faq-btn2:hover {
    background-color: rgb(118, 102, 175);
}

.faq-btn2-c {
    text-align: center;
}