@charset "utf-8";
.interactive{
    position: relative;
    transition: .5s ease-in-out;
    transform: translateY(40px);
    opacity: 0;
} 
.fadeIn {
    transform: translateY(0);
    opacity: 100;
} 
.delay {
    transition: transform .8s, opacity .4s;
}

body .content-wrapper{
    position: relative;
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 300;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.9em;
    color: #1a556d;
    overflow-x: clip;
}
.content-wrapper {
    max-width: 100%;
    margin: 0 auto;
}
main.campaign{
    max-width: 1200px;
    margin: 0 auto;
    background-color: #219ed6;
}
.campaign h2,
.campaign h3,
.campaign h4{
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-align: center;
}

header.scrolled#header {
    top: 0;
}

/*firstview----------------------------*/
.firstview{
    background: url(../img/bg.webp);
    background-size: cover;
    height: 850px;
    background-position: center;
}
.firstview::before{
    content: '';
    background: url(../img/boxes.webp);
    width: 100%;
    min-height: 750px;
    top: 0;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 1200px;
}
.firstview::after{
    content: '';
    background: url(../img/characterbg.svg);
    width: 100%;
    min-height: 750px;
    top: 0;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 1200px;
}
.firstview img {
    width: 100%;
    max-width: fit-content;
    margin: 0 auto;
    display: block;
    position: relative;
    aspect-ratio: 396 / 335;
}
.firstview img:nth-child(2) {
    aspect-ratio: 396 / 296;
    position: relative;
    top: -140px;
    transform-origin: 50% 130px;
    animation: bounceLoop 1.7s ease-in-out infinite;
}

/* overview----------------------------*/
.overview{
    margin-top: 20px;
}
.arrow{
    display: block;
    margin: 80px auto;
    position: relative;
    z-index: 2;
    aspect-ratio: 34/19;
}
.overview h2 {
    color: #fff;
    font-size: clamp(1.3em, 2vw, 2em);
    width: 85%;
    display: block;
    margin: 0 auto;
}
.overview h2 small {
    color: rgb(13 77 104);
    font-weight: lighter;
    font-size: 70%;
}
.overview p{
    font-weight: 900;
    text-align: center;
    margin-top: 15px;
    color: #ff3040;
    font-size: 1.4em;
}
.overview img,.process img{
    margin: 0 auto;
}

