@charset "UTF-8";
/* NewFile.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #fff0f5; /* ライトピンクの背景色 */
}
.header {
    background-color: #ffc0cb; /* 淡いピンク色 */
    color: white;
    padding: 15px;
}
.footer {
    background-color: #ffc0cb; /* 淡いピンク色 */
    color: white;
    text-align: center;
    padding: 10px;
    position: relative; /* 固定ではなく、相対位置に変更 */
    width: 100%;
    margin-top: 20px; /* 上部に余白を追加 */
}
.content {
    margin-top: 20px;
    margin-bottom: 60px; /* フッターの高さ分の余白を追加 */
}
.card {
    margin: 1px; /* アイテム間の隙間を小さく設定 */
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* スマホ表示では縦並びに */
    position: relative;
}
.img-fluid {
    width: 100%; /* 画像の幅を100%に設定 */
    height: auto; /* 自動調整 */
}
.card-body {
    padding: 20px;
}
.card-title {
    color: #ff69b4; /* 濃いピンク色 */
    font-size: 20px;
}
.card-text {
    color: #666;
    font-size: 12px; /* 説明文の文字サイズを小さく設定 */
    margin-bottom: 20px;
}
.btn-primary {
    width: 100%; /* ボタンの幅を全幅に設定 */
    margin-bottom: 10px; /* ボタン間のスペースを設定 */
    background-color: #febd69; /* Amazonの背景色 */
    border-color: #febd69;
}
.btn-secondary {
    width: 100%; /* ボタンの幅を全幅に設定 */
    margin-bottom: 10px; /* ボタン間のスペースを設定 */
    background-color: #BF0000; /* Rakutenの背景色 */
    border-color: #BF0000;
}
.btn-success {
    width: 100%; /* ボタンの幅を全幅に設定 */
    margin-bottom: 10px; /* ボタン間のスペースを設定 */
    background-color: #FF0033; /* Yahooの背景色 */
    border-color: #FF0033;
}
.store-icon {
    width: 24px; /* アイコンの幅を24pxに設定 */
    height: 24px; /* アイコンの高さを24pxに設定 */
}
.affiliate-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px; /* アイコンのサイズを調整 */
    height: 30px;
}
.product-number {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px; /* 小さいフォントサイズに設定 */
    color: #999; /* 灰色の文字色に設定 */
}