/*============================ 共通 ============================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Kosugi+Maru&display=swap');

body, html {
    overflow-x: hidden;
    font-family: 'Noto Sans', sans-serif !important;   
}

.kosugi-maru {
    font-family: 'Kosugi Maru', sans-serif;
}

a {
    color: #000; 
    text-decoration: none;
}

a:hover {
    color: gray;
    text-decoration: none;
}

.link-white {
    color: #fff; 
    text-decoration: none;
}



/*body*/
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/*Contents*/
.content {
    flex: 1;
}
/*footer*/
footer {
    flex-shrink: 0;
    margin-bottom: 0;
}



/* Google Lensマークを非表示 */
img.no-lens {
    pointer-events: none;
}



.fw-6 {
    font-weight: 600;
}

.hover-img {
    display: inline-block;
    overflow: hidden; /* ボーダーの外に画像がはみ出さないように */
}

.hover-img img {
    display: block; /* 余計なスペースをなくす */
    width: 100%; /* 親要素の幅にフィット */
    height: auto;
    transition: transform .6s ease; /* ゆっくり変化 */
}

.hover-img:hover img {
    transform: scale(1.1); /* 画像のみ拡大 */
}

.border-img {
    border: 2px solid #e6e6e6; /* ボーダーを持たせたい画像用 */
}

/*ハンバーガーメニュー
.offcanvas {
    border: none !important;
}
*/
.outer-wrapper {
    border: 1px solid #000;
    border-radius: 20px;
    background-color: #fff;
    padding-left: 15px;
    padding-right: 15px;
}

.item-wrapper {
    background-color: #f1f1f1;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.rounded-image img {
    border-radius: 10px;
}

.contents_title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
}


#searchForm .form-control:focus {
    border-color: inherit; /* デフォルトの枠線色に戻す */
    box-shadow: none; /* フォーカス時の影を削除 */
    outline: none; /* ブラウザによって追加されるアウトラインを削除 */
}


/* メニュースクロール */
.scroll-item {
    width: 100px;
    text-align: center;
    margin: 5px;
    padding: 5px;
    color: #999 !important;
    border-bottom: 5px solid #999 !important;
}
.scroll-item:hover {
    color: #000 !important;
    border-bottom: 5px solid #000 !important;
   
}

.scroll-item.active {
    color: #000 !important;
    border-bottom: 5px solid #000 !important;
}

/* ランキング・新商品 */
.ranking, .new-item {
    position: relative;
    display: inline-block;
}

.ranking img, .new-item img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ranking span {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    color: #fff;
    padding: 5px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

.new-item span {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 25px;
    color: #fff;
    padding: 5px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

/* AI機能*/
.character {
    position: fixed;
    bottom: 40px;
    right: 0;
    margin: 20px 10px 20px 20px; /* 余白を設定 */
    padding: 10px; /* 内側の余白を設定 */
}

.ai-chat {
    width: 70px;
    height: 70px;
    border: 2px solid #000;
    border-radius: 50%;
}

/*============================ index.html ============================*/
/* カルーセル　インジケーター */
.carousel-button {
    border-radius: 50%;
}
.carousel-button.active {
    background-color: black;
}

.carousel-indicators .carousel-button {
    position: static; /* ボタン自体の位置は固定しない */
}

.carousel-control {
    background-color: #333333;
    /*border-radius: 50%;*/
}

/* カスタムスクロールバーを非表示にする */
.custom-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.custom-scrollbar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}



/*============================検索============================*/
.list-group-item {
    display: block;
}

.list-group-item a {
    display: block;
    width: 100%;
    height: 100%;   
}

.accordion-body li {
    height: 52px;
}

/* アコーディオンボタンのフォーカス状態のスタイル */
.accordion-button:focus {
    box-shadow: none; /* フォーカス時のボックスシャドウを無効にする */
}

/*アコーディオンが選択されたとき*/
.accordion-button:not(.collapsed) {
    background-color: #fff; /* 背景を白に設定 */
    color: #000; /* 文字を黒に設定 */
}

/* アコーディオンボタンが選択されたときの矢印のスタイル */
.accordion-button:not(.collapsed)::after {
    color: white !important; /* 矢印の色を白に設定 */
}

.pagination {
    justify-content: center;
}


/*トレンド*/
.hashtag-border {
    border: 1px solid #E5E7E9;
    border-radius: 10px;
    display: inline-block;
    white-space: nowrap;
    background-color: #fff;
}

/*ニュース・イベント*/
.bg-gray {
    background-color: #6c757d;
}



/*============================商品ページ============================*/

/*数量変更*/
.quantity-btn {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
#quantity {
    font-size: 1.5rem;
    width: 70px;
    height: 40px;
    text-align: center;
  }
.input-group-text {
    background-color: transparent;
}

/*お気に入りボタン*/
.favorite-btn {
    background-color: #d33b33;;
}

/*カートに入れるボタン*/
.cart-btn {
    background-color: #d33b33;;
}



/*レビュー*/
.review-stars {
    font-size: 20px;
    color: gold;
}
.review-list-stars {
    font-size: 30px;
    color: gold;
}

.custom-scrollbar {
    cursor: grab;
}

.custom-scrollbar:active {
    cursor: grabbing;
}



/*============================ result.html ============================*/