@charset "UTF-8";

body {
    background-color: #fac970;
}

.shop-container{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.shop-text{
    padding-left: 10px;
    color: white;
}

.shop-text h2{
    padding-bottom: 40px;
}

.cart-btn {
    display: flex;
    align-items: center;       /* アイコンと文字の上下の真ん中を揃える */
    justify-content: center;   /* アイコンと文字をボタンの真ん中に寄せる */
    gap: 10px;                 /* アイコンと文字の間のすき間 */
    
    background: #ffffff;
    color: #fac970;
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 6px 0 #fcac17;
    width: auto;
    transition: transform 0.1s;
}

/* ボタンを押したときのぷっくり沈む動き */
.cart-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #d43b26;
}

/* ✂️ ボタンの中のアイコン（切り抜き設定） */
.icon-cart {
    display: inline-block;
    width: 250px;               /* 👈 カートアイコン1個分の横幅に調整してね */
    height: px;              /* 👈 カートアイコン1個分の高さに調整してね */
    background-image: url("../images/ka-to.png"); /* まとめられたPNG画像 */
    background-repeat: no-repeat;
    
    /* 👈 ここを調整してカートのアイコンがピッタリ見える位置にズラす */
    background-position:-42px 0; 
    
    /* アイコンの大きさをボタンに合わせたい場合はここ（元の画像自体のサイズを指定） */
    /* background-size: 200px auto; */
   background-size: 80px auto; 
}

#btn-btn{
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
}


.bottom-line{
    width: 80%;
    height: 2px;
    align-items: center;
    background-color: #ffffff;
    margin: 100px auto 0 auto;

}


/*ラインナップ*/




#sonota{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;

}

#sonota h3{
    color: #ffffff;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 60px;
}

#shop-guuu-img{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    
    
}

.item{
    text-align: center;
    color: #ffffff;
}




/*ここまで*/





/*ここからフッター*/
footer{
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 50px;

}

.footer-coco{
    text-align: center;
}

.footer-nav{
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 30px;

    }

.footer-logo{
    color: #fac970;
    font-size: 30px;
    padding-bottom: 60px;
}



.footer-nav a{
    color: #fac970;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

footer nav ul li a{
    text-decoration: none;
    color: #ff7152;

} 
.copyright{
    color: #fac970;
    font-size: 12px;
    margin-top: 30px;
}