/* process----------------------------*/
.process {
    width: 95%;
    margin: 50px auto 0;
}
.hashtag{
    color: #246fc9;
}
.counter {
    display: block;
    position: absolute;
    width: 70px;
    height: 70px;
}
.step2 .counter {
    transform: translateX(-300px);
}
.step1 .counter {
    transform: translateX(-294px);
}
.process button{
    color: #fff;
    font-size: 0.8em;
    text-align: center;
    display: block;
    background: #0095f6;
    border-radius: 10px;
    margin-top: 20px;
    transition: .5s ease-in-out;
}
.process button:hover{
    background: #0a83c6;
}
.process button a{
    padding: 15px 20px;
    display: block;
    font-weight: 500;
}
.process .step1,
.process .step2 {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    gap: var(--bs-gap, 1.5rem);
}
.process .step1{
    position: relative;
}
.background-2 {
    background: url(../img/bg2.webp);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    width: 50vw;
    max-width: 770px;
    right: 0;
    top: 150px;
    aspect-ratio: 1 / 1;
}
.background-2::before {
    content: '';
    background: url(../img/character5.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    aspect-ratio: 1 / 1;
    display: block;
    position: relative;
    top: 280px;
    left: 470px;
}
.background-2::after {
    content: '';
    background: url(../img/box2.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 250px;
    top: 110px;
    left: 470px;
    aspect-ratio: 1 / 1;
    display: block;
}
.cols .card {
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.19);
    background: linear-gradient(137deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background-image: url(../img/cardbg.webp);
    border-radius: 16px;
    -webkit-box-shadow: 0 7px 0px rgb(0 0 0 / 10%), inset 0 0 25px #43feffde, 0 0 5px #d3f9ff40;
    -moz-box-shadow: 0 7px 0px rgb(0 0 0 / 10%), inset 0 0 25px #43feffde, 0 0 5px #d3f9ff40;
    box-shadow: 0 7px 0px rgb(0 0 0 / 10%), inset 0 0 25px #43feffde, 0 0 5px #d3f9ff40;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(8.6px);
    border: 1px solid rgb(255 255 255 / 30%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 2% 3%;
}
.cols .card p {
    color: #fff;
    font-size: clamp(1rem, 2.3vw, 2.5rem);
    font-weight: lighter;
}
.step1 .bandanaText {
    font-size: min(50vw, 45px);
    font-family: dela-gothic-one, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(255, 255, 255);
    text-shadow: 0px 8px 0px rgba(13 77 104 / 40%);
    white-space: nowrap;
    margin: 15px auto;
}

.step1 .conditions{
    font-family: hiragino-kaku-gothic-pron, sans-serif;
    font-weight: 300;
    -webkit-text-stroke: transparent;
    text-shadow: none;
    color: #1a556d;
    font-size: 0.65em;
    margin-top: 20px;
    margin-left: 20px;
}

.process .step2{
    position: relative;
    top: -120px;
}
.process .prize{
    position: relative;
    top: -160px;
}
.prize .arrow{
    display: block;
    margin-bottom: 65px;
}
.process .step2 p{
    white-space: nowrap;
}
.process .step1 img{
    width: 40%;
    aspect-ratio: 16 / 13;
    animation: float 5s ease-in-out infinite;
    margin: 15px auto;
}
.process .step1 .cols:nth-child(1) img {
    animation-delay: .8s;
}
.process .step1 .cols:nth-child(2) img {
    animation-delay: .1s;
}
.process .step1 .cols:nth-child(3) img {
    animation-delay: .5s;
}
.process .step2 img{
    width: 500px;
}
.process .cols {
    grid-column: auto/span 4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}
.process .btn {
    background: #fff;
    box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255, 255, 255, 0.5), inset -0.2em -0.2em 0.2em 0 rgb(0 104 255 / 47%);
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    max-width: fit-content;
    padding: 2%;
    margin-top: 30px;
    font-size: 0.7em;
    font-weight: 600;
    filter: drop-shadow(0 7px 0px rgb(0 0 0 / 10%));
}
.process .step2 .col-left {
    grid-column: auto/span 4;
    grid-column-start: 4;
    display: flex;
    align-items: center;
}

.process .step2 .col-right {
    grid-column: auto/span 4;
}
.process .step1 .info .condition::before{
    content: '※';
    position: absolute;
    transform: translateX(-20px);
}
.process .step1 .ukiwa,
.recommend .ukiwa {
    position: absolute;
    width: 12%;
    aspect-ratio: 178 / 161;
    animation: float 5s ease-in-out infinite;
}
.process .step1 .ukiwa {
    top: -210px;
    left: 40px;
}
.process .step1 .plant {
    position: absolute;
    aspect-ratio: 169 / 250;
    max-width: 169px;
    width: 14%;
    top: -220px;
    right: -20px;
    animation: fuwafuwa 3s infinite;
}
.process .step1 .ukiwa.ukiwa2 {
    top: 70px;
    right: -890px;
    aspect-ratio: 1/1;
}
.recommend .background-2 {
    transform: scaleX(-1);
    left: 0;
    top: 0;
}
.recommend .background-2::after {
    content: '';
    display: none;
}
.recommend .background-2::before {
    content: '';
    background: url(../img/character7.svg);
    background-repeat: no-repeat;
    width: 200px;
    top: 230px
}
.process .prize .prizeText{
    width: 650px;
    display: block;
}
/* recommend-------------------------*/
.recommend {
    position: relative;
}

.recommend .subtitle {
    display: block;
    margin: 0 auto;
    background: url(../img/osusume_title.webp);
    aspect-ratio: 1 / 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: min(50vw, 280px);
    transform-origin: 50% 0px;
    animation: bounceLoop 1.5s ease-in-out infinite;
}

.recommend .subtitle h2{
    text-align: center;
    font-size: 0;
}
.recommend_item {
    width: 95%;
    margin: 50px auto 0;
    font-weight: 900;
}

.recommend .arrow {
    transform: translateY(100px);
}

.recommend_item .list_item .productName {
    font-size: min(5vw, 0.7em);
    font-family: dela-gothic-one, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(75 76 76);
    width: 55%;
    height: 55px;
}

.recommend_item .list_item .price {
    font-size: min(5vw, 0.75em);
    color: #fff;
    font-family: "Hiragino Kaku Gothic ProN";
    text-align: center;
    font-weight: 600;
    width: 45%;
    line-height: 0.9;
    margin-left: auto;
}

.recommend_item .list_item .price span{
    color: rgb(218 21 18);
    font-size: 0.7em;
    font-weight: 600;
}

.recommend_item .list_item .moreButton {
    font-family: "Hiragino Kaku Gothic ProN";
    height: fit-content;
    font-size: min(10vw, 0.55em);
    color: rgb(76 76 76);
    border: 3px solid rgb(76 76 76);
    padding: 3% 2%;
    text-align: center;
    position: relative;
    top: 1%;
}

.recommend_item .list_item .moreButton:hover {
    border: 3px solid rgb(255, 3, 0);
    color: rgb(255, 3, 0);
    transition: .3s;
}
.list_item {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.list_item li {
    background: url(../img/recommend_bg.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30%;
    padding: 1%;
    aspect-ratio: 377 / 454;
}
.list_item a {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: flex-end;
}
.list_item li:hover {
    animation: fuwafuwa 3s infinite;
    animation-timing-function: ease-in-out;
}


.item1 img,
.item2 img,
.item3 img {
    max-width: 235px;
    width: 70%;
    display: block;
    margin: 20px auto;
    aspect-ratio: 276 / 263;
}

footer#footer{
    margin-top: 0;
}

@keyframes fuwafuwa {
0% {
    transform: translateY(0px);
}
50% {
    transform: translateY(-15px);
}
100% {
    transform: translateY(0px);
}
}
@keyframes float {
0%, 100% {
    transform: translateY(0) scale(0.99) rotate(0deg);
    opacity: 1;
}
25% {
    transform: translateY(-12px) scale(1.02) rotate(-1deg);
    opacity: 0.95;
}
50% {
    transform: translateY(0px) scale(1) rotate(3deg);
    opacity: 0.9;
}
75% {
    transform: translateY(-10px) scale(1.03) rotate(.5deg);
    opacity: 0.95;
}
}
@keyframes bounceLoop{
0% {
    transform: rotate(5deg);
}
50% {
    transform: rotate(-5deg);
}
100% {
    transform: rotate(5deg);
}
}

@media screen and (max-width: 1200px) {
    .background-2::before{
        left: 320px;
    }
    .background-2::after{
        left: 320px;
        
    }
    .process .step1 .ukiwa{
        top: -280px;
    }
}

@media screen and (max-width:1024px) {
.step1 .bandanaText {
    font-size: min(50vw, 30px);
}
.recommend_item .list_item .price {
    font-size: min(5vw, 0.65em);
}
.recommend_item .list_item .moreButton{
    top: -1%;
    font-size: min(10vw, 0.45em);
}
.background-2::before{
    left: 280px;
}
.background-2::after{
    left: 280px;
}
.process .step2 .col-left {
    grid-column: auto / span 4;
    grid-column-start: 3;
}
.recommend .subtitle h2 {
    background-size: 70% 200%;
}
.recommend_item {
    width: 95%;
}
.recommend .background-2::before{
    top: 120px;
    left: 250px;
}
}

@media screen and (max-width: 900px) {
.overview h2{
    width: 90%;
}
.background-2::before {
    left: 180px;
    top: 200px;
}
.background-2::after{
    left: 180px;
    top: 30px;
}
.list_item {
    display: block;
}    
.list_item li{
    max-width: 324px;
    margin: 0 auto 20px;
    width: 100%;
}
.process .step1 .ukiwa {
    top: -330px;
}
.recommend .ukiwa.ukiwa3{
    right: 200px;
    top: -65px;
}
}

@media screen and (max-width:767px) {

    main.campaign {
        margin-top: 80px;
    }
    body .content-wrapper{
        font-size: 1.3em;   
    }
    .background-2{
        display: none;
    }
    .firstview::before{
        top: 45px;
    }
    .firstview::after{
        background-image: url(../img/characterbg-sp.svg);
        background-size: cover;
        background-position: 60% 50%;
        top: 20px;
    }
/* process------------------------------*/
    .process {
        margin-top: 40px;
    }
    .process .step1, .process .step2{
        grid-template-columns: repeat(var(--bs-columns, 6), 1fr);
    }
    .process .btn{
        font-size: 1.2em;
    }
    .process .cols {
        grid-column: auto / span 4;
        grid-column-start: 2;
    }
    .cols .card p{
        font-size: clamp(0.8em, 4vw, 2em);
    }
    .process .col-right .info {
        display: block;
        margin: 0 auto;
    }
    .process img.counter {
        width: 60px;
    }
    .process .step2 .col-left {
        grid-column: auto / span 4;
        grid-column-start: 3;
    }
    .process .step2 .col-right {
        grid-column: auto / span 5;
    }
    .step1 .counter, .step2 .counter {
        transform: translateX(-70px);
    }
    .step1 .bandanaText {
        font-size: min(8vw, 50px);
    }
    .process .step1 .ukiwa {
        top: -225px;
    }
    .recommend .ukiwa.ukiwa3{
        right: 60px;
        top: 35px;
    }
    .process .step1 .conditions{
        font-size: 1em;
    }

    /* overview------------------------------*/
    .overview{
        margin-top: 50px;
    }
    .overview,.process{
        padding: 0 20px;
    }
    .overview p span.legal{
        font-size: 0.6em;
    }
    .overview img,.process img,.recommend img{
        max-width: 350px;
        display: block;
    }  
    .list_item li{
        padding: 2%;
    }
    /* recommend---------------------*/
    .recommend{
        padding-bottom: 0;
        margin-top: 60px;
        font-size: 1.5em;
    }
    .recommend .subtitle h2 {
        background-size: 75% 200%;
    }
    .recommend_item {
        width: 85%;
    }
    .recommend .recommend_item .list_item .productName {
        font-size: 0.55em;
    }
    .recommend .recommend_item .productName::before {
        width: 30px;
        height: 25px;
    }
    .recommend .recommend_item .list_item .price::before{
        transform: translate(220px, -55px);
        width: 40px;
    }
    .recommend .recommend_item .list_item .price::after{
        transform: translateY(-19px);
        width: 15px;
    }
    .item1 img,.item2 img,.item3 img{
        margin: 10px auto 0;
    }
    .recommend_item .list_item .productName{
        font-size: 1.1em;
    }
    .recommend_item .list_item .price{
        font-size: min(5vw, 1.2em);
    }
    .recommend_item .list_item .moreButton{
        font-size: 0.8em;
        top: 3%;
    }

}

@media screen and (max-width:480px) {
    main.campaign{
        margin-top: 80px;
        background-position: -260px 410px;
    }
    .firstview {
        margin-bottom: 130px;
    }
    .firstview::after {
        background-position: 65% 50%;
        top: 25px;
    }
    .process .btn {
        padding: 4%;
    }
    /* overview----------------------------*/
    .overview{
        padding-top: 10px;
    }
    .overview h2{
        width: 90%;
        font-size: 1.3em;
    }
    .overview,.process{
        margin-bottom: 130px;
    }
    .step1 .bandanaText {
        font-size: min(50vw, 45px);
    }
    .process {
        margin: 0 auto;
    }
    .process button{
        margin: 20px auto 0;
    }
    .process .step1, .process .step2 {
        grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
        grid-template-columns: repeat(var(--bs-columns, 4), 1fr);
    }
    .process .step2{
        grid-auto-flow: row;
        margin-top: 50px;
        text-align: center;
    }
    .process .step1 .cols{
        display: block;
        grid-column: auto / span 4;
        
    }
    .cols .card p {
        font-size: clamp(1.2em, 4vw, 2em);
    }
    .process .step1 .conditions {
        font-size: 0.8em;
    }
    .process img {
        display: block;
    }
    .process .col-right .info {
        margin-left: 0;
        text-align: center;
    }
    .process .step2 .info {
        margin-top: 90px;
    }
    .process .step1 img.counter,
    .process .step2 img.counter {
        transform: translate(155px, -70px);
    }
    .prize .arrow{
        margin-top: 50px;
    }
    .process .step1 .ukiwa {
        top: -150px;
        width: 16%;
    }
    /* recommend---------------------*/
    .recommend_item{
        margin-top: 30px;
    }
    .recommend_item .list_item .price {
        font-size: min(6vw, 1.2em);
    }
    .list_item{
        padding-top: 11px;
    }
    .recommend .recommend_item .likes {
        left: -180px;
        bottom: -45px;
        transform: scale(2);
    }
    
}

@media screen and (max-width:375px) {
    .overview h2{
        background-size: 100% 200%;
    }
    .process .step1 img.counter, .process .step2 img.counter {
        transform: translate(135px, -70px);
    }
}