@charset "UTF-8";

/* =====================
goods topic
===================== */

.section--goodsPage{
    background-color: var(--primary-gray);
    padding: 17.6rem 0 84rem;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.goodsCaption{
    position: relative;
    line-height: 1.7;
    margin-left: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goodsCaption__topic{
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 4rem;
}

.goodsCaption__copy{
    margin: 2rem 0 0 -1rem;
    font-size: 1.8rem;
    font-weight: 600;
}

.goodsCaption__txt{
    margin-top: 4rem;
}

.goodsCaption__txt span{
    font-weight: 700;
}

.goodsPage__photo1{
    position: absolute;
    width: 60%;
    top: 72rem;
    left: 1.6rem;
}

.goodsPage__photo2{
    position: absolute;
    width: 35%;
    top: 90rem;
    left: 23rem;
}

.goodsPage__photo3{
    position: absolute;
    width: 50%;
    top: 110rem;
    right: 2rem;
}

.goodsPage__photo4{
    position: absolute;
    width: 40%;
    top: 121rem;
    right: 17rem;
}

/* goods caption pc */
@media screen and (min-width:769px) {
    .section--goodsPage {
        padding: 23rem 0 54rem;
    }

    .goodsCaption__topic{
        font-size: 2rem;
        margin-top: 7rem;
    }
    
    .goodsCaption__topic span{
        margin-top: 3rem;
        font-size: 2.4rem;
        font-weight: 500;
    }

    .goodsCaption__copy {
        margin-top: 3rem;
    }

    .goodsCaption__txt{
        margin: 2rem;
    }

    .goodsPage__photo1{
        width: 22%;
        top: 56%;
        left: 7%;
    }
    
    .goodsPage__photo2{
        width: 16%;
        top: 69%;
        left: 30%;
    }
    
    .goodsPage__photo3{
        width: 17%;
        top: 62%;
        right: 30%;
    }

    .goodsPage__photo4{
        width: 14%;
        top: 55%;
        right: 10%;
    }

}

/* =====================
price
===================== */
.price{
    font-family: Futura;
    background: var(--primary-whiteLow);
    border-radius: 0 50rem 50rem 0;
    margin: 4.5rem 1.6rem 0 0;
    padding: 4.9rem 0 5.2rem 1.6rem;
    position: relative;
}

.price__case, .price__grip{
    display: flex;
    align-items: baseline;
}

.priceTopic{
    font-size: 4.8rem;
    position: absolute;
    bottom: 14.5rem;
    left: 7.6rem;
}

.price__topic{
    font-size: 2rem;
}

.price__txt{
    margin-left: 1.7rem;
}

.price__txt--grip{
    margin-left: 2.2rem;
}

.price__tax{
    font-size: 1.4rem;
    margin-left: 0.7rem;
}
/* price pc */
@media screen and (min-width:769px) {
    .price {
        margin: 8.5rem 43.8% 0 0;
        padding: 7.9rem 0 8.2rem 11.8%;
    }

    .priceTopic{
        font-size: 6.5rem;
        bottom: 21.5rem;
        left: 17rem;
    }

    .price__topic{
        font-size: 3.2rem;
        font-weight: 400;
    }

    .price__txt{
        font-size: 2.4rem;
        margin-left: 7rem;
    }

    .price__txt--grip{
        margin-left: 7.8rem;
    }

    .price__tax{
        font-size: 2rem;
    }
}

/* =====================
how to order
===================== */
.section--order{
    padding: 4rem 0 7rem;
    position: relative;
    background-color: var(--primary-yellow);
}

.howToOrder{
    margin-top: 0.5rem;
    text-align: center;
    overflow: hidden;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center
}

.howToOrder__topic{
    font-size: 4.8rem;
    font-weight: 600;
    position: relative;
    top: 5rem;
    text-align: center;
    z-index: 4;
}

.order__contents{
    aspect-ratio: 1 / 1;
    background-color: var(--primary-whiteLow);
    border-radius: 50%;
    width: 93%;
    height: 90%;
    padding-top: 4rem;
}

.order__contents--letter{
    z-index: 3;
}

.order__contents--comment{
    margin-top: -4rem;
    z-index: 2;
}

.order__contents--mail{
    margin-top: -4rem;
}

.number{
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 3.6px;
    margin-top: 2rem;
}

.arrow{
    width: 2.2rem;
    margin: 5.8rem auto 0;
}

.letterImg{
    width: 5.8rem;
    margin: 1rem auto 0;
}

.commentImg{
    width: 7.2rem;
    margin: 0 auto;
}

.mailImg{
    width: 7rem;
    margin: 1rem auto 0;
}

.howToOrder__txt{
    letter-spacing: 0.8px;
    margin-top: 2rem;
}
/* price pc */
@media screen and (min-width:769px) {
    .howToOrder{
        display: flex;
        align-items:flex-end;
        z-index: 1;
        position: relative;
        margin-top: -6rem;
        flex-direction: row;
    }
    
    .howToOrder__topic{
        font-size: 6.5rem;

    }

    .order__contents{
        width: 46rem;
        margin: 0 auto;
    }

    .order__contents--letter{
        font-size: 1.8rem;
        margin-top: 4rem;
        position: relative;
        margin-right: -10rem;
        z-index: 2;
    }

    .order__contents--comment{
        font-size: 1.8rem;
        margin-top: 4rem;
        position: relative;
        margin-right: -10rem;
    }

    .howToOrder__txt{
        font-size: 1.8rem;
        margin-top: 4rem;
    }

    .order__contents--comment .howToOrder__txt{
        margin-top: 3rem;
    }

    .order__contents--mail .howToOrder__txt{
        margin-top: 3rem;
    }

    .number{
        font-size: 6.4rem;
    }

    .arrow{
        width: 3rem;
        position: absolute;
        margin: 0;
        transform: rotate(-90deg);
        top: 47%;
        left: 93%;
    }
}


/* =====================
order link
===================== */

.orderLink{
    text-align: center;
    border-radius: 104px 104px 104px 104px / 8px 8px 8px 8px;
    background-color: #f5f5f5;
    width: 33.8rem;
    padding: 1.4rem 3.3rem 3rem 3rem;
    margin: 8rem auto;
}

.orderLink__txt{
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    position: relative;
    top: -2.6rem;
}

.orderLink__txt::before{
    content: "";
    position: absolute;
    top: -0.2rem;
    display: block;
    width: 0.1rem;
    height: 100%;
    background: var(--primary-darkBlue);
    left: 2.2rem;
    transform: rotate(-20deg);
}

.orderLink__txt::after{
    content: "";
    position: absolute;
    top: -0.2rem;
    display: block;
    width: 0.1rem;
    height: 100%;
    background: var(--primary-darkBlue);
    right: 2.5rem;
    transform: rotate(20deg);
}


.link__btn--goods{
    margin-top: 0;
}

@media screen and (min-width:769px) {
    /* order link */
    .orderLink{
        width: 94rem;
    }

    .linkBtn{
        margin-top: 0;
    }

    .link__btn--goods{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .orderLink__txt{
        font-size: 2.4rem;
    }

    .orderLink__txt::before{
        left: 30.2rem;
        width: 0.2rem;
    }
    
    .orderLink__txt::after{
        right: 30.8rem;
        width: 0.2rem;
    }
}

/* =====================
order notes
===================== */

.orderNotes{
    margin-top: 8rem;
    line-height: 1.8;
    background-image: url(../img/goods_attention_spBg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 6rem;
}

.orderNotes__topic{
    font-size: 4.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18rem;
    text-align: center;
    position: relative;
    top: -1.5rem;
}

.orderNotes__list{
    width: fit-content;
    margin: 2.6rem 0 0 4.6rem;
}

.orderNotes__txtWrap{
    margin: 3rem 0 0 5.3rem;
}

@media screen and (min-width:769px) {
    .orderNotes{
        width: 94rem;
        height: 34rem;
        margin-top: 8rem;
        background-image: url(../img/goods_attention_pcBg.png);
        padding-bottom: 0;
        margin: 0 auto;
    }

    .orderNotes__topic {
        font-size: 5.6rem;
        top: -2.5rem;
    }

    .orderNotes__list{
        margin: 0.6rem 0 0 4.6rem;
    }

    .orderNotes__txtWrap{
        margin: 3rem 0 0 5.3rem;
    }
}


/* =====================
footer
===================== */
/* footer pc */
@media screen and (min-width:769px) {
    .footer{ margin-top: 0;}
}


/* =====================
goods deco
===================== */
.deco__goods1 img{
    display: none;
}

.deco__goods2 img{
    position: absolute;
    top: 68%;
    left: 7%;
    width: 5rem;
    -webkit-animation: deco_goods2 3s infinite steps(4, jump-none);
    animation: deco_goods2 3s infinite steps(4, jump-none);
}

@keyframes deco_goods2 {
    0% {
        transform: translate(0%);
    }
    
    100% {
        transform: translate(50%);
    }
}

.deco__goods3 img{
    position: absolute;
    z-index: 5;
    top: 18%;
    right: 1%;
    width: 4.3rem;
    -webkit-animation: deco__top2 2.2s infinite;
    animation: deco__top2 2.2s infinite;
}

@keyframes deco__top2{
    0% {
        transform: translateY(0);
    }
    24.9999% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20%);
    }
    49.9999% {
        transform: translateY(-20%);
    }
    50% {
        transform: translateY(-40%);
    }
    74.9999% {
        transform: translateY(-40%);
    }
    75% {
        transform: translateY(-20%);
    }
    99.9999% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0);
    }
}

