@charset "UTF-8";
html {
}

body {
	color: #333;
	font-family: 'Raleway', sans-serif;
}

h1 {
	font-weight: bold;
}

h2 {
}

h3 {
}

ul {
}

a {
}

p {
}

img {
}

/*========================header========================*/

header{
	max-width: 960px;
	margin: 0 auto; /* 中央寄せ */
	padding: 16px 16px 16px 16px;
	margin-bottom: 40px;
	border-bottom: solid 1px #c3c3c3;
}

.global-nav {
	display: flex;
	align-items: center;
	justify-content: space-between; /* menuとloginの間にスペース */
}

.menu, 
.login {
	display: flex;        /* liを横並び */
	gap: 24px;            /* li間にスペース */
	padding: 0;
	margin: 0;
	list-style: none;
}

/*========================main========================*/

main{
	max-width: 960px;
	margin: 0 auto; /* 中央寄せ */
	margin-bottom: 88px;
}

.Products-container{
	display: flex;
	gap: 24px;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.Products-container{
	margin: 0 auto;
	display: block;/* スマホの時だけ縦並び*/
	width: 80%;/* 幅を80%に縮小 */
	gap: 80px;
	}
}

/* ↓↓スライダー↓↓ */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  color: #fff;     /* アイコン自体の色 */
}

/* 通常のインジケーター（非アクティブ）：薄いグレー */
.swiper-pagination-bullet {
  background: #cccccc; /* お好みの薄いグレー */
  opacity: 1;          /* デフォルトは.2なので見やすくするなら1に */
}

/* アクティブなインジケーター：濃いグレー */
.swiper-pagination-bullet-active {
  background: #555555; /* お好みの濃いグレー */
}

/* ↑↑ここまでスライダー↑↑ */

.Products-h2-title{
	height: 60px;
	display: flex;
	align-items: center;
	border-top: solid 1px #c3c3c3;
	border-bottom: solid 1px #c3c3c3;
	margin-bottom: 20px;
}

@media screen and (max-width: 760px) {	/*スマホ表示 */
.Products-h2-title{
	margin: 0 auto;
	margin-top: 32px;
	}
}

.Products-p-description{
	margin: 0 auto;
	width: 400px;     /* 幅を400pxに指定 */
	word-wrap: break-word;  /* 長い単語の途中でも折り返す */
}

.Products-p-description-text{
	margin-top: 20px;
	margin-bottom: 20px;	
}

.Products-p-price{
	margin-bottom: 20px;
}

/*========================テーブル1(order-table)========================*/

.order-table {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
}

/* tdの上線を設定 */
.order-table td{
	border-top: solid 1px #c3c3c3;	
}
/* th、tdの右線を設定 */
.order-table th,
.order-table td{
	font-weight: normal;
	border-right: solid 1px #c3c3c3;
	padding: 10px;
	text-align: center;
}
/* th、tdの最後だけ右線を消す */
.order-table th:last-child,
.order-table td:last-child {
	border-right: none;
}

/*セレクトボックスに右端の矢印を表示
-moz-appearance: menulist;
-webkit-appearance: menulist;
*/
.order-table select {
	width: 100%;
	border: solid 1px #c3c3c3;
	padding: 0 10px;
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
}

/*========================カートに入れるボタン========================*/
.cart-btn{
	width: 100%;
	background-color: #4B4B4B;
	color: #fff;
	line-height: 1;
	padding: 18px 0;
	margin-bottom: 30px;
	text-align: center;
}

/*========================テーブル2(size-table)========================*/
.size-table{
	width: 100%;
	border-collapse: collapse;
}

.size-table th{
	background-color: #ecebeb;
}

.size-table th,
.size-table td{
  font-weight: normal;
  padding: 10px;
  border: solid 1px #c3c3c3;
  text-align: center;
}

/*========================footer========================*/

footer{
	max-width: 960px;
	margin: 0 auto; /* 中央寄せ */
}

.copyright{
	text-align: center;
	font-size: 0.8em;
	margin-top: 20px;
}