@charset "utf-8";

/* STYLE  */

/* #26 追加 */
body{
    background-image: linear-gradient(to right, rgba(0, 123, 255, 0), rgba(82, 82, 90, 0.4));
}
/* このCSSのbackground-imageプロパティは、右方向への線形グラデーションを設定しています。 */


.navbar-brand {
    font-size: 33px;
    font-weight: bolder;
}
/* このCSSは、.navbar-brandクラスのテキストを大きく太く表示する設定です。 */
/*ナビゲーションバーのブランド名やロゴ部分のテキストが目立つようにデザインされています。*/

.navbar-brand-svg {
    height: 20px;
    margin-left: 3px;
    padding-bottom: 1px;
}
/* このCSSは、.navbar-brand-svgクラス（主にSVGアイコンなど）に対して次のスタイルを適用しています。
height: 20px;：高さを20ピクセルに指定
margin-left: 3px;：左側に3ピクセルの余白
padding-bottom: 1px;：下側に1ピクセルのパディング
ブランドロゴやアイコンの位置やサイズを微調整し、ナビゲーションバー内で見栄えよく配置するための設定です。
*/


/* 馬アイコン変形 #13  */
.navbar-brand-svg:hover {
    transform: matrix(1, -0.3, 0, 1, 15, 0);
    /* 変形時間 */
    transition: 0.5s;
}

/* #17 追加 
.product-display{
	border: none;
	border-radius: 0.6rem;
	width: 11rem;
    margin: 3rem auto;
}*/

/* #21 #17より変更追加 */
.product-display{
  border: none;
  border-radius: 0.8rem;
  width: 15rem;
  margin: 3rem auto;
  /* background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(159,159,163,0.3)); */
  /* 左から右（青→緑、透明度0.5→0.8） */
  /* background-image: linear-gradient(to right, rgba(0, 123, 255, 0.5), rgba(40, 167, 69, 0.8)); */
  /* 薄緑 濃ゆい緑*/
  background-image: linear-gradient(to right, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.2));
}

/* #17 追加 */
.product-display:hover{
	transform: scale(1.2);
    transition: 0.5s;
}

/* #26 カールセル楕円形になる*/
.carousel-inner {
    border-radius: 50%;
}

/* #26 文字スタイル　大きさ*/
.product-display-title {
    font-style: bolder;
    font-size: 1rem;
}


/* #39 追加 */
.product-display-description {
    text-align: left !important;
}

/* #17 追加 */
.product-display-btn:hover{
    background-color: blueviolet;
	transform: scale(1.2);
    transition: 0.5s;

}
.product-display-btn{
    background-color: orange;
    border: none;
    width: 60px;
    height: 40px;
    margin-bottom: 5px;
}
.product-display-image{
    max-width: 15rem;
}

/* #29 カートのスタイル */
.product-cart{
  max-height: fit-content;
  max-width: 50rem;
  border:none;
  /* border-radius:10px; */
  
}
.product-cart:hover{
  box-shadow: 2px 2px black;


}
.product-cart-image{
  max-height:100px;
  border:none;
  /* box-shadow: 3px 3px black; */
  
}
.product-cart-name{
  font-weight: bolder;
  margin-top:1.2rem;
  font-size:1.1rem;
}
.product-cart-quantity{
font-weight: bolder;
margin-top: 1.2rem;

}
.product-cart-value{
  font-weight: bolder;
  margin-top: 1.2rem;

}
/* #30  your shopping cart R 付け*/
.cart-desc{
    border:none;
    border-radius: 10px;
}
/* #30シャドウ */
.cart-desc:hover{
    box-shadow: 3px 3px black;

}
/* #30　Rつけ */
.cart-desc-btn{
    background-color: orange;
    border: none;
    border-radius: 5px;

}
/* #30ホバー */
.cart-desc-btn:hover{
    background-color: #4cd137;

}