html, body {
  overflow-x: hidden;
}
body {
  overflow-y: hidden;
}

.form-label {
    margin-top: .5rem;
}
.w100 { max-width:100%; }
.maxh60 { max-height:60px; }
.mgn_left_16 { margin-left:16px; }
.jp_pad_1  { padding:1px; }
.jp_pad_2  { padding:2px; }
.jp_pad_4  { padding:4px; }
.jp_pad_15 { padding:15px; }
.jp_pd_l45 { padding-left:0.45rem; }

.jp_ffont8 { font-size:8px; }
.jp_border_radius_5 { border-radius: 5px !important; } 

.jp_mt20b10 { margin-top:20px; margin-bottom:10px; }
.jp_mt30b30 { margin-top:30px; margin-bottom:30px; }

.jp_bg_white { background:#fff; }

.input_title180 { width:180px; }

.jpfont73rem  { font-size:0.735rem !important; }

.btn845 { font-size:0.845rem; }

.jp_btn_danger {
	padding:4px !important;
	border-bottom: 1px solid red !important;
}
.jp_list-group-item {
  padding:6px !important;
}

.owl-nav {
  position: absolute;
  display:none;
}
.owl-carousel {
  padding-bottom: 40px;
}
/* OwlCarousel dots を強制表示 */
.owl-carousel .owl-dots {
  display: block !important;
  text-align: center;
  margin-top: 15px;
}

.owl-carousel .owl-dot {
  display: inline-block;
}

.owl-carousel .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #ccc;
  border-radius: 50%;
  display: block;
}

.owl-carousel .owl-dot.active span {
  background: #000;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 0rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 0rem;
    color: #fff;
    text-align: center;
}


.table-responsive .table tr td {
    white-space: normal !important;
}

.product_list .avatar-md {
	width: 120px !important;
	height: 90px !important;
	max-width: 120px !important;
	max-height: 90px !important;
}
.product_list .avatar-image,
.product_list .avatar-text {
	width: 120px !important;
	height: 90px !important;
	max-width: 120px !important;
	max-height: 90px !important;
}

@media (max-width: 756px) {
	.carousel-caption .p-3 {
		padding: 0rem !important;
	}
	.carousel-caption .p-3 .mb-5 {
		margin-bottom: 0rem !important;
	}

	/* テーブルの基本構造をブロック化 */
    #paymentList, #paymentList tbody, #paymentList tr {
        display: block;
        width: 100%;
    }
    /* ヘッダーは非表示 */
    #paymentList thead {
        display: none;
    }
    /* 1行(tr)をカードのように見せる */
    #paymentList tbody tr {
        margin-bottom: 1rem;
        padding: 10px;
		/*
        border: 1px solid #dee2e6;
        border-radius: 8px;
		*/
		border-bottom:1px solid #dee2e6;
    }
    /* すべてのtdを一旦ブロック要素（100%幅）にする */
    #paymentList td {
        display: block;
        width: 100%;
        border: none;
        padding: 5px 0;
    }
    /* 横並びにしたいtdの親(tr)にFlexboxを適用 */
    #paymentList tr.single-item {
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
    }
    /* 横並びにしたい要素（r1-1, r1-2, r1-3）の設定 */
    .r1-1, .r1-2, .r1-3 {
        display: inline-block !important; /* ブロック化を解除 */
        width: auto !important;           /* 幅を中身に合わせる */
        flex: 1;                          /* 均等に広げる場合 */
        padding-right: 10px !important;
    }
}


/* カートアクション */
@keyframes cart-bounce {
    0%   { transform: scale(1);   color: inherit; }
    25%  { transform: scale(1.8); color: #0d6efd; } /* 1回目の拡大 + ブルー(Bootstrap primary) */
    50%  { transform: scale(1);   color: inherit; }
    75%  { transform: scale(1.8); color: #0d6efd; } /* 2回目の拡大 + ブルー */
    100% { transform: scale(1);   color: inherit; }
}
.cart-animate {
    display: inline-block;
    animation: cart-bounce 0.8s ease-in-out;
}

/* スライドして消える（現在の数字） */
@keyframes slide-out-up {
    0% { transform: translate(-50%, -50%); opacity: 1; }
    100% { transform: translate(-50%, -150%); opacity: 0; }
}
/* スライドして現れる（新しい数字） */
@keyframes slide-in-up {
    0% { transform: translate(-50%, 50%); opacity: 0; }
    100% { transform: translate(-50%, -50%); opacity: 1; }
}
.badge-slide-out {
    animation: slide-out-up 0.4s ease-in forwards;
}
.badge-slide-in {
    animation: slide-in-up 0.4s ease-out forwards;
}
/* バッジの形が崩れないように固定（任意） */
.amt_in_cart {
    min-width: 1.6em;
    height: 1.6em; /* 高さを固定して安定させる */
    display: inline-flex; /* 中の文字を中央に */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute; /* Bootstrapのクラスと競合しないよう明示 */
}
/* アニメーション用クラスに display を指定 */
.badge-slide-out, .badge-slide-in {
    display: inline-block;
}