.deco__goods4 img{
    position: absolute;
    top: 59%;
    right: 4%;
    width: 3.8rem;
    -webkit-animation: deco_top3 3s infinite steps(4, jump-none);
    animation: deco_top3 3s infinite steps(4, jump-none);
}

@keyframes deco_top3 {
    0% {
        transform: translate(50%);
    }
    
    100% {
        transform: translate(0%);
    }
}

.deco__goods5 img{
    position: absolute;
    top: 71%;
    left: -3%;
    width: 6.1rem;
    -webkit-animation: deco__top4 2s ease-out infinite;
    animation: deco__top4 2s ease-out infinite;
}

.deco__goods6 img{
    position: absolute;
    top: 42.5%;
    left: 4%;
    width: 6.6rem;
    z-index: 6;
    -webkit-animation: deco_goods2 3s infinite steps(4, jump-none);
    animation: deco_goods2 3s infinite steps(4, jump-none);
}

.deco__goods7 img{
    right: 8%;
    position: absolute;
    top: 90%;
    width: 5.2rem;
    -webkit-animation: deco__top2 2.2s infinite;
    animation: deco__top2 2.2s infinite;
}

.deco__goods8 img{
    position: absolute;
    top: 95.6%;
    right: 3%;
    width: 6.5rem;
    -webkit-animation: deco__top2 2.2s infinite;
    animation: deco__top2 2.2s infinite;
}

.deco__goods9 img{
    position: absolute;
    top: 2%;
    left: 0.5%;
    width: 4.7rem;
    z-index: 1;
    -webkit-animation: deco__top4 2s ease-out infinite;
    animation: deco__top4 2s ease-out infinite;
}

@keyframes deco__top4 {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.85);
    }
}

@media screen and (min-width:769px) {
    .deco__goods6{
        display: none;
    }

    .deco__goods1 img{
        display: block;
        position: absolute;
        top: 9%;
        right: 25%;
        width: 6rem;
        -webkit-animation: deco_top3 3s infinite steps(4, jump-none);
        animation: deco_top3 3s infinite steps(4, jump-none);
    }
    
    .deco__goods2 img{
        top: 40%;
        left: 5%;
        width: 6.8rem;
    }
    
    .deco__goods3 img{
        top: 20%;
        right: 8%;
        width: 6.3rem;
    }
    
    .deco__goods4 img{
        top: 61%;
        right: 8%;
        width: 5.8rem;
    }
    
    .deco__goods5 img{
        top: 69%;
        left: 8%;
        width: 6.1rem;
    }

    .deco__goods7 img{
        top: 85%;
        right: 13%;
        width: 7rem;
    }
    
    .deco__goods8 img{
        top: 94%;
        right: 6%;
        width: 9.5rem;
    }
    
    .deco__goods9 img{
        top: 3%;
        left: 0.5%;
        width: 7.7rem;
        z-index: 1;
    }
}

/* =====================
topic animation
===================== */

.animated-text {
    display: flex;
    justify-content: center;
    font-size: 8rem;
    font-weight: 400;
}

.letter {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation: slideIn 0.5s forwards;
}

.letter:nth-child(1) {
    animation-delay: 0.1s;
}

.letter:nth-child(2) {
    animation-delay: 0.2s;
}

.letter:nth-child(3) {
    animation-delay: 0.3s;
}

.letter:nth-child(4) {
    animation-delay: 0.4s;
}

.letter:nth-child(5) {
    animation-delay: 0.5s;
}

@keyframes slideